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 version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<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 version="1.0" encoding="utf-8"?>
<LinearLayout
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: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.
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:
Note: Please Add drawable items before running the Application
Below is the file structure after performing these operations:
