Android bottom navigation bar customization

Question

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:

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.

Any snippet or tutorial links would be appreciated. Thanks

Solution

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