How to handle Bottomappbar items selector?

Question

I'm currently working with the BottomAppBar for my Music app, with 4 menu items stay on the left and the FAB anchored on the right, each of the item will navigate to one function Fragment.

I want to set a selector to all 4 of these Menu items which is similar to BottomNavigationView that will have 2 states when selected and not selected. But so far I'm struggling to do it.

I already tried the selector in XML or programmatically setting it in code but none of these worked.

Here is the layout I want to achieve, sorry can't post the direct image because I do not have enough reputation.
https://i.stack.imgur.com/c0OiL.jpg

sanjeev · Accepted Answer · 2019-05-16T12:01:01.903

Edit 1:

Okay great, so I just checked it out and you will not be able to change the color of icons in the bottomappbar when selected similar to BottomNavigationView. But there's a hack around for it where you can add a BottomNavigationView alongside the BottomAppBar..

<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">

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_app_bar"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_gravity="bottom"
        app:backgroundTint="#008577"
        app:fabAlignmentMode="end">

           <com.google.android.material.bottomnavigation.BottomNavigationView
              android:id="@+id/navigation1"
              android:layout_width="match_parent"
              android:layout_height="56dp"
              android:background="?android:attr/windowBackground"
              app:itemBackground="@android:color/white"
              app:itemIconTint="@drawable/nav_item_colors"
              app:itemTextColor="@drawable/nav_item_colors"
              app:menu="@menu/navigation" />

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

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_attach_money_black_24dp"
        app:layout_anchor="@id/bottom_app_bar" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

In your case, create five menu items and disable the fifth menu item in the bnv. So your fab will appear in that place.

Old Answer:

Try this out:

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/navigation1"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:layout_alignParentBottom="true"
    android:layout_gravity="bottom"
    android:background="?android:attr/windowBackground"
    app:itemBackground="@android:color/white"
    app:itemIconTint="@drawable/nav_item_colors"
    app:itemTextColor="@drawable/nav_item_colors"
    app:menu="@menu/navigation" />

In drawable directory, create nav_item_colors:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#E15B49" android:state_checked="true" />
    <item android:color="@color/colorviolet" android:state_checked="false" />
</selector>

Please read my question, I'm using BottomAppBar, not BottomNavigationView — Đoàn Trung Hiếu, May 16 '19 at 06:00
I don't understand why do you wanna use bottomappbar when you want the functionality of bottomnavigationview — sanjeev, May 16 '19 at 06:03
Because the BottomAppBar have the FAB that anchored and function in it, which BottomNavigationView cannot provide — Đoàn Trung Hiếu, May 16 '19 at 06:08
yes, I'm working on it, will reply when I have the result, thank you — Đoàn Trung Hiếu, May 17 '19 at 06:59
Okay @sanjeev I solved the problem with your suggestion, but instead of using `BottomNavigationView` which does not make the layout look good (the 4th icon is too close with the FAB), I make a custom `LinearLayout` with 4 `ImageView` and add Selector in each of it, It works well without any problem — Đoàn Trung Hiếu, May 17 '19 at 09:24
@ĐoànTrungHiếu Glad that you have found your way out.. :) — sanjeev, May 17 '19 at 09:26

score 0 · Answer 2 · answered May 16 '19 at 05:51

try this,

<com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigation"
            style="@style/Widget.MaterialComponents.BottomNavigationView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:background="@color/gray_f1f0f5"
            app:itemTextColor="@color/nav_item_colors"
            app:labelVisibilityMode="labeled"
            app:layout_constraintBottom_toBottomOf="parent"
            app:menu="@menu/bottom_navigation_menu" />

Please read my question, I'm using BottomAppBar, not BottomNavigationView, so the answer above cannot apply — Đoàn Trung Hiếu, May 16 '19 at 05:59

How to handle Bottomappbar items selector?

2 Answers2