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);
}

Glut

call drawText twice with different colors and stroke width (or if you can have that fancy black shadow, call it three times) – Aport

@Aport Yes, I have tested that too. But it doesn't work out as expected. – Glut

@Aport added my current version of code. I don't have that version of code now but I have tested it and what I encountered was that I couldn't able to position the stroked version of text with drawText. My view is going to drag by users. It is not programmatically generated. – Glut

change Style.FILL to Style.STROKE and draw the thicker text first and then then normal text – Aport

@Aport updated the code. It works now but as I have said above, my view is draggable by users. Now, I couldn't able to drag it as expected. Something wrong in my positioning calculation? – Glut

you don't have to draw it four times, draw it once with thick width and then second time with FILL, as of drag, i have no idea why it happens, see if your onDraw is called during the drag – Aport

Let us continue this discussion in chat. – Glut

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.

Glut

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"?

Panathenaea

Adjusting width and height didn't solve too. Those strokes still take place the whole text. – Glut

Try using a very bold font. – Panathenaea

Yes, I'm using bold font with android:textStyle="bold" – Glut

I mean the typeface itself should have thick characters. – Panathenaea

Yes, I know what you mean. 😃I am already using roboto condensed. It is thick, right? Could you please elaborate more on your edited suggestion? – Glut