How to display Text in Android Canvas ShapeDrawable with in the RectShape or OvalShape?

Question

I'm trying to display Text in RectShape which uses ShapeDrawable to display in Canvas.

I'm able to display RectShape in this code, but looking for how to display the String on that!

  public class CustomDrawableView extends View {
  private ShapeDrawable mDrawable;

  public CustomDrawableView(Context context) {
  super(context);

  int x = 10;
  int y = 10;
  int width = 300;
  int height = 50;

  mDrawable = new ShapeDrawable(new OvalShape());
  mDrawable.getPaint().setColor(0xff74AC23);
  mDrawable.setBounds(x, y, x + width, y + height);
  }

  protected void onDraw(Canvas canvas) {
  mDrawable.draw(canvas);
  }
  }

or

public class ShapeDrawableTest extends View {

    ShapeDrawable shapes = new ShapeDrawable();

    public ShapeDrawableTest(Context context) {
        super(context);
    }

    public ShapeDrawableTest(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        shapes.draw(canvas);

    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            int x = (int) event.getX(); // Use getX(int) for multi-finger
                                        // gestures
            int y = (int) event.getY();

            makeShapeDrawable(x, y);
            invalidate();
            return (true); // Handled touch event
        } else {
            return (false); // Did not handle touch event
        }
    }

    private void makeShapeDrawable(int x, int y) {
        int maxWidth = getWidth() / 10;
        int maxHeight = getHeight() / 10;
        Shape shape;

        shape = new RectShape();

        shapes = new ShapeDrawable(shape);
        int width = RandomUtils.randomInt(maxWidth) + 5;
        int height = RandomUtils.randomInt(maxHeight) + 5;
        shapes.setBounds(x - width / 2, y - height / 2, x + width / 2, y
                + height / 2);
        shapes.getPaint().setColor(Color.BLUE);

    }
}

What I tried is:

public class CustomDrawableView extends View {
    public ShapeDrawable mDrawable;

      public CustomDrawableView(Context context) {
      super(context);

      }


        public CustomDrawableView(Context context, AttributeSet attrs) {
            super(context, attrs);
            int x = 10;
          int y = 10;
          int width = 300;
          int height = 50;

          mDrawable = new ShapeDrawable(new OvalShape());
          //mDrawable.getPaint().setColor(0xff74AC23);
          final String s = "Hello";
          Paint p = new Paint();
            Rect bounds = new Rect();

            bounds.set(x, y, x + width, y + height);
            p.setTextSize(20);
            p.setColor(Color.YELLOW);
           p.getTextBounds(s, 0, s.length(), bounds);
          mDrawable.getPaint().getTextBounds(s, 0, s.length(), bounds);
          mDrawable.setBounds(x, y, x + width, y + height);



        }
//      public CustomDrawableView(Context context, AttributeSet attrs, int defStyle) {
//          super(context, attrs, defStyle);
//
//      }

        public void onDraw(Canvas canvas) {
      mDrawable.draw(canvas);
      }
      }

Screenshot:

enter image description here

In `onDraw` method after `mDrawable.draw(canvas);`, add `canvas.drawText(...)`. Do you want this? — Manish Mulimani, Aug 27 '14 at 07:22
Why would you want to "merge" the text in the ShapeDrawable and not just drawing on top of it (relatively easy)? If you need a Drawable interface, you could instead draw the ShapeDrawable and the text on a Bitmap and then convert the Bitmap in a BitmapDrawable. — Gil Vegliach, Aug 29 '14 at 21:21
What you want is REALLY easy to achieve just using what the framework gives you by default. Why do you want/need to roll your own custom drawable/view? — a.bertucci, Aug 31 '14 at 14:43

score 1 · Answer 1 · edited May 23 '17 at 11:58

1

The best option for me is to create a custom TextDrawable that handles properly how to display a piece of text. Then in your CustomDrawableView in your onDraw(Canvas c) method you can call it to display the text and the oval.

Take a look at this answer I wrote recently as it contains how to do it properly.

edited May 23 '17 at 11:58

Community

1
1

answered Aug 21 '14 at 09:06

Aldo Borrero

547
4
11

thanks pointing out the solution ! but unfortunately _setShapeDrawable_ like _setImageDrawable_ not available for Shape , _OvalShape_ including _ShapeDrawable_ ! in above code mDrawable reference no methods available for setting drawables ! – LOG_TAG Aug 21 '14 at 10:23
Sorry! I didn't explained better! But the idea is in your custom view (CustomDrawableView) use a LevelListDrawable in combination with TextDrawable and ShapeDrawable! – Aldo Borrero Aug 22 '14 at 06:35
I'm at work right know but if you need more help, I can prepare an example later at home ;) – Aldo Borrero Aug 22 '14 at 06:35
1

My bad I said LevelListDrawable where I want to say LayerDrawable (http://developer.android.com/reference/android/graphics/drawable/LayerDrawable.html)! – Aldo Borrero Aug 22 '14 at 06:55
1

Glups! My bad, I've been out since your last comment! Let me prepare an Android application to showcase it (I'll update the answer when I have something)! – Aldo Borrero Sep 03 '14 at 14:58

How to display Text in Android Canvas ShapeDrawable with in the RectShape or OvalShape?

1 Answers1

Linked