Hemos visto la creación de un Control deslizante de introducción básico en Android que se utiliza para informar a nuestros usuarios sobre las funciones de nuestra aplicación y muchas más. En este artículo, veremos la implementación del control deslizante de introducción dinámica en nuestra aplicación con la ayuda de Firebase . Con la ayuda de Firebase Firestore, podemos cambiar todos los datos de forma dinámica desde Firebase Console. Ahora avancemos hacia la implementación.
¿Qué vamos a construir en este proyecto?
Construiremos un control deslizante de introducción simple en el que cargaremos todos los datos de Firebase Console y mostraremos esos datos en nuestro control deslizante. Con la ayuda de Firebase, podemos actualizar dinámicamente nuestros datos según nuestros requisitos. qué
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. Navegue 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 Cloud Firestore. Haga clic en esa opción y verá dos opciones en Conectar la aplicación a Firebase y Agregar Cloud Firestore a su aplicación. Haga clic en la opción 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 Firestore se haya agregado a nuestro archivo Gradle. Navegue a la aplicación> Gradle Scripts dentro de ese archivo, verifique que el clima debajo de la dependencia se agregue o no. Si la dependencia a continuación no está presente en su archivo build.gradle. Agregue la siguiente dependencia en la sección de dependencias.
implementación ‘com.google.firebase:firebase-firestore:22.0.1’
implementación ‘com.squareup.picasso:picasso:2.71828’
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 . Como estamos cargando imágenes desde la URL, tenemos que usar Picasso .
Paso 3: Agregar permisos para Internet
Como cargaremos imágenes desde la URL, debemos agregar permisos para Internet en su archivo AndroidManifest.xml. Para agregar permisos. Navegue a la aplicación > archivo AndroidManifest.xml y agregue los siguientes permisos.
XML
<!--Permissions for internet--> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
Paso 4: trabajar con el archivo activity_main.xml
Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo activity_main.xml .
XML
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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:orientation="vertical" android:weightSum="5" tools:context=".MainActivity"> <!--view pager for displaying our slides--> <androidx.viewpager.widget.ViewPager android:id="@+id/idViewPager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="4.5" /> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="0.5" android:orientation="horizontal" android:weightSum="5"> <View android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="2" /> <!--adding linear layout for creating dots view--> <LinearLayout android:id="@+id/idLLDots" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_weight="1" android:gravity="center_horizontal" android:orientation="horizontal" /> <!--button for skipping our intro slider--> <Button android:id="@+id/idBtnSkip" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_margin="10dp" android:layout_weight="2" android:background="@color/purple_500" android:backgroundTint="@color/purple_500" android:text="Skip" android:textAllCaps="false" android:textColor="@color/white" /> </LinearLayout> </LinearLayout>
Paso 5: crear un archivo de diseño para nuestro elemento deslizante
Ahora crearemos un elemento que mostraremos en nuestro control deslizante. Entonces, para crear un nuevo diseño, navegue a la aplicación> res> diseño> Haga clic con el botón derecho en él> Haga clic en Nuevo> archivo de recursos de diseño y asígnele el nombre slider_layout y agregue el código a continuación.
XML
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <!--text view for displaying our heading--> <TextView android:id="@+id/idTVtitle" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="20dp" android:padding="10dp" android:text="Slide 1" android:textAlignment="center" android:textColor="@color/black" android:textSize="20sp" /> <!--Image view for displaying our slider image--> <ImageView android:id="@+id/idIV" android:layout_width="200dp" android:layout_height="200dp" android:layout_below="@id/idTVtitle" android:layout_centerHorizontal="true" android:layout_marginTop="50dp" android:padding="10dp" android:src="@mipmap/ic_launcher" /> <!--text view for displaying our slider description--> <TextView android:id="@+id/idTVheading" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/idIV" android:layout_marginStart="20dp" android:layout_marginTop="90dp" android:layout_marginEnd="20dp" android:padding="10dp" android:text="C++ data structure and ALgorithm Course" android:textAlignment="center" android:textSize="15sp" /> </RelativeLayout>
Paso 6: crear una clase modal para almacenar todos los datos de los elementos del control deslizante
Para crear una nueva clase Modal, vaya a la aplicación > java > el nombre del paquete de su aplicación > haga clic con el botón derecho en él y haga clic en Nuevo > Clase Java y asígnele el nombre SliderModal . Después de crear esta clase, agregue el siguiente código.
Java
public class SliderModal {
// string variable for storing title,
// image url and description.
private String title;
private String heading;
private String imgUrl;
public SliderModal() {
// empty constructor is required
// when using firebase
}
// creating getter methods.
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getHeading() {
return heading;
}
// creating setter methods
public void setHeading(String heading) {
this.heading = heading;
}
public String getImgUrl() {
return imgUrl;
}
public void setImgUrl(String imgUrl) {
this.imgUrl = imgUrl;
}
// constructor for our modal class
public SliderModal(String title, String heading, String imgUrl) {
this.title = title;
this.heading = heading;
this.imgUrl = imgUrl;
}
}
Paso 7: cree una clase de adaptador para configurar datos en cada vista
Para crear una nueva clase de Adaptador. Vaya a la aplicación > java > el nombre del paquete de su aplicación > haga clic con el botón derecho en él > Nueva clase de Java > asígnele el nombre SliderAdapter y agréguele el siguiente código. Se agregan comentarios dentro del código para comprender el código con más detalle.
Java
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.viewpager.widget.PagerAdapter;
import com.squareup.picasso.Picasso;
import java.util.ArrayList;
public class SliderAdapter extends PagerAdapter {
// creating variables for layout inflater,
// context and array list.
LayoutInflater layoutInflater;
Context context;
ArrayList<SliderModal> sliderModalArrayList;
// creating constructor.
public SliderAdapter(Context context, ArrayList<SliderModal> sliderModalArrayList) {
this.context = context;
this.sliderModalArrayList = sliderModalArrayList;
}
@Override
public int getCount() {
// inside get count method returning
// the size of our array list.
return sliderModalArrayList.size();
}
@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
// inside isViewFrombject method we are
// returning our Relative layout object.
return view == (RelativeLayout) object;
}
@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
// in this method we will initialize all our layout items
// and inflate our layout file as well.
layoutInflater = (LayoutInflater) context.getSystemService(context.LAYOUT_INFLATER_SERVICE);
// below line is use to inflate the layout file which we created.
View view = layoutInflater.inflate(R.layout.slider_layout, container, false);
// initializing our views.
ImageView imageView = view.findViewById(R.id.idIV);
TextView titleTV = view.findViewById(R.id.idTVtitle);
TextView headingTV = view.findViewById(R.id.idTVheading);
// setting data to our views.
SliderModal modal = sliderModalArrayList.get(position);
titleTV.setText(modal.getTitle());
headingTV.setText(modal.getHeading());
Picasso.get().load(modal.getImgUrl()).into(imageView);
// after setting the data to our views we
// are adding the view to our container.
container.addView(view);
// at last we are returning the view.
return view;
}
@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
// this is a destroy view method which
// is use to remove a view.
container.removeView((RelativeLayout) object);
}
}
Paso 8: trabajar con el archivo MainActivity.java
Vaya al archivo MainActivity.java y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle.
Java
import android.os.Bundle;
import android.text.Html;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;
import com.google.android.gms.tasks.OnFailureListener;
import com.google.android.gms.tasks.OnSuccessListener;
import com.google.firebase.firestore.DocumentSnapshot;
import com.google.firebase.firestore.FirebaseFirestore;
import com.google.firebase.firestore.QuerySnapshot;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
// creating variables for view pager,
// lineralyout, adapter and our array list.
private ViewPager viewPager;
private LinearLayout dotsLL;
SliderAdapter adapter;
private ArrayList<SliderModal> sliderModalArrayList;
private TextView[] dots;
int size;
FirebaseFirestore db;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
db = FirebaseFirestore.getInstance();
// initializing all our views.
viewPager = findViewById(R.id.idViewPager);
dotsLL = findViewById(R.id.idLLDots);
// in below line we are creating a new array list.
sliderModalArrayList = new ArrayList<>();
loadDataFromFirebase();
// calling method to add dots indicator
addDots(size, 0);
// below line is use to call on page
// change listener method.
viewPager.addOnPageChangeListener(viewListner);
}
private void loadDataFromFirebase() {
// below line is use to get data from Firebase
// firestore using collection in android.
db.collection("SliderData").get()
.addOnSuccessListener(new OnSuccessListener<QuerySnapshot>() {
@Override
public void onSuccess(QuerySnapshot queryDocumentSnapshots) {
// after getting the data we are calling on success method
// and inside this method we are checking if the received
// query snapshot is empty or not.
if (!queryDocumentSnapshots.isEmpty()) {
// if the snapshot is not empty we are hiding our
// progress bar and adding our data in a list.
List<DocumentSnapshot> list = queryDocumentSnapshots.getDocuments();
for (DocumentSnapshot d : list) {
// after getting this list we are passing
// that list to our object class.
SliderModal sliderModal = d.toObject(SliderModal.class);
// after getting data from Firebase we are
// storing that data in our array list
sliderModalArrayList.add(sliderModal);
}
// below line is use to add our array list to adapter class.
adapter = new SliderAdapter(MainActivity.this, sliderModalArrayList);
// below line is use to set our
// adapter to our view pager.
viewPager.setAdapter(adapter);
// we are storing the size of our
// array list in a variable.
size = sliderModalArrayList.size();
} else {
// if the snapshot is empty we are displaying a toast message.
Toast.makeText(MainActivity.this, "No data found in Database", Toast.LENGTH_SHORT).show();
}
}
}).addOnFailureListener(new OnFailureListener() {
@Override
public void onFailure(@NonNull Exception e) {
// we are displaying a toast message when
// we get any error from Firebase.
Toast.makeText(MainActivity.this, "Fail to load data..", Toast.LENGTH_SHORT).show();
}
});
}
private void addDots(int size, int pos) {
// inside this method we are
// creating a new text view.
dots = new TextView[size];
// below line is use to remove all
// the views from the linear layout.
dotsLL.removeAllViews();
// running a for loop to add number
// of dots to our slider.
for (int i = 0; i < size; i++) {
// below line is use to add the dots
// and modify its color.
dots[i] = new TextView(this);
dots[i].setText(Html.fromHtml("•"));
dots[i].setTextSize(35);
// below line is called when the
// dots are not selected.
dots[i].setTextColor(getResources().getColor(R.color.white));
dotsLL.addView(dots[i]);
}
if (dots.length > 0) {
// this line is called when the dots
// inside linear layout are selected
dots[pos].setTextColor(getResources().getColor(R.color.purple_200));
}
}
// creating a method for view pager for on page change listener.
ViewPager.OnPageChangeListener viewListner = new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
// we are calling our dots method to
// change the position of selected dots.
addDots(size, position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
};
}
Después de agregar el código anterior, agregue los datos a Firebase Firestore en Android.
Paso 9: agregar los datos a Firebase Firestore en Android
Busque Firebase en su navegador y vaya a ese sitio web y verá la siguiente pantalla.
Después de hacer clic en la opción Ir a la consola. Haga clic en su proyecto que se muestra a continuación.
Después de hacer clic en su proyecto, verá la siguiente pantalla. Después de hacer clic en este proyecto, verá la siguiente pantalla.
Después de hacer clic en la opción Crear base de datos, verá la siguiente pantalla.
Dentro de esta pantalla, tenemos que seleccionar la opción Iniciar en modo de prueba. Estamos usando el modo de prueba porque no estamos configurando la autenticación dentro de nuestra aplicación. Así que estamos seleccionando Iniciar en modo de prueba. Después de seleccionar el modo de prueba, haga clic en la opción Siguiente y verá la siguiente pantalla.
Dentro de esta pantalla, solo tenemos que hacer clic en el botón Habilitar para habilitar nuestra base de datos Firebase Firestore. Después de completar este proceso, debemos agregar los datos dentro de nuestra Firebase Console. Para agregar datos a nuestra Firebase Console.
Debe hacer clic en la opción Iniciar colección y dar el nombre de la colección como SliderData . Después de crear una colección, debe hacer clic en la opción Autoid para crear el primer documento. Dentro de esto, cree tres campos como título , encabezado e imgUrl y agregue valores dentro de esos campos. Agregue varios documentos de manera similar dentro de su Firebase Console. Después de eso, ejecute su aplicación y vea el resultado de la aplicación.
Después de agregar estos datos a Firebase, 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