In this tutorial we are going to create bottom navigation bar with fragments without any third party libraries.
We First Complete our .XML Part
1.we add some custom color first for our background
<!-- Custom Color --> <color name="black">#FF000000</color> <color name="white">#FFFFFFFF</color> <color name="light_white">#D2D2D2</color> <color name="card_1">#A3E4D7</color> <color name="card_2">#F9E79F</color> <color name="card_3">#D7BDE2</color> <color name="card_4">#D2C3D8</color>
2. Also we need to add some strings
<string name="home_text">Home</string> <string name="like_text">Like</string> <string name="search_text">Search</string> <string name="shop_text">Shop</string>
3. After that we need menu, to create the menu just right click into your res Folder select New>Directory and name the folder menu
and make sure you enter menu should be in small letter.
after you will see menu folder inside your res Folder click on right in menu folder and create menu resourses folder and set the folder name
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/nav_home" android:icon="@drawable/ic_home" android:title="Home" /> <item android:id="@+id/nav_search" android:icon="@drawable/ic_search" android:title="Search" /> <item android:id="@+id/nav_like" android:icon="@drawable/ic_like" android:title="Like" /> <item android:id="@+id/nav_shop" android:icon="@drawable/ic_shop" android:title="Shop" /> </menu>
4. In Drawable folder and 4 icons it's depends on you
and create two drawable resources file inside drawable folder
round_corner.xml
<?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>
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="@color/black"/> <item android:state_checked="true" android:color="@color/black"/> <item android:color="@color/light_white"/> </selector>
5.Create Four Fragment and set different Background color of each Fragment for better experince and dont't forget to set text
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="@string/home_text" android:textSize="30sp" android:textColor="@color/black" android:textStyle="bold"/>
6. ActivityMain.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/body_container" android:background="@color/light_white" tools:context=".MainActivity"> <com.google.android.material.bottomnavigation.BottomNavigationView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_margin="30dp" android:elevation="2dp" app:menu="@menu/item_menu" android:background="@drawable/round_corner" app:itemRippleColor="@android:color/transparent" app:itemIconSize="30dp" app:labelVisibilityMode="unlabeled" app:itemIconTint="@drawable/item_selector" android:id="@+id/bottom_navigation"/> </RelativeLayout>
7. and also set DarkActionBar to NoActionBar in res>theme
we completed our xml part lets' turn into java part
8.This is our MainActivity.java
package com.example.bottomnavigation; import androidx.annotation.NonNull; import androidx.appcompat.app.AppCompatActivity; import androidx.fragment.app.Fragment; import android.os.Bundle; import android.view.MenuItem; import android.view.WindowManager; import com.google.android.material.bottomnavigation.BottomNavigationView; public class MainActivity extends AppCompatActivity { BottomNavigationView navigationView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //this line hide statusbar getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN); navigationView = findViewById(R.id.bottom_navigation); getSupportFragmentManager().beginTransaction().replace(R.id.body_container, new HomeFragment()).commit(); navigationView.setSelectedItemId(R.id.nav_home); navigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { Fragment fragment = null; switch (item.getItemId()){ case R.id.nav_home: fragment = new HomeFragment(); break; case R.id.nav_search: fragment = new SearchFragment(); break; case R.id.nav_like: fragment = new LikeFragment(); break; case R.id.nav_shop: fragment = new ShopFragment(); break; } getSupportFragmentManager().beginTransaction().replace(R.id.body_container, fragment).commit(); return true; } }); } }
1 Comments
love from me!
ReplyDelete