4

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

Ahmad Mahmoud Saleh
  • 169
  • 1
  • 4
  • 15
  • For the BottomAppBar with rounded corners check this [answer](https://stackoverflow.com/a/59056217/2016562). – Gabriele Mariotti May 16 '20 at 18:05
  • @GabrieleMariotti, Thanks for your answer, I can achieve the top left and right corner radii alone, I also can achieve the anchored button, but I can not combine the 2 together because they are opposite to each other. – Ahmad Mahmoud Saleh May 17 '20 at 08:11
  • Why are they opposite to each other? can you post the code? – Gabriele Mariotti May 17 '20 at 09:07
  • The idea is that if you want corner radius you can add custom shape with top right and left corner radii to the bottom navigation view component and if you added this to the app bottom bar component, it will hide the margin of the app bar component which is used to draw the anchor of the fab button, so i can have one of the 2 options. – Ahmad Mahmoud Saleh May 17 '20 at 19:55

1 Answers1

3

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)

Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841