This is the Part 2 of “Build a Social Media App in Android Studio” tutorial, and we are going to cover the following functionalities in this article:
- We are going to Create Bottom Navigation with 5 Fragments (Home, Users, AddBlog, ChatList, Profile).
- On HomeFragment we will be Showing all the added blogs.
- In the UsersFragment, we will be showing all the Registered Users.
- In the AddBlogFragment We will be adding our blogs.
- In the ChatlistFragment we will be showing a chat list of all users with whom we have chat.
- In the ProfileFragment We will be showing the Profile of the user where we will be showing users’ data and the blogs written by the user.
Step By Step Implementation
Step 1: Firstly we will create a menu directory inside the res folder. Refer to this article How to Create Menu Folder & Menu File in Android Studio. And name the menus file as menu_nav.xml for creating the layout of bottom navigation. Below is the code for the menu_nav.xml file.
XML
<?xml version="1.0" encoding="utf-8"?> <item android:id="@+id/nav_home" android:icon="@drawable/ic_home" android:title="Home" /> <item android:id="@+id/nav_users" android:icon="@drawable/ic_users" android:title="Users" /> <item android:id="@+id/nav_addblogs" android:icon="@drawable/ic_add" android:title="Add Blogs" /> <item android:id="@+id/nav_chat" android:icon="@drawable/ic_chat" android:title="ChatList" /> <item android:id="@+id/nav_profile" android:icon="@drawable/ic_account" android:title="Profile" /></menu> |
Step 2: Add dependency to build.gradle (Module: app)
Navigate to the Gradle Scripts > build. gradle(Module: app) and add the below dependency in the dependencies section.
implementation ‘com.google.android.material:material:1.2.0’
Step 3: Working with the activity_dashboard.xml file
This page will be the first activity in our app after the user logged in. Navigate to the app > res > layout > activity_dashboard.xml and add the below code to that file. Below is the code for the activity_dashboard.xml file.
XML
<?xml version="1.0" encoding="utf-8"?><LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical" tools:context=".DashboardActivity"> <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:labelVisibilityMode="labeled" app:menu="@menu/menu_nav"> </com.google.android.material.bottomnavigation.BottomNavigationView> </LinearLayout> |
Step 4: Create 5 new blank fragments
Go to the app(right-click) > New > Fragment > Fragment (Blank) and name the fragment as HomeFragment, ProfileFragment, UsersFragment, ChatListFragment, and AddBlogsFragment.
Step 5: Working with the DashboardActivity.java file
In this file, we are just showing the fragment according to the navigation item selected. Then we will be showing the respective fragment.
HomeFragment fragment=new HomeFragment();
FragmentTransaction fragmentTransaction=getSupportFragmentManager().beginTransaction();
fragmentTransaction.replace(R.id.content,fragment,"");
fragmentTransaction.commit();
Go to the DashboardActivity.java file and refer to the following code. Below is the code for the DashboardActivity.java file.
Java
package com.example.socialmediaapp;import android.os.Bundle;import android.view.MenuItem;import androidx.annotation.NonNull;import androidx.appcompat.app.ActionBar;import androidx.appcompat.app.AppCompatActivity;import androidx.fragment.app.FragmentTransaction;import com.google.android.material.bottomnavigation.BottomNavigationView;import com.google.firebase.auth.FirebaseAuth;import com.google.firebase.auth.FirebaseUser;public class DashboardActivity extends AppCompatActivity { private FirebaseAuth firebaseAuth; FirebaseUser firebaseUser; String myuid; ActionBar actionBar; BottomNavigationView navigationView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_dashboard); actionBar = getSupportActionBar(); actionBar.setTitle("Profile Activity"); firebaseAuth = FirebaseAuth.getInstance(); navigationView = findViewById(R.id.navigation); navigationView.setOnNavigationItemSelectedListener(selectedListener); actionBar.setTitle("Home"); // When we open the application first // time the fragment should be shown to the user // in this case it is home fragment HomeFragment fragment = new HomeFragment(); FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction(); fragmentTransaction.replace(R.id.content, fragment, ""); fragmentTransaction.commit(); } private BottomNavigationView.OnNavigationItemSelectedListener selectedListener = new BottomNavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) { switch (menuItem.getItemId()) { case R.id.nav_home: actionBar.setTitle("Home"); HomeFragment fragment = new HomeFragment(); FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction(); fragmentTransaction.replace(R.id.content, fragment, ""); fragmentTransaction.commit(); return true; case R.id.nav_profile: actionBar.setTitle("Profile"); ProfileFragment fragment1 = new ProfileFragment(); FragmentTransaction fragmentTransaction1 = getSupportFragmentManager().beginTransaction(); fragmentTransaction1.replace(R.id.content, fragment1); fragmentTransaction1.commit(); return true; case R.id.nav_users: actionBar.setTitle("Users"); UsersFragment fragment2 = new UsersFragment(); FragmentTransaction fragmentTransaction2 = getSupportFragmentManager().beginTransaction(); fragmentTransaction2.replace(R.id.content, fragment2, ""); fragmentTransaction2.commit(); return true; case R.id.nav_chat: actionBar.setTitle("Chats"); ChatListFragment listFragment = new ChatListFragment(); FragmentTransaction fragmentTransaction3 = getSupportFragmentManager().beginTransaction(); fragmentTransaction3.replace(R.id.content, listFragment, ""); fragmentTransaction3.commit(); return true; case R.id.nav_addblogs: actionBar.setTitle("Add Blogs"); AddBlogsFragment fragment4 = new AddBlogsFragment(); FragmentTransaction fragmentTransaction4 = getSupportFragmentManager().beginTransaction(); fragmentTransaction4.replace(R.id.content, fragment4, ""); fragmentTransaction4.commit(); return true; } return false; } };} |
Output:
For all the drawable file used in this article please refer to this link: https://drive.google.com/drive/folders/1M_knOH_ugCuwSP5nkYzeD4dRp-Honzbe?usp=sharing
Below is the file structure after performing these operations:
