View width and height is always zero in RelativeLayout in Android

Question

I am developing an Android app. In my app, I am trying to set overlay on an image. But the size of the view in a relative layout is always zero in with and height even I set match_parent to both width and height.

This is my XML layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_marginTop="5dp"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    android:layout_width="match_parent"
    android:id="@+id/di_card_container"
    android:layout_height="wrap_content">

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

        <ImageView
            android:id="@+id/di_iv_image"
            android:scaleType="centerCrop"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <RelativeLayout
            android:layout_alignParentLeft="true"
            android:layout_alignParentBottom="true"
            android:id="@+id/di_name_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <View
                android:layout_centerInParent="true"
                android:background="@color/blue"
                android:id="@+id/destination_item_overlay"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>
            <TextView
                android:padding="10dp"
                android:textSize="15dp"
                android:textColor="@color/white"
                android:id="@+id/di_tv_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </RelativeLayout>
    </RelativeLayout>
</android.support.v7.widget.CardView>

This is the result

As you can see, there is no blue color background for name because width and height of view in relative layout is zero. But if I set width and height explicitly like below, it is working.

 <View
                    android:layout_centerInParent="true"
                    android:background="@color/blue"
                    android:id="@+id/destination_item_overlay"
                    android:layout_width="300dp"
                    android:layout_height="30dp"/>

But it is not compatible with all devices. Why with and height is always zero? I am adding that view because I need to programmatically control that view. How can I set width and height of that background view to match the parent?

Answer 1

Thats because you have a circular dependency. The <RelativeLayout> is asking its child to tell the height and the <View> is telling its parent to make it as tall as himself. If we fix the height, we can fix the issue immediately.

Try this here:

        <RelativeLayout
            android:layout_alignParentLeft="true"
            android:layout_alignParentBottom="true"
            android:id="@+id/di_name_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <View
                android:layout_centerInParent="true"
                android:background="@color/blue"
                android:id="@+id/destination_item_overlay"
                android:layout_width="match_parent"
                android:layout_alightTop="@id/di_tv_name"
                android:layout_alightBottom="@id/di_tv_name"
                android:layout_height="match_parent"/>
            <TextView
                android:padding="10dp"
                android:textSize="15dp"
                android:textColor="@color/white"
                android:id="@+id/di_tv_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </RelativeLayout>