Bottom Appbar with Material Design 3

Bottom App Bar

The Bottom App Bar is an extension of Toolbar that displays navigation and key actions at the bottom of mobile screens.

Floating Action Button

Floating action buttons are used for a special type of promoted action. They are distinguished by a circled icon floating above the UI and have special motion behaviors related to morphing, launching, and the transferring anchor point.

Floating action buttons come in two sizes: the default and the mini. The size can be controlled with the fabSize attribute.

The background color of this view defaults to the your theme's colorSecondary. If you wish to change this at runtime then you can do so via setBackgroundTintList(ColorStateList).

A FAB is anchored to BottomAppBar by calling

CoordinatorLayout.LayoutParams.setAnchorId(int),

or by setting app:layout_anchor on the FAB in xml.

Note: The Material Design Guidelines caution against using an ExtendedFloatingActionButton with a BottomAppBar, so there is limited support for that use case. ExtendedFloatingActionButton can be anchored to the BottomAppBar, but currently animations and the cutout are not supported.

There are two modes which determine where

the FAB is shown relative to the BottomAppBar.

FAB_ALIGNMENT_MODE_CENTER mode is the primary mode with the FAB is centered.
FAB_ALIGNMENT_MODE_END is the secondary mode with the FAB on the side.

Do not use the android:background attribute or call BottomAppBar.setBackground because the BottomAppBar manages its background internally.

If you want to change your background color you can use app:backgroundTint.

To enable color theming for menu items you will also need to set the materialThemeOverlay attribute to a ThemeOverlay which sets the colorControlNormal attribute to the correct color. For example, if the background of the BottomAppBar is colorSurface, as it is in the default style, you should set materialThemeOverlay to @style/ThemeOverlay.MaterialComponents.BottomAppBar.Surface.

Create a bottom App Bar

👉Create a New Project named Android App Coding Blog.

👉Create a menu named bottom_menu

Right click on app>New>Android Resource File

Change Resource type from “Values” to Menu and

1. File name “bottom_menu”

<?xml version="1.0" encoding="utf-8"?>

    <menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/edit"
        android:icon="@drawable/edit_24"
        android:title="Edit"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/setting"
        android:icon="@drawable/settings_24"
        android:title="Settings"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/home"
        android:icon="@drawable/home_24"
        android:title="Home"
        app:showAsAction="ifRoom"/>

    <item
        android:id="@+id/more"
        android:title="More"
        app:showAsAction="never"/>

    </menu>

👉Create Vector Asset Image for Bottom App Bar Icons.

drawable > New > Vector Asset

👉activity_main.xml

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".BottomAppbar">
    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:backgroundTint="@android:color/holo_orange_light"
        app:navigationIcon="@drawable/menu_24"
        app:menu="@menu/bottom_menu"
        android:layout_gravity="bottom"/>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/todo"
        app:layout_anchor="@id/bottom_appbar"
        android:backgroundTint="@android:color/holo_red_light"
        app:srcCompat="@drawable/add_24"/>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="80dp"
        android:clipToPadding="false">
    <com.google.android.material.textview.MaterialTextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="25sp"
        android:layout_margin="15dp"
        android:text="@string/contents5"/>

    </androidx.core.widget.NestedScrollView>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>

👉MainActivity.kt

In this project we are not implementing any function for our bottom app bar for simplicity we are using Toast function on CLICK.

HERE IS CODE:

package com.example.androidappcodingblog


    import androidx.appcompat.app.AppCompatActivity
    import android.os.Bundle
    import android.widget.Toast
    import com.google.android.material.bottomappbar.BottomAppBar

    class BottomAppbar : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_bottom_appbar)

        val nav = findViewById<BottomAppBar>(R.id.bottom_appbar)
        // Handle navigation icon press
        nav.setNavigationOnClickListener {
            Toast.makeText(this, "I am bottom appbar menu", Toast.LENGTH_SHORT).show()
        }

        nav.setOnMenuItemClickListener {
            when (it.itemId) {
                R.id.edit -> {
                    Toast.makeText(this, "Iam edit", Toast.LENGTH_SHORT).show()
                    return@setOnMenuItemClickListener true
                }
                R.id.setting -> {
                    Toast.makeText(this, "Iam setting", Toast.LENGTH_SHORT).show()
                    return@setOnMenuItemClickListener true

                }
                R.id.home -> {
                    Toast.makeText(this, "I am home", Toast.LENGTH_SHORT).show()
                    return@setOnMenuItemClickListener true

                }
                R.id.search -> {
                    Toast.makeText(this, "I am search", Toast.LENGTH_SHORT).show()
                    return@setOnMenuItemClickListener true
                }

                else -> false
                }

            }
        }
    }