Creating a triangle shape at the bottom of layout

Question

I'm working on an android application that contains a shape at the top of the activity and I'm trying to implement it but struggling to do it.

I have tried to create a drawable file that create a triangle shape and sets up the bottom corner radius to match the shape above but not working. anyone can help me, please.

Answer 1

You can use the EdgeTreatment included in the official Material Components Library.

Just extend the EdgeTreatment with something like:

public class MyTriangleEdge extends EdgeTreatment {

  private final float size;
  private final boolean inside;

  public MyTriangleEdge(float size, boolean inside) {
    this.size = size;
    this.inside = inside;
  }

  @Override
  public void getEdgePath(
      float length, float center, float interpolation, @NonNull ShapePath shapePath) {
    shapePath.lineTo(0, 0);
    shapePath.lineTo(center, inside ? size  : -size );
    shapePath.lineTo(length, 0);
  }

and then apply it:

MyTriangleEdge edgeTreatment = new MyTriangleEdge(height,false);

LinearLayout linearLayout= findViewById(R.id.xxxx);
ShapeAppearanceModel shapeAppearanceModel = new ShapeAppearanceModel()
    .toBuilder()
    .setBottomEdge(edgeTreatment)
    .build();

MaterialShapeDrawable shapeDrawable = new MaterialShapeDrawable(shapeAppearanceModel);

ViewCompat.setBackground(linearLayout,shapeDrawable);

Also for edge treatments, the parent view must disable clipping of children by setting android:clipChildren="false" in xml.