Wai Yan Hein Wai Yan Hein - 3 months ago 52
Android Question

View with and height is always zero in RelativeLayout in Android

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. Please see my scenario below.

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

enter image description here

As you can see, there is no blue color background for name cause 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 cause I need to programmatically control that view. Please help me. How can I set width and height of that background view to match the parent?

Answer

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>