How to Create a Gradient TextView in Android

We use TextView in every Android app, and apart of setting just the colour, size and font, you can style your TextViews to a greater extent.

One such example, is creating a TextView which has a gradient fill over the text. Creating such a TextView isn’t a complex process, just follow these steps to create your own gradient fill TextView for your Android project.

Step 1

Create a new class which extends the class TextView and override the constructors of TextView class, in your Android project.

public class GradientTextView extends TextView {

    public GradientTextView(Context context) {
        super(context);
    }

    public GradientTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public GradientTextView(Context context, 
                            AttributeSet attrs, 
                            int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
}

Doing this you are taking the first step in creating your custom version of the TextView widget provided by Android SDK. Now, you can override other methods and have a customized version of the default TextView widget.

Step 2

Override the onLayout() method to apply a gradient everytime the TextView layout is changed, or in other words, everytime the text inside the TextView is changed.

@Override
protected void onLayout(boolean changed, int left, int top, 
                        int right, int bottom) {
    super.onLayout(changed, left, top, right, bottom);

    //Setting the gradient if layout is changed
    if (changed) {
        getPaint().setShader(new LinearGradient(0, 
                             0, 
                             getWidth(), 
                             getHeight(),
                             ContextCompat.getColor(getContext(),
                                              R.color.colorStart),
                             ContextCompat.getColor(getContext(),
                                              R.color.colorEnd),
                             Shader.TileMode.CLAMP));
    }
}

What we are doing here is checking if the TextView layout is changed whenever the layout is drawn for the TextView and if changed, we are applying a linear gradient to the drawn text.

Configuring the gradient

This is the LinearGradient constructor which we will be using for our gradient effect,

public LinearGradient(float x0, 
                      float y0, 
                      float x1, 
                      float y1, 
                      int color0, 
                      int color1, 
                      Shader.TileMode tile)

Here we are applying a gradient from Top-Left to Bottom-Right using two colours, therefore we will be having the following parameter values,

x0 = 0
y0 = 0
x1 = getWidth() [current width of the TextView]
y1 = getHeight() [current height of the TextView]
color0 = starting colour of the gradient
color1 = ending colour of the gradient
tile = Shader.TileMode.CLAMP [this replicates the edge colour if the 
                              paint shader goes outside the text 
                              layout bounds]

And that’s it you have created your very own custom TextView which shows gradient fill text at runtime.

Step 3

Now that you have created the custom TextView widget, its time to apply that into your XML layout, and here’s how,

<com.example.project.view.GradientTextView
    android:id="@+id/gradientTextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello, Gradient!" />

You will now show whatever text that you put in this GradientTextView with a gradient fill of your choice, automatically.

Complete Code

Here’s the final and complete code for the GradientTextView class for your reference,

Hope you have enjoyed this short tutorial, do recommend this tutorial if you found it useful and follow Upcurve Labs Blog for more tutorials like this, see you in the next one.