Recently Added

6/recent/ticker-posts

Bottom Navigation View with Fragment in Android Studio JAVA



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;
            }
        });

    }
}

Here is the full video tutorial you can Watch it here


Post a Comment

1 Comments