layout:below not working in RelativeLayout inside CardView

Question

I have a RelativeLayout inside a CardView, with a ImageView and two TextViews. One TextView has to be centered, so it is placed over the ImageView. The other TextView has to be below that TextView, but for some reason unknown to me it places over the first TextView. I managed to set it properly by adding a second RelativeLayout and putting the two TextViews inside it, and now they show properly. But I am curious about why if you don't add that second RelativeLayout, the second TextView doesn't appears below the first one. Someone can explain me? Thank you.

The layout:

This way works:

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

<android.support.v7.widget.CardView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:elevation="10dp"
    app:cardUseCompatPadding="true"
    android:id="@+id/cv">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

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

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/name"
                android:gravity="center"
                android:textStyle="bold"
                android:textSize="40sp"
                android:shadowColor="#ffffff"
                android:shadowDx="0"
                android:shadowDy="0"
                android:shadowRadius="6"
                android:textColor="@color/black"
                android:text="I am the name"
                android:layout_centerInParent="true" />

            <TextView
                android:id="@+id/type"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/name"
                android:gravity="center"
                android:layout_centerHorizontal="true"
                android:shadowColor="#ffffff"
                android:shadowDx="0"
                android:shadowDy="0"
                android:shadowRadius="6"
                android:text="I am the type"
                android:textColor="@color/red"
                android:textSize="25sp"
                android:textStyle="bold" />

        </RelativeLayout>

    </RelativeLayout>
</android.support.v7.widget.CardView>


</RelativeLayout>

This doesn't:

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

<android.support.v7.widget.CardView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:elevation="10dp"
    app:cardUseCompatPadding="true"
    android:id="@+id/cv">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

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

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/name"
                android:gravity="center"
                android:textStyle="bold"
                android:textSize="40sp"
                android:shadowColor="#ffffff"
                android:shadowDx="0"
                android:shadowDy="0"
                android:shadowRadius="6"
                android:textColor="@color/black"
                android:text="I am the name"
                android:layout_centerInParent="true" />

            <TextView
                android:id="@+id/type"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/name"
                android:gravity="center"
                android:layout_centerHorizontal="true"
                android:shadowColor="#ffffff"
                android:shadowDx="0"
                android:shadowDy="0"
                android:shadowRadius="6"
                android:text="I am the type"
                android:textColor="@color/red"
                android:textSize="25sp"
                android:textStyle="bold" />

    </RelativeLayout>
</android.support.v7.widget.CardView>


</RelativeLayout>

score 0 · Accepted Answer · answered Mar 22 '19 at 09:50

This is because of the ImageView with the width of match_parent. If you want to have Image in that form you can instead set the background of the relative layout. You can set height for CardView and any other settings. For this below is the code.

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

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:elevation="10dp"
        app:cardUseCompatPadding="true"
        android:id="@+id/cv">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@mipmap/ic_launcher">



            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/name"
                android:gravity="center"
                android:textStyle="bold"
                android:textSize="40sp"
                android:shadowColor="#ffffff"
                android:shadowDx="0"
                android:shadowDy="0"
                android:shadowRadius="6"
                android:textColor="#000"
                android:text="I am the name"
                android:layout_centerInParent="true" />

            <TextView
                android:id="@+id/type"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/name"
                android:gravity="center"
                android:layout_centerHorizontal="true"
                android:shadowColor="#ffffff"
                android:shadowDx="0"
                android:shadowDy="0"
                android:shadowRadius="6"
                android:text="I am the type"
                android:textColor="#000"
                android:textSize="25sp"
                android:textStyle="bold" />

        </RelativeLayout>
    </android.support.v7.widget.CardView>


</RelativeLayout>

In other case if you want ImageView in your layout you can set RelativeLayout width to match_parent and ImageView width to wrap_content.

Yeah, that works. But what I want to know is, if the three elements (ImageView, and both TextViews) are inside the same RelativeLayout, and I set the first one to center in his parent (the RelativeLayout) and the second one is set to be put below the first one, it is not rendered properly. Why it is affected by the match_parent in ImageView? — Fustigador, Mar 22 '19 at 10:10
Why you set `android:adjustViewBounds="true"` for `ImageView`? Its real usage is to preserve the aspect ratio for the drawable used in it. Either you can remove it or remove the same `match_parent` one. — Abid Khan, Mar 22 '19 at 11:04
I want to preserve the aspect ratio of the image...it is not set by src in my code, by the way, it is set by an url and Picasso. — Fustigador, Mar 22 '19 at 11:07
When you set `android:scaleType="fitXY"` or `android:adjustViewBounds="true"` the `RelativeLayout` will set items in it accordingly hence the bounds of the `ImageView`. — Abid Khan, Mar 22 '19 at 11:08
But the parent of the TextViews is the RelativeLayout, not the ImageView — Fustigador, Mar 22 '19 at 11:09
Yes the parent has to set space for it's child in that case the `ImageView` bounds are set according to the aspect ratio preservation. — Abid Khan, Mar 22 '19 at 11:11
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/190495/discussion-between-abid-khan-and-fustigador). — Abid Khan, Mar 22 '19 at 11:11

score 0 · Answer 2 · answered Mar 22 '19 at 10:40

if you see in the miss matched XML, you will find android:adjustViewBounds="true" for the ImageView, where this ImageView will be set to adjust its bounds to preserve the aspect ratio of its drawable.

in the above scenario kindly try using LinearLayout with Orientation Vertical for TextView and RelativeLayout for (LinearLayout and ImageView).

constraintlayout layout is always the Ultimate Powerfull layouts.

layout:below not working in RelativeLayout inside CardView

2 Answers2