Android Tutorial: Gradient Overlay

In this Android Tutorial: Gradient Overlay we are going to learn how to create and implement the gradient effect for placing text on top of images as well as action items. We will be doing this with pure XML and without any use of extra images – just how I’ve done it for Snap Search.

We are going to attempt for something similar. You can obviously, do as you wish with it.

Gradient Overlay XML

The first thing we need to prepare is the XML for the gradient before moving onto the main Layout. In the example above, we are using two different gradients, one that goes from dark on top to transparent in the bottom, and the other that goes from transparent on top to dark in the bottom. Both these files will go in the drawables folder.

top_to_bottom.xml

<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#000000"
        android:endColor="#00000000"
        android:angle="-90"/>
</shape>

bottom_to_top.xml

<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#000000"
        android:endColor="#00000000"
        android:angle="90"/>
</shape>

Explanation: In both the above XML files, you can see the android:endColor has more than usual characters for the hex value. This is because the first two control the opacity – and 00 means completely transparent. You can play with these numbers for different effects.

Final XML Layout

Now that the gradient overlay drawables are ready, let’s get straight to the above layout.

I’m old fashioned and like using LinearLayout and RelativeLayout as much as possible – but you must remember you can use any layouts and combinations and design it any way you feel like as long as it suits the application and you get the end result you were looking for.

card_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardBackgroundColor="@color/colorPrimaryDark"
        app:cardElevation="5dp"
        app:cardCornerRadius="8dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="240dp">

            <ImageView
                android:id="@+id/news_img"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <View
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:layout_alignParentBottom="true"
                android:background="@drawable/bottom_to_top.xml" />

            <View
                android:layout_width="match_parent"
                android:layout_height="80dp"
                android:layout_alignParentTop="true"
                android:background="@drawable/top_to_bottom.xml" />

            <TextView
                android:id="@+id/news_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_margin="10dp"
                android:ellipsize="end"
                android:lineSpacingMultiplier="1.15"
                android:maxLines="2"
                android:textColor="@color/ccc"
                android:textSize="13sp" />

            <TextView
                android:id="@+id/news_source"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_margin="10dp"
                android:ellipsize="end"
                android:singleLine="true"
                android:textColor="@color/bbb"
                android:textSize="12sp" />

            <ImageView
                android:id="@+id/bookmark_news"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_alignParentRight="true"
                android:layout_margin="5dp"
                android:clickable="true"
                android:focusable="true"
                android:padding="10dp"
                android:src="@drawable/ic_bookmark_news"
                android:tint="@color/ccc" />

            <ImageView
                android:id="@+id/share_news"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_marginStart="5dp"
                android:layout_marginTop="5dp"
                android:layout_marginEnd="5dp"
                android:layout_marginBottom="5dp"
                android:layout_toLeftOf="@+id/bookmark_news"
                android:padding="10dp"
                android:src="@drawable/action_share"
                android:tint="@color/ccc" />

            <TextView
                android:id="@+id/news_time"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="1dp"
                android:ellipsize="end"
                android:singleLine="true"
                android:textColor="@color/h777"
                android:textSize="10sp"
                android:visibility="gone" />

        </RelativeLayout>

    </androidx.cardview.widget.CardView>

</LinearLayout>

NOTE:

• You must have two images as per the above layout
• We are using a CardView from the Android X package for the base.

CONCLUSION

That’s about it for Android Tutorial: Gradient Overlay. That’s all I had to do for Snap Search to get that effect for the news section. I hope this turns out to be useful for someone somewhere for what they’re making. Please let me know in the comments on the contact form if you had any trouble with it and I’d be happy to help ?

You could also check out a cool trick to Reduce APK Size on Android.