androidmaterial-designandroid-toolbarmaterial-components-androidandroid-shapedrawable

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

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. Angled cuts top app bar using material design

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

Solution

  • 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);

    enter image description here

    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>