Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set gradient as text color as well as add stroke around it in TextView Android?

I want to set gradient as textcolor and also at the same time I want text to have a solid stroke around it as well in a TextView. So far what I have achieved is text can only show gradient or the stroke, not both at the same time.

I've created a custom class with extended TextView and I am using the following methods:

Using this to draw stroke:

paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(_strokeWidth);
setTextColor(_strokeColor);

Which gives me this result:

enter image description here

Using following code to add gradient:

Shader textShader = new LinearGradient(0f, 0f, getWidth(), getTextSize(), gradientColorsArray, null, Shader.TileMode.CLAMP);
                paint.setShader(textShader);

And It gives me the following result:

enter image description here

The problem is when I combine the above two methods, The stroke is drawn but the color of the stroke is the same as the gradient I am giving to paint object.

Following is the result I want to achieve. It would be great if somebody can guide me on how to achieve desired results.

enter image description here

like image 756
Arslan Avatar asked Nov 25 '21 07:11

Arslan


1 Answers

So after waiting for more than 4 days and lots of research, I am finally able to succeed to achieve the desired output.

The mistake I was making is while drawing a stroke on a paint object, I am setting the stroke color as textcolor. What I did this time was I created a LinearGradient() object and gave it to paint.shader while setting the paintStyle(Paint.Style.Stroke).

Paint paint = this.getPaint();
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(5f);
        paint.setShader(new LinearGradient(0f, 0f, getTextSize(), getTextSize(), mOutlineColor, mOutlineColor, Shader.TileMode.CLAMP));

And after setting the stroke in onDraw() method of my CustomTextView class, I called the super.onDraw(canvas)

Then I create a new LinearGradient() object for the gradient colors as follow:

 Paint paint = this.getPaint();
        paint.setStyle(Paint.Style.FILL);
        Shader linearShader = new LinearGradient(0f, 0f, getWidth(), getTextSize(), colors, null,
                Shader.TileMode.CLAMP);
        paint.setShader(linearShader);

Finally calling the super.onDraw(canvas) again and this gives my textview a stroke as well as gradient as textColor.

like image 106
Arslan Avatar answered Oct 23 '22 09:10

Arslan