How to draw polygon in android with text inside

Question

I need to draw such view with text inside. Text and color of figure have to be changeable. What is the best way to do it?

Answer 1

Once you want to draw dynamic graphics, you're into hand drawing territory, or using some 3rd party library which will do that simply for you.

Luckily, it's fairly straight forward to do it yourself. You can draw a polygon with a Canvas object, as in this example from this SO post:

Paint wallpaint = new Paint();
wallpaint.setColor(Color.GRAY);
wallpaint.setStyle(Style.FILL);

Path wallpath = new Path();
wallpath.reset(); // only needed when reusing this path for a new build
wallpath.moveTo(x[0], y[0]); // used for first point
wallpath.lineTo(x[1], y[1]);
wallpath.lineTo(x[2], y[2]);
wallpath.lineTo(x[3], y[3]);
wallpath.lineTo(x[0], y[0]); // there is a setLastPoint action but i found it not to work as expected

canvas.drawPath(wallpath, wallpaint);

There's a couple of ways to attach your Canvas to some UI object which will get displayed on screen, the main ones which are described in the docs Canvas and Drawables page, such as

1. Rendering to a Bitmap, and then adding to, for example, an ImageView
2. Extending a UI widget, such as View, and updating it in the onDraw method

To change your polygon it's as simple as changing the x and y points in your lineTo methods above and the colors in the Paint. Make sure to update if you need to, which may require you manually re-rendering to a Bitmap if you choose method 1, or calling invalidate on the View if you choose method 2.

For the text to appear inside the polygon, you can either draw onto the Canvas also with the drawText method, or place a TextView over / on top of the View in your layout XML. If you want the text to be strictly inside the polygon you'll obviously have to do some calculation for placement and possibly line breaks and truncation.

See also the Custom Drawing man page.

Answer 2

You can achieve it using a triangle image like this:

 <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#FF2323"
    android:drawableLeft="@drawable/triangle"
    android:gravity="center"
    android:paddingRight="10dp"
    android:text="In Process"
    android:textColor="@android:color/white" />

[] This is the image. Click between the square brackets to save it. You wont be able to see it over a white background as it is white itself.

If you want to adjust the size of this image you set the image from activity like this:

textView.setCompoundDrawablesWithIntrinsicBounds(new BitmapDrawable(getResources(), getResizedBitmap(this, R.drawable.triangle, 64, 64)), null, null, null);

change 64 to what ever suits you the best.

and here is the resize method:

public static Bitmap getResizedBitmap(Context activity,int imgid,int width,int height) {
    Bitmap bMap = BitmapFactory.decodeResource(activity.getResources(),imgid);
    Bitmap bMapScaled = Bitmap.createScaledBitmap(bMap, width,height, true);
    return bMapScaled;
}