Android: Semi Transparent Overlay?

Question

I am trying to get a 'semi transparent' overlay on top of a layout. I want to keep the layout underneath unchanged and just add this view over the top of it.

At the moment I am using an imageView with the Background set to an drawable file which contains the transparent color:

  <?xml version="1.0" encoding="UTF-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#80FF0000"/>
    <stroke android:width="3dip"
        android:color="#80FF0000" />
    <corners android:radius="5dip"/>
    <padding android:left="2dip" android:top="2dip" android:right="2dip" android:bottom="2dip" />
</shape>

and the layout:

 <ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/imageView10"
    android:background="@drawable/building_block_trans_red"
    android:layout_alignParentLeft="true"
    android:layout_alignParentBottom="true"
    android:layout_alignParentTop="true"
    android:layout_alignParentStart="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true" />

However.... it works fine in Android Studio and shows the semi transparent overlay on top of the layout but when I load it up on my phone No Overlay?

Please guide me to what I am missing?

Edit 1: Complete xml file for the item.

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/OdasRelativeLayoutNoData"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/building_block"
    android:padding="3dp"
    android:orientation="vertical" >

    <RelativeLayout
        android:layout_width="105dp"
        android:layout_height="fill_parent"
        android:id="@+id/OdasSideBarLayoutNoData"
        android:layout_alignParentTop="true"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true">

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@drawable/building_block_light"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:id="@+id/linearLayout16"
            android:layout_alignParentLeft="true">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="bottom|center_horizontal"
                android:layout_gravity="bottom|center_horizontal"
                android:id="@+id/textView34"
                android:text="@string/odasBuoy"
                android:background="@drawable/tidal_header"
                android:textSize="25dp"
                android:textColor="#ffffff"
                android:textStyle="bold"
                android:typeface="sans"
                tools:ignore="SpUsage" />

            <ImageView
                android:id="@+id/icon2"
                android:layout_width="90dp"
                android:layout_height="75dp"
                android:layout_gravity="top|center_horizontal"
                android:layout_weight="1"
                android:scaleType="fitXY"
                android:background="@drawable/ic_odas1" />

        </LinearLayout>

    </RelativeLayout>

    <!-- AutoResize Class handles text size so it fills the available space -->
    <com.prowapps.seaport.AutoResizeTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="start|fill"
        android:text="@string/OdasInfo"
        android:typeface="sans"
        android:textColor="#ffffff"
        android:layout_marginLeft="5dp"
        android:id="@+id/textView35"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/OdasSideBarLayoutNoData"
        android:layout_alignParentRight="true"
        android:padding="2dp" />

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/building_block_red" />

</RelativeLayout>

Answer 1

You can simply use a view also instead of a ImageView and a Shapefile.

<View
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#80FF0000"/>

Also you don't need layout_align statements as your view is covering the entire screen.

Answer 2

By this library of mine, you can create an overlay with a customized transparent level. The gif preview -