How to make rounded corners for Toolbar?

Viewed 3591

I've seen other answers and they all apply to actionbars not toolbars and they require creating new shapes.

Is there a simple way to do this using the styles.xml?

2 Answers

It isn't what you are looking for because it is not with a xml.
Currently (1.2.0-beta01 and 1.3.0-alpha01) the Toolbar or MaterialToolbar don't support a shapeAppearance style as other components in the styles.xml.
But you can use in any case the ShapeAppearanceModel provided by the Material Components Library.

In your layout:

<com.google.android.material.appbar.MaterialToolbar
    android:id="@+id/toolbar"
    style="@style/Widget.MaterialComponents.Toolbar.Primary"
    android:layout_margin="4dp"
    ..>

Then just apply the ShapeAppearanceModel with rounded corners:

    float radius = getResources().getDimension(R.dimen.default_corner_radius); //32dp
    MaterialToolbar toolbar = findViewById(R.id.toolbar);
  
    MaterialShapeDrawable materialShapeDrawable = (MaterialShapeDrawable)toolbar.getBackground();
    materialShapeDrawable.setShapeAppearanceModel(materialShapeDrawable.getShapeAppearanceModel()
            .toBuilder()
            .setAllCorners(CornerFamily.ROUNDED,radius)
            .build());

enter image description here

Create a drawable resource (e.g curvedToolbar.XML):

  <?xml version="1.0" encoding ="utf-8"?>
  <shape xmls:android="http://schemas.android.com/apk/red/android"
       android:shape="rectangle">

        <corners android:radius= "20dp"/>

    </shape>

Add it to your toolbar like this:

   <androidx.appcompat.widget.Toolbar
      ......
      android:background= "@drawable/curvedToolbar"
   />
Related