black line around the text

Question

how to make a black line around the text for my textView? example on above image

Answer 1

Extend the TextView class. Then in the onDraw, draw the text first using black, then draw it again, slightly smaller and using white. For extra "correctness", add custom attributes to the XML to set the "line around" colour.

public class myTextView extends TextView{

    public myTextView (Context context) {
        this(context, null);    
    }

    public myTextView (Context context, AttributeSet attrs) {
        this(context, attrs, 0);            

    }

    public myTextView (Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);        
        // do extra initialisation and get attributes here
    }

    @Override
    protected void onDraw(Canvas canvas) {

        // draw first in black
        Paint paint = new Paint();
        paint.setColor(Color.BLACK);
        paint.setTextSize(20);                // text size
        paint.setStyle(Paint.Style.STROKE);
        paint.setTextAlign(Paint.Align.CENTER);

        canvas.drawText("My text", 50, 50, paint);

        // draw again in white, slightly smaller
        paint.setColor(Color.WHITE);
        paint.setTextSize(18);                // text size

        canvas.drawText("My text", 50, 50, paint);


    }


}

The code is not complete as it hardcodes the colours, size and positions but I hope that it is enough for you to work with. You can get the text size and text colour from the XML via attrs in the constructor and add line colour and width as custom attributes (search here or Google).

Answer 2

I would use a font that already has an outline like http://www.dafont.com/steelfish.font

as described here Android - Using Custom Font

Answer 3

Add this to your xml file:

android:shadowColor="#000000"
android:shadowDx="1.5"
android:shadowDy="1.3"
android:shadowRadius="1.6"
android:text="YOUR TEXT"
android:textColor="@color/white"