Bottom Navigation like Pinterest in Android Kotlin.

 Hello Everyone I hope You all are doing good.

Today we are going to see how to design bottom navigation like Pinterest

If you don't Pinterest then Pinterest is an American image sharing and social media service.

You can See on your that we will design bottom navigation like this..

First Create Blank Android Project.

Step : Create Menu File.

To Create Menu Folder Right click on res Folder > New > Android Recourse Directory > select Menu > ok.

After That Create Menu File. menu > new > menu recourse > menu_items.xml

menu_items.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

<item android:title="Home"
android:icon="@drawable/ic_baseline_home_24"
android:id="@+id/home"/>

<item android:title="Search"
android:icon="@drawable/ic_baseline_search_24"
android:id="@+id/search"/>

<item android:title="Favourite"
android:icon="@drawable/ic_baseline_favorite_24"
android:id="@+id/fav"/>

<item android:title="Shop"
android:icon="@drawable/ic_baseline_shopping_cart_24"
android:id="@+id/shop"/>
</menu>

After that we will create background. so drawable > new > drawable recourse > bg.xml

bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#ffffff"/>
<corners android:radius="100dp"/>
</shape>

After that we will create item Selector File . so drawable > new > drawable recourse > item_selector.xml

item_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_pressed="true" android:color="#000000"/>
<item android:state_checked="true" android:color="#000000" />
<item android:color="#d2d2d2"/>
</selector>

Now in the activity_main.xml copy this code.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#d2d2d2"
tools:context=".MainActivity">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Pinterest Bottom Bar Example"
android:layout_weight="1"
android:layout_gravity="center"
android:textSize="20sp"/>

<com.google.android.material.bottomnavigation.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/bottomNav"
android:layout_margin="30dp"
android:background="@drawable/bg"
app:elevation="2dp"
android:layout_gravity="bottom"
app:itemIconSize="30dp"
app:menu="@menu/menu_items"
app:labelVisibilityMode="unlabeled"
app:itemIconTint="@drawable/item_selector"/>


</LinearLayout>

Do Understand in Watch this Tutorial.