Search code examples
androidandroid-layoutandroid-imageviewandroid-relativelayout

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


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.


Solution

  • 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>