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

If you using newest Material components with related themes and want to put some layout into BottomAppBar you have to override BottomAppBar style in your themes.xml to remove nav drawer icon space at start (left side)

<style name="AppTheme.BottomAppBar" parent="@style/Widget.MaterialComponents.BottomAppBar">
    <item name="contentInsetStart">0dp</item>
    <item name="contentInsetStartWithNavigation">0dp</item>
</style>

and apply in your layout

        <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bar"
        style="@style/AppTheme.BottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:fabAlignmentMode="center">

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/nav_view"
            style="@style/Widget.MaterialComponents.BottomNavigationView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/bgDefault"
            app:labelVisibilityMode="unlabeled"
            app:menu="@menu/bottom_nav_menu" />

    </com.google.android.material.bottomappbar.BottomAppBar>