{"id":19351405,"url":"https://github.com/thirdygayares/android-java-bottom-navigation-bar","last_synced_at":"2026-05-13T12:47:09.999Z","repository":{"id":251976512,"uuid":"839019719","full_name":"thirdygayares/Android-Java-Bottom-Navigation-Bar","owner":"thirdygayares","description":"How to Make a Bottom Navigation Bar in Android Studio Using Java: A Simple Guide and Step by Step by Thirdy Gayares","archived":false,"fork":false,"pushed_at":"2024-09-09T02:45:45.000Z","size":134,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-06T15:48:39.003Z","etag":null,"topics":["android","android-bottom-navigation","android-studio","androidjava","androidjavaproject","thirdy-gayares"],"latest_commit_sha":null,"homepage":"https://www.youtube.com/watch?v=_pPntgcs5rM","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thirdygayares.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-06T20:02:28.000Z","updated_at":"2024-09-10T07:25:53.000Z","dependencies_parsed_at":"2024-11-10T04:38:20.425Z","dependency_job_id":"948c3fe5-c51a-48f1-8534-1cc5978d48f9","html_url":"https://github.com/thirdygayares/Android-Java-Bottom-Navigation-Bar","commit_stats":null,"previous_names":["thirdygayares/bottomnavigationbar","thirdygayares/android-bottom-navigation-bar","thirdygayares/android-java-bottom-navigation-bar"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdygayares%2FAndroid-Java-Bottom-Navigation-Bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdygayares%2FAndroid-Java-Bottom-Navigation-Bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdygayares%2FAndroid-Java-Bottom-Navigation-Bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdygayares%2FAndroid-Java-Bottom-Navigation-Bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thirdygayares","download_url":"https://codeload.github.com/thirdygayares/Android-Java-Bottom-Navigation-Bar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240460390,"owners_count":19804879,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","android-bottom-navigation","android-studio","androidjava","androidjavaproject","thirdy-gayares"],"created_at":"2024-11-10T04:36:09.180Z","updated_at":"2025-10-16T05:32:41.288Z","avatar_url":"https://github.com/thirdygayares.png","language":"Java","funding_links":["https://www.buymeacoffee.com/thirdygayares"],"categories":[],"sub_categories":[],"readme":"## Watch the Tutorial\n\n[![Watch the video](https://img.youtube.com/vi/_pPntgcs5rM/maxresdefault.jpg)](https://www.youtube.com/watch?v=_pPntgcs5rM)\n\n\n### Step 1: Organizing our Files\n\n![Organize this file](https://cdn.hashnode.com/res/hashnode/image/upload/v1722970571156/ff4c7287-704c-4900-9c17-fc1c42ce4251.png)\n\n1. **Prepare the following files to stay organized:**\n    \n    * **Java Files:**\n        \n        `AddPage`\n        \n        `HomePage`\n        \n        `ProfilePage`\n        \n        `MainActivity`\n        \n    * **XML Layout Files:**\n        \n        `activity_add_page.xml`\n        \n        `activity_homepage.xml`\n        \n        `activity_main.xml`\n        \n        `activity_profile_page.xml`\n        \n    * **XML Menu:**\n        \n        `bottom_navigation_menu.xml`\n        \n    * **XML Color:**\n        \n        `bottom_navigation_selector.xml`\n        \n\nBy following these steps, we can ensure that our project files are well-organized, making our development process more efficient\n\n### Step 2: Add Assets or Icon\n\n![Add Assets or Icon](https://cdn.hashnode.com/res/hashnode/image/upload/v1722971540085/1a30d804-ca93-4eec-b88d-05521b63258b.png)\n\n* To add an asset, right-click on the `drawable` folder, then select `New \u003e Vector Assets`.\n    \n* Configure the vector asset by choosing clip art, search for a home icon, and click OK to finish.\n    \n\n### Step 3: Code the bottom\\_navigation\\_menu.xml\n\n![Code the bottom\\_navigation\\_menu.xml](https://cdn.hashnode.com/res/hashnode/image/upload/v1722972024678/ee01b2c3-6325-4b1a-8c0e-28c31b925e6b.png)\n\n* * \u003cmark\u003eAdd three icons for Home, Add, and Profile.\u003c/mark\u003e\n        \n* **Instructions:**\n    \n    * Remember to include all three icons in the code.\n        \n    * You can refer back to this page if you need to check the details again.\n        \n\nHere's the sample code snippet to add the icons:\n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003cmenu xmlns:android=\"http://schemas.android.com/apk/res/android\"\n    xmlns:app=\"http://schemas.android.com/apk/res-auto\"\u003e\n\n\n    \u003citem\n        android:id=\"@+id/nav_home\"\n        android:icon=\"@drawable/baseline_home_24\"\n        android:title=\"Home\" /\u003e\n\n    \u003citem\n        android:id=\"@+id/nav_add\"\n        android:icon=\"@drawable/baseline_add_24\"\n        android:title=\"Add\" /\u003e\n\n    \u003citem\n        android:id=\"@+id/nav_profile\"\n        android:icon=\"@drawable/baseline_person_24\"\n        android:title=\"Profile\" /\u003e\n\n\u003c/menu\u003e\n```\n\n### Step 4: Code the bottom\\_navigation\\_selector.xml\n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003cselector xmlns:android=\"http://schemas.android.com/apk/res/android\"\u003e\n    \u003citem android:state_checked=\"true\" android:color=\"#282828\"/\u003e\n    \u003citem android:color=\"#928D8D\"/\u003e\n\u003c/selector\u003e\n```\n\nThis file ensures that the bottom navigation icons change color when selected or not selected, improving user interaction and visual feedback.\n\n### Step 5: Code the activity\\_main.xml\n\n![Code the activity\\_main.xml](https://cdn.hashnode.com/res/hashnode/image/upload/v1722972708364/f182e514-ecc2-471a-9d2c-62db59905bdc.png)\n\nThis 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`.\n\n#### Just Remember:\n\n* **Remember the IDs** used in the layout for referencing in your code:\n    \n    * `fragment_container` for the FrameLayout.\n        \n    * `bottom_navigation` for the BottomNavigationView.\n        \n\nHere is the code snippet for `activity_main.xml`:\n\n```xml\n\u003cRelativeLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"\n    xmlns:tools=\"http://schemas.android.com/tools\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    android:background=\"@color/white\"\n    tools:context=\".MainActivity\"\u003e\n\n    \u003cFrameLayout\n        android:id=\"@+id/fragment_container\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"match_parent\"\n        android:layout_above=\"@id/bottom_navigation\" /\u003e\n\n    \u003ccom.google.android.material.bottomnavigation.BottomNavigationView\n        android:id=\"@+id/bottom_navigation\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        android:background=\"#FFFFF5\"\n        app:layout_alignParentBottom=\"true\"\n        app:itemIconTint=\"@color/bottom_navigation_selector\"\n        app:itemTextColor=\"@color/bottom_navigation_selector\"\n        app:menu=\"@menu/bottom_navigation_menu\" /\u003e\n\n\u003c/RelativeLayout\u003e\n```\n\n### Step 6: Code the fragment\\_add\\_page.xml, fragment\\_homepage.xml, fragment\\_profile\\_page.xml\n\n\u003cmark\u003efragment_add_page.xml\u003c/mark\u003e\n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003cRelativeLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"\n    xmlns:app=\"http://schemas.android.com/apk/res-auto\"\n    xmlns:tools=\"http://schemas.android.com/tools\"\n    android:id=\"@+id/main\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    android:background=\"@color/white\"\n    tools:context=\".fragments.AddPage\"\u003e\n\n\n    \u003cTextView\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:text=\"Add Page\"\n        android:layout_centerInParent=\"true\"\n        android:textSize=\"40sp\"\n        android:textColor=\"@color/black\"\n        /\u003e\n\n\u003c/RelativeLayout\u003e\n```\n\n\u003cmark\u003efragment_homepage.xml\u003c/mark\u003e\n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003cRelativeLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"\n    xmlns:app=\"http://schemas.android.com/apk/res-auto\"\n    xmlns:tools=\"http://schemas.android.com/tools\"\n    android:id=\"@+id/main\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    android:background=\"@color/white\"\n    tools:context=\".fragments.HomePage\"\u003e\n\n\n    \u003cTextView\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:text=\"Homepage\"\n        android:layout_centerInParent=\"true\"\n        android:textSize=\"40sp\"\n        android:textColor=\"@color/black\"\n        /\u003e\n\n\u003c/RelativeLayout\u003e\n```\n\n\u003cmark\u003efragment_profile_page.xml\u003c/mark\u003e\n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003cRelativeLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"\n    xmlns:app=\"http://schemas.android.com/apk/res-auto\"\n    xmlns:tools=\"http://schemas.android.com/tools\"\n    android:id=\"@+id/main\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    android:background=\"@color/white\"\n    tools:context=\".fragments.ProfilePage\"\u003e\n\n\n    \u003cTextView\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:text=\"Profile Page\"\n        android:layout_centerInParent=\"true\"\n        android:textSize=\"40sp\"\n        android:textColor=\"@color/black\"\n        /\u003e\n\n\u003c/RelativeLayout\u003e\n```\n\n### Step 7: Code the AddPage, Homepage and Profile Page Class\n\n\u003cmark\u003eAddPage.java\u003c/mark\u003e\n\n```java\npackage com.thirdydacoder.bottomnavigationbar.fragments;\nimport android.os.Bundle;\nimport android.view.LayoutInflater;\nimport android.view.View;\nimport android.view.ViewGroup;\nimport androidx.annotation.NonNull;\nimport androidx.annotation.Nullable;\nimport androidx.fragment.app.Fragment;\nimport com.thirdydacoder.bottomnavigationbar.R;\n\npublic class AddPage extends Fragment {\n\n    View view;\n    \n    @Nullable\n    @Override\n    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {\n        super.onCreate(savedInstanceState);\n        view = inflater.inflate(R.layout.fragment_add_page, container, false);\n        \n        return view;\n    }\n   \n}\n```\n\n\u003cmark\u003eHomepage.java\u003c/mark\u003e\n\n```java\npackage com.thirdydacoder.bottomnavigationbar.fragments;\nimport android.os.Bundle;\nimport android.view.LayoutInflater;\nimport android.view.View;\nimport android.view.ViewGroup;\nimport androidx.annotation.NonNull;\nimport androidx.annotation.Nullable;\nimport androidx.fragment.app.Fragment;\nimport com.thirdydacoder.bottomnavigationbar.R;\n\npublic class HomePage extends Fragment {\n\n    View view;\n    @Nullable\n    @Override\n    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {\n        super.onCreate(savedInstanceState);\n        view = inflater.inflate(R.layout.fragment_homepage, container, false);\n        return view;\n    }\n}\n```\n\n\u003cmark\u003eProfilePage.java\u003c/mark\u003e\n\n```java\npackage com.thirdydacoder.bottomnavigationbar.fragments;\n\nimport android.os.Bundle;\nimport android.view.LayoutInflater;\nimport android.view.View;\nimport android.view.ViewGroup;\nimport androidx.annotation.NonNull;\nimport androidx.annotation.Nullable;\nimport androidx.fragment.app.Fragment;\nimport com.thirdydacoder.bottomnavigationbar.R;\n\npublic class ProfilePage extends Fragment {\n\n    View view;\n\n    @Nullable\n    @Override\n    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {\n        super.onCreate(savedInstanceState);\n        view = inflater.inflate(R.layout.fragment_profile_page, container, false);\n\n        return view;\n    }\n\n}\n```\n\n### Step 8: Code the MainActivity\n\nExplain the code:\n\n```java\nBottomNavigationView bottomNav = findViewById(R.id.bottom_navigation);\nbottomNav.setSelectedItemId(R.id.nav_home);\nbottomNav.setOnItemSelectedListener(navListener);\n\nFragment selectedFragment = new HomePage();\n\ngetSupportFragmentManager().beginTransaction().replace(R.id.fragment_container,\n        selectedFragment).commit();\n```\n\nThese 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.\n\n---\n\n```java\nprivate NavigationBarView.OnItemSelectedListener navListener =\n        item -\u003e {\n            int itemId = item.getItemId(); /* obtain the selected item ID from your source */\n            Fragment selectedFragment = null;\n\n            if (itemId == R.id.nav_home) {\n                selectedFragment = new HomePage();\n            } else if (itemId == R.id.nav_add) {\n                selectedFragment = new AddPage();\n            } else if (itemId == R.id.nav_profile) {\n                // Handle the profile case\n                selectedFragment = new ProfilePage();\n\n            } else {\n                selectedFragment = new HomePage();\n            }\n            getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container, selectedFragment).commit();\n            return true;\n        };\n```\n\nThis 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.\n\nMain Activity whole code:\n\n```java\npackage com.thirdydacoder.bottomnavigationbar;\n\nimport android.os.Bundle;\n\nimport androidx.appcompat.app.AppCompatActivity;\nimport androidx.fragment.app.Fragment;\n\nimport com.google.android.material.bottomnavigation.BottomNavigationView;\nimport com.google.android.material.navigation.NavigationBarView;\nimport com.thirdydacoder.bottomnavigationbar.fragments.AddPage;\nimport com.thirdydacoder.bottomnavigationbar.fragments.HomePage;\nimport com.thirdydacoder.bottomnavigationbar.fragments.ProfilePage;\n\npublic class MainActivity extends AppCompatActivity {\n\n    @Override\n    protected void onCreate(Bundle savedInstanceState) {\n        super.onCreate(savedInstanceState);\n\n        setContentView(R.layout.activity_main);\n\n        BottomNavigationView bottomNav = findViewById(R.id.bottom_navigation);\n        bottomNav.setSelectedItemId(R.id.nav_home);\n        bottomNav.setOnItemSelectedListener(navListener);\n\n        Fragment selectedFragment = new HomePage();\n\n        getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container,\n                selectedFragment).commit();\n\n    }\n\n    private NavigationBarView.OnItemSelectedListener navListener =\n            item -\u003e {\n                int itemId = item.getItemId(); /* obtain the selected item ID from your source */\n                Fragment selectedFragment = null;\n\n                if (itemId == R.id.nav_home) {\n                    selectedFragment = new HomePage();\n                } else if (itemId == R.id.nav_add) {\n                    selectedFragment = new AddPage();\n                } else if (itemId == R.id.nav_profile) {\n                    // Handle the profile case\n                    selectedFragment = new ProfilePage();\n\n                } else {\n                    selectedFragment = new HomePage();\n                }\n                getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container, selectedFragment).commit();\n                return true;\n            };\n\n}\n```\n\n### **OUTPUT**\n\n![A mobile app interface with a bottom navigation bar containing three icons labeled \"Home,\" \"Add,\" and \"Profile.\" The screen shows the text \"Homepage\" in the center.](https://cdn.hashnode.com/res/hashnode/image/upload/v1722974179816/8b3cbbcf-9ec7-4a76-b035-6fa9cc30807b.gif)\n\nThank you for following this tutorial on creating a Bottom Navigation View in Android Java.\n\nIf you found this helpful, please subscribe to my YouTube channel for more tutorials.\n\n[Thirdy DaCoder — YouTube](https://www.youtube.com/@ThirdyDaCoder)\n\nIf you want the complete source code, you can find it on GitHub. Make sure to star the repository if you like it!\n\n%[https://github.com/thirdygayares/BottomNavigationBar.git] \n\nBuy me a coffee\n\n[https://www.buymeacoffee.com/thirdygayares](https://www.buymeacoffee.com/thirdygayares)\n\nPlease check out my other content and connect with me on various platforms:\n\n* YouTube: [@thirdydacoder](https://www.youtube.com/@ThirdyDaCoder)\n    \n* Github: [thirdygayares](https://github.com/thirdygayares)\n    \n* LinkedIn: [Jose Gayares III](https://www.linkedin.com/in/thirdygayares/)\n    \n* Facebook Page: [Thirdy Dacoder](https://www.facebook.com/thirdydacoder)\n    \n* Website: [thirdygayares.com](https://thirdygayares.com/)\n    \n* Website : [thirdygraphics.com](https://www.thirdygraphics.com/)\n    \n\nFeel free to reach out with any questions or feedback. Happy coding!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthirdygayares%2Fandroid-java-bottom-navigation-bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthirdygayares%2Fandroid-java-bottom-navigation-bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthirdygayares%2Fandroid-java-bottom-navigation-bar/lists"}