Learn BottomNavigationView usage with fragments using simple step by step examples.
This example project will teach you the following concepts:
- How to use BottomNavigation in a Java Android project.
Step 1: Create Project
The first step is to create a Android Project in Android Studio.
Step 2: Add Dependencies
No special dependencies are needed:
implementation "androidx.appcompat:appcompat:$appCompat"
implementation "com.google.android.material:material:$supportLibVer"Step 3: Create Menus
Our bottom navigation view will comprise of BottomNavigationView items. Let’s put these menu items in a menu file:
Create a folder known as menu inside the res and add the following:
/res/menu/three_buttons_bottom.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/update_item"
android:icon="@drawable/ic_update"
android:title="Update"/>
<item
android:id="@+id/location_item"
android:icon="@drawable/ic_location"
android:title="Location"/>
<item
android:id="@+id/favorite_item"
android:icon="@drawable/ic_favorite"
android:title="Favorite"/>
</menu>Step 4: Design Layouts
In our MainActivity layout add a BottomNavigationView component:
activity_main.xml
Attach the menu items to the BottomNavigationView using the app:menu attribute:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="github.nisrulz.sample.bottomnavigationview.MainActivity"
>
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Hello World!"
android:textSize="25sp"
android:layout_alignParentBottom="true"
/>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottom_navigation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:elevation="3dp"
app:menu="@menu/three_buttons_bottom_menu"
/>
</RelativeLayout>Step : Write Code
Here’s the full code:
MainActivity.java
import android.os.Bundle;
import androidx.annotation.NonNull;
import com.google.android.material.bottomnavigation.BottomNavigationView;
import androidx.appcompat.app.AppCompatActivity;
import android.view.MenuItem;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final TextView textView = (TextView) findViewById(R.id.textView);
// Declare and reference the bottom navigation view
BottomNavigationView bottomNavigationView =
(BottomNavigationView) findViewById(R.id.bottom_navigation);
//Attach the listener
bottomNavigationView.setOnNavigationItemSelectedListener(
new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.update_item:
textView.setText("Update Item Selected");
break;
case R.id.location_item:
textView.setText("Location Item Selected");
break;
case R.id.favorite_item:
textView.setText("Favorite Item Selected");
break;
}
return true;
}
});
}
}Run
Copy the code into your project or download the code in the reference links below.
Reference
Find the reference links below:
| Number | Link |
|---|---|
| 1. | Download code |
| 2. | Follow code author |
This example project will teach you the following concepts:
- How to use BottomNavigationview
- How to switch connect BottomNavigationView to Fragments.
Step 1: Create Project
The first step is to create a Android Project in Android Studio.
Step 2: Add Dependencies
No external dependencies are needed.
Step 3: Design Layouts
Design layouts as follows:
(a). fragment_notification.xml
Simple fragment layout with a TextView:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textViewNotification"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:drawableTop="@drawable/ic_notifications_black_24dp"
android:gravity="center_horizontal"
android:text="@string/title_notifications"
android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"/>
</RelativeLayout>
(ab. fragment_dashboard.xml
Will be inflated to Dashboard Fragment:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textViewDashboard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:drawableTop="@drawable/ic_dashboard_black_24dp"
android:gravity="center_horizontal"
android:text="@string/title_dashboard"
android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"/>
</RelativeLayout>
(c). fragment_home.xml
Will be inflated to Home Fragment
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textViewHome"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:drawableTop="@drawable/ic_home_black_24dp"
android:gravity="center_horizontal"
android:text="@string/title_home"
android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"/>
</RelativeLayout>
(d). activity_main.xml
The MainActivity layout. Add FrameLayout and a BottomNavigationView widget:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="@+id/container"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
app:menu="@menu/navigation"/>
</LinearLayout>
Step 4: Create Fragments
There will be 3 fragments. Create them as follows:
(a). FragmentNotification.kt
Notification Fragment:
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
class FragmentNotification : Fragment() {
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
return inflater!!.inflate(R.layout.fragment_notification, container, false)
}
}(b). FragmentDashboard.kt
Dashboard Fragment:
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
class FragmentDashboard : Fragment() {
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
return inflater!!.inflate(R.layout.fragment_dashboard, container, false)
}
}(c). FragmentHome.kt
Home Fragment. From here arguments will be passed to other fragments via a Bundle:
import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
class FragmentHome : Fragment() {
/**
* Initialize newInstance for passing parameters
*/
companion object {
fun newInstance(): FragmentHome {
val fragmentHome = FragmentHome()
val args = Bundle()
fragmentHome.arguments = args
return fragmentHome
}
}
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
return inflater!!.inflate(R.layout.fragment_home, container, false)
}
}Step 5: Cretae MainActivity
This is the activity that will host our Fragments:
MainActivity.kt
import android.os.Bundle
import com.google.android.material.bottomnavigation.BottomNavigationView
import androidx.fragment.app.Fragment
import androidx.appcompat.app.AppCompatActivity
import android.widget.FrameLayout
class MainActivity : AppCompatActivity() {
private var content: FrameLayout? = null
private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
when (item.itemId) {
R.id.navigation_home -> {
val fragment = FragmentHome.Companion.newInstance()
addFragment(fragment)
[email protected] true
}
R.id.navigation_dashboard -> {
val fragment = FragmentDashboard()
addFragment(fragment)
[email protected] true
}
R.id.navigation_notifications -> {
val fragment = FragmentNotification()
addFragment(fragment)
[email protected] true
}
}
false
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
content = findViewById(R.id.content)
val navigation = findViewById<BottomNavigationView>(R.id.navigation)
navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)
val fragment = FragmentHome.Companion.newInstance()
addFragment(fragment)
}
/**
* add/replace fragment in container [FrameLayout]
*/
private fun addFragment(fragment: Fragment) {
supportFragmentManager
.beginTransaction()
.setCustomAnimations(R.anim.design_bottom_sheet_slide_in, R.anim.design_bottom_sheet_slide_out)
.replace(R.id.content, fragment, fragment.javaClass.simpleName)
.commit()
}
}Run
Copy the code into your project or download the code in the reference links below.
Reference
Find the reference links below:
| Number | Link |
|---|---|
| 1. | Download code |
| 2. | Follow code author |
