Parte 4 «Crear una aplicación de redes sociales en Android Studio»
- Vamos a recuperar datos de usuarios de Firebase.
- Este es un fragmento simple en el que recuperaremos datos de usuarios como el nombre, el correo electrónico y la foto de perfil de la base de datos en tiempo real y lo mostraremos en el diseño del texto y el diseño de la imagen.
- En el futuro, también mostraremos los blogs de los usuarios en la página de perfil.
Implementación paso a paso
Paso 1: Trabajar con el archivo fragment_profile.xml
En esta página se recuperará el correo electrónico, el nombre y la foto de perfil del usuario. Y también hemos agregado el botón de acción flotante de material para actualizar los datos. aplicación > res > diseño > fragmento_perfil.xml fragmento_perfil.xml
XML
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" 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>
Paso 2: trabajar con el archivo ProfileFragment.java
Vaya al archivo ProfileFragment.java y consulte el siguiente código. A continuación se muestra el código para el archivo ProfileFragment.java . Se agregan comentarios dentro del código para comprender el código con más detalle.
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 nam, 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);
nam = 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);
}
}
Producción:
Para ver todos los archivos dibujables utilizados en este artículo, consulte este enlace: https://drive.google.com/drive/folders/1M_knOH_ugCuwSP5nkYzeD4dRp-Honzbe?usp=sharing
A continuación se muestra la estructura de archivos después de realizar estas operaciones:
