How to add text scrim in android

Question

Objective : Overlay a text header, on top of an image. Something like this:

Current Implementation : I have a CardView, which consists of an ImageView and a TextView. I can put the text on top of the image, but I can't get that background scrim.

Problem : I need that background scrim, because without it the text is illegible on top of the image.

Stack : Android L

Layout XML :

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/event_cardView"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_margin="3dp"
    card_view:cardCornerRadius="10dp"
    card_view:cardElevation="5dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="10dp">

        <ImageView
            android:id="@+id/eventImage"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:contentDescription="eventImage"
            android:src="@drawable/sample"
            android:layout_alignParentTop="true" />

        <TextView
            android:id="@+id/eventName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="2dip"
            android:textColor="#000000"
            android:textSize="15sp"
            android:maxLines="5"
            android:gravity="center"
            android:layout_alignParentBottom="true"
            android:text="Event Name" />
    </RelativeLayout>
</android.support.v7.widget.CardView>

Would appreciate any pointers on some help with this.

Answer 1

Create a shape drawable resource that only include the XML namespace as an attribute for the shape. Depending on whether you want a solid or gradient scrim, will change the content of the shape element.

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- The content of the shape will go here. -->

</shape>

If you want a solid scrim, add a solid element to your shape element with the attribute android:color set to some color with alpha.

<solid
    android:color="#88000000"/>

If you want a gradient scrim, add a gradient element with the following attributes from the android namespace: angle, centerY, startColor, centerColor, endColor, and type. If you want to follow the Material Design guidelines, like in the image you provided, the gradient element should have the following values:

<gradient
    android:angle="90"
    android:centerY="0.3"
    android:startColor="#CC000000"
    android:centerColor="#66000000"
    android:endColor="#00000000"
    android:type="linear"/>

It is a good idea to have these values extracted and placed in the relevant resource files, like dimens.xml and colors.xml, so that the scrim can change depending on the configuration of the device.

Once you have the scrim saved as a shape drawable resource, you can add it to the background of your TextView using the android:background attribute. Using the TextView that you provided and assuming that you named the scrim file scrim.xml, the modification would be the following:

<TextView
    android:id="@+id/eventName"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="2dip"
    android:textColor="#000000"
    android:textSize="15sp"
    android:maxLines="5"
    android:gravity="center"
    android:layout_alignParentBottom="true"
    android:text="Event Name"
    android:background="@drawable/scrim"/>