CODEWITHSUNDEEP
androidbottomnavigationviewcustom-viewandroid-bottomnavandroid-bottomappbar
Ahmad Mahmoud Saleh
Ahmad Mahmoud Saleh

Reputation: 169

Android : Add rounded corners to BottomAppBar with circular anchored FAB

I want to achieve something similar to this view, bottom navigation with top left and right rounded corner radius and a and anchored FAB enter image description here

Upvotes: 4

Views: 3119

Answers (1)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363439

You can use a standard BottomAppBar:

   <com.google.android.material.bottomappbar.BottomAppBar
        android:layout_margin="xxdp"
        app:fabAlignmentMode="center"
        app:fabCradleRoundedCornerRadius="2dp"
        app:fabCradleVerticalOffset="8dp"
        app:fabCradleMargin="8dp" />

and then change the ShapeAppearanceModel:

    BottomAppBar bottomAppBar = findViewById(R.id.bottomAppBar);
    MaterialShapeDrawable bottomBarBackground = (MaterialShapeDrawable) bottomAppBar.getBackground();
    bottomBarBackground.setShapeAppearanceModel(
            bottomBarBackground.getShapeAppearanceModel()
                    .toBuilder()
                    .setAllCorners(new RoundedCornerTreatment()).setAllCornerSizes(new RelativeCornerSize(0.5f))
                    .build());

enter image description here

Just a note about new RelativeCornerSize(0.5f): It changed in 1.2.0-beta01. Before it was new RelativeCornerSize(50)

Upvotes: 3

Related Questions