Bottom Navigation Bar Java Android Studio with Fragments | Thirdy Gayares
How to Make a Bottom Navigation Bar in Android Studio Using Java: A Simple Guide and Step by Step
Table of contents
- Step 1: Organizing our Files
- Step 2: Add Assets or Icon
- Step 3: Code the bottom_navigation_menu.xml
- Step 4: Code the bottom_navigation_selector.xml
- Step 5: Code the activity_main.xml
- Step 6: Code the fragment_add_page.xml, fragment_homepage.xml, fragment_profile_page.xml
- Step 7: Code the AddPage, Homepage and Profile Page Class
- Step 8: Code the MainActivity
- OUTPUT
Step 1: Organizing our Files
Prepare the following files to stay organized:
Java Files:
AddPage
HomePage
ProfilePage
MainActivity
XML Layout Files:
activity_add_page.xml
activity_homepage.xml
activity_main.xml
activity_profile_page.xml
XML Menu:
bottom_navigation_menu.xml
XML Color:
bottom_navigation_selector.xml
By following these steps, we can ensure that our project files are well-organized, making our development process more efficient
Step 2: Add Assets or Icon
To add an asset, right-click on the
drawable
folder, then selectNew > Vector Assets
.Configure the vector asset by choosing clip art, search for a home icon, and click OK to finish.
Step 3: Code the bottom_navigation_menu.xml
- Add three icons for Home, Add, and Profile.
Instructions:
Remember to include all three icons in the code.
You can refer back to this page if you need to check the details again.
Here's the sample code snippet to add the icons:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/nav_home"
android:icon="@drawable/baseline_home_24"
android:title="Home" />
<item
android:id="@+id/nav_add"
android:icon="@drawable/baseline_add_24"
android:title="Add" />
<item
android:id="@+id/nav_profile"
android:icon="@drawable/baseline_person_24"
android:title="Profile" />
</menu>
Step 4: Code the bottom_navigation_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="#282828"/>
<item android:color="#928D8D"/>
</selector>
This file ensures that the bottom navigation icons change color when selected or not selected, improving user interaction and visual feedback.
Step 5: Code the activity_main.xml
This layout sets up a main activity screen with a white background, a container for fragments above a bottom navigation bar. The navigation bar has icons and text with color states defined by the bottom_navigation_selector.xml
and references the menu items from bottom_navigation_menu.xml
.
Just Remember:
Remember the IDs used in the layout for referencing in your code:
fragment_container
for the FrameLayout.bottom_navigation
for the BottomNavigationView.
Here is the code snippet for activity_main.xml
:
<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"
android:background="@color/white"
tools:context=".MainActivity">
<FrameLayout
android:id="@+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/bottom_navigation" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFF5"
app:layout_alignParentBottom="true"
app:itemIconTint="@color/bottom_navigation_selector"
app:itemTextColor="@color/bottom_navigation_selector"
app:menu="@menu/bottom_navigation_menu" />
</RelativeLayout>
Step 6: Code the fragment_add_page.xml, fragment_homepage.xml, fragment_profile_page.xml
fragment_add_page.xml
<?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/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
tools:context=".fragments.AddPage">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add Page"
android:layout_centerInParent="true"
android:textSize="40sp"
android:textColor="@color/black"
/>
</RelativeLayout>
fragment_homepage.xml
<?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/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
tools:context=".fragments.HomePage">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Homepage"
android:layout_centerInParent="true"
android:textSize="40sp"
android:textColor="@color/black"
/>
</RelativeLayout>
fragment_profile_page.xml
<?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/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
tools:context=".fragments.ProfilePage">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Profile Page"
android:layout_centerInParent="true"
android:textSize="40sp"
android:textColor="@color/black"
/>
</RelativeLayout>
Step 7: Code the AddPage, Homepage and Profile Page Class
AddPage.java
package com.thirdydacoder.bottomnavigationbar.fragments;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import com.thirdydacoder.bottomnavigationbar.R;
public class AddPage extends Fragment {
View view;
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
view = inflater.inflate(R.layout.fragment_add_page, container, false);
return view;
}
}
Homepage.java
package com.thirdydacoder.bottomnavigationbar.fragments;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import com.thirdydacoder.bottomnavigationbar.R;
public class HomePage extends Fragment {
View view;
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
view = inflater.inflate(R.layout.fragment_homepage, container, false);
return view;
}
}
ProfilePage.java
package com.thirdydacoder.bottomnavigationbar.fragments;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import com.thirdydacoder.bottomnavigationbar.R;
public class ProfilePage extends Fragment {
View view;
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
view = inflater.inflate(R.layout.fragment_profile_page, container, false);
return view;
}
}
Step 8: Code the MainActivity
Explain the code:
BottomNavigationView bottomNav = findViewById(R.id.bottom_navigation);
bottomNav.setSelectedItemId(R.id.nav_home);
bottomNav.setOnItemSelectedListener(navListener);
Fragment selectedFragment = new HomePage();
getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container,
selectedFragment).commit();
These lines of code set up the BottomNavigationView
, select the Home item by default, and set up a listener for navigation item selections. The default fragment (HomePage
) is displayed in the fragment_container
when the activity starts.
private NavigationBarView.OnItemSelectedListener navListener =
item -> {
int itemId = item.getItemId(); /* obtain the selected item ID from your source */
Fragment selectedFragment = null;
if (itemId == R.id.nav_home) {
selectedFragment = new HomePage();
} else if (itemId == R.id.nav_add) {
selectedFragment = new AddPage();
} else if (itemId == R.id.nav_profile) {
// Handle the profile case
selectedFragment = new ProfilePage();
} else {
selectedFragment = new HomePage();
}
getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container, selectedFragment).commit();
return true;
};
This listener handles navigation item selections. It checks the selected item's ID and sets the corresponding fragment (HomePage
, AddPage
, or ProfilePage
). It then replaces the current fragment in the fragment_container
with the selected fragment and commits the transaction.
Main Activity whole code:
package com.thirdydacoder.bottomnavigationbar;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import com.google.android.material.bottomnavigation.BottomNavigationView;
import com.google.android.material.navigation.NavigationBarView;
import com.thirdydacoder.bottomnavigationbar.fragments.AddPage;
import com.thirdydacoder.bottomnavigationbar.fragments.HomePage;
import com.thirdydacoder.bottomnavigationbar.fragments.ProfilePage;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
BottomNavigationView bottomNav = findViewById(R.id.bottom_navigation);
bottomNav.setSelectedItemId(R.id.nav_home);
bottomNav.setOnItemSelectedListener(navListener);
Fragment selectedFragment = new HomePage();
getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container,
selectedFragment).commit();
}
private NavigationBarView.OnItemSelectedListener navListener =
item -> {
int itemId = item.getItemId(); /* obtain the selected item ID from your source */
Fragment selectedFragment = null;
if (itemId == R.id.nav_home) {
selectedFragment = new HomePage();
} else if (itemId == R.id.nav_add) {
selectedFragment = new AddPage();
} else if (itemId == R.id.nav_profile) {
// Handle the profile case
selectedFragment = new ProfilePage();
} else {
selectedFragment = new HomePage();
}
getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container, selectedFragment).commit();
return true;
};
}
OUTPUT
Thank you for following this tutorial on creating a Bottom Navigation View in Android Java.
If you found this helpful, please subscribe to my YouTube channel for more tutorials.
If you want the complete source code, you can find it on GitHub. Make sure to star the repository if you like it!
Buy me a coffee
https://www.buymeacoffee.com/thirdygayares
Please check out my other content and connect with me on various platforms:
YouTube: @thirdydacoder
Github: thirdygayares
LinkedIn: Jose Gayares III
Facebook Page: Thirdy Dacoder
Website: thirdygayares.com
Website : thirdygraphics.com
Feel free to reach out with any questions or feedback. Happy coding!