Android How to draw a regular polygon via xml or programical

Question

Is there any way to draw polygonal shapes on Android xml layouts?

or is any helper class as library to draw them?

Answer 1

I am using enhanced version of this Class

See working sample on GitHub (https://github.com/hiteshsahu/Benzene)

Drawable Class

import android.graphics.Canvas;
import android.graphics.ColorFilter;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;

/**
 * Originally Created by AnderWeb (Gustavo Claramunt) on 7/10/14.
 */
public class PolygonalDrwable extends Drawable {

    private int numberOfSides = 3;
    private Path polygon = new Path();
    private Path temporal = new Path();
    private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);

    public PolygonalDrwable(int color, int sides) {
        paint.setColor(color);
        polygon.setFillType(Path.FillType.EVEN_ODD);
        this.numberOfSides = sides;
    }

    @Override
    public void draw(Canvas canvas) {
        canvas.drawPath(polygon, paint);
    }

    @Override
    public void setAlpha(int alpha) {
        paint.setAlpha(alpha);
    }

    @Override
    public void setColorFilter(ColorFilter cf) {
        paint.setColorFilter(cf);
    }

    @Override
    public int getOpacity() {
        return paint.getAlpha();
    }

    @Override
    protected void onBoundsChange(Rect bounds) {
        super.onBoundsChange(bounds);
        computeHex(bounds);
        invalidateSelf();
    }

    public void computeHex(Rect bounds) {

        final int width = bounds.width();
        final int height = bounds.height();
        final int size = Math.min(width, height);
        final int centerX = bounds.left + (width / 2);
        final int centerY = bounds.top + (height / 2);

        polygon.reset();
        polygon.addPath(createHexagon(size, centerX, centerY));
        polygon.addPath(createHexagon((int) (size * .8f), centerX, centerY));
    }

    private Path createHexagon(int size, int centerX, int centerY) {
        final float section = (float) (2.0 * Math.PI / numberOfSides);
        int radius = size / 2;
        Path polygonPath = temporal;
        polygonPath.reset();
        polygonPath.moveTo((centerX + radius * (float)Math.cos(0)), (centerY + radius
                * (float)Math.sin(0)));

        for (int i = 1; i < numberOfSides; i++) {
            polygonPath.lineTo((centerX + radius * (float)Math.cos(section * i)),
                    (centerY + radius * (float)Math.sin(section * i)));
        }

        polygonPath.close();
        return polygonPath;
    }
}

Set drawable to any Imageview like this

//Triangle
((ImageView) findViewById(R.id.triangle))
                .setBackgroundDrawable(new PolygonalDrwable(Color.GREEN, 3));

        //Square
        ((ImageView) findViewById(R.id.square))
                .setBackgroundDrawable(new PolygonalDrwable(Color.MAGENTA, 4));

        //Pentagon
        ((ImageView) findViewById(R.id.pentagon))
                .setBackgroundDrawable(new PolygonalDrwable(Color.LTGRAY, 5));


        //Hexagon
        ((ImageView) findViewById(R.id.hex))
                .setBackgroundDrawable(new PolygonalDrwable(Color.RED, 6));


        //Heptagon
        ((ImageView) findViewById(R.id.hept))
                .setBackgroundDrawable(new PolygonalDrwable(Color.MAGENTA, 7));


        //Octagon
        ((ImageView) findViewById(R.id.oct))
                .setBackgroundDrawable(new PolygonalDrwable(Color.YELLOW, 8));

Answer 2

You can create custom drawable and shapes as drawable resources.

Right click on the "drawable" folder in Android Studio and select New->Drawable Resource File.

Here is a decent tutorial for shapes and strokes to get started.

Here is some example shapes ready to use.

Here is documentation for some more complex things you can do with drawables.