Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thirdygayares/android-java-bottom-navigation-bar
How to Make a Bottom Navigation Bar in Android Studio Using Java: A Simple Guide and Step by Step by Thirdy Gayares
https://github.com/thirdygayares/android-java-bottom-navigation-bar
android android-bottom-navigation android-studio androidjava androidjavaproject thirdy-gayares
Last synced: about 1 month ago
JSON representation
How to Make a Bottom Navigation Bar in Android Studio Using Java: A Simple Guide and Step by Step by Thirdy Gayares
- Host: GitHub
- URL: https://github.com/thirdygayares/android-java-bottom-navigation-bar
- Owner: thirdygayares
- License: mit
- Created: 2024-08-06T20:02:28.000Z (6 months ago)
- Default Branch: master
- Last Pushed: 2024-09-09T02:45:45.000Z (5 months ago)
- Last Synced: 2024-11-10T04:38:16.166Z (3 months ago)
- Topics: android, android-bottom-navigation, android-studio, androidjava, androidjavaproject, thirdy-gayares
- Language: Java
- Homepage: https://www.youtube.com/watch?v=_pPntgcs5rM
- Size: 131 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Watch the Tutorial
[](https://www.youtube.com/watch?v=_pPntgcs5rM)
### Step 1: Organizing our Files
1. **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 select `New > 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
```
### Step 4: Code the bottom\_navigation\_selector.xml
```xml
```
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`:
```xml
```
### Step 6: Code the fragment\_add\_page.xml, fragment\_homepage.xml, fragment\_profile\_page.xml
fragment_add_page.xml
```xml
```
fragment_homepage.xml
```xml
```
fragment_profile_page.xml
```xml
```
### Step 7: Code the AddPage, Homepage and Profile Page Class
AddPage.java
```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
```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
```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:
```java
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.
---
```java
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:
```java
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.
[Thirdy DaCoder — YouTube](https://www.youtube.com/@ThirdyDaCoder)
If you want the complete source code, you can find it on GitHub. Make sure to star the repository if you like it!
%[https://github.com/thirdygayares/BottomNavigationBar.git]
Buy me a coffee
[https://www.buymeacoffee.com/thirdygayares](https://www.buymeacoffee.com/thirdygayares)
Please check out my other content and connect with me on various platforms:
* YouTube: [@thirdydacoder](https://www.youtube.com/@ThirdyDaCoder)
* Github: [thirdygayares](https://github.com/thirdygayares)
* LinkedIn: [Jose Gayares III](https://www.linkedin.com/in/thirdygayares/)
* Facebook Page: [Thirdy Dacoder](https://www.facebook.com/thirdydacoder)
* Website: [thirdygayares.com](https://thirdygayares.com/)
* Website : [thirdygraphics.com](https://www.thirdygraphics.com/)
Feel free to reach out with any questions or feedback. Happy coding!