Under the same parent layout, how to make the size of a match_parent element follow a wrap_content element?

Question

In html, if I want to use a blue overlay to fully cover a yellow banner, I can do it:

<div style="position:relative;display:table;">
    <div style="background-color:yellow;font-size:30px;">TESTING<div/>
    <div style="z-index:1;position:absolute;top:0px;left:0px;width:100%;height:100%;background-color:blue;opacity:0.5;display:inline-block;"></div>
</div>

which the size of blue overlay can follow the yellow banner despite I don't know the actual px of it.

I want to implement same effect on android of it, I tried:

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
    android:background="#FFFF00"
    android:textSize="30dp"
    android:id="@+id/textview"
    android:text="TESTING"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
<TextView
    android:alpha="0.5"
    android:background="#0000FF"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignBottom="@+id/textview"
</RelativeLayout>

but the width of the blue overlay doesn't follow the enclosed wrap_content element even though I set android:layout_alignBottom:

how can I get same effect as in html?

Answer 1

Use a layout, any layout with

• android:layout_width="wrap_content"

• android:layout_height="wrap_content"

attributes. Then add a background

• android:background="#0000FF"

And put the TextView inside of it.

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

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#0000FF"
        >

        <TextView
            android:background="#FFFF00"
            android:textSize="30dp"
            android:id="@+id/textview"
            android:text="TESTING"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </RelativeLayout>
</RelativeLayout>

Answer 2

If I am understanding correctly what you need is, then you are definitely looking for android:layout_alignEnd.

According to the documentation

android:layout_alignEnd : Makes the end edge of this view match the end edge of the given anchor view ID.

So you can use it in your second textView

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

<TextView
    android:id="@+id/textview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#FFFF00"
    android:text="TESTINGsd"
    android:textSize="30dp" />

<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignBottom="@+id/textview"
    android:layout_alignEnd="@+id/textview"
    android:alpha="0.5"
    android:background="#0000FF"/>

Output: