how to make bottom app bar or bottom navigation bar like google home app?

Question

I want to make a layout like above. Can anyone help me how to do that? I have tried the new material bottom app bar. but I couldn\'t achieve this view.

Answer 1

@Artur's solution is a huge kick in the right direction, although it needs more fine tuning as google's material components has evolved.

my solution's screenshot:

build.gradle's dependencies:

implementation 'com.google.android.material:material:1.1.0-alpha10'
implementation 'androidx.appcompat:appcompat:1.1.0'
implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta2'

layout/activity_main.xml file:

menu/menu_bottom_navigation_main.xml file:

A few remarks:

1. I had to remove the FrameLayout as the middle-man, it didn't go well.

2. My main root is a ConstraintLayout. I only needed to add a coordinator layout for the bottom to behave well. notice that the coordinator's height is match_parent although it is only needed for the bottom app bar.

3. the bottom navigation view had to add android:outlineAmbientShadowColor and android:outlineSpotShadowColor as transparent and also transparent background, or devices running android q will have strange shadows painted on top of the bottom app bar.

4. the bottom app bar had to add app:contentInsetStart and app:contentInsetStartWithNavigation to be 0dp so that the navigation view won't get moved aside from the screen's start and look strange.

5. if you will use ConstraintLyaout as the root view, you can't constraint to the bottom navigation view. instaed you will need to constraint's bottom to bottom of parent, and add margin bottom like this: android:layout_marginBottom="@dimen/design_bottom_navigation_height"