How to Create a Gradient TextView in Android Decorate your TextView easily without raising your stress levels

Scroll this

We use TextView in every Android app, and apart from 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.

Create a Custom TextView

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.

Override the onLayout() Method

Override the onLayout() method to apply a gradient everytime the TextView layout is changed, or in other words, every time 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.

Use your Custom TextView

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,

import android.content.Context;
import android.graphics.LinearGradient;
import android.graphics.Shader;
import android.graphics.Typeface;
import android.support.v4.content.ContextCompat;
import android.util.AttributeSet;
import android.widget.TextView;

/**
 * Created by rahulchowdhury on 04/08/16.
 */
 
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);
    }

    @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));
        }
    }
}

Submit a comment