Divide screen in two half and place imageview on half-half both

Question

I was designing a page but got stuck at this point. If someone knows please tell. I want to do like this:

Placing image like bird with rounded square is placed.

score 2 · Accepted Answer · answered Sep 03 '18 at 16:27

As I can't see any useful answer since I posted this 2 years ago, I am answering it myself.

It can be done in CoordinatorLayout by using layout_anchor with layout_anchorGravity, we can anchor a View to another View. It is pretty simple because it's inbuilt behavior of CoordinatorLayout.

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MyActivity">

    <ImageView
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="180dp"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"
        android:src="@drawable/img_banner" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_logo"
        app:layout_anchor="@id/header"
        app:layout_anchorGravity="bottom|center_horizontal" />

</android.support.design.widget.CoordinatorLayout>

score 1 · Answer 2 · answered Feb 26 '16 at 11:32

1

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.testing.MainActivity" >

<LinearLayout 
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">

    <LinearLayout 
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:background="#0000ff"
        android:orientation="vertical"
        android:layout_weight="1" />

    <LinearLayout 
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:background="#00ffff"
        android:orientation="vertical"
        android:layout_weight="1" />

</LinearLayout>

<LinearLayout 
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:orientation="vertical"
    android:background="#00ff00"
    android:layout_gravity="center" />

</FrameLayout>

It will look like this

answered Feb 26 '16 at 11:32

Anand Kumar Jha

614
9
23

lower part should be stretchable in height according to layout content – Amrat Singh Nov 23 '16 at 12:48
you can use scrollview under lower linear layout – Anand Kumar Jha Dec 16 '16 at 09:20
But Upper part should also move up with it. – Amrat Singh Dec 27 '16 at 13:44
Then you should use coodinator layout. The following link may help you. https://guides.codepath.com/android/Handling-Scrolls-with-CoordinatorLayout – Anand Kumar Jha Dec 28 '16 at 06:20
I think, that's it. – Amrat Singh Mar 08 '17 at 20:00

score 0 · Answer 3 · edited Jan 12 '23 at 21:35

You can find a solution here:

https://stackoverflow.com/a/25143739/5907003

If you want to calculate the height dynamically you can use the code below, from the linked question. Credits to Kevin Coppock.

int finalHeight, finalWidth;
final ImageView iv = (ImageView)findViewById(R.id.scaled_image);
final TextView tv = (TextView)findViewById(R.id.size_label);
ViewTreeObserver vto = iv.getViewTreeObserver();
vto.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
    public boolean onPreDraw() {
        iv.getViewTreeObserver().removeOnPreDrawListener(this);
        finalHeight = iv.getMeasuredHeight();
        finalWidth = iv.getMeasuredWidth();
        tv.setText("Height: " + finalHeight + " Width: " + finalWidth);
        return true;
    }
});

Also just an idea if that can help, you can divide the image into two parts and align them with your layouts as align Bottom and align top with the respective layouts

And for rounded corner background you can create a bg.xml in your drawable folder

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF"/>
    <stroke android:width="3dip" android:color="#B1BCBE" />
    <corners android:radius="10dip"/>
    <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
</shape>

score 0 · Answer 4 · answered Mar 12 '20 at 15:22

0

You can use layout component Guideline to split the screen in pixels or percentage and use it as anchor to fix any other component to it.

answered Mar 12 '20 at 15:22

Abishek Stephen

386
1
3
15

score 0 · Answer 5 · answered Jun 28 '23 at 08:59

Here is ConstraintLayout version of this example

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:id="@+id/viewTop"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#00ffff"
        app:layout_constraintBottom_toTopOf="@id/guideline"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0" />

    <View
        android:id="@+id/viewBottom"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#0000ff"
        app:layout_constraintTop_toBottomOf="@id/guideline"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintVertical_bias="0.0" />
    
    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5" />

    <View
        android:id="@+id/viewOnTop"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#00ff00"
        app:layout_constraintBottom_toBottomOf="@id/guideline"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/guideline" />

</androidx.constraintlayout.widget.ConstraintLayout>

Divide screen in two half and place imageview on half-half both

5 Answers5