CODEWITHSUNDEEP
androidmaterial-designbottomnavigationview
bhumik
bhumik

Reputation: 231

BottomNavigationView Text Resize Animation Issue based on theme used

I am using BottomNavigationView but observing a strange issue.

When used with the theme "Theme.AppCompat.Light.DarkActionBar", Text and Icon Resize animation works fine on each item when clicked.

But When used with theme "Theme.MaterialComponents.Light.DarkActionBar", it's not working, No Resize animation happening.

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomNav"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="#212121"
    app:itemIconTint="@color/nav_item_color_state"
    app:itemTextColor="@color/nav_item_color_state"
    app:menu="@menu/bottom_menu_main"/>

nav_item_color_state.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/action_nav_feed"
        android:icon="@android:drawable/ic_input_add"
        android:checked="true"
        android:title="List"/>
    <item
        android:id="@+id/action_nav_info"
        android:icon="@android:drawable/ic_notification_overlay"
        android:title="Info"/>
    <item
        android:id="@+id/action_nav_profile"
        android:icon="@android:drawable/ic_delete"
        android:title="Profile"/>
</menu>

style.xml

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>
<!-- Theme.AppCompat.Light.DarkActionBar -->

Upvotes: 2

Views: 406

Answers (1)

Manoj Perumarath
Manoj Perumarath

Reputation: 10214

Try using the properties app:itemTextAppearanceActive and app:itemTextAppearanceInactive

<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottomNav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#212121"
app:itemIconTint="@color/nav_item_color_state"
app:itemTextAppearanceActive="@style/BottomNavigationView.Active"
app:itemTextAppearanceInactive="@style/BottomNavigationView"
app:itemTextColor="@color/nav_item_color_state"
app:menu="@menu/bottom_menu_main"/>

In styles.xml

<style name="BottomNavigationView" 
   parent="@style/TextAppearance.AppCompat.Caption">
    <item name="android:textSize">10sp</item>
</style>

  <style name="BottomNavigationView.Active" 
  parent="@style/TextAppearance.AppCompat.Caption">
    <item name="android:textSize">15sp</item>
  </style>

There's no need to set theme for this View, these styles will do the thing.

Upvotes: 2

Related Questions