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);
}
}
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.
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.
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.
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"
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With