Skip to content

Instantly share code, notes, and snippets.

@rsicarelli
Last active December 29, 2021 18:26
Show Gist options
  • Save rsicarelli/770863bc2833b0eab991 to your computer and use it in GitHub Desktop.
Save rsicarelli/770863bc2833b0eab991 to your computer and use it in GitHub Desktop.
An programmatically example on how to create a Triangle view in Android.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="TriangleShape">
<attr name="triangleType">
<enum name="centerTop" value="0" />
<enum name="leftBottom" value="1" />
<enum name="rightBottom" value="2" />
<enum name="centerBottom" value="3" />
<enum name="leftTop" value="4" />
</attr>
<attr name="triangleColor" format="color" />
</declare-styleable>
</resources>
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<br.com.rsicarelli.example.Triangle
android:id="@+id/markerTriangle"
android:layout_width="48dp"
android:layout_height="40dp"
android:layout_gravity="center_horizontal"
app:triangleColor="@android:color/black"
app:triangleType="leftTop" />
</FrameLayout>
public class Triangle extends View {
private Path path;
private Paint shapePaint;
private int fillColor;
private int type;
public Triangle(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs);
}
private void init(Context context, AttributeSet attrs) {
TypedArray attr = context.obtainStyledAttributes(attrs, R.styleable.TriangleShape, 0, 0);
type = attr.getInt(R.styleable.TriangleShape_triangleType, Type.CENTER_TOP);
fillColor = attr.getColor(R.styleable.TriangleShape_triangleColor, Color.WHITE);
path = new Path();
shapePaint = new Paint();
attr.recycle();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
switch (type) {
case Type.LEFT_BOTTOM: {
path.moveTo(0, 0);
path.lineTo(0, getHeight());
path.lineTo(getWidth(), getHeight());
path.close();
break;
}
case Type.RIGHT_BOTTOM: {
path.moveTo(0, getHeight());
path.lineTo(getWidth(), getHeight());
path.lineTo(getWidth(), 0);
path.close();
break;
}
case Type.CENTER_BOTTOM: {
path.moveTo(0, 0);
path.lineTo(getWidth() / 2, getHeight());
path.lineTo(getWidth(), 0);
path.close();
break;
}
case Type.LEFT_TOP: {
path.moveTo(0, 0);
path.lineTo(0, getHeight());
path.lineTo(getWidth(), 0);
break;
}
default: {
path.moveTo(0, getHeight());
path.lineTo(getWidth() / 2, 0);
path.lineTo(getWidth(), getHeight());
path.close();
break;
}
}
shapePaint.setStrokeJoin(Paint.Join.ROUND);
shapePaint.setAntiAlias(true);
shapePaint.setColor(getFillColor());
shapePaint.setStyle(Paint.Style.FILL);
canvas.drawPath(path, shapePaint);
}
public int getFillColor() {
return fillColor;
}
public void setFillColor(@ColorRes int fillColor) {
this.fillColor = fillColor;
}
static class Type {
public static final int CENTER_TOP = 0;
public static final int LEFT_BOTTOM = 1;
public static final int RIGHT_BOTTOM = 2;
public static final int CENTER_BOTTOM = 3;
public static final int LEFT_TOP = 4;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment