Firebase es un producto famoso de Google que muchos desarrolladores utilizan para agregar funciones de back-end para su sitio web y aplicaciones. Firebase hará que su trabajo sea realmente más fácil para la base de datos de back-end y el manejo de la base de datos. En este artículo, veremos la implementación de Firebase Realtime Database en Android. En este artículo, agregaremos una autenticación de correo electrónico y contraseña dentro de nuestra aplicación y, junto con eso, realizaremos las operaciones CRUD (Crear, Leer, Actualizar y Eliminar) dentro de nuestra aplicación utilizando Firebase Realtime Database.
¿Qué vamos a construir en este artículo?
En este artículo, crearemos una aplicación de Android simple en la que primero autenticaremos al usuario con su correo electrónico y contraseña. Después de eso, mostraremos la lista de cursos que están disponibles en Geeks for Geeks en la vista del reciclador. Podremos realizar operaciones CRUD en estos cursos. A continuación se muestra el video en el que veremos lo que vamos a construir en este artículo.
Implementación paso a paso
Paso 1: Crear un nuevo Proyecto
Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.
Paso 2: conecta tu aplicación a Firebase
Después de crear un nuevo proyecto, vaya a la opción Herramientas en la barra superior. Dentro de eso, haga clic en Firebase. Después de hacer clic en Firebase, puede ver la columna de la derecha que se menciona a continuación en la captura de pantalla.
Dentro de esa columna, navegue hasta Firebase Realtime Database. Haga clic en esa opción y verá dos opciones en Conectar la aplicación a Firebase y Agregar Firebase Realtime Database a su aplicación. Haga clic en Conectar ahora y su aplicación se conectará a Firebase. Después de eso, haga clic en la segunda opción y ahora su aplicación está conectada a Firebase.
Después de conectar su aplicación a Firebase, verá la siguiente pantalla.
Después de eso, verifique que la dependencia de la base de datos Firebase Realtime se haya agregado a nuestro archivo Gradle. Ahora navegue a la aplicación> Gradle Scripts y dentro de ese archivo verifique si la dependencia a continuación se agrega o no. Si la dependencia a continuación no se agrega en su archivo build.gradle . Agregue la siguiente dependencia en la sección de dependencias. A continuación se muestra la sección de dependencias completa en la que hay dependencias para la autenticación, así como la base de datos.
dependencies {
implementation 'androidx.appcompat:appcompat:1.3.0'
implementation 'com.google.android.material:material:1.4.0'
// dependency for picasso for loading image from url
implementation 'com.squareup.picasso:picasso:2.71828'
implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
// dependency for firebase database.
implementation 'com.google.firebase:firebase-database:20.0.0'
implementation platform('com.google.firebase:firebase-bom:28.2.1')
// dependency for firebase authentication.
implementation 'com.google.firebase:firebase-auth'
testImplementation 'junit:junit:4.+'
androidTestImplementation 'androidx.test.ext:junit:1.1.3'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
}
Después de agregar esta dependencia, sincronice su proyecto y ahora estamos listos para crear nuestra aplicación. Si desea obtener más información sobre cómo conectar su aplicación a Firebase. Consulte este artículo para obtener detalles sobre cómo agregar Firebase a la aplicación de Android.
Paso 3: Crear 4 actividades vacías diferentes
Vaya a la aplicación > Nombre del paquete de su aplicación > Haga clic con el botón derecho en él > Nuevo > Actividad > Seleccione Actividad vacía y cree una nueva actividad. A continuación se muestra el nombre de las cuatro actividades diferentes que tenemos que pasar al crear nuevas actividades.
- AddCourseActivity : esta actividad la usaremos para agregar un nuevo curso.
- EditCourseActivity : esta actividad se utilizará para editar nuestro curso y eliminarlo.
- LoginActivity : esta actividad se utilizará con fines de inicio de sesión para el inicio de sesión de usuario existente.
- RegisterActivity : Esta actividad se utiliza para el registro de nuevos Usuarios.
El archivo MainActivity.java ya estará presente en el que mostraremos la lista de cursos en RecyclerView .
Paso 4: trabajar con el archivo AndroidManifest.xml
Vaya a aplicación > archivo AndroidManifest.xml y agréguele permisos de Internet. A continuación se muestra el código completo del archivo AndroidManifest.xml. Dentro de este archivo, también estamos cambiando nuestra actividad de iniciador a Actividad de inicio de sesión. Se agregan comentarios en el código para conocer con más detalle.
XML
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.gtappdevelopers.firebasecrudapp"> <!--permissions for internet--> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/Theme.FirebaseCrudApp"> <activity android:name=".EditCourseActivity" android:label="Edit Course" /> <activity android:name=".AddCourseActivity" android:label="Add Course" /> <activity android:name=".RegisterActivity" android:label="Register" /> <!--login activity is set as launcher activity--> <activity android:name=".LoginActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name=".MainActivity" /> </application> </manifest>
Paso 5: Actualización del archivo colors.xml
Vaya a la aplicación > res > valores > colores.xml y agréguele los siguientes colores.
XML
<?xml version="1.0" encoding="utf-8"?> <resources xmlns:tools="http://schemas.android.com/tools"> <color name="purple_200">#296D98</color> <color name="purple_500">#296D98</color> <color name="purple_700">#296D98</color> <color name="teal_200">#FF03DAC5</color> <color name="teal_700">#FF018786</color> <color name="black">#FF000000</color> <color name="white">#FFFFFFFF</color> <color name="black_shade_1">#0e2433</color> <color name="black_shade_2">#1C4966</color> <color name="black_shade_3">#22252D</color> <color name="mtrl_textinput_default_box_stroke_color" tools:override="true">#296D98</color> <color name="light_blue_shade_1">#296D98</color> <color name="gray">#424242</color> <color name="yellow">#ffa500</color> <color name="dark_blue_shade">#0D2162</color> <color name="dark_blue_shade_2">#17388E</color> <color name="light_blue_shade">#12B2E6</color> </resources>
Paso 6: Actualizar nuestro archivo themes.xml
Vaya a la aplicación > res > valores > themes.xml y agréguele el siguiente código.
XML
<resources xmlns:tools="http://schemas.android.com/tools"> <!-- Base application theme. --> <style name="Theme.FirebaseCrudApp" parent="Theme.MaterialComponents.DayNight.DarkActionBar"> <!-- Primary brand color. --> <item name="colorPrimary">@color/purple_500</item> <item name="colorPrimaryVariant">@color/purple_700</item> <item name="colorOnPrimary">@color/white</item> <!-- Secondary brand color. --> <item name="colorSecondary">@color/teal_200</item> <item name="colorSecondaryVariant">@color/teal_700</item> <item name="colorOnSecondary">@color/black</item> <!-- Status bar color. --> <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item> <!-- Customize your theme here. --> </style> <style name="AppBottomSheetDialogTheme" parent="Theme.Design.Light.BottomSheetDialog"> <item name="bottomSheetStyle">@style/AppModalStyle</item> </style> <style name="BottomSheetDialogTheme" parent="Theme.Design.Light.BottomSheetDialog"> <item name="bottomSheetStyle">@style/BottomSheetStyle</item> </style> <style name="BottomSheetStyle" parent="Widget.Design.BottomSheet.Modal"> <item name="android:background">@android:color/transparent</item> </style> <style name="AppModalStyle" parent="Widget.Design.BottomSheet.Modal"> <item name="android:background">@drawable/rounded_drawable</item> </style> <style name="LoginTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"> <item name="boxStrokeColor">#296D98</item> <item name="boxStrokeWidth">1dp</item> </style> </resources>
Paso 7: crear un fondo personalizado para nuestro botón y un fondo de barra de progreso personalizado
Navegue a la aplicación> res> dibujable> Haga clic con el botón derecho en él> Nuevo archivo de recursos dibujables y asígnele el nombre button_back y agregue el código a continuación. Se agregan comentarios en el código para conocer en detalle.
XML
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <!--for specifying corner radius--> <corners android:radius="20dp" /> <!-- for specifying solid color--> <solid android:color="@color/black_shade_1" /> </shape>
Navegue a la aplicación> res> dibujable> Haga clic con el botón derecho en él> Nuevo archivo de recursos dibujables y asígnele el nombre progreso_retroceso y agregue el código a continuación. Se agregan comentarios en el código para conocer en detalle.
XML
<?xml version="1.0" encoding="utf-8"?> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="0" android:pivotX="50%" android:pivotY="50%" android:toDegrees="360"> <!--shape tag is used to build a shape in XML--> <shape android:innerRadiusRatio="3" android:shape="ring" android:thicknessRatio="8" android:useLevel="false"> <!--set the size of the shape--> <size android:width="76dip" android:height="76dip" /> <!--set the color gradients of the shape--> <gradient android:angle="0" android:endColor="#00ffffff" android:startColor="@color/purple_200" android:type="sweep" android:useLevel="false" /> </shape> </rotate>
Paso 8: trabajar con el archivo activity_register.xml
Vaya a la aplicación > res > activity_register.xml y agréguele el siguiente código. Se agregan comentarios en el código para conocer con más detalle.
XML
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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:background="@color/black_shade_1" tools:context=".RegisterActivity"> <!--edit text for user name--> <com.google.android.material.textfield.TextInputLayout android:id="@+id/idTILUserName" style="@style/LoginTextInputLayoutStyle" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="20dp" android:layout_marginTop="140dp" android:layout_marginEnd="20dp" android:hint="Enter User Name" android:padding="5dp" android:textColorHint="@color/white" app:hintTextColor="@color/white"> <com.google.android.material.textfield.TextInputEditText android:id="@+id/idEdtUserName" android:layout_width="match_parent" android:layout_height="match_parent" android:ems="10" android:importantForAutofill="no" android:inputType="textEmailAddress" android:textColor="@color/white" android:textColorHint="@color/white" android:textSize="14sp" /> </com.google.android.material.textfield.TextInputLayout> <!--edit text for user password--> <com.google.android.material.textfield.TextInputLayout android:id="@+id/idTILPassword" style="@style/LoginTextInputLayoutStyle" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/idTILUserName" android:layout_marginStart="20dp" android:layout_marginTop="20dp" android:layout_marginEnd="20dp" android:hint="Enter Your Password" android:padding="5dp" android:textColorHint="@color/white" app:hintTextColor="@color/white"> <com.google.android.material.textfield.TextInputEditText android:id="@+id/idEdtPassword" android:layout_width="match_parent" android:layout_height="match_parent" android:ems="10" android:importantForAutofill="no" android:inputType="textPassword" android:textColor="@color/white" android:textColorHint="@color/white" android:textSize="14sp" /> </com.google.android.material.textfield.TextInputLayout> <!--edit text for confirmation of user password--> <com.google.android.material.textfield.TextInputLayout android:id="@+id/idTILConfirmPassword" style="@style/LoginTextInputLayoutStyle" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/idTILPassword" android:layout_marginStart="20dp" android:layout_marginTop="20dp" android:layout_marginEnd="20dp" android:hint="Confirm Your Password" android:padding="5dp" android:textColorHint="@color/white" app:hintTextColor="@color/white"> <com.google.android.material.textfield.TextInputEditText android:id="@+id/idEdtConfirmPassword" android:layout_width="match_parent" android:layout_height="match_parent" android:ems="10" android:importantForAutofill="no" android:inputType="textPassword" android:textColor="@color/white" android:textColorHint="@color/white" android:textSize="14sp" /> </com.google.android.material.textfield.TextInputLayout> <!--button for creating user account.--> <Button android:id="@+id/idBtnRegister" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/idTILConfirmPassword" android:layout_marginStart="25dp" android:layout_marginTop="40dp" android:layout_marginEnd="25dp" android:background="@drawable/button_back" android:text="Register" android:textAllCaps="false" /> <!--text view for displaying a text on clicking we will open a login page--> <TextView android:id="@+id/idTVLoginUser" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/idBtnRegister" android:layout_marginTop="40dp" android:gravity="center" android:padding="10dp" android:text="Already a User ? Login Here" android:textAlignment="center" android:textAllCaps="false" android:textColor="@color/white" android:textSize="18sp" /> <!--progress bar as a loading indicator--> <ProgressBar android:id="@+id/idPBLoading" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:indeterminate="true" android:indeterminateDrawable="@drawable/progress_back" android:visibility="gone" /> </RelativeLayout>
Paso 9: trabajar con el archivo RegisterActivity.java
Vaya a la aplicación > java > el nombre del paquete de su aplicación > el archivo RegisterActivity.java y agréguele el siguiente código. Se agregan comentarios en el código para conocer con más detalle.
Java
package com.gtappdevelopers.firebasecrudapp;
import android.content.Intent;
import android.os.Bundle;
import android.text.TextUtils;
import android.view.View;
import android.widget.Button;
import android.widget.ProgressBar;
import android.widget.TextView;
import android.widget.Toast;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import com.google.android.gms.tasks.OnCompleteListener;
import com.google.android.gms.tasks.Task;
import com.google.android.material.textfield.TextInputEditText;
import com.google.firebase.auth.AuthResult;
import com.google.firebase.auth.FirebaseAuth;
public class RegisterActivity extends AppCompatActivity {
// creating variables for edit text and textview,
// firebase auth, button and progress bar.
private TextInputEditText userNameEdt, passwordEdt, confirmPwdEdt;
private TextView loginTV;
private Button registerBtn;
private FirebaseAuth mAuth;
private ProgressBar loadingPB;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_register);
// initializing all our variables.
userNameEdt = findViewById(R.id.idEdtUserName);
passwordEdt = findViewById(R.id.idEdtPassword);
loadingPB = findViewById(R.id.idPBLoading);
confirmPwdEdt = findViewById(R.id.idEdtConfirmPassword);
loginTV = findViewById(R.id.idTVLoginUser);
registerBtn = findViewById(R.id.idBtnRegister);
mAuth = FirebaseAuth.getInstance();
// adding on click for login tv.
loginTV.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// opening a login activity on clicking login text.
Intent i = new Intent(RegisterActivity.this, LoginActivity.class);
startActivity(i);
}
});
// adding click listener for register button.
registerBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// hiding our progress bar.
loadingPB.setVisibility(View.VISIBLE);
// getting data fro =m our edit text.
String userName = userNameEdt.getText().toString();
String pwd = passwordEdt.getText().toString();
String cnfPwd = confirmPwdEdt.getText().toString();
// checking if the password and confirm password is equal or not.
if (!pwd.equals(cnfPwd)) {
Toast.makeText(RegisterActivity.this, "Please check both having same password..", Toast.LENGTH_SHORT).show();
} else if (TextUtils.isEmpty(userName) && TextUtils.isEmpty(pwd) && TextUtils.isEmpty(cnfPwd)) {
// checking if the text fields are empty or not.
Toast.makeText(RegisterActivity.this, "Please enter your credentials..", Toast.LENGTH_SHORT).show();
} else {
// on below line we are creating a new user by passing email and password.
mAuth.createUserWithEmailAndPassword(userName, pwd).addOnCompleteListener(new OnCompleteListener<AuthResult>() {
@Override
public void onComplete(@NonNull Task<AuthResult> task) {
// on below line we are checking if the task is success or not.
if (task.isSuccessful()) {
// in on success method we are hiding our progress bar and opening a login activity.
loadingPB.setVisibility(View.GONE);
Toast.makeText(RegisterActivity.this, "User Registered..", Toast.LENGTH_SHORT).show();
Intent i = new Intent(RegisterActivity.this, LoginActivity.class);
startActivity(i);
finish();
} else {
// in else condition we are displaying a failure toast message.
loadingPB.setVisibility(View.GONE);
Toast.makeText(RegisterActivity.this, "Fail to register user..", Toast.LENGTH_SHORT).show();
}
}
});
}
}
});
}
}
Paso 10: trabajar con el archivo activity_login.xml
Vaya a la aplicación > res > activity_login.xml y agréguele el siguiente código. Se agregan comentarios en el código para conocer con más detalle.
XML
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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:background="@color/black_shade_1" tools:context=".LoginActivity"> <!--edit text for user name--> <com.google.android.material.textfield.TextInputLayout android:id="@+id/idTILUserName" style="@style/LoginTextInputLayoutStyle" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="20dp" android:layout_marginTop="140dp" android:layout_marginEnd="20dp" android:hint="Enter User Name" android:padding="5dp" android:textColorHint="@color/white" app:hintTextColor="@color/white"> <com.google.android.material.textfield.TextInputEditText android:id="@+id/idEdtUserName" android:layout_width="match_parent" android:layout_height="match_parent" android:ems="10" android:importantForAutofill="no" android:inputType="textEmailAddress" android:textColor="@color/white" android:textColorHint="@color/white" android:textSize="14sp" /> </com.google.android.material.textfield.TextInputLayout> <!--edit text for password--> <com.google.android.material.textfield.TextInputLayout android:id="@+id/idTILPassword" style="@style/LoginTextInputLayoutStyle" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/idTILUserName" android:layout_marginStart="20dp" android:layout_marginTop="40dp" android:layout_marginEnd="20dp" android:hint="Enter your Password" android:padding="5dp" android:textColorHint="@color/white" app:hintTextColor="@color/white"> <com.google.android.material.textfield.TextInputEditText android:id="@+id/idEdtPassword" android:layout_width="match_parent" android:layout_height="match_parent" android:ems="10" android:importantForAutofill="no" android:inputType="textPassword" android:textColor="@color/white" android:textColorHint="@color/white" android:textSize="14sp" /> </com.google.android.material.textfield.TextInputLayout> <!--button for login--> <Button android:id="@+id/idBtnLogin" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/idTILPassword" android:layout_marginStart="25dp" android:layout_marginTop="40dp" android:layout_marginEnd="25dp" android:background="@drawable/button_back" android:text="Login" android:textAllCaps="false" /> <!--text view for creating a new account--> <TextView android:id="@+id/idTVNewUser" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/idBtnLogin" android:layout_marginTop="40dp" android:gravity="center" android:padding="10dp" android:text="New User ? Register Here" android:textAlignment="center" android:textAllCaps="false" android:textColor="@color/white" android:textSize="18sp" /> <!--progress-bar for loading indicator--> <ProgressBar android:id="@+id/idPBLoading" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/idTVNewUser" android:layout_centerHorizontal="true" android:layout_marginTop="10dp" android:indeterminate="true" android:indeterminateDrawable="@drawable/progress_back" android:visibility="gone" /> </RelativeLayout>
Paso 11: trabajar con el archivo LoginActivity.java
Vaya a la aplicación > java > el nombre del paquete de su aplicación > archivo LoginActivity.java y agréguele el siguiente código. Se agregan comentarios en el código para conocer con más detalle.
Java
package com.gtappdevelopers.firebasecrudapp;
import android.content.Intent;
import android.os.Bundle;
import android.text.TextUtils;
import android.view.View;
import android.widget.Button;
import android.widget.ProgressBar;
import android.widget.TextView;
import android.widget.Toast;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import com.google.android.gms.tasks.OnCompleteListener;
import com.google.android.gms.tasks.Task;
import com.google.android.material.textfield.TextInputEditText;
import com.google.firebase.auth.AuthResult;
import com.google.firebase.auth.FirebaseAuth;
import com.google.firebase.auth.FirebaseUser;
public class LoginActivity extends AppCompatActivity {
// creating variable for edit text, textview,
// button, progress bar and firebase auth.
private TextInputEditText userNameEdt, passwordEdt;
private Button loginBtn;
private TextView newUserTV;
private FirebaseAuth mAuth;
private ProgressBar loadingPB;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_login);
// initializing all our variables.
userNameEdt = findViewById(R.id.idEdtUserName);
passwordEdt = findViewById(R.id.idEdtPassword);
loginBtn = findViewById(R.id.idBtnLogin);
newUserTV = findViewById(R.id.idTVNewUser);
mAuth = FirebaseAuth.getInstance();
loadingPB = findViewById(R.id.idPBLoading);
// adding click listener for our new user tv.
newUserTV.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// on below line opening a login activity.
Intent i = new Intent(LoginActivity.this, RegisterActivity.class);
startActivity(i);
}
});
// adding on click listener for our login button.
loginBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// hiding our progress bar.
loadingPB.setVisibility(View.VISIBLE);
// getting data from our edit text on below line.
String email = userNameEdt.getText().toString();
String password = passwordEdt.getText().toString();
// on below line validating the text input.
if (TextUtils.isEmpty(email) && TextUtils.isEmpty(password)) {
Toast.makeText(LoginActivity.this, "Please enter your credentials..", Toast.LENGTH_SHORT).show();
return;
}
// on below line we are calling a sign in method and passing email and password to it.
mAuth.signInWithEmailAndPassword(email, password).addOnCompleteListener(new OnCompleteListener<AuthResult>() {
@Override
public void onComplete(@NonNull Task<AuthResult> task) {
// on below line we are checking if the task is success or not.
if (task.isSuccessful()) {
// on below line we are hiding our progress bar.
loadingPB.setVisibility(View.GONE);
Toast.makeText(LoginActivity.this, "Login Successful..", Toast.LENGTH_SHORT).show();
// on below line we are opening our mainactivity.
Intent i = new Intent(LoginActivity.this, MainActivity.class);
startActivity(i);
finish();
} else {
// hiding our progress bar and displaying a toast message.
loadingPB.setVisibility(View.GONE);
Toast.makeText(LoginActivity.this, "Please enter valid user credentials..", Toast.LENGTH_SHORT).show();
}
}
});
}
});
}
@Override
protected void onStart() {
super.onStart();
// in on start method checking if
// the user is already sign in.
FirebaseUser user = mAuth.getCurrentUser();
if (user != null) {
// if the user is not null then we are
// opening a main activity on below line.
Intent i = new Intent(LoginActivity.this, MainActivity.class);
startActivity(i);
this.finish();
}
}
}
Paso 12: crear una clase Modal para que nuestros datos se muestren dentro de nuestro RecyclerView
Navegue a la aplicación > java > el nombre del paquete de su aplicación > haga clic con el botón derecho en él > Nuevo > clase Java y asígnele el nombre CourseRVModal y agréguele el siguiente código. Se agregan comentarios en el código para conocer con más detalle.
Java
package com.gtappdevelopers.firebasecrudapp;
import android.os.Parcel;
import android.os.Parcelable;
public class CourseRVModal implements Parcelable {
// creating variables for our different fields.
private String courseName;
private String courseDescription;
private String coursePrice;
private String bestSuitedFor;
private String courseImg;
private String courseLink;
private String courseId;
public String getCourseId() {
return courseId;
}
public void setCourseId(String courseId) {
this.courseId = courseId;
}
// creating an empty constructor.
public CourseRVModal() {
}
protected CourseRVModal(Parcel in) {
courseName = in.readString();
courseId = in.readString();
courseDescription = in.readString();
coursePrice = in.readString();
bestSuitedFor = in.readString();
courseImg = in.readString();
courseLink = in.readString();
}
public static final Creator<CourseRVModal> CREATOR = new Creator<CourseRVModal>() {
@Override
public CourseRVModal createFromParcel(Parcel in) {
return new CourseRVModal(in);
}
@Override
public CourseRVModal[] newArray(int size) {
return new CourseRVModal[size];
}
};
// creating getter and setter methods.
public String getCourseName() {
return courseName;
}
public void setCourseName(String courseName) {
this.courseName = courseName;
}
public String getCourseDescription() {
return courseDescription;
}
public void setCourseDescription(String courseDescription) {
this.courseDescription = courseDescription;
}
public String getCoursePrice() {
return coursePrice;
}
public void setCoursePrice(String coursePrice) {
this.coursePrice = coursePrice;
}
public String getBestSuitedFor() {
return bestSuitedFor;
}
public void setBestSuitedFor(String bestSuitedFor) {
this.bestSuitedFor = bestSuitedFor;
}
public String getCourseImg() {
return courseImg;
}
public void setCourseImg(String courseImg) {
this.courseImg = courseImg;
}
public String getCourseLink() {
return courseLink;
}
public void setCourseLink(String courseLink) {
this.courseLink = courseLink;
}
public CourseRVModal(String courseId, String courseName, String courseDescription, String coursePrice, String bestSuitedFor, String courseImg, String courseLink) {
this.courseName = courseName;
this.courseId = courseId;
this.courseDescription = courseDescription;
this.coursePrice = coursePrice;
this.bestSuitedFor = bestSuitedFor;
this.courseImg = courseImg;
this.courseLink = courseLink;
}
@Override
public int describeContents() {
return 0;
}
@Override
public void writeToParcel(Parcel dest, int flags) {
dest.writeString(courseName);
dest.writeString(courseId);
dest.writeString(courseDescription);
dest.writeString(coursePrice);
dest.writeString(bestSuitedFor);
dest.writeString(courseImg);
dest.writeString(courseLink);
}
}
Operación CREAR en la base de datos
Paso 13: trabajar con el archivo activity_add_course.xml
Vaya a la aplicación > res > diseño > actividad_añadir_curso.xml y agréguele el siguiente código. Se agregan comentarios en el código para conocer con más detalle.
XML
<?xml version="1.0" encoding="utf-8"?> <ScrollView 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:background="@color/black_shade_1" tools:context=".AddCourseActivity"> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <!--edit text for course name--> <com.google.android.material.textfield.TextInputLayout android:id="@+id/idTILCourseName" style="@style/LoginTextInputLayoutStyle" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_marginTop="10dp" android:layout_marginRight="10dp" android:hint="Enter Course Name" android:padding="5dp" android:textColorHint="@color/white" app:hintTextColor="@color/white"> <com.google.android.material.textfield.TextInputEditText android:id="@+id/idEdtCourseName" android:layout_width="match_parent" android:layout_height="match_parent" android:ems="10" android:importantForAutofill="no" android:inputType="textImeMultiLine|textMultiLine" android:textColor="@color/white" android:textColorHint="@color/white" android:textSize="14sp" /> </com.google.android.material.textfield.TextInputLayout> <!--edit text for course price--> <com.google.android.material.textfield.TextInputLayout android:id="@+id/idTILCoursePrice" style="@style/LoginTextInputLayoutStyle" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_marginTop="10dp" android:layout_marginRight="10dp" android:hint="Enter Course Price" android:padding="5dp" android:textColorHint="@color/white" app:boxStrokeColor="@color/purple_200" app:hintTextColor="@color/white"> <com.google.android.material.textfield.TextInputEditText android:id="@+id/idEdtCoursePrice" android:layout_width="match_parent" android:layout_height="match_parent" android:ems="10" android:importantForAutofill="no" android:inputType="phone" android:textColor="@color/white" android:textColorHint="@color/white" android:textSize="14sp" app:boxStrokeColor="@color/purple_200" /> </com.google.android.material.textfield.TextInputLayout> <!--edit text for course suited for--> <com.google.android.material.textfield.TextInputLayout android:id="@+id/idTILCourseSuitedFor" style="@style/LoginTextInputLayoutStyle" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_marginTop="10dp" android:layout_marginRight="10dp" android:hint="Enter Course Suited For" android:padding="5dp" android:textColorHint="@color/white" app:hintTextColor="@color/white"> <com.google.android.material.textfield.TextInputEditText android:id="@+id/idEdtSuitedFor" android:layout_width="match_parent" android:layout_height="match_parent" android:ems="10" android:importantForAutofill="no" android:inputType="textImeMultiLine|textMultiLine" android:textColor="@color/white" android:textColorHint="@color/white" android:textSize="14sp" /> </com.google.android.material.textfield.TextInputLayout> <!--edit text for course image link--> <com.google.android.material.textfield.TextInputLayout android:id="@+id/idTILCourseImageLink" style="@style/LoginTextInputLayoutStyle" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_marginTop="10dp" android:layout_marginRight="10dp" android:hint="Enter Course Image Link" android:padding="5dp" android:textColorHint="@color/white" app:hintTextColor="@color/white"> <com.google.android.material.textfield.TextInputEditText android:id="@+id/idEdtCourseImageLink" android:layout_width="match_parent" android:layout_height="match_parent" android:ems="10" android:importantForAutofill="no" android:inputType="textImeMultiLine|textMultiLine" android:textColor="@color/white" android:textColorHint="@color/white" android:textSize="14sp" /> </com.google.android.material.textfield.TextInputLayout> <!--edit text for course link--> <com.google.android.material.textfield.TextInputLayout android:id="@+id/idTILCourseLink" style="@style/LoginTextInputLayoutStyle" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_marginTop="10dp" android:layout_marginRight="10dp" android:hint="Enter Course Link" android:padding="5dp" android:textColorHint="@color/white" app:hintTextColor="@color/white"> <com.google.android.material.textfield.TextInputEditText android:id="@+id/idEdtCourseLink" android:layout_width="match_parent" android:layout_height="match_parent" android:ems="10" android:importantForAutofill="no" android:inputType="textImeMultiLine|textMultiLine" android:textColor="@color/white" android:textColorHint="@color/white" android:textSize="14sp" /> </com.google.android.material.textfield.TextInputLayout> <!--edit text for course description--> <com.google.android.material.textfield.TextInputLayout android:id="@+id/idTILCourseDescription" style="@style/LoginTextInputLayoutStyle" android:layout_width="match_parent" android:layout_height="200dp" android:layout_marginLeft="10dp" android:layout_marginTop="10dp" android:layout_marginRight="10dp" android:hint="Enter Course Description" android:padding="5dp" android:textColorHint="@color/white" app:hintTextColor="@color/white"> <com.google.android.material.textfield.TextInputEditText android:id="@+id/idEdtCourseDescription" android:layout_width="match_parent" android:layout_height="match_parent" android:ems="10" android:importantForAutofill="no" android:inputType="textImeMultiLine|textMultiLine" android:textColor="@color/white" android:textColorHint="@color/white" android:textSize="14sp" /> </com.google.android.material.textfield.TextInputLayout> <!--button for adding a new course--> <Button android:id="@+id/idBtnAddCourse" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="10dp" android:layout_marginTop="10dp" android:layout_marginEnd="10dp" android:layout_marginBottom="10dp" android:background="@drawable/button_back" android:text="Add Your Course" android:textAllCaps="false" /> </LinearLayout> <!--progress bar for loading indicator--> <ProgressBar android:id="@+id/idPBLoading" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_gravity="center" android:indeterminate="true" android:indeterminateDrawable="@drawable/progress_back" android:visibility="gone" /> </RelativeLayout> </ScrollView>
Paso 14: trabajar con el archivo AddCourseActivity.java
Vaya a la aplicación > java > el nombre del paquete de su aplicación > archivo AddCourseActivity.java y agréguele el siguiente código. Se agregan comentarios en el código para conocer con más detalle.
Java
package com.gtappdevelopers.firebasecrudapp;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ProgressBar;
import android.widget.Toast;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import com.google.android.material.textfield.TextInputEditText;
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.ValueEventListener;
public class AddCourseActivity extends AppCompatActivity {
// creating variables for our button, edit text,
// firebase database, database reference, progress bar.
private Button addCourseBtn;
private TextInputEditText courseNameEdt, courseDescEdt, coursePriceEdt, bestSuitedEdt, courseImgEdt, courseLinkEdt;
FirebaseDatabase firebaseDatabase;
DatabaseReference databaseReference;
private ProgressBar loadingPB;
private String courseID;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_add_course);
// initializing all our variables.
addCourseBtn = findViewById(R.id.idBtnAddCourse);
courseNameEdt = findViewById(R.id.idEdtCourseName);
courseDescEdt = findViewById(R.id.idEdtCourseDescription);
coursePriceEdt = findViewById(R.id.idEdtCoursePrice);
bestSuitedEdt = findViewById(R.id.idEdtSuitedFor);
courseImgEdt = findViewById(R.id.idEdtCourseImageLink);
courseLinkEdt = findViewById(R.id.idEdtCourseLink);
loadingPB = findViewById(R.id.idPBLoading);
firebaseDatabase = FirebaseDatabase.getInstance();
// on below line creating our database reference.
databaseReference = firebaseDatabase.getReference("Courses");
// adding click listener for our add course button.
addCourseBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
loadingPB.setVisibility(View.VISIBLE);
// getting data from our edit text.
String courseName = courseNameEdt.getText().toString();
String courseDesc = courseDescEdt.getText().toString();
String coursePrice = coursePriceEdt.getText().toString();
String bestSuited = bestSuitedEdt.getText().toString();
String courseImg = courseImgEdt.getText().toString();
String courseLink = courseLinkEdt.getText().toString();
courseID = courseName;
// on below line we are passing all data to our modal class.
CourseRVModal courseRVModal = new CourseRVModal(courseID, courseName, courseDesc, coursePrice, bestSuited, courseImg, courseLink);
// on below line we are calling a add value event
// to pass data to firebase database.
databaseReference.addValueEventListener(new ValueEventListener() {
@Override
public void onDataChange(@NonNull DataSnapshot snapshot) {
// on below line we are setting data in our firebase database.
databaseReference.child(courseID).setValue(courseRVModal);
// displaying a toast message.
Toast.makeText(AddCourseActivity.this, "Course Added..", Toast.LENGTH_SHORT).show();
// starting a main activity.
startActivity(new Intent(AddCourseActivity.this, MainActivity.class));
}
@Override
public void onCancelled(@NonNull DatabaseError error) {
// displaying a failure message on below line.
Toast.makeText(AddCourseActivity.this, "Fail to add Course..", Toast.LENGTH_SHORT).show();
}
});
}
});
}
}
LEER operación desde la base de datos
Paso 15: Crear un elemento para cada curso dentro de nuestra Vista de reciclador.
Navegue a app > res > Haga clic con el botón derecho en él > Nuevo archivo de recursos de diseño y asígnele el nombre Course_rv_item y agréguele el siguiente código. Se agregan comentarios en el código para conocer con más detalle.
XML
<?xml version="1.0" encoding="utf-8"?> <androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_margin="5dp" app:cardCornerRadius="4dp" app:cardElevation="3dp"> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/black_shade_1"> <!--image view for our course--> <ImageView android:id="@+id/idIVCourse" android:layout_width="match_parent" android:layout_height="200dp" android:scaleType="centerCrop" /> <!--text view for course name--> <TextView android:id="@+id/idTVCOurseName" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/idIVCourse" android:layout_margin="3dp" android:layout_toStartOf="@id/idTVCousePrice" android:layout_toLeftOf="@id/idTVCousePrice" android:padding="4dp" android:text="Course Name" android:textColor="@color/white" android:textSize="15sp" android:textStyle="bold" /> <!--text view for course price--> <TextView android:id="@+id/idTVCousePrice" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/idIVCourse" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:layout_margin="3dp" android:gravity="center" android:padding="4dp" android:text="Price" android:textColor="@color/white" android:textSize="15sp" android:textStyle="bold" /> </RelativeLayout> </androidx.cardview.widget.CardView>
Paso 16: trabajar con el archivo activity_main.xml
Vaya a la aplicación > res > diseño > actividad_principal.xml y agréguele el siguiente código. Se agregan comentarios en el código para conocer con más detalle.
XML
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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:id="@+id/idRLHome" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/black_shade_1" tools:context=".MainActivity"> <!--recycler view for our data--> <androidx.recyclerview.widget.RecyclerView android:id="@+id/idRVCourses" android:layout_width="match_parent" android:layout_height="wrap_content" tools:listitem="@layout/course_rv_item" /> <!--progress bar for loading indicator--> <ProgressBar android:id="@+id/idPBLoading" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:indeterminate="true" android:indeterminateDrawable="@drawable/progress_back" /> <!--floating action button--> <com.google.android.material.floatingactionbutton.FloatingActionButton android:id="@+id/idFABAddCourse" 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="20dp" android:src="@drawable/ic_add" app:background="@color/black_shade_1" app:backgroundTint="@color/black_shade_2" app:tint="@color/white" /> </RelativeLayout>
Paso 17: crear una clase de adaptador para configurar datos en cada elemento de RecyclerView
Navegue a la aplicación > java > el nombre del paquete de su aplicación > haga clic con el botón derecho en él > Nuevo > clase Java y asígnele el nombre CourseRVAdapter y agréguele el siguiente código. Se agregan comentarios en el código para conocer con más detalle.
Java
package com.gtappdevelopers.firebasecrudapp;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import com.squareup.picasso.Picasso;
import java.util.ArrayList;
public class CourseRVAdapter extends RecyclerView.Adapter<CourseRVAdapter.ViewHolder> {
// creating variables for our list, context, interface and position.
private ArrayList<CourseRVModal> courseRVModalArrayList;
private Context context;
private CourseClickInterface courseClickInterface;
int lastPos = -1;
// creating a constructor.
public CourseRVAdapter(ArrayList<CourseRVModal> courseRVModalArrayList, Context context, CourseClickInterface courseClickInterface) {
this.courseRVModalArrayList = courseRVModalArrayList;
this.context = context;
this.courseClickInterface = courseClickInterface;
}
@NonNull
@Override
public CourseRVAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
// inflating our layout file on below line.
View view = LayoutInflater.from(context).inflate(R.layout.course_rv_item, parent, false);
return new ViewHolder(view);
}
@Override
public void onBindViewHolder(@NonNull CourseRVAdapter.ViewHolder holder, int position) {
// setting data to our recycler view item on below line.
CourseRVModal courseRVModal = courseRVModalArrayList.get(position);
holder.courseTV.setText(courseRVModal.getCourseName());
holder.coursePriceTV.setText("Rs. " + courseRVModal.getCoursePrice());
Picasso.get().load(courseRVModal.getCourseImg()).into(holder.courseIV);
// adding animation to recycler view item on below line.
setAnimation(holder.itemView, position);
holder.courseIV.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
courseClickInterface.onCourseClick(position);
}
});
}
private void setAnimation(View itemView, int position) {
if (position > lastPos) {
// on below line we are setting animation.
Animation animation = AnimationUtils.loadAnimation(context, android.R.anim.slide_in_left);
itemView.setAnimation(animation);
lastPos = position;
}
}
@Override
public int getItemCount() {
return courseRVModalArrayList.size();
}
public static class ViewHolder extends RecyclerView.ViewHolder {
// creating variable for our image view and text view on below line.
private ImageView courseIV;
private TextView courseTV, coursePriceTV;
public ViewHolder(@NonNull View itemView) {
super(itemView);
// initializing all our variables on below line.
courseIV = itemView.findViewById(R.id.idIVCourse);
courseTV = itemView.findViewById(R.id.idTVCOurseName);
coursePriceTV = itemView.findViewById(R.id.idTVCousePrice);
}
}
// creating a interface for on click
public interface CourseClickInterface {
void onCourseClick(int position);
}
}
Paso 18: Creación de un archivo de menú para mostrar las opciones del menú
Navegue a la aplicación> res> Haga clic con el botón derecho en él> Nuevo> Directorio y asígnele el nombre menú. Ahora navegue al directorio del menú, haga clic con el botón derecho en él> Nuevo> Archivo de recursos de menú y asígnele el nombre menu_main.xml y agregue el código a continuación. Se agregan comentarios en el código para conocer con más detalle.
XML
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <!--specifying item for displaying option--> <item android:id="@+id/idLogOut" android:icon="@drawable/ic_logout" android:title="Log Out" /> </menu>
Paso 19: crear un archivo de diseño para mostrar una hoja inferior
Navegue a la aplicación> res> diseño> Haga clic con el botón derecho en él> Nuevo> Archivo de recursos de diseño y asígnele el nombre bottom_sheet_layout y agregue el código a continuación. Se agregan comentarios en el código para conocer con más detalle.
XML
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/idRLBSheet" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/black_shade_1" android:padding="4dp"> <!--text view for displaying course name--> <TextView android:id="@+id/idTVCourseName" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="3dp" android:padding="4dp" android:text="Course Name" android:textColor="@color/white" android:textSize="15sp" android:textStyle="bold" /> <!--image view for displaying course image--> <ImageView android:id="@+id/idIVCourse" android:layout_width="100dp" android:layout_height="100dp" android:layout_below="@id/idTVCourseName" android:layout_centerVertical="true" android:layout_margin="4dp" android:padding="4dp" android:src="@drawable/ic_launcher_background" /> <!--text view for displaying course description--> <TextView android:id="@+id/idTVCourseDesc" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/idTVCourseName" android:layout_margin="4dp" android:layout_toEndOf="@id/idIVCourse" android:layout_toRightOf="@id/idIVCourse" android:padding="3dp" android:text="Description" android:textColor="@color/white" /> <!--text view for displaying course best suited for--> <TextView android:id="@+id/idTVSuitedFor" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/idTVCourseDesc" android:layout_margin="4dp" android:layout_toRightOf="@id/idIVCourse" android:padding="3dp" android:text="Suited for" android:textColor="@color/white" /> <!--text view for displaying course price--> <TextView android:id="@+id/idTVCoursePrice" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/idTVSuitedFor" android:layout_margin="4dp" android:layout_toRightOf="@id/idIVCourse" android:padding="3dp" android:text="Price" android:textColor="@color/white" android:textSize="18sp" android:textStyle="bold" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/idTVCoursePrice" android:orientation="horizontal" android:weightSum="2"> <!--button for editing course--> <Button android:id="@+id/idBtnEditCourse" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_margin="6dp" android:layout_weight="1" android:text="Edit Course" android:textAllCaps="false" /> <!--button for viewing course details--> <Button android:id="@+id/idBtnVIewDetails" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_margin="6dp" android:layout_weight="1" android:text="View Details" android:textAllCaps="false" /> </LinearLayout> </RelativeLayout>
Paso 20: trabajar con el archivo MainActivity.java
Vaya a la aplicación > java > el nombre del paquete de su aplicación > archivo MainActivity.java y agréguele el siguiente código. Se agregan comentarios en el código para conocer en detalle.
Java
package com.gtappdevelopers.firebasecrudapp;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.ProgressBar;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import com.google.android.material.bottomsheet.BottomSheetDialog;
import com.google.android.material.floatingactionbutton.FloatingActionButton;
import com.google.firebase.auth.FirebaseAuth;
import com.google.firebase.database.ChildEventListener;
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.squareup.picasso.Picasso;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity implements CourseRVAdapter.CourseClickInterface {
// creating variables for fab, firebase database,
// progress bar, list, adapter,firebase auth,
// recycler view and relative layout.
private FloatingActionButton addCourseFAB;
FirebaseDatabase firebaseDatabase;
DatabaseReference databaseReference;
private RecyclerView courseRV;
private FirebaseAuth mAuth;
private ProgressBar loadingPB;
private ArrayList<CourseRVModal> courseRVModalArrayList;
private CourseRVAdapter courseRVAdapter;
private RelativeLayout homeRL;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// initializing all our variables.
courseRV = findViewById(R.id.idRVCourses);
homeRL = findViewById(R.id.idRLBSheet);
loadingPB = findViewById(R.id.idPBLoading);
addCourseFAB = findViewById(R.id.idFABAddCourse);
firebaseDatabase = FirebaseDatabase.getInstance();
mAuth = FirebaseAuth.getInstance();
courseRVModalArrayList = new ArrayList<>();
// on below line we are getting database reference.
databaseReference = firebaseDatabase.getReference("Courses");
// on below line adding a click listener for our floating action button.
addCourseFAB.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// opening a new activity for adding a course.
Intent i = new Intent(MainActivity.this, AddCourseActivity.class);
startActivity(i);
}
});
// on below line initializing our adapter class.
courseRVAdapter = new CourseRVAdapter(courseRVModalArrayList, this, this::onCourseClick);
// setting layout malinger to recycler view on below line.
courseRV.setLayoutManager(new LinearLayoutManager(this));
// setting adapter to recycler view on below line.
courseRV.setAdapter(courseRVAdapter);
// on below line calling a method to fetch courses from database.
getCourses();
}
private void getCourses() {
// on below line clearing our list.
courseRVModalArrayList.clear();
// on below line we are calling add child event listener method to read the data.
databaseReference.addChildEventListener(new ChildEventListener() {
@Override
public void onChildAdded(@NonNull DataSnapshot snapshot, @Nullable String previousChildName) {
// on below line we are hiding our progress bar.
loadingPB.setVisibility(View.GONE);
// adding snapshot to our array list on below line.
courseRVModalArrayList.add(snapshot.getValue(CourseRVModal.class));
// notifying our adapter that data has changed.
courseRVAdapter.notifyDataSetChanged();
}
@Override
public void onChildChanged(@NonNull DataSnapshot snapshot, @Nullable String previousChildName) {
// this method is called when new child is added
// we are notifying our adapter and making progress bar
// visibility as gone.
loadingPB.setVisibility(View.GONE);
courseRVAdapter.notifyDataSetChanged();
}
@Override
public void onChildRemoved(@NonNull DataSnapshot snapshot) {
// notifying our adapter when child is removed.
courseRVAdapter.notifyDataSetChanged();
loadingPB.setVisibility(View.GONE);
}
@Override
public void onChildMoved(@NonNull DataSnapshot snapshot, @Nullable String previousChildName) {
// notifying our adapter when child is moved.
courseRVAdapter.notifyDataSetChanged();
loadingPB.setVisibility(View.GONE);
}
@Override
public void onCancelled(@NonNull DatabaseError error) {
}
});
}
@Override
public void onCourseClick(int position) {
// calling a method to display a bottom sheet on below line.
displayBottomSheet(courseRVModalArrayList.get(position));
}
@Override
public boolean onOptionsItemSelected(@NonNull MenuItem item) {
// adding a click listener for option selected on below line.
int id = item.getItemId();
switch (id) {
case R.id.idLogOut:
// displaying a toast message on user logged out inside on click.
Toast.makeText(getApplicationContext(), "User Logged Out", Toast.LENGTH_LONG).show();
// on below line we are signing out our user.
mAuth.signOut();
// on below line we are opening our login activity.
Intent i = new Intent(MainActivity.this, LoginActivity.class);
startActivity(i);
this.finish();
return true;
default:
return super.onOptionsItemSelected(item);
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// on below line we are inflating our menu
// file for displaying our menu options.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
private void displayBottomSheet(CourseRVModal modal) {
// on below line we are creating our bottom sheet dialog.
final BottomSheetDialog bottomSheetTeachersDialog = new BottomSheetDialog(this, R.style.BottomSheetDialogTheme);
// on below line we are inflating our layout file for our bottom sheet.
View layout = LayoutInflater.from(this).inflate(R.layout.bottom_sheet_layout, homeRL);
// setting content view for bottom sheet on below line.
bottomSheetTeachersDialog.setContentView(layout);
// on below line we are setting a cancelable
bottomSheetTeachersDialog.setCancelable(false);
bottomSheetTeachersDialog.setCanceledOnTouchOutside(true);
// calling a method to display our bottom sheet.
bottomSheetTeachersDialog.show();
// on below line we are creating variables for
// our text view and image view inside bottom sheet
// and initialing them with their ids.
TextView courseNameTV = layout.findViewById(R.id.idTVCourseName);
TextView courseDescTV = layout.findViewById(R.id.idTVCourseDesc);
TextView suitedForTV = layout.findViewById(R.id.idTVSuitedFor);
TextView priceTV = layout.findViewById(R.id.idTVCoursePrice);
ImageView courseIV = layout.findViewById(R.id.idIVCourse);
// on below line we are setting data to different views on below line.
courseNameTV.setText(modal.getCourseName());
courseDescTV.setText(modal.getCourseDescription());
suitedForTV.setText("Suited for " + modal.getBestSuitedFor());
priceTV.setText("Rs." + modal.getCoursePrice());
Picasso.get().load(modal.getCourseImg()).into(courseIV);
Button viewBtn = layout.findViewById(R.id.idBtnVIewDetails);
Button editBtn = layout.findViewById(R.id.idBtnEditCourse);
// adding on click listener for our edit button.
editBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// on below line we are opening our EditCourseActivity on below line.
Intent i = new Intent(MainActivity.this, EditCourseActivity.class);
// on below line we are passing our course modal
i.putExtra("course", modal);
startActivity(i);
}
});
// adding click listener for our view button on below line.
viewBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// on below line we are navigating to browser
// for displaying course details from its url
Intent i = new Intent(Intent.ACTION_VIEW);
i.setData(Uri.parse(modal.getCourseLink()));
startActivity(i);
}
});
}
}
Operación EDITAR Y ELIMINAR en la base de datos
Paso 21: Trabajar con el archivo activity_edit_course.xml
Vaya a la aplicación > res > diseño > actividad_editar_curso.xml y agréguele el siguiente código. Se agregan comentarios en el código para conocer en detalle.
XML
<?xml version="1.0" encoding="utf-8"?> <ScrollView 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:background="@color/black_shade_1" tools:context=".EditCourseActivity"> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <!--edit text for adding a course name--> <com.google.android.material.textfield.TextInputLayout android:id="@+id/idTILCourseName" style="@style/LoginTextInputLayoutStyle" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_marginTop="10dp" android:layout_marginRight="10dp" android:hint="Enter Course Name" android:padding="5dp" android:textColorHint="@color/white" app:hintTextColor="@color/white"> <com.google.android.material.textfield.TextInputEditText android:id="@+id/idEdtCourseName" android:layout_width="match_parent" android:layout_height="match_parent" android:ems="10" android:importantForAutofill="no" android:inputType="textImeMultiLine|textMultiLine" android:textColor="@color/white" android:textColorHint="@color/white" android:textSize="14sp" /> </com.google.android.material.textfield.TextInputLayout> <!--edit text for adding a course price--> <com.google.android.material.textfield.TextInputLayout android:id="@+id/idTILCoursePrice" style="@style/LoginTextInputLayoutStyle" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_marginTop="10dp" android:layout_marginRight="10dp" android:hint="Enter Course Price" android:padding="5dp" android:textColorHint="@color/white" app:boxStrokeColor="@color/purple_200" app:hintTextColor="@color/white"> <com.google.android.material.textfield.TextInputEditText android:id="@+id/idEdtCoursePrice" android:layout_width="match_parent" android:layout_height="match_parent" android:ems="10" android:importantForAutofill="no" android:inputType="phone" android:textColor="@color/white" android:textColorHint="@color/white" android:textSize="14sp" app:boxStrokeColor="@color/purple_200" /> </com.google.android.material.textfield.TextInputLayout> <!--edit text for adding a course best suited for--> <com.google.android.material.textfield.TextInputLayout android:id="@+id/idTILCourseSuitedFor" style="@style/LoginTextInputLayoutStyle" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_marginTop="10dp" android:layout_marginRight="10dp" android:hint="Enter Course Suited For" android:padding="5dp" android:textColorHint="@color/white" app:hintTextColor="@color/white"> <com.google.android.material.textfield.TextInputEditText android:id="@+id/idEdtSuitedFor" android:layout_width="match_parent" android:layout_height="match_parent" android:ems="10" android:importantForAutofill="no" android:inputType="textImeMultiLine|textMultiLine" android:textColor="@color/white" android:textColorHint="@color/white" android:textSize="14sp" /> </com.google.android.material.textfield.TextInputLayout> <!--edit text for adding a course image link--> <com.google.android.material.textfield.TextInputLayout android:id="@+id/idTILCourseImageLink" style="@style/LoginTextInputLayoutStyle" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_marginTop="10dp" android:layout_marginRight="10dp" android:hint="Enter Course Image Link" android:padding="5dp" android:textColorHint="@color/white" app:hintTextColor="@color/white"> <com.google.android.material.textfield.TextInputEditText android:id="@+id/idEdtCourseImageLink" android:layout_width="match_parent" android:layout_height="match_parent" android:ems="10" android:importantForAutofill="no" android:inputType="textImeMultiLine|textMultiLine" android:textColor="@color/white" android:textColorHint="@color/white" android:textSize="14sp" /> </com.google.android.material.textfield.TextInputLayout> <!--edit text for adding a course link--> <com.google.android.material.textfield.TextInputLayout android:id="@+id/idTILCourseLink" style="@style/LoginTextInputLayoutStyle" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_marginTop="10dp" android:layout_marginRight="10dp" android:hint="Enter Course Link" android:padding="5dp" android:textColorHint="@color/white" app:hintTextColor="@color/white"> <com.google.android.material.textfield.TextInputEditText android:id="@+id/idEdtCourseLink" android:layout_width="match_parent" android:layout_height="match_parent" android:ems="10" android:importantForAutofill="no" android:inputType="textImeMultiLine|textMultiLine" android:textColor="@color/white" android:textColorHint="@color/white" android:textSize="14sp" /> </com.google.android.material.textfield.TextInputLayout> <!--edit text for adding a course description--> <com.google.android.material.textfield.TextInputLayout android:id="@+id/idTILCourseDescription" style="@style/LoginTextInputLayoutStyle" android:layout_width="match_parent" android:layout_height="200dp" android:layout_marginLeft="10dp" android:layout_marginTop="10dp" android:layout_marginRight="10dp" android:hint="Enter Course Description" android:padding="5dp" android:textColorHint="@color/white" app:hintTextColor="@color/white"> <com.google.android.material.textfield.TextInputEditText android:id="@+id/idEdtCourseDescription" android:layout_width="match_parent" android:layout_height="match_parent" android:ems="10" android:importantForAutofill="no" android:inputType="textImeMultiLine|textMultiLine" android:textColor="@color/white" android:textColorHint="@color/white" android:textSize="14sp" /> </com.google.android.material.textfield.TextInputLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:weightSum="2"> <!--button for updating a new course--> <Button android:id="@+id/idBtnAddCourse" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="10dp" android:layout_marginTop="10dp" android:layout_marginEnd="10dp" android:layout_marginBottom="10dp" android:layout_weight="1" android:background="@drawable/button_back" android:text="Update Your \n Course" android:textAllCaps="false" /> <!--button for deleting a course--> <Button android:id="@+id/idBtnDeleteCourse" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="10dp" android:layout_marginTop="10dp" android:layout_marginEnd="10dp" android:layout_marginBottom="10dp" android:layout_weight="1" android:background="@drawable/button_back" android:text="Delete Your \n Course" android:textAllCaps="false" /> </LinearLayout> </LinearLayout> <!--progress bar for displaying a loading indicator--> <ProgressBar android:id="@+id/idPBLoading" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_gravity="center" android:layout_marginTop="20dp" android:indeterminate="true" android:indeterminateDrawable="@drawable/progress_back" android:visibility="gone" /> </RelativeLayout> </ScrollView>
Paso 22: trabajar con el archivo EditCourseActivity.java
Vaya a la aplicación > java > el nombre del paquete de su aplicación > archivo EditCourseActivity.java y agréguele el siguiente código. Se agregan comentarios en el código para conocer con más detalle.
Java
package com.gtappdevelopers.firebasecrudapp;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ProgressBar;
import android.widget.Toast;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import com.google.android.material.textfield.TextInputEditText;
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.ValueEventListener;
import java.util.HashMap;
import java.util.Map;
public class EditCourseActivity extends AppCompatActivity {
// creating variables for our edit text, firebase database,
// database reference, course rv modal,progress bar.
private TextInputEditText courseNameEdt, courseDescEdt, coursePriceEdt, bestSuitedEdt, courseImgEdt, courseLinkEdt;
FirebaseDatabase firebaseDatabase;
DatabaseReference databaseReference;
CourseRVModal courseRVModal;
private ProgressBar loadingPB;
// creating a string for our course id.
private String courseID;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_edit_course);
// initializing all our variables on below line.
Button addCourseBtn = findViewById(R.id.idBtnAddCourse);
courseNameEdt = findViewById(R.id.idEdtCourseName);
courseDescEdt = findViewById(R.id.idEdtCourseDescription);
coursePriceEdt = findViewById(R.id.idEdtCoursePrice);
bestSuitedEdt = findViewById(R.id.idEdtSuitedFor);
courseImgEdt = findViewById(R.id.idEdtCourseImageLink);
courseLinkEdt = findViewById(R.id.idEdtCourseLink);
loadingPB = findViewById(R.id.idPBLoading);
firebaseDatabase = FirebaseDatabase.getInstance();
// on below line we are getting our modal class on which we have passed.
courseRVModal = getIntent().getParcelableExtra("course");
Button deleteCourseBtn = findViewById(R.id.idBtnDeleteCourse);
if (courseRVModal != null) {
// on below line we are setting data to our edit text from our modal class.
courseNameEdt.setText(courseRVModal.getCourseName());
coursePriceEdt.setText(courseRVModal.getCoursePrice());
bestSuitedEdt.setText(courseRVModal.getBestSuitedFor());
courseImgEdt.setText(courseRVModal.getCourseImg());
courseLinkEdt.setText(courseRVModal.getCourseLink());
courseDescEdt.setText(courseRVModal.getCourseDescription());
courseID = courseRVModal.getCourseId();
}
// on below line we are initialing our database reference and we are adding a child as our course id.
databaseReference = firebaseDatabase.getReference("Courses").child(courseID);
// on below line we are adding click listener for our add course button.
addCourseBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// on below line we are making our progress bar as visible.
loadingPB.setVisibility(View.VISIBLE);
// on below line we are getting data from our edit text.
String courseName = courseNameEdt.getText().toString();
String courseDesc = courseDescEdt.getText().toString();
String coursePrice = coursePriceEdt.getText().toString();
String bestSuited = bestSuitedEdt.getText().toString();
String courseImg = courseImgEdt.getText().toString();
String courseLink = courseLinkEdt.getText().toString();
// on below line we are creating a map for
// passing a data using key and value pair.
Map<String, Object> map = new HashMap<>();
map.put("courseName", courseName);
map.put("courseDescription", courseDesc);
map.put("coursePrice", coursePrice);
map.put("bestSuitedFor", bestSuited);
map.put("courseImg", courseImg);
map.put("courseLink", courseLink);
map.put("courseId", courseID);
// on below line we are calling a database reference on
// add value event listener and on data change method
databaseReference.addValueEventListener(new ValueEventListener() {
@Override
public void onDataChange(@NonNull DataSnapshot snapshot) {
// making progress bar visibility as gone.
loadingPB.setVisibility(View.GONE);
// adding a map to our database.
databaseReference.updateChildren(map);
// on below line we are displaying a toast message.
Toast.makeText(EditCourseActivity.this, "Course Updated..", Toast.LENGTH_SHORT).show();
// opening a new activity after updating our coarse.
startActivity(new Intent(EditCourseActivity.this, MainActivity.class));
}
@Override
public void onCancelled(@NonNull DatabaseError error) {
// displaying a failure message on toast.
Toast.makeText(EditCourseActivity.this, "Fail to update course..", Toast.LENGTH_SHORT).show();
}
});
}
});
// adding a click listener for our delete course button.
deleteCourseBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// calling a method to delete a course.
deleteCourse();
}
});
}
private void deleteCourse() {
// on below line calling a method to delete the course.
databaseReference.removeValue();
// displaying a toast message on below line.
Toast.makeText(this, "Course Deleted..", Toast.LENGTH_SHORT).show();
// opening a main activity on below line.
startActivity(new Intent(EditCourseActivity.this, MainActivity.class));
}
}
Nota : todos los elementos de diseño utilizados dentro de la aplicación están presentes en app > res > drawable . Puede consultar el proyecto en el siguiente enlace de GitHub .
Ahora ejecute su aplicación y vea el resultado de la aplicación.
Producción:
Publicación traducida automáticamente
Artículo escrito por chaitanyamunje y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA