androidandroid-edittexttextviewcustom-viewtextstyle

Beautiful Stroked Text in Android


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

Solution

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