How to make rounded corners for Toolbar?

5.6k Views Asked by At

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

There are 2 best solutions below

18
On BEST ANSWER

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

0
On

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"
   />