Search code examples
javaandroidnavigationbottomnavigationviewmaterial-components-android

BottomNavigation Icon Elevation Android


enter image description here
I am using in my project a bottom navigation view. In the bar bellow i have 4 icons and when selected they become green and get an elevation. I suspect the color change is coming from the primary color of the app but I want to get rid of the elevation. I am using a BottomNavigation project so all the code in Activity and XML are the basic ones for a bottom nav.


Solution

  • About the position of the selected icon it depends by the label.
    It could be empty and in any case you can use the labelVisibilityMode attribute in your BottomNavigationView:

      <com.google.android.material.bottomnavigation.BottomNavigationView
          app:labelVisibilityMode="unlabeled"
          ..>
    

    With 4 icons the default value is selected: Label is shown on the selected navigation item.

    About the color you can use the itemIconTint attribute. It is the default selector:

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
      <item android:alpha="1.0" android:color="?attr/colorPrimary" android:state_checked="true"/>
      <item android:alpha="0.6" android:color="?attr/colorOnSurface"/>
    </selector>
    

    You can use a custom selector

      <com.google.android.material.bottomnavigation.BottomNavigationView
          app:labelVisibilityMode="unlabeled"
          itemIconTint="@color/my_selector"
          ..>
    

    or just override the default colors in your BottomNavigationView:

      <com.google.android.material.bottomnavigation.BottomNavigationView
          app:labelVisibilityMode="unlabeled"
          android:theme="@style/ThemeOverlay.BottomNavView"
          ..>
    

    with:

    <style name="ThemeOverlay.BottomNavView" parent="">
        <item name="colorPrimary">@color/colorAccent</item>
        <item name="colorOnSurface">@color/primaryDarkColor</item>
    </style>
    

    enter image description here enter image description here