CODEWITHSUNDEEP
androidtextviewandroid-canvaspaintdraw
Jonno
Jonno

Reputation: 1552

Android - Stroke on text, extending textview / view

I have managed to create paint which creates a very nice smooth stroke around text. But I am having trouble in making it draw to where I need it, mainly I believe to the fact I am extending View and not TextView?

My aim is to be able to have a stroke around any text on my layout I desire.

DrawView.java

    public class DrawView extends View{
        Paint paint = new Paint();
        String text = "Blank";

        public DrawView(Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);

        }

    public DrawView(Context context, AttributeSet attrs) {
        super(context, attrs);


    }

    public DrawView(Context context) {

        super(context);

    }



    public void setText(String text) {
        this.text = text;
     }




    public String getText() {
        return text;
    }

    public void draw(Canvas canvas ) {

        Paint strokePaint = new Paint();
        strokePaint.setARGB(255, 0, 0, 0);
        strokePaint.setTextSize(28);
        //strokePaint.setTypeface(tf);
        strokePaint.setStyle(Paint.Style.STROKE);
        strokePaint.setStrokeJoin(Paint.Join.ROUND);
        strokePaint.setStrokeCap(Paint.Cap.ROUND);
        strokePaint.setStrokeWidth(9);
        strokePaint.setAntiAlias(true);


        Paint textPaint = new Paint();
        textPaint.setARGB(255, 255, 255, 255);
        textPaint.setTextSize(28);
        //textPaint.setTypeface(tf);
        textPaint.setAntiAlias(true);

        canvas.drawText(text, 99, 99, strokePaint);
        canvas.drawText(text, 99, 101, strokePaint);
        canvas.drawText(text, 101, 99, strokePaint);
        canvas.drawText(text, 101, 101, strokePaint);
        canvas.drawText(text, 100, 100, textPaint);

        super.draw(canvas);
    }

}

xml

  <com.shadow.pets.DrawView
        android:id="@+id/energyText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
      />

This view overrides my whole LinearLayout and I have no control over where it draws? If I extend TextView I cannot get it to work at all!

Sorry if its confusing, I know I must be off the rails but have been trying for hours and cant find the words to make it any clearer!

Upvotes: 0

Views: 2645

Answers (1)

DevOfZot
DevOfZot

Reputation: 1392

I think the problem is that right now, your DrawView doesn't "know" how big it is, so Wrap_content just takes up all available space. You can fix that by overriding onMeasure(). You probably want to wrap to the size of your text like this:

@Override
protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec){
   super.onMeasure(widthMeasureSpec, heightMeasureSpec);
   int padding = 10;
   Rect r = new Rect();
   Paint p = new Paint();;
   p.setTextSize(28);
   p.getTextBounds(text, 0, text.length(), r);
   this.setMeasuredDimension(r.right - r.left + padding, 
       r.bottom - r.top + padding);
}

The "padding" is to add extra size for the Stroke border. Then in your draw class, change your drawTexts to look like this:

int padding = 5;
int x = this.getLeft() + padding;
int y = this.getBottom() - padding;
canvas.drawText(text, x - 1, y - 1, strokePaint);
canvas.drawText(text, x - 1, y + 1, strokePaint);
canvas.drawText(text, x + 1, y - 1, strokePaint);
canvas.drawText(text, x + 1, y + 1, strokePaint);
canvas.drawText(text, x, y, textPaint);

This should work, in theory. When I tried it, it looked great as long as the DrawView was the left-most view in the LinearLayout, but it was partially overwritten when there was a TextView and then a DrawView. I'm not sure why :( But I hope this helps get you started!

Upvotes: 1

Related Questions