9

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. Stroked Text in Photoshop

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. Weird line above text view

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);
}
Swan
  • 886
  • 1
  • 9
  • 23
  • 3
    call drawText twice with different colors and stroke width (or if you can have that fancy black shadow, call it three times) – pskink Apr 08 '15 at 05:49
  • 1
    @pskink Yes, I have tested that too. But it doesn't work out as expected. – Swan Apr 08 '15 at 06:09
  • @pskink 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. – Swan Apr 08 '15 at 06:33
  • change Style.FILL to Style.STROKE and draw the thicker text first and then then normal text – pskink Apr 08 '15 at 06:38
  • @pskink 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? – Swan Apr 08 '15 at 07:09
  • 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 – pskink Apr 08 '15 at 07:25
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/74698/discussion-between-sh-and-pskink). – Swan Apr 08 '15 at 07:36

2 Answers2

7

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.

Swan
  • 886
  • 1
  • 9
  • 23
5

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).

enter image description here

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

Community
  • 1
  • 1
Peter
  • 4,021
  • 5
  • 37
  • 58