Bottomnavigation selected item background color change

Question

I want to change the selected item background color in bottomnavigation just like Google Play Store. I tried to solve it, but till now I haven't found a solution.

Update

I found attribute called app:itemActiveIndicatorStyle and it should change the indicator color. But for some reason it doesn't work. Here is an picture how should this attribute work.

Haematoblast

Does this answer your question? How to change the specific item background color in bottom navigation in android? – Cupule

My query was how to remove selected item background(ibb.co/MfLMG98) and your question solved my problem. LOL. I added app:itemActiveIndicatorStyle="@color/black" – Dolce

Answer 1

Try the below attribute. It worked for me.

        app:itemActiveIndicatorStyle="@android:color/transparent"

Cabana

This works in removing it / Making it transparent. but it does not work for applying a different color – Overbold

Answer 2

Try this out

Step 1: define a Style for your Active Indicator

<style name="Theme.BottomNavigationView.ActiveIndicator" parent="Widget.Material3.BottomNavigationView.ActiveIndicator">
    <item name="android:color">@color/white</item>
</style>

Step 2: Use that style (Theme.BottomNavigationView.ActiveIndicator) in your BottomNavigationView

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigationView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:backgroundTint="@color/primary"
            app:labelVisibilityMode="selected"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:itemTextColor="@color/testing_color"
            app:itemActiveIndicatorStyle="@style/Theme.BottomNavigationView.ActiveIndicator"
            app:menu="@menu/bottom_navigation" />

Ingest

This works perfectly, it does exactly change the oval shape behind the selected item. – Recorder

Answer 3

If your project uses style.xml file to theme the project add this code to that file. Note that your app's theme must extend from the MaterialComponents theme in order the coloring to work.

<style name="Theme.App" parent="Theme.MaterialComponents.*">
    ...
    <item name="bottomNavigationStyle">@style/Widget.MaterialComponents.BottomNavigationView.Colored</item>
    <item name="colorPrimary">COLOR_FOR_ICONS_AND_SURFACES</item>
    <item name="colorOnPrimary">COLOR_FOR_ON_ICONS_OR_ON_SURFACES</item>
</style>

This will change the colors system-wide. If you want to apply it to only specific components then in your style.xml again, you must define the color attributes as an overlay.

<style name="Theme.App" parent="Theme.MaterialComponents.*">
    ...
    <item name="bottomNavigationStyle">@style/Widget.App.BottomNavigationView</item>
</style>

<style name="Widget.App.BottomNavigationView" parent="Widget.MaterialComponents.BottomNavigationView.Colored">
    <item name="materialThemeOverlay">@style/ThemeOverlay.App.BottomNavigationView</item>
</style>

<style name="ThemeOverlay.App.BottomNavigationView" parent="">
    <item name="colorPrimary">COLOR_FOR_ICONS_AND_SURFACES</item>
    <item name="colorOnPrimary">COLOR_FOR_ON_ICONS_OR_ON_SURFACES</item>
</style>

The bottomNavigationStyle defined in the Theme.App will color all bottom navigation views by default. If you don't want this then you can apply the style to only particular BottomNavigationView by defining the style attribute of it. This will override the default style that was defined in the app theme.

<com.google.android.material.bottomnavigation.BottomNavigationView
    ...
    style="@style/Widget.App.BottomNavigationView"
/>

Slothful

this isn't working with me. – Haematoblast

If you don't implement it correctly obviosly it will not work. Share the code that shows how you implement it in your code. – Slothful

Answer 4

I achieved to change the color with the next style:

<style name="Widget.BottomNavigationView.ActiveIndicator" parent="Widget.Material3.BottomNavigationView.ActiveIndicator">
    <item name="shapeAppearance">
        @style/ShapeAppearance.M3.Comp.NavigationBar.ActiveIndicator.Shape
    </item>
    <item name="android:color">@color/white</item>
</style>

And in the BottomNavigationView:

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    style="@style/Widget.App.BottomNavigationView"
    app:labelVisibilityMode="labeled" />

Chor

Answer 5

Something like this should work:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/blue" android:state_checked="true"/>
    <item android:drawable="@color/gray"/>
</selector>

J

This method isn't working and isn't related to what i need. – Haematoblast

Answer 6

I've got this style by default:

api "com.google.android.material:material:1.6.1"

and used style: <style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">

Corinecorinna

Answer 7

Try this:

<style name="Base.Theme.Challenge" parent="Theme.Material3.DayNight.NoActionBar">
    <item name="colorPrimary">#F7C500</item>
    <item name="colorSecondaryContainer">#FFFFED</item>   <--- This is the color
</style>

For more information visit this page

Emigration