Beautiful Stroked Text in Android

Question

I know how to stroke text using custom views(EditText or TextView) but I couldn't able to achieve something beautiful like this one, which is done using Photoshop. And yes, it has outer shadow too.

What I have done so far is adjusting stroke width and stroke join style. However, if I increase the stroke width, the stroke took place the whole text. As far as I have searched, there is a library called MagicTextView but it also couldn't give the result like that above.

Update: I have tweaked things based on suggestion by @pskink. It works now. However I can't drag anymore. If I drag that EditText, there is some weird lines showed up like this.

Here is the code:

@Override public void onDraw(Canvas canvas) {
  final int x = this.getLeft();
  final int y = this.getBottom();

  mText = this.getText().toString();

  p.setStrokeWidth(30);
  p.setStyle(Style.STROKE);
  p.setStrokeJoin(Join.ROUND);
  p.setColor(0xffffffff);

  canvas.drawText(mText, x, y, p);

  p.setStyle(Style.FILL);
  p.setColor(0xff000000);

  canvas.drawText(mText, x, y, p);
}

Answer 1

After a few hours of tweaking, I have fixed the weird line issue stated in updated question. I think I should post here as the answer.

@Override public void onDraw(Canvas canvas) {
    mText = this.getText().toString();

    p.setStyle(Style.STROKE);
    p.setStrokeJoin(Join.ROUND);
    p.setShadowLayer(10, 1, 1, 0xcfcccccc);

    canvas.drawText(mText, 0, getLineHeight(), p);

    p.clearShadowLayer();
    p.setStrokeWidth(35);
    p.setStrokeJoin(Join.ROUND);
    p.setStyle(Style.STROKE);
    p.setColor(0xffffffff);

    canvas.drawText(mText, 0, getLineHeight(), p);

    p.setStyle(Style.FILL);
    p.setColor(0xff000000);

    canvas.drawText(mText, 0, getLineHeight(), p);
    canvas.translate(xPos, yPos);
}

xPos and yPos are x and y values from ACTION_MOVE onTouch event. And We need to add the line height as a Y for the canvas text.

Answer 2

However, if I increase the stroke width, the stroke took place the whole text.

If the problem is that the stroke is centered, and you want it outside the text, see: Android Paint stroke width positioning

You must precalculate the desired width and height according to your stroke.

I would suggest trying a very bold font. In the image below, the white stroke would be centered on the red line (which would be the outline of each black letter).

In response to your update:

If I drag that EditText, there is some weird lines showed up.

The line might be the result of focus on the EditText. You can remove the focus explicitly: Android: Force EditText to remove focus?

Alternatively, you can style the focus (perhaps to be invisible, if it doesn't adversely affect the rest of your UI): How to change the color of a focused EditText when using "android:Theme.Holo.Light"?