Trying to fix the biggest let down view in the Android design lib.
Everything wrong with BottomNavigationView.
This contains fixes for missing save state, accessibility and the colorful transition on tab change.
The view is written in Kotlin, but you can safely use it in your trusty old Java project if you are willing to import the Kotlin Standard library. See the example.
Basic Sample Usage.
Just like your regular BottomNavigationView
you can inflate your custom menu.
<be.rijckaert.tim.library.BetterBottomBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorAccent"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
app:itemIconTint="@color/white"
app:itemTextColor="@color/white"
app:menu="@menu/bottom_navigation_main"/>
You can alter the text colors for each tab with the help of the app:XXXXTabTextColors
.
For example for the first tab you should use app:firstTabTextColors
.
just provide your custom ColorStateList
See the sample if you need more explanation
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:color="@color/textColorPrimary"
android:state_checked="true"/>
<item
android:color="@color/textColorPrimaryUnselected"
android:state_checked="false"/>
</selector>
Same for the icon drawable just use the app:XXXTabIconColors
In order to receive tab change events you should attach a betterBottomBarClickListener
.
betterBottomBar.betterBottomBarClickListener = { betterBottomBar, menuItem ->
//get state
}
On rotation all the correct color are still applied to your view.
You can also access the selectedTab
index via code.
final BetterBottomBar betterBottomBar = (BetterBottomBar) findViewById(R.id.bottom_navigation);
betterBottomBar.getSelectedTab();
You can change the default colors with the app:colors
attribute.
Make sure to reference an IntArray
of colors
When no color array has been added, no animation will happen.
<be.rijckaert.tim.library.BetterBottomBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorAccent"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
app:itemIconTint="@color/white"
app:itemTextColor="@color/white"
app:colors="@array/bottom_bar_colors"
app:menu="@menu/bottom_navigation_main"/>
@array/bottom_bar_colors
<array name="bottom_bar_colors">
<item>@color/colorPrimary</item>
<item>@color/someReddishColor</item>
<item>@color/blackAsYourHeart</item>
</array>
###Accessibility Support
You can add accessibility to your BottomNavigationView
by adding the app:contentDescriptionTitles
attribute whichs refs to a StringArray
.
If you forget to do this. The view will use reflection to look for your titles.
Don't be a dick just provide them.
<be.rijckaert.tim.library.BetterBottomBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorAccent"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
app:itemIconTint="@color/white"
app:itemTextColor="@color/white"
app:contentDescriptionTitles="@array/better_bottom_bar_accessibility_title"
app:menu="@menu/bottom_navigation_main"/>
string.xml
<array name="better_bottom_bar_accessibility_title">
<item>@string/news_title</item>
<item>@string/video_title</item>
<item>@string/discover_title</item>
</array>
At the moment it only supports:
- English
- Dutch
Feel free to submit PR for more language support