Android layout place a layout in the middle of another two layouts

Question

Hello I have to create the UI like bellow,(picture attached) using regular Android layouts. I got header, footer and middle areas along with a image view. According to the picture : Area A and Area C is similar height (20% of screen) and image view should be placed always in the middle of Area B and Area C.

My current xml code is like this

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    >

    <LinearLayout
        android:id="@+id/show_contact_bottomArea"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:orientation="vertical"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">

    </LinearLayout>

    <LinearLayout
        android:id="@+id/show_contact_middleArea"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:orientation="vertical"
        android:background="@color/grayContact"
        android:layout_below="@+id/show_contact_headerArea"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_above="@+id/show_contact_bottomArea">
        
    </LinearLayout>

    <LinearLayout
        android:id="@+id/show_contact_headerArea"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:orientation="vertical"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"></LinearLayout>

    <ImageView
        android:layout_width="150dp"
        android:layout_height="150dp"
        app:srcCompat="@drawable/common_google_signin_btn_icon_dark_focused"
        android:id="@+id/imageView2"
        android:layout_marginBottom="40dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

I gave

marginBottom="40dp"

for image view to push it upwards, which is not a good practice. what is the best way to place the image view in the center of Area B's and Area C's border.

Also currently I gave

android:layout_height="120dp"

for Area A & Area B's height but ideally both should be 20%(each) of the screen, how to achieve that also?

Use framelayout. Its flexible for these kind or requirements — Sreehari, Feb 17 '17 at 11:58

score 3 · Accepted Answer · answered Feb 17 '17 at 12:17

You can give weights 20 % to each A and C. This way they will occupy 20% of top and bottom respectively. Assign rest 60% of height to B.

For imageView, you can place entire layout in Coordinate layout and assign anchor to footer.

Her is code snippet

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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">


    <LinearLayout 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"
        android:orientation="vertical"
        android:weightSum="10">

        <LinearLayout

            android:id="@+id/show_contact_bottomArea"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_weight="2"
            android:background="@color/primary_light"
            android:orientation="vertical">

        </LinearLayout>

        <LinearLayout
            android:id="@+id/show_contact_middleArea"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_above="@+id/show_contact_bottomArea"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_below="@+id/show_contact_headerArea"
            android:layout_weight="6"
            android:background="@color/holo_blue_light"
            android:orientation="vertical">

        </LinearLayout>

        <LinearLayout
            android:id="@+id/show_contact_headerArea"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_weight="2"
            android:background="@color/primary"
            android:orientation="vertical"></LinearLayout>


    </LinearLayout>

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="40dp"
        app:layout_anchor="@+id/show_contact_headerArea"
        app:layout_anchorGravity="center_horizontal|top"
        app:srcCompat="@drawable/header_record" />


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

Result :- I have colored different section with different color code.

Thank you for the answer, It works. Is it possible to set the imageview's height based on the height of Area C? I want the imageview's height as half of the Area C's height? — J.Rocky, Feb 18 '17 at 07:19
Find height of C linear layout http://stackoverflow.com/questions/12068945/get-layout-height-and-width-at-run-time-android and then set its height dynamically http://stackoverflow.com/questions/3144940/set-imageview-width-and-height-programmatically — Hitesh Sahu, Feb 19 '17 at 04:32

score 1 · Answer 2 · answered Feb 17 '17 at 12:06

1

use weight for giving exact portion of Area and Frame Layout for eg: weight sum =4 have to give in parent Linear layout Area A give 1 Area b give 2 Area c give 1

After Area B add image View with top -(height you want to appear in B's portion)

answered Feb 17 '17 at 12:06

Dilip Dubey

485
2
11

Android layout place a layout in the middle of another two layouts

2 Answers2