Android Bottom App Bar + Floating Action Button

By Arvind Rai, August 21, 2023
On this page we will create Android bottom app bar with a floating action button.
1. To create bottom app bar, we need to understand following APIs.
CoordinatorLayout : Top-level application decor and container for a specific interaction with one or more child views.
BottomAppBar : An extension of Toolbar that supports a shaped background.
FloatingActionButton (FAB) : Used for a special type of promoted action. It looks like a circled icon floating above the UI.
2. The BottomAppBar cradles an attached FloatingActionButton.
3. The FloatingActionButton is anchored to BottomAppBar in two ways.
Using XML:
 <com.google.android.material.floatingactionbutton.FloatingActionButton
     ------
     app:layout_anchor="@id/bottom_app_bar" /> 
Programatically:
CoordinatorLayout.LayoutParams.setAnchorId(int) 
4. FAB is shown relative to the BottomAppBar using two modes.
FAB_ALIGNMENT_MODE_CENTER : Primary mode with the FAB is centred. 
FAB_ALIGNMENT_MODE_END : Secondary mode with the FAB on the side.
5. To set app bar background color, use app:backgroundTint. We should not use android:background attribute or BottomAppBar.setBackground because BottomAppBar manages its background internally.
6. A menu is attached to BottomAppBar to create action items.
<com.google.android.material.bottomappbar.BottomAppBar
   ------
   app:menu="@menu/bottom_app_bar_menu" /> 
7. A navigation icon is attached to BottomAppBar to open navigation drawer.
<com.google.android.material.bottomappbar.BottomAppBar
   ------
   app:navigationIcon="@drawable/ic_menu_24" /> 
8. To set menu item color, set materialThemeOverlay attribute to a ThemeOverlay which sets the colorControlNormal attribute to the correct color.

Now find the steps to create bottom app bar with floating action button.

Step-1: Create Menu for Bottom App Bar

res/menu/bottom_app_bar_menu.xml
<?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/navigation_chat"
        android:icon="@drawable/ic_chat_24"
        app:showAsAction="always"
        android:title="@string/title_chat"/>
    <item
        android:id="@+id/navigation_help"
        android:icon="@drawable/ic_help_24"
        app:showAsAction="always"
        android:title="@string/title_help" />
    <item
        android:id="@+id/navigation_settings"
        android:icon="@drawable/ic_settings_24"
        android:title="@string/title_settings"/>
    <item
        android:id="@+id/navigation_account"
        android:icon="@drawable/ic_account_24"
        android:title="@string/title_account"/>
</menu> 

Step-2: Create Layout

res/layout/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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="?attr/actionBarSize">

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_app_bar"
        style="@style/Theme.MyApplication"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:backgroundTint="@color/red"
        app:navigationIcon="@drawable/ic_menu_24"
        app:fabCradleMargin="5dp"
        app:navigationIconTint="@color/green"
        app:iconTint="@color/green"
        app:menu="@menu/bottom_app_bar_menu" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/green"
        app:srcCompat="@drawable/ic_search_24"
        app:fabSize="auto"
        app:layout_anchor="@id/bottom_app_bar" />

    <TextView
        android:id="@+id/myText"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginStart="9dp"
        android:layout_marginTop="9dp"
        android:layout_marginEnd="9dp"
        android:textAlignment="center"
        android:textSize="25sp" />
</androidx.coordinatorlayout.widget.CoordinatorLayout> 
Find the print screen of the output.
Android Bottom App Bar + Floating Action Button

Step-3: Handle Click Events

Bottom app bar contains container, navigation icon, floating action button (FAB), action items and overflow menu.
Android Bottom App Bar + Floating Action Button
Now find the activity class where we handle the click event. We have a TextView in our layout. We will display a message on click of items.
MainActivity.java
public class MainActivity extends AppCompatActivity {

    private ActivityMainBinding binding;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = ActivityMainBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());
        BottomAppBar bottomAppBar = findViewById(R.id.bottom_app_bar);
        TextView tv =  findViewById(R.id.myText);

        // Handle click on Navigation Item
        bottomAppBar.setNavigationOnClickListener(view -> {
            tv.setText("Navigation Item");
            }
        );
        // Handle click on action Item and menu item
        bottomAppBar.setOnMenuItemClickListener(menuItem -> {
            if (menuItem.getItemId() == R.id.navigation_help) {
                tv.setText("Action Item : Help");
            }
            else if (menuItem.getItemId() == R.id.navigation_chat) {
                tv.setText("Action Item : Chat");
            } else {
                tv.setText("Menu Item: " + menuItem.getTitle());
            }
            return true;
        });

        // Handle click on FAB
        FloatingActionButton fab = findViewById(R.id.fab);
        fab.setOnClickListener(view -> {
            tv.setText("FAB");
        });
    }
} 

Step-4: Configure Attributes

1. For BottomAppBar container :
app:backgroundTint : Sets color.
app:elevation : Sets elevation
android:minHeight : Sets minimum height

2. For navigation icon :
app:navigationIcon : Sets icon.
app:navigationIconTint : Sets color.

3. FAB attributes :
app:fabAlignmentMode : Sets alignment mode.
app:fabCradleMargin : Sets cradle margin.
app:fabCradleRoundedCornerRadius : Sets corner radius.
app:fabCradleVerticalOffset : Sets cradle vertical offset.
app:fabAnimationMode : Sets animation mode.

References

Download Source Code

POSTED BY
ARVIND RAI
ARVIND RAI
LEARN MORE












©2024 concretepage.com | Privacy Policy | Contact Us