How to outline a TextView?

Question

What I want to do? (blue will be changed as white)

What I did?
I have found a class which extends TextView that able to outline textview very close to what I want. The problem is that I could not change stroke color to any color, it draws always as black. How to set border color as white?

What is my output:

Where are my codes?

public class TypeFaceTextView extends TextView {

private static Paint getWhiteBorderPaint(){
    Paint p = new Paint(Color.WHITE);
    return p;
}

private static final Paint BLACK_BORDER_PAINT = getWhiteBorderPaint();

static {
    BLACK_BORDER_PAINT.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
}

@Override
public void setText(CharSequence text, BufferType type) {

    super.setText(String.format(text.toString()), type);
}

private static final int BORDER_WIDTH = 1;

private Typeface typeface;

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

public TypeFaceTextView(Context context, AttributeSet attrs) {
    super(context, attrs);

    setDrawingCacheEnabled(false);

    setTypeface(attrs);
}

private void setTypeface(AttributeSet attrs) {
    final String typefaceFileName = attrs.getAttributeValue(null, "typeface");
    if (typefaceFileName != null) {
        typeface = Typeface.createFromAsset(getContext().getAssets(), typefaceFileName);
    }

    setTypeface(typeface);
}

public TypeFaceTextView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);

    setTypeface(attrs);
}

@Override
public void draw(Canvas aCanvas) {
    aCanvas.saveLayer(null, BLACK_BORDER_PAINT, Canvas.HAS_ALPHA_LAYER_SAVE_FLAG
            | Canvas.FULL_COLOR_LAYER_SAVE_FLAG | Canvas.MATRIX_SAVE_FLAG);

    drawBackground(aCanvas, -BORDER_WIDTH, -BORDER_WIDTH);
    drawBackground(aCanvas, BORDER_WIDTH + BORDER_WIDTH, 0);
    drawBackground(aCanvas, 0, BORDER_WIDTH + BORDER_WIDTH);
    drawBackground(aCanvas, -BORDER_WIDTH - BORDER_WIDTH, 0);

    aCanvas.restore();
    super.draw(aCanvas);

}

private void drawBackground(Canvas aCanvas, int aDX, int aDY) {
    aCanvas.translate(aDX, aDY);
    super.draw(aCanvas);
}
}

Answer 1

In case someone look for the code with Android Compose:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Box(
                contentAlignment = Alignment.Center, modifier = Modifier.fillMaxSize()
            ) {
                val textMeasurer = rememberTextMeasurer()
                val fontSize = 200.sp
                val textStyle = TextStyle(fontSize = fontSize, color = Color.Black)
                val strokeWidth = with(LocalDensity.current) { fontSize.toPx() / 15f }
                Canvas(
                    modifier = Modifier.zIndex(1f)
                ) {
                    val text = "Outline Stroke"
                    val textLayoutResult100 = textMeasurer.measure(text, textStyle)
                    drawText(
                        textLayoutResult = textLayoutResult100,
                        topLeft = -Offset(
                            textLayoutResult100.size.width * .5f,
                            textLayoutResult100.size.height * .5f
                        ),
                        color = Color.Blue,
                        drawStyle = Stroke(width = strokeWidth)
                    )
                    drawText(
                        textLayoutResult = textLayoutResult100,
                        topLeft = -Offset(
                            textLayoutResult100.size.width * .5f,
                            textLayoutResult100.size.height * .5f
                        ),
                        drawStyle = Fill
                    )
                }
            }
        }
    }
}

Answer 2

text outline with transparent background

this is one way to do it with no background color

public class CustomTextView extends androidx.appcompat.widget.AppCompatTextView {

float mStroke;

public CustomTextView(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    TypedArray a = context.obtainStyledAttributes(attrs,
            R.styleable.CustomTextView);
    mStroke=a.getFloat(R.styleable.CustomTextView_stroke,1.0f);
    a.recycle();
}

@Override
protected void onDraw(Canvas canvas) {
    TextPaint paint = this.getPaint();
    paint.setStyle(Paint.Style.STROKE);
    paint.setStrokeWidth(mStroke);
    
    super.onDraw(canvas);
}
}

then you only need to add the following to the attrs.xml file

<declare-styleable name="CustomTextView">
    <attr name="stroke" format="float"/>
</declare-styleable>

and now you will be able to set the stroke widht by app:stroke while retaining all other desirable properties of TextView. my solution only draws the stroke w/o a fill. this makes it a bit simpler than the others. bellow a screencapture with the result while setting a custom font to my customtextview on a dark background.

Answer 3

My solution based on custom TextView.

public class TextViewOutline extends TextView{
    int outline_color;
    float outline_width; //relative to font size

    public TextViewOutline( Context context, int outline_color, float outline_width ){
        super( context );
        this.outline_color = outline_color;
        this.outline_width = outline_width;
    }

    @Override
    protected void onDraw( Canvas canvas) {
        //draw standard text
        super.onDraw( canvas );
        //draw outline
        Paint paint = getPaint();
        paint.setStyle( Paint.Style.STROKE );
        paint.setStrokeWidth( paint.getTextSize()*outline_width );
        int color_tmp = paint.getColor();
        setTextColor( outline_color );
        super.onDraw( canvas );
        //restore
        setTextColor( color_tmp );
        paint.setStyle( Paint.Style.FILL );
    }
}

Code for test.

TextViewOutline tv = new TextViewOutline( this, 0xff0080ff, 0.04f);
tv.setText( "Simple TEST" );
tv.setTypeface( Typeface.create( Typeface.SERIF, Typeface.BOLD ) );
tv.setTextColor( 0xff000000 );
tv.setTextSize( 128 );
setContentView(tv);

tv.setOnClickListener( new View.OnClickListener(){
    @Override
    public void onClick( View view ){
        view.invalidate();
    }
} );

Result.

Answer 4

I found simple way to outline view without inheritance from TextView. I had wrote simple library that use Android's Spannable for outlining text. This solution gives possibility to outline only part of text.

Library: OutlineSpan

Class (you can copy only class):OutlineSpan

Answer 5

Investigated into the original problem stated by this question. Found the solution.

First, change DST_OUT to DARKEN

static {
    BLACK_BORDER_PAINT.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DARKEN));
}

Secondly, save the original text color, and put the intended outline color up, draw the outline, and then restore the original text color.

@Override
public void draw(Canvas aCanvas) {
    int originalColor = this.getCurrentTextColor();
    this.setTextColor(0xff000000); //set it to white.

    aCanvas.saveLayer(null, borderPaint, Canvas.HAS_ALPHA_LAYER_SAVE_FLAG
            | Canvas.FULL_COLOR_LAYER_SAVE_FLAG | Canvas.MATRIX_SAVE_FLAG);

        drawBackground(aCanvas, -BORDER_WIDTH, -BORDER_WIDTH);
        drawBackground(aCanvas, BORDER_WIDTH + BORDER_WIDTH, 0);
        drawBackground(aCanvas, 0, BORDER_WIDTH + BORDER_WIDTH);
        drawBackground(aCanvas, -BORDER_WIDTH - BORDER_WIDTH, 0);

    this.setTextColor(originalColor);
    aCanvas.restore();
    super.draw(aCanvas);
}

Answer 6

1) create your textview object extends TextView

public class YourTextView extends TextView { .........

2) Do this on its draw method

@Override
public void draw(Canvas canvas) {
        for (int i = 0; i < 5; i++) {
        super.draw(canvas);
    }
}

3) set textview's xml side as below

android:shadowColor="@color/white"
android:shadowRadius="5"

Answer 7

You need to change your getWhiteBorderPaint() method to the following:

private static Paint getWhiteBorderPaint(){
    Paint p = new Paint();
    p.setColor(Color.WHITE);
    return p;
}

The Paint constructor only takes bitmasked flags and doesn't support arbitrary ints as parameters.

Answer 8

Couldn't this this but try experimenting with: PorterDuff.Mode

http://developer.android.com/reference/android/graphics/PorterDuff.Mode.html

Try changing it to 'ADD' or 'CLEAR', hope this helps.