Custom Triangle shape view in android

Hello Friends,

Find the below example for how to make different triangle shape in android using canvas.
How to create custom control for triangle view with onDraw() method.

1) Create attr.xml

<declare-styleable name="TriangleShapeView">
        <attr name="shape_bg_color" format="color" />
        <attr name="shape_direction" format="enum">
            <enum name="top_arrow" value="0" />
            <enum name="right_arrow" value="1" />
            <enum name="bottom_arrow" value="2" />
            <enum name="left_arrow" value="3" />
            <enum name="promotion_arrow" value="4" />
        </attr>
    </declare-styleable>

2) Create Class TriangleShapeView.java

public class TriangleShapeView extends View {

    private int shapeColor;
    private int shapeDirection;

    public TriangleShapeView(Context context) {
        super(context);
        stuff(null);
    }

    public TriangleShapeView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        stuff(attrs);
    }

    public TriangleShapeView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        stuff(attrs);
    }

    public TriangleShapeView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);

        stuff(attrs);

    }

    private void stuff(AttributeSet attrs) {

        if (attrs != null) {

            TypedArray array = getContext().obtainStyledAttributes(attrs, R.styleable.TriangleShapeView);
            int color = array.getColor(R.styleable.TriangleShapeView_shape_bg_color, ContextCompat.getColor(getContext(), R.color.light_grey_300));
            int direction = array.getInt(R.styleable.TriangleShapeView_shape_direction, 0);
            setColor(color);
            setShapeDirection(direction);
            array.recycle();
        }
    }

    private void setShapeDirection(int direction) {
        this.shapeDirection = direction;
    }

    public void setColor(int color) {
        this.shapeColor = color;
    }

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

        int width = getWidth() / 2;
        int height = getHeight() / 2;

        Path path = new Path();

        if (shapeDirection == 0) {
            // Top Direction Shape
            path.moveTo(0, 2 * height);
            path.lineTo(width, 0);
            path.lineTo(2 * width, 2 * height);
            path.lineTo(0, 2 * height);

        } else if (shapeDirection == 1) {
            //Right Direction Shape
            path.moveTo(0, 0);
            path.lineTo(2 * width, height);
            path.lineTo(0, 2 * height);
            path.lineTo(0, 0);

        } else if (shapeDirection == 2) {

            //Bottom Direction Shape

            path.moveTo(0, 0);
            path.lineTo(width, 2 * height);
            path.lineTo(2 * width, 0);
            path.lineTo(0, 0);

        } else if (shapeDirection == 3) {

            //Left Direction Shape
            path.moveTo(2 * width, 0);
            path.lineTo(0, height);
            path.lineTo(2 * width, 2 * height);
            path.lineTo(2 * width, 0);

        } else if (shapeDirection == 4) {

            //Promotion Direction Shape

            path.moveTo(width, 0);
            path.lineTo(width * 2, 0);
            path.lineTo(width * 2, width);
            path.lineTo(width, 0);

        }

        path.close();

        Paint p = new Paint();
        p.setColor(shapeColor);
        p.setAntiAlias(true);

        canvas.drawPath(path, p);

    }
}

3) Create layout.xml

<views.TriangleShapeView
            android:id="@+id/view_payment_mode_feature_triangle_view"
            android:layout_width="@dimen/dimen__20"
            android:layout_height="@dimen/dimen__20"
            android:layout_alignParentRight="true"
            android:layout_marginRight="@dimen/dimen__40"
            app:shape_color="@color/light_grey_300"
            app:shape_direction="top_arrow" />

Enjoy coding ;)