How do I change Bottom App Bar Items Color?

Question

I have a BottomAppBar with a FAB from the new Material Design. That BottomAppBar has a specific menu, which contains 2 items, plus one navigation icon. The problem is, I've set the bottom app bar color to be white, and the icons are white too. How can I change this? This is my activity_layout

<androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        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"
            app:hideOnScroll="true"
            style="@style/BottomAppBarTheme"
            app:menu="@menu/bottom_app_bar"
            app:navigationIcon="@drawable/ic_menu_black_24"
            app:fabCradleMargin="10dp" />

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/ic_add_white_24"
            app:layout_anchor="@id/bottomAppBar"
            app:shapeAppearance="@style/FabDiamondOverlay"

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

And this is my styles.xml

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryDark">@color/primaryDarkColor</item>
        <item name="colorAccent">@color/secondaryColor</item>
        <item name="android:actionMenuTextColor">@android:color/black</item>

    </style>

    <style name="FabDiamondOverlay" parent="">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">8dp</item>
    </style>

    <style name="BottomAppBarTheme" parent="Widget.MaterialComponents.BottomAppBar.Colored">
        <item name="android:itemBackground">@android:color/black</item>
    </style>

Here is an image of how the bottom app bar is (with the icons, that are white...):

Gabriele Mariotti · Accepted Answer · 2020-07-10T21:51:37.490

You can use:

<com.google.android.material.bottomappbar.BottomAppBar
    android:theme="@style/BottomAppBarOverlay"
     .../>

with:

<style name="BottomAppBarOverlay">
    <item name="colorControlNormal">@color/...</item>
</style>

You can also use:

<com.google.android.material.bottomappbar.BottomAppBar
    style="@style/MyBottomAppBar"
    ..>

with:

<style name="MyBottomAppBar" parent="Widget.MaterialComponents.BottomAppBar">
    <item name="materialThemeOverlay">@style/ThemeOverlay.BottomAppBar</item>
</style>

<style name="ThemeOverlay.BottomAppBar" parent="ThemeOverlay.MaterialComponents.BottomAppBar.Primary">
    <item name="colorOnPrimary">@color/.....</item>
</style>

I tried your solution but it did not work. the solution below works for me. Thanks for pointing me to the right direction though. — Joseph Ofem, Jun 10 '22 at 17:30

score 0 · Answer 2 · answered Jun 10 '22 at 17:32

After trying out the solution above, This worked for me.

<style name="MyBottomAppBar" parent="Widget.MaterialComponents.BottomAppBar.Colored">
        <item name="backgroundTint">@color/...</item>
    </style>

with

<com.google.android.material.bottomappbar.BottomAppBar
    style="@style/MyBottomAppBar"
    ..>

How do I change Bottom App Bar Items Color?

2 Answers2

Linked