Horia Turica
Horia Turica

Reputation: 43

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.

Upvotes: 1

Views: 451

Answers (1)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363439

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

Upvotes: 3

Related Questions