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.

Answer 1

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>

Answer 2

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>
      

Answer 3

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.

Answer 4

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>

Answer 5

<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