Android bottom navigation bar customization

user3576118 picture user3576118 · May 20, 2017 · Viewed 12k times · Source

I have successfully implementing simple bottom bar and it looks like picture 1. But I wanted to customize it further so it can looks like the bottom bar in Youtube's android apps, which when you clicked in one of the item, it will spread shadowing effect.

My current bottom bar:

My current bottom bar

Youtube's bottom bar

Youtube's bottom bar

I would also like to customize it to look like the one in the official site with some animation when items are clicked.

Other bottom bar style

Any snippet or tutorial links would be appreciated. Thanks

Answer

AskNilesh picture AskNilesh · May 20, 2017

try this

Custom color using Android Ripple Effect:

Create button.xml in drawable folder

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="@color/colorPrimaryDark"/>
<item android:drawable="@color/colorPrimary"/>
</selector>

Create button.xml in drawable-v21 folder

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight">
<item android:drawable="@color/colorPrimary" /> 
</ripple>

apply in your theme

 <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="colorControlHighlight">@color/colorPrimaryDark</item>
</style>

now you can set button.xml as background of your view.

 android:background="@drawable/button"

in case of any query follow this link