This is the Part 4 of “Build a Social Media App on Android Studio” tutorial, and we are going to cover the following functionalities in this article:
- We are going to retrieve data of users From Firebase.
- This is a simple fragment in which we will retrieve data of users like name, email, and profile pic from real-time Database and showing that in text layout and image layout.
- In the future, we are also going to show the blogs of users on the profile page.
Step By Step Implementation
Step 1: Working with the fragment_profile.xml file
On this page will be the retrieving email, name, and profile picture of the user. And also we have added the Material Floating Action Button to update the data. Navigate to the app > res > layout > fragment_profile.xml and add the below code to that file. Below is the code for the fragment_profile.xml file.
XML
<?xml version="1.0" encoding="utf-8"?><RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="#F1EDED" tools:context=".ProfileFragment"> <ScrollView android:layout_width="match_parent" android:layout_height="wrap_content"> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/cavertv" android:layout_width="match_parent" android:layout_height="180dp" android:background="@color/colorPrimaryDark" android:scaleType="fitXY"> </ImageView> <LinearLayout android:id="@+id/linearLayout" android:layout_width="match_parent" android:layout_height="120dp" android:layout_marginTop="100dp" android:orientation="horizontal"> <ImageView android:id="@+id/avatartv" android:layout_width="120dp" android:layout_height="120dp" android:layout_gravity="center_horizontal" android:layout_marginStart="20dp" android:background="@color/colorPrimary" android:padding="5dp" android:src="@drawable/ic_images" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#77000000" android:orientation="vertical"> <TextView android:id="@+id/nametv" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="5dp" android:layout_marginLeft="5dp" android:layout_marginTop="5dp" android:textColor="@color/colorWhite" android:textSize="25sp" /> <TextView android:id="@+id/emailtv" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="5dp" android:layout_marginLeft="5dp" android:textColor="@color/colorWhite" /> </LinearLayout> </LinearLayout> </RelativeLayout> </ScrollView> <com.google.android.material.floatingactionbutton.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:layout_alignParentBottom="true" android:layout_margin="10dp" android:src="@drawable/ic_edit_white" /></RelativeLayout> |
Step 2: Working with the ProfileFragment.java file
Go to the ProfileFragment.java file and refer to the following code. Below is the code for the ProfileFragment.java file. Comments are added inside the code to understand the code in more detail.
Java
package com.example.socialmediaapp;import android.app.ProgressDialog;import android.content.Intent;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;import android.widget.TextView;import androidx.annotation.NonNull;import androidx.annotation.Nullable;import androidx.fragment.app.Fragment;import androidx.recyclerview.widget.RecyclerView;import com.bumptech.glide.Glide;import com.google.android.material.floatingactionbutton.FloatingActionButton;import com.google.firebase.auth.FirebaseAuth;import com.google.firebase.auth.FirebaseUser;import com.google.firebase.database.DataSnapshot;import com.google.firebase.database.DatabaseError;import com.google.firebase.database.DatabaseReference;import com.google.firebase.database.FirebaseDatabase;import com.google.firebase.database.Query;import com.google.firebase.database.ValueEventListener;/** * A simple {@link Fragment} subclass. */public class ProfileFragment extends Fragment { private FirebaseAuth firebaseAuth; FirebaseUser firebaseUser; FirebaseDatabase firebaseDatabase; DatabaseReference databaseReference; ImageView avatartv; TextView name, email; RecyclerView postrecycle; FloatingActionButton fab; ProgressDialog pd; public ProfileFragment() { // Required empty public constructor } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment // creating a view to inflate the layout View view = inflater.inflate(R.layout.fragment_profile, container, false); firebaseAuth = FirebaseAuth.getInstance(); // getting current user data firebaseUser = firebaseAuth.getCurrentUser(); firebaseDatabase = FirebaseDatabase.getInstance(); databaseReference = firebaseDatabase.getReference("Users"); // Initialising the text view and imageview avatartv = view.findViewById(R.id.avatartv); name = view.findViewById(R.id.nametv); email = view.findViewById(R.id.emailtv); fab = view.findViewById(R.id.fab); pd = new ProgressDialog(getActivity()); pd.setCanceledOnTouchOutside(false); Query query = databaseReference.orderByChild("email").equalTo(firebaseUser.getEmail()); query.addValueEventListener(new ValueEventListener() { @Override public void onDataChange(@NonNull DataSnapshot dataSnapshot) { for (DataSnapshot dataSnapshot1 : dataSnapshot.getChildren()) { // Retrieving Data from firebase String name = "" + dataSnapshot1.child("name").getValue(); String emaill = "" + dataSnapshot1.child("email").getValue(); String image = "" + dataSnapshot1.child("image").getValue(); // setting data to our text view nam.setText(name); email.setText(emaill); try { Glide.with(getActivity()).load(image).into(avatartv); } catch (Exception e) { } } } @Override public void onCancelled(@NonNull DatabaseError databaseError) { } }); // On click we will open EditProfileActiity fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { startActivity(new Intent(getActivity(), EditProfilePage.class)); } }); return view; } @Override public void onCreate(@Nullable Bundle savedInstanceState) { setHasOptionsMenu(true); super.onCreate(savedInstanceState); }} |
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:
