BottomAppBar and handle OnClickNavigation

Question

I'm attempting to implement a BottomAppBar within my Android App.

The MainActivity XML looks like:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <fragment
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:layout_weight="1"
        app:defaultNavHost="true"
        app:navGraph="@navigation/mobile_navigation" />
<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:id="@+id/coordinator"
    android:layout_height="match_parent">
    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@drawable/rpurple"
        android:backgroundTint="@color/reallyDarkPurple"
        style="@style/Widget.MaterialComponents.BottomAppBar.PrimarySurface"
        app:menu="@menu/bottom_nav_menu"
        app:tint = "@color/white"
        >
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <ImageButton
                android:id="@+id/navigation_profile"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:src="@drawable/user"
                android:padding="5dp"
                app:tint  = "@color/lightPurple"
                android:scaleType="centerCrop"
                android:background="@android:color/transparent"
                android:adjustViewBounds="true"/>
            <ImageButton
                android:id="@+id/historyBtn"
                android:layout_width="60dp"
                android:padding="5dp"
                android:layout_marginEnd="10dp"
                android:layout_height="60dp"
                android:src="@drawable/clock"
                android:layout_alignParentEnd="true"
                app:tint  = "@color/lightPurple"
                android:scaleType="centerCrop"
                android:background="@android:color/transparent"
                android:adjustViewBounds="true"/>
        </RelativeLayout>


    </com.google.android.material.bottomappbar.BottomAppBar>
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="56dp"
        android:layout_height="56dp"
        android:backgroundTint="@color/lightPurple"
        app:srcCompat="@drawable/addwhite"
        app:tint = "@color/white"
        app:borderWidth="0dp"
        android:adjustViewBounds="true"
        app:fabCustomSize="56dp"
        app:layout_anchor="@id/bottomAppBar"
        />

</androidx.coordinatorlayout.widget.CoordinatorLayout>
</RelativeLayout>

And i've implemented the code like so within my MainActivity:

BottomAppBar bottomAppBar = findViewById(R.id.bottomAppBar);
bottomAppBar.replaceMenu(R.menu.bottom_nav_menu);
setSupportActionBar(bottomAppBar);

Ideally what I'd like to do is navigate between 4 seperate fragments, A,B,C,D using the BottomAppBar's ImageButtons R.id.navigation_profile & R.id.historyBtn A key part of the requirement is that the buttons are on opposite sides of the screen.

How could I handle the OnClick for each imageButton and then the subsequent fragment transition?

Answer 1

What I understand that you want to add a navigation that have 4 fragment to the bottomAppBar. You can do it by remove the relative layout that in the BottomAppBar and include it as an item in a menu like this

first add that to the dependencies

  implementation 'androidx.coordinatorlayout:coordinatorlayout:1.1.0'
  implementation 'com.google.android.material:material:1.2.1'

your main Activity

<?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=".MainActivity"
>
<FrameLayout
    android:id="@+id/hostFragment"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:backgroundTint="#009FFF"

    app:layout_anchor="@id/bottomAppBar"
    app:maxImageSize="35dp"/>

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bottomAppBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:fabAlignmentMode="center"
    android:backgroundTint="#3498DB"
    app:fabCradleVerticalOffset="10dp"
    app:fabCradleMargin="8dp"
    app:hideOnScroll="true"
    app:fabCradleRoundedCornerRadius="20dp"
    app:menu="@menu/menu"
    style="@style/Widget.MaterialComponents.BottomAppBar"
    android:theme="@style/AppThemeMaterial"
    >

</com.google.android.material.bottomappbar.BottomAppBar>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

and the menu file should look something like this

<?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/menu_home"
    android:title="Home"
    app:showAsAction="always" />
<item
    android:id="@+id/menu_message"
    android:title="Message"
    app:showAsAction="always" />

 </menu>

add this to the style file

  <style name="AppThemeMaterial" 
     parent="Theme.MaterialComponents.Light.DarkActionBar">
     <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

you can handle the item on the bottom like that

 BottomAppBar bottomAppBar=findViewById(R.id.bottomAppBar) ;
 bottomAppBar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem item) {
            Fragment itemSelected = null ;
            switch (item.getItemId()){
                case R.id.menu_home:
                    itemSelected=new Home();
                    break;
                case R.id.menu_message:
                    itemSelected=new Message();
                    break;
                
            }   getSupportFragmentManager().beginTransaction().replace(R.id.hostFragment,itemSelected).commit();
            return true;
        }

and you can use this to decide what fragment show when you open the activity put in onCreate

getSupportFragmentManager().beginTransaction().replace(R.id.hostFragment,
            new Home()).commit();

Answer 2

In Kotlin we can do this, also

     private lateinit var bottomNavigationView: BottomNavigationView

     bottomNavigationView = binding.bottomNavView!!

     bottomNavigationView.setOnItemReselectedListener {
        when (it.itemId) {
            R.id.navigation_play-> startGame()
        }
    }

this will give you the result, but with two clicks...

A little bit different is (with one click)

        bottomNavigationView.setOnItemSelectedListener { item ->
           when (item.itemId) {
            R.id.navigation_play-> startGame()
        }
        true
    }