In this post you will learn how to design Bottom Navigation View Like Pinterest in Android.
We use bottom navigation view to navigate through our android application, So to design Bottom Navigation like Pinterest.
We will use custom design for our Bottom Navigation View.
First of all create a new project in android studio
1. Now add a new drawable XML file ‘item_selector’ in res->drawables and paste following code to that XML file.
|
1 2 3 4 5 6 7 8 |
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" android:color="@color/black"/> <item android:state_checked="true" android:color="@color/black"/> <item android:color="#d2d2d2"/> </selector> |
2. Create another drawable XML file ‘nav_bg’ in res->drawables, this drawable will be the background for Navigation View
|
1 2 3 4 5 6 7 8 |
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="@color/white"/> <corners android:radius="100dp"/> </shape> |
3. Right click on drawables goto new->vector asset and add 4 icons which you want to display on Navigation View.
4. Right click on res goto new->android resource file name it ‘menu_bottom’ and select ‘Menu’ as resource type click ok and paste below code in your menu_bottom file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?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"/> <item android:title="Search" android:icon="@drawable/ic_baseline_search_24"/> <item android:title="Favorite" android:icon="@drawable/ic_baseline_favorite_24"/> <item android:title="Cart" android:icon="@drawable/ic_baseline_shopping_cart_24"/> </menu> |
5. Open activity_main.xml and paste the following code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?xml version="1.0" encoding="utf-8"?> <androidx.coordinatorlayout.widget.CoordinatorLayout 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:background="#d2d2d2" tools:context=".MainActivity"> <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:layout_margin="30dp" app:menu="@menu/menu_bottom" app:itemRippleColor="@android:color/transparent" app:labelVisibilityMode="unlabeled" app:itemIconSize="30dp" android:background="@drawable/nav_bg" app:itemIconTint="@drawable/item_selector" app:elevation="4dp"/> </androidx.coordinatorlayout.widget.CoordinatorLayout> |
6. Now open your MainActivity.java file and paste the following code there.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
public class MainActivity extends AppCompatActivity { BottomNavigationView bottomNav; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); bottomNav = findViewById(R.id.bottomNav); bottomNav.setOnNavigationItemSelectedListener(item -> { Toast.makeText(MainActivity.this, item.getTitle(), Toast.LENGTH_SHORT).show(); return true; }); } } |
Great! you have just created Bottom Navigation View like Pinterest below is the final result of our design.
Happy Coding….
