2

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?

Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
User104163
  • 532
  • 6
  • 17

2 Answers2

8

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

Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
  • How to fix this error: "android.graphics.drawable.ColorDrawable cannot be cast to com.google.android.material.shape.MaterialShapeDrawable" – User104163 Jul 15 '20 at 22:14
  • It shows up at the third line of the second code snippet – User104163 Jul 15 '20 at 22:14
  • @User104163 Are you using a `MaterialToolbar` or `androidx.Toolbar` ? – Gabriele Mariotti Jul 15 '20 at 22:15
  • oh sh*t. I need to concentrate more :) – User104163 Jul 15 '20 at 22:17
  • Hi I just have one more problem. I'm doing round corner for bottom left and bottom right but it's appearing like this as if pushed to the up-right position: https://i.ibb.co/wWz6VYB/Untitled.png – User104163 Jul 15 '20 at 23:40
  • @User104163 Using `.setBottomRightCorner(CornerFamily.ROUNDED,radius) .setBottomLeftCorner(CornerFamily.ROUNDED,radius)` I am not able to replicate your issue. Are you using a custom layout inside the `Toolbar`? – Gabriele Mariotti Jul 16 '20 at 05:36
  • No but I do get this error: Render problem: Path.op() not supported . Could this be why my toolbar is turning out this way? – User104163 Jul 16 '20 at 11:41
  • @User104163 check also this [post](https://stackoverflow.com/questions/59809654/how-to-solve-render-problem-path-op-not-supported). Use the version 1.2.0-beta01 or 1.1.0 – Gabriele Mariotti Jul 16 '20 at 11:52
  • I got the fix: it's to replace the material components dependency in Gradle with the newer version: `implementation 'com.google.android.material:material:1.2.0-alpha02'` – User104163 Jul 16 '20 at 11:57
  • 1
    ah, we found the fix at the same time :) – User104163 Jul 16 '20 at 11:59
  • The toolbar is still drawn the same incorrect way despite fixing the "Render problem" error. I guess the problem lies somewhere else :( – User104163 Jul 16 '20 at 12:24
  • What could the problem be? – User104163 Jul 16 '20 at 12:24
  • I found the problem. It's when I use `setSupportActionBar(toolbar);` to add the title and options menu to the toolbar. This method doesn't seem to work well with rounded corners. How do you add items to the toolbar? – User104163 Jul 16 '20 at 13:32
  • It can work with both, the toolbar using `toolbar.setTitle`, `toolbar.inflateMenu`) and the `setSupportActionBar()` using `getSupportActionBar().setTitle` and overriding the `onCreateOptionsMenu`. You have to check the styles you are using. – Gabriele Mariotti Jul 16 '20 at 13:42
  • oof. I was using `android:theme="@style/Widget.MaterialComponents.Toolbar.Primary"` thinking it's the same as using `style="@style/Widget.MaterialComponents.Toolbar.Primary`. That's where the error was. Sorry I keep giving you such a headache :) – User104163 Jul 16 '20 at 14:20
  • Hi sorry I swear this is the absolute last question: Is there a way to center the Title in the middle of the toolbar? Without creating a TextView – User104163 Jul 16 '20 at 14:36
  • This answer is good and indeed it works. However, it is a problem when using a Toolbar inside an AppBarLayout. The background gets the desired shape, but the shadow is still shown as rectangular – BamsBamx Apr 21 '22 at 21:52
  • @BamsBamx Maybe you should try to set `elevation` to `0dp` for AppBarLayout – charman Apr 29 '23 at 21:02
3

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"
   />
Jide
  • 54
  • 2