Android layout_below in RelativeLayout

Question

I came across a strange issue, below is my layout:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
>

<ImageView
    android:src="@color/colorAccent"
    android:layout_width="match_parent"
    android:layout_height="200dp"/>
<ImageView
    android:id="@+id/image"
    android:src="@mipmap/ic_launcher"
    android:layout_centerInParent="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

<TextView
    android:text="text"
    android:layout_below="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
</RelativeLayout>

TextView is not below ImageView as expected, it's below the original position of ImageView .

If i set layout_height of RelativeLayout to 200dp or match_parent , it works fine.

How do i solve this?

Answer 1

Simple solution for you is to use android:layout_height="match_parent" in your root layout.

If you are using wrap_content for your root layout, android:layout_centerInParent and android:layout_below will not work properly.

Either use height as match_parent or static.

choice 1 :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="200dp">

choice 2 :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

choice 3:

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="text" />
</LinearLayout>

Now its upto you to use which solution.

Answer 2

If you want your Relative Layout to Wrap Content and Your Second Image view Apply with layout_centerInParent then you need to give marginTop to Text View .

Try with below code.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">


    <ImageView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:src="?attr/colorPrimary" />

    <ImageView
        android:id="@+id/imageTest"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/tvText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imageTest"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="80dp"
        android:text="text"
        android:textSize="22sp" />


</RelativeLayout>

Here is Screen Shot.

Answer 3

Thank for everyone answered. I have got a solution at last. It is not a very good solution, but it works fine.

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

<ImageView
    android:id="@+id/background"
    android:src="@color/colorAccent"
    android:layout_width="match_parent"
    android:layout_height="200dp"/>
<RelativeLayout
    android:layout_height="warp_content"
    android:layout_width="match_parent"
    android:layout_alignTop="@+id/background"
    android:layout_alignBottom="@+id/background">
    <ImageView
        android:id="@+id/image"
        android:src="@mipmap/ic_launcher"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:text="text"
        android:layout_below="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</RelativeLayout>
</RelativeLayout>

Answer 4

The top answer is actually not necessarily true. You do not need to give the element a margin top for it to be below the image view. In my situation, I have a RelativeLayout with an ImageView and a ListView. I wanted ImageView to be above ListView but the ListView to cover the area below the ImageView. And I achieved it by setting layout_alignParentTop to the ImageView and adding layout_below to the ListView.

<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:paddingBottom="@dimen/activity_vertical_margin"
        tools:context="io.menuloop.menuloopandroid.MainActivity">
    <ImageView android:layout_alignParentTop="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/yourStory" android:src="@drawable/ic_face_black_24dp" />
    <ListView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/yourStory"
            android:layout_centerHorizontal="true" android:id="@+id/listView" />
</RelativeLayout>