Creating an overlay in Android studio

Question

I'm currently making an Android app and I'm seeking inspiration in the picture as seen below. I'm trying to create the overlay in the top right corner of the first device in the picture and I have no idea how it is done.

Answer 1

Use alpha property

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

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
<LinearLayout
    android:background="#FFFF33"
    android:layout_width="match_parent"
    android:layout_height="200dp">
    <TextView
        android:textAlignment="textEnd"
        android:text="Sample Text View Sample Text View Sample Text View"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

    <RelativeLayout
        android:alpha="0.5"
        android:background="@color/colorPrimary"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_width="100dp"
        android:layout_height="200dp">
    </RelativeLayout>
</RelativeLayout>


</RelativeLayout>

The output will be like

*********** EDITED AS PER OP'S REQUIREMENT ***********

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

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <LinearLayout
        android:background="#FFFF33"
        android:layout_width="match_parent"
        android:layout_height="200dp">

    </LinearLayout>

    <RelativeLayout
        android:alpha="0.5"
        android:background="@color/colorPrimary"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_width="100dp"
        android:layout_height="200dp">
    </RelativeLayout>
    <TextView
        android:textAlignment="textEnd"
        android:text="Sample Text View Sample Text View Sample Text View"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</RelativeLayout>
</RelativeLayout>

Answer 2

add two layout one for background and another for top of it. then add top layout background color white transparent.

example XML layout given below

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="#c11316">
    <TextView
        android:text="25"
        android:textColor="#ffffff"
        android:layout_centerVertical="true"
        android:layout_alignParentEnd="true"
        android:layout_marginEnd="30dp"
        android:textSize="30dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_marginEnd="150dp"
    android:background="#33e4e4e4">
    <TextView
        android:text="Your Things"
        android:textColor="#ffffff" 
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:textSize="30dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>