Как заполнить RecyclerView данными Firebase с помощью FirebaseUI в Android Studio

Firebase - одна из самых популярных онлайн-баз данных, используемых сегодня, и будет оставаться неизменной как минимум несколько лет. Firebase предлагает базу данных в реальном времени, которую можно использовать для хранения и извлечения данных в реальном времени для всех пользователей. В этом посте давайте подключим базу данных в реальном времени к приложению Android и покажем данные в RecyclerView с помощью FirebaseUI . FirebaseUI - это библиотека с открытым исходным кодом для Android, которая позволяет быстро подключать общие элементы пользовательского интерфейса к API Firebase. В этой статье мы собираемся осветить следующее.

1. Как создать проект Firebase и вручную добавить данные для отображения в приложении.
2. Как создать Android-проект и добавить в него поддержку Firebase и FirebaseUI.
3. Как добавить RecyclerView в приложение для Android и отображать данные в базе данных Firebase Realtime.

Как создать проект Firebase и вручную добавить данные для отображения в приложении

• Шаг 1. Создайте проект Firebase
  1. Перейдите на https://console.firebase.google.com/u/0/.
  2. Войдите в Firebase со своей учетной записью Google, если вы еще не вошли в систему.
  3. Нажмите "Создать проект".

  

• Шаг 2. Дайте название проекту
  1. Напишите имя.
  2. Нажмите "Продолжить".

  

• Шаг 3. Отключите Google Analytics (в этом проекте нет необходимости делать это)
  1. Нажмите на переключатель.
  2. Щелкните Продолжить.

  

  Firebase создаст для вас проект и откроет его для вас.

• Шаг 4: Создайте базу данных в реальном времени:
  1. Перейдите к варианту разработки на боковой панели.
  2. Щелкните База данных.
  3. Прокрутите вниз на новом экране и нажмите «Создать базу данных в базе данных в реальном времени».
  4. Выберите «Начать в тестовом режиме» (чтобы получить доступ для чтения и записи к базе данных).
  5. Щелкните включить.

  

• Шаг 5: Добавьте данные в базу данных, используя символ «+» в базе данных таким же образом, как показано на рисунке.

  

  Note:

  • All data values are stored in a string format for ease.
  • Key-value can be any string but should not include spaces ” “.
  • The same sub-keys should be present parent keys so that they can read by Recycler View without any error.

Как создать проект Android и добавить в него поддержку Firebase и FirebaseUI

• Шаг 1. Откройте Android Studio и создайте новый проект с именем « RecyclerView » с пустым действием.
• Шаг 2. Подключите проект Firebase к своему приложению.
• Шаг 3. Добавьте следующую зависимость в файл app / build.gradle , чтобы получить поддержку FirebaseUI и Firebase Realtime Database в приложении.

  dependencies { // Dependency FirebaseUI for Firebase Realtime Database implementation 'com.firebaseui:firebase-ui-database:6.2.1' // Dependency for Firebase REaltime Database implementation 'com.google.firebase:firebase-database:19.3.1' }

Как добавить RecyclerView в приложение для Android и отображать данные в базе данных Firebase Realtime

• Шаг 1. Добавьте следующие зависимости, чтобы получить поддержку Cardview в приложении.

  dependencies { // This dependency includes all material components of the android app. implementation 'com.google.android.material:material:1.1.0' }

• Шаг 2: Сначала добавьте Recycler View в activity_main.xml и назовите его recycler1, вставьте указанный код в файл activity_main.xml для этого.

  XML

  <? xml version = "1.0" encoding = "utf-8" ?> < androidx.constraintlayout.widget.ConstraintLayout 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" tools:context = ".MainActivity" > < androidx.recyclerview.widget.RecyclerView android:id = "@+id/recycler1" android:layout_width = "match_parent" android:layout_height = "match_parent" android:background = "#65E4A6" /> </ androidx.constraintlayout.widget.ConstraintLayout >

• Шаг 3: Теперь давайте создадим еще один XML-файл в каталоге макета для хранения данных из базы данных конкретного человека. Мы назовем файл person.xml. Скопируйте следующий код в созданный файл.

  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 " xmlns:tools = " http://schemas.android.com/tools " android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_marginHorizontal = "10dp" android:layout_marginTop = "10dp" android:layout_marginBottom = "20dp" android:scrollbars = "vertical" app:cardCornerRadius = "20dp" > < androidx.constraintlayout.widget.ConstraintLayout android:layout_width = "match_parent" android:layout_height = "match_parent" > < TextView android:id = "@+id/textView1" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:layout_marginStart = "16dp" android:layout_marginTop = "16dp" android:text = "First name: " android:textStyle = "bold" app:layout_constraintStart_toStartOf = "parent" app:layout_constraintTop_toTopOf = "parent" /> < TextView android:id = "@+id/firstname" android:layout_width = "0dp" android:layout_height = "wrap_content" android:layout_marginStart = "16dp" android:layout_marginTop = "16dp" android:layout_marginEnd = "16dp" android:text = "TextView" app:layout_constraintEnd_toEndOf = "parent" app:layout_constraintStart_toEndOf = "@+id/textView1" app:layout_constraintTop_toTopOf = "parent" /> < TextView android:id = "@+id/textView2" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:layout_marginStart = "16dp" android:layout_marginTop = "16dp" android:text = "Last name:" android:textStyle = "bold" app:layout_constraintStart_toStartOf = "parent" app:layout_constraintTop_toBottomOf = "@+id/textView1" /> < TextView android:id = "@+id/lastname" android:layout_width = "0dp" android:layout_height = "wrap_content" android:layout_marginStart = "16dp" android:layout_marginTop = "16dp" android:layout_marginEnd = "16dp" android:text = "TextView" app:layout_constraintEnd_toEndOf = "parent" app:layout_constraintStart_toEndOf = "@+id/textView2" app:layout_constraintTop_toBottomOf = "@+id/firstname" /> < TextView android:id = "@+id/textView3" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:layout_marginStart = "16dp" android:layout_marginTop = "16dp" android:layout_marginBottom = "16dp" android:text = "Age" android:textStyle = "bold" app:layout_constraintBottom_toBottomOf = "parent" app:layout_constraintStart_toStartOf = "parent" app:layout_constraintTop_toBottomOf = "@+id/textView2" /> < TextView android:id = "@+id/age" android:layout_width = "0dp" android:layout_height = "wrap_content" android:layout_marginStart = "16dp" android:layout_marginTop = "16dp" android:layout_marginEnd = "16dp" android:layout_marginBottom = "16dp" android:text = "TextView" app:layout_constraintBottom_toBottomOf = "parent" app:layout_constraintEnd_toEndOf = "parent" app:layout_constraintStart_toEndOf = "@+id/textView3" app:layout_constraintTop_toBottomOf = "@+id/lastname" /> </ androidx.constraintlayout.widget.ConstraintLayout > </ androidx.cardview.widget.CardView >

• Шаг 4: После этого мы должны создать java-файл для извлечения и хранения данных определенного человека из базы данных и один за другим передавать их в Recycler View. Создайте person.java в той же папке, в которой Файл MainActivity.java присутствует. Вставьте в файл следующий код.

  Джава

  // Your package name can be different depending // on your project name package com.example.recyclerview; person public class { // Variable to store data corresponding // to firstname keyword in database private String firstname; // Variable to store data corresponding // to lastname keyword in database private String lastname; // Variable to store data corresponding // to age keyword in database private String age; // Mandatory empty constructor // for use of FirebaseUI public person() {} // Getter and setter method public String getFirstname() { return firstname; } public void setFirstname(String firstname) { this .firstname = firstname; } public String getLastname() { return lastname; } public void setLastname(String lastname) { this .lastname = lastname; } public String getAge() { return age; } public void setAge(String age) { this .age = age; } }

• Шаг 5: Чтобы отобразить данные из person.java в person.xml , мы должны создать класс адаптера. Создайте еще один файл java с именем personAdapter.java в той же папке, что и MainActivity.java, и вставьте следующий код.

  Джава

  package com.example.recyclerview; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; import androidx.annotation.NonNull; import androidx.recyclerview.widget.RecyclerView; import com.firebase.ui.database.FirebaseRecyclerAdapter; import com.firebase.ui.database.FirebaseRecyclerOptions; // FirebaseRecyclerAdapter is a class provided by // FirebaseUI. it provides functions to bind, adapt and show // database contents in a Recycler View public class personAdapter extends FirebaseRecyclerAdapter< person, personAdapter.personsViewholder> { public personAdapter( @NonNull FirebaseRecyclerOptions<person> options) { super (options); } // Function to bind the view in Card view(here // "person.xml") iwth data in // model class(here "person.class") @Override protected void onBindViewHolder( @NonNull personsViewholder holder, int position, @NonNull person model) { // Add firstname from model class (here // "person.class")to appropriate view in Card // view (here "person.xml") holder.firstname.setText(model.getFirstname()); // Add lastname from model class (here // "person.class")to appropriate view in Card // view (here "person.xml") holder.lastname.setText(model.getLastname()); // Add age from model class (here // "person.class")to appropriate view in Card // view (here "person.xml") holder.age.setText(model.getAge()); } // Function to tell the class about the Card view (here // "person.xml")in // which the data will be shown @NonNull @Override public personsViewholder onCreateViewHolder( @NonNull ViewGroup parent, int viewType) { View view = LayoutInflater.from(parent.getContext()) .inflate(R.layout.person, parent, false ); return new personAdapter.personsViewholder(view); } // Sub Class to create references of the views in Crad // view (here "person.xml") class personsViewholder extends RecyclerView.ViewHolder { TextView firstname, lastname, age; public personsViewholder( @NonNull View itemView) { super (itemView); firstname = itemView.findViewById(R.id.firstname); lastname = itemView.findViewById(R.id.lastname); age = itemView.findViewById(R.id.age); } } }

• Шаг 6: Затем мы вызвали базу данных и запросили данные из нее. Это будет сделано в самом MainActivity.java.

  Джава

  package com.example.recyclerview; import androidx.appcompat.app.AppCompatActivity; import androidx.recyclerview.widget.LinearLayoutManager; import androidx.recyclerview.widget.RecyclerView; import android.os.Bundle; import com.firebase.ui.database.FirebaseRecyclerOptions; import com.google.firebase.database.DatabaseReference; import com.google.firebase.database.FirebaseDatabase; import com.google.firebase.database.Query; public class MainActivity extends AppCompatActivity { private RecyclerView recyclerView; personAdapter adapter; // Create Object of the Adapter class DatabaseReference mbase; // Create object of the // Firebase Realtime Database @Override protected void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Create a instance of the database and get // its reference mbase = FirebaseDatabase.getInstance().getReference(); recyclerView = findViewById(R.id.recycler1); // To display the Recycler view linearly recyclerView.setLayoutManager( new LinearLayoutManager( this )); // It is a class provide by the FirebaseUI to make a // query in the database to fetch appropriate data FirebaseRecyclerOptions<person> options = new FirebaseRecyclerOptions.Builder<person>() .setQuery(mbase, person. class ) .build(); // Connecting object of required Adapter class to // the Adapter class itself adapter = new personAdapter(options); // Connecting Adapter class with the Recycler view*/ recyclerView.setAdapter(adapter); } // Function to tell the app to start getting // data from database on starting of the activity @Override protected void onStart() { super .onStart(); adapter.startListening(); } // Function to tell the app to stop getting // data from database on stoping of the activity @Override protected void onStop() { super .onStop(); adapter.stopListening(); } }

• Шаг 7: Перед запуском проекта В AndroidManifest.xml необходимо указать разрешение ниже, чтобы получить доступ к Интернету:
  

  “uses-permission android:name=”android.permission.INTERNET”

Выход: