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" ?>
< 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
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:
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: