How do I add an transparent overlay with text on an image?

Question

The new Google I/O app is using images with transparent overlay with some text on each of them.I am trying to create something similar but not able to understand How did they do it?They have not publish the source code on github yet.

Image :

Answer 1

Try something like this. You can achieve it by setting alpha(0 to 1) for the drawable and using relative layout:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@android:color/darker_gray" >

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:alpha="0.5"
    android:src="@drawable/card_back"
    android:tint="#00A7C0DC" />

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/imageView1"
    android:layout_alignParentTop="true"
    android:layout_marginLeft="30dp"
    android:layout_marginTop="27dp"
    android:text="Back Face"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:textColor="@color/white"
    android:textSize="25sp"
    android:textStyle="bold" />

<ImageView
    android:id="@+id/imageView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_marginBottom="15dp"
    android:layout_marginLeft="18dp"
    android:src="@drawable/card_back" />

</RelativeLayout>

Heres a snapshot. Its not as great as yours but looks ok.

Note the second image is just for comparision.