How to put the android BottomAppBar with rounded corners

Question

I am using the BottomAppBar from google like this:

 <com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/vNavigationBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

The custom bottom bar is flat and I need to add rounded corners on the Bottom bar(image example bellow)

What should I do to make this work this way?

I strongly recommend not doing what you have in mind, since it goes against the Material Design Guidelines: https://material.io/design/components/app-bars-bottom.html# — S. Czop, Jan 28 '19 at 17:53

Gabriele Mariotti · Answer 1 · 2020-07-14T06:22:15.800

14

The BottomAppBar works with a MaterialShapeDrawable and you can apply to it rounded corners (using a RoundedCornerTreatment).

In your layout:

  <com.google.android.material.bottomappbar.BottomAppBar
      android:id="@+id/bottom_app_bar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:backgroundTint="@color/..."
      ../>

Then in the code define:

//Corner radius
float radius = getResources().getDimension(R.dimen.default_corner_radius);
BottomAppBar bottomAppBar = findViewById(R.id.bottom_app_bar);

MaterialShapeDrawable bottomBarBackground = (MaterialShapeDrawable) bottomAppBar.getBackground();
bottomBarBackground.setShapeAppearanceModel(
       bottomBarBackground.getShapeAppearanceModel()
                .toBuilder()
                .setTopRightCorner(CornerFamily.ROUNDED,radius)
                .setTopLeftCorner(CornerFamily.ROUNDED,radius)
                .build());

It works also with a fabCradle:

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bottomAppBar"
    app:fabAlignmentMode="center"
    app:fabCradleVerticalOffset="8dp"
    app:fabCradleMargin="8dp"
    .../>

It requires the version 1.1.0.

edited Jul 14 '20 at 06:22

answered Nov 26 '19 at 17:17

Gabriele Mariotti

320,139
94
887
841

not working `val shapeAppearanceModel = ShapeAppearanceModel() .toBuilder() .setTopRightCorner(CornerFamily.ROUNDED, 16f) .setTopLeftCorner(CornerFamily.ROUNDED, 16f) .build() ViewCompat.setBackground(bottom_appbar, MaterialShapeDrawable(shapeAppearanceModel))` – Akshay Raj. Jul 12 '20 at 02:55
@AkshayRaj. Your code **works**, just tried. But `16f != 16dp`. – Gabriele Mariotti Jul 12 '20 at 12:34
@AkshayRaj. I've updated the answer. The `BottomAppBar` provides a `MaterialShapeDrawable`. It is enough to apply the rounded corners to it changing the `ShapeAppearanceModel` – Gabriele Mariotti Jul 14 '20 at 06:25
1

This is correct answer if you are targeting `Android L` – Arshad Ali Nov 16 '20 at 07:29

score 5 · Answer 2 · edited Jan 28 '19 at 19:23

5

you can try add a shape drawable xml file and add the following code to it

<corners
    android:topLeftRadius="16dp"
    android:topRightRadius="16dp" />

And then set the BottomAppBar's background to the drawable

edited Jan 28 '19 at 19:23

Saikrishna Rajaraman

3,205
2
16
29

answered Jan 28 '19 at 16:46

Pabi Moloi

208
2
9

score 1 · Answer 3 · answered Jun 18 '19 at 14:09

according to this, you can create your customView class extended from BottomAppBar, and implement these code:

`@Override protected void onLayout(boolean changed, int left, int top, int 
 right, int bottom) {
 super.onLayout(changed, left, top, right, bottom);
 }
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    mNavigationBarWidth = getWidth();
    mNavigationBarHeight = getHeight();
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    mPath.reset();
    mPath = RoundedRect(0, 0, mNavigationBarWidth, mNavigationBarHeight, 50, 50, true);
    canvas.drawPath(mPath, mPaint);
}

`

remember just in every constructor of your custom class,do this:

mPath = new Path();
    mPaint = new Paint();
    mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    mPaint.setColor(Color.WHITE);
    setBackgroundColor(Color.TRANSPARENT);

How to put the android BottomAppBar with rounded corners

3 Answers3

Linked