Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to outline a TextView?

What I want to do? (blue will be changed as white) enter image description here

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:
enter image description here

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);
}
}
like image 483
Mustafa Güven Avatar asked Feb 26 '13 14:02

Mustafa Güven


People also ask

How do you add a border to TextView?

To add a border to Android TextView we need to create an XML containing shape as a rectangle file under the drawable's folder and set it as background to the TextView. <stroke> tag is used to set the border width and color.

How do you outline text on Android?

In order to get the outlined text effect, you draw the text twice: once with a thick outline and then the second time we draw the main text over the outline.

How do you put a border on Android?

Step 1 − Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project. Step 2 − Add the following code to res/layout/activity_main. xml. In the above code we have taken one text view with background as border so we need to create a file in drawable as boarder.


2 Answers

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"
like image 53
Mustafa Güven Avatar answered Oct 22 '22 21:10

Mustafa Güven


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

like image 42
Pavel Santaev Avatar answered Oct 22 '22 21:10

Pavel Santaev