CODEWITHSUNDEEP
javaandroidcolorsbottomnavigationview
IamNotMe_
IamNotMe_

Reputation: 71

Bottomnavigation selected item background color change

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.

google_play_bottomnavigation

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. bottomnavigation diagram

Upvotes: 5

Views: 5425

Answers (7)

Muhammad Yousuf
Muhammad Yousuf

Reputation: 178

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

Upvotes: 3

kelvincer
kelvincer

Reputation: 6138

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

Upvotes: 0

bhaskar
bhaskar

Reputation: 1080

Try the below attribute. It worked for me.

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

Upvotes: 4

Xelz
Xelz

Reputation: 1069

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

Upvotes: 2

Bender
Bender

Reputation: 417

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

Upvotes: 0

Harshil
Harshil

Reputation: 202

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>

Upvotes: 0

Kozmotronik
Kozmotronik

Reputation: 2520

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

Upvotes: 2

Related Questions