Issue with stroke in text, Android

Question

Here you can see what my problem is, I made a custom TextView in Android, to add stroke to some scores. But so far I'm having 2 separated texts instead of one with stroke...

Here is my code:

XML:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/game_end_share_relative_main"
    android:layout_width="@dimen/share_width"
    android:layout_height="@dimen/share_height"
    android:background="#000000" >

            <com.sharing.StrokeTextView
                android:id="@+id/user_share_points"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="3"
                android:textColor="@color/primary"
                android:layout_marginRight="16dp"
                style="@style/SecondaryFontFamily"
                android:textSize="70dp" />

And the custom TextView:

public class StrokeTextView extends TextView {
private int mStrokeColor;
private int mStrokeWidth;
private TextPaint mStrokePaint;

public StrokeTextView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    init(attrs);
}

public StrokeTextView(Context context, AttributeSet attrs) {
    super(context, attrs);
}

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

public void setStrokeColor(int color) {
    mStrokeColor = color;
}

public void setStrokeWidth(int width) {
    mStrokeWidth = width;
}

@Override
protected void onDraw(Canvas canvas) {
    if (mStrokePaint == null) {
        mStrokePaint = new TextPaint();
    }
    
    mStrokePaint.setTextSize(getTextSize());
    mStrokePaint.setTypeface(getTypeface());
    mStrokePaint.setFlags(getPaintFlags());
    
    mStrokePaint.setStyle(Paint.Style.STROKE);
    mStrokePaint.setColor(mStrokeColor);
    mStrokePaint.setStrokeJoin(Paint.Join.ROUND);
    mStrokePaint.setStrokeCap(Paint.Cap.ROUND);
    mStrokePaint.setStrokeWidth(mStrokeWidth);
    mStrokePaint.setShadowLayer(2.0f, 5.0f, 5.0f, Color.BLACK);
    
    mStrokePaint.setTypeface(Typeface.createFromAsset(getContext().getAssets(), "fonts/MikadoBlack.otf"));
    String text = getText().toString();
    canvas.drawText(text, getWidth() - (mStrokePaint.measureText(text) / 2),  getBaseline(), mStrokePaint);
    super.setTypeface(Typeface.createFromAsset(getContext().getAssets(), "fonts/MikadoBlack.otf"));
    super.onDraw(canvas);
}

}

Thanks for your help in advance :)

Jose

Answer 1

This is because the drawText in super class is drawing at a different position than yours. Try setting the content gravity to 'center' using View.setGravity(Gravity.CENTER) this may solve your problem. Also, if you are using padding on the view then you need to factor it in while calculating the origin for drawText method

 int hPadding = getPaddingLeft()+getPaddingRight();
 int contentAreaWidth = getWidth() - hPadding;
 canvas.drawText(text, contentAreaWidth - (mStrokePaint.measureText(text) / 2), getBaseline(), mStrokePaint);

This would help in aligning the stroked text with the normal text drawn in the super class.