how to make an Angled cuts top app bar using material design?

Question

I found this guideline in material design io site, could anyone share your idea, how to make this using material design, not 3rd party plugin.

Trying to reproduce using cut shape & an overlapping bottom sheet of Material Design, I looking standard guidelines to make this UI.

You can use a [`MaterialShapeDrawable`](https://blog.octo.com/en/android-materialshapedrawable/) — Gavin Wright, Aug 28 '20 at 04:34

score 1 · Accepted Answer · answered Aug 28 '20 at 06:13

This component is called Backdrop but it is not available.

If the component is fixed you can use something like:

<androidx.coordinatorlayout.widget.CoordinatorLayout     
   android:background="@color/colorPrimary"
   ..>

   <com.google.android.material.appbar.AppBarLayout/>

   <androidx.constraintlayout.widget.ConstraintLayout 
       android:id="@+id/ll"
       ..>

and then apply to the layout a MaterialShapeDrawable

    val layout : ConstraintLayout = findViewById(R.id.ll)
    val  radius = resources.getDimension(R.dimen.cornerSize24);

    val shapeAppearanceModel: ShapeAppearanceModel = ShapeAppearanceModel()
        .toBuilder()
        .setTopLeftCorner(CornerFamily.CUT,radius)
        .build();

    val shapeDrawable = MaterialShapeDrawable(shapeAppearanceModel);
    shapeDrawable.fillColor = AppCompatResources.getColorStateList(this,R.color.white)
    ViewCompat.setBackground(layout,shapeDrawable);

If you want to use a BottomSheet you can check this answer using as shapeAppearanceOverlay

  <style name="ShapeAppearanceOverlay.App.BottomSheetDialog" parent="">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">0dp</item>
    <item name="cornerSizeTopLeft">24dp</item>
  </style>

how to make an Angled cuts top app bar using material design?

1 Answers1