How to Create Dynamic Horizontal RecyclerView in Android using Firebase?

RecyclerView is a potent tool for Android development that makes it possible to organize and show massive databases effectively. RecyclerView and Firebase Firestore can be used together by developers to build dynamic horizontal lists with live data updates. We'll examine four distinct methods to implement this feature using Java in this blog.

Methods Used

• Using RecyclerView with FirestoreRecyclerAdapter

• Using SnapHelper with RecyclerView and Firestore

• Using ViewPager2 with Firestore

• Using FirestoreRecyclerAdapter with LinearLayoutManager

Using RecyclerView with FirestoreRecyclerAdapter

The FirestoreRecyclerAdapter offered by the FirebaseUI framework is used in the first method. This connector makes it easier to integrate Firestore with RecyclerView by taking care of automated real-time data changes.

Algorithm

• The first step in the algorithm is to set up the Firebase Firestore database and include the task's essential dependencies.

• Develop a model class for displaying the Firestore collection's data objects.

• Create a class called ViewHolder to keep the views for each component in the RecyclerView.

• Substitute the necessary methods in the FirestoreRecyclerAdapter after making the necessary modifications.

• Create a connector for the RecyclerView and configure it in the process structure document.

Example

public class MyAdapter extends FirestoreRecyclerAdapter<Item, MyAdapter.ViewHolder> {

   public MyAdapter(@NonNull FirestoreRecyclerOptions<Item> options) {
      super(options);
   }

   @Override
   protected void onBindViewHolder(@NonNull ViewHolder holder, int position, @NonNull Item model) {
      // Bind data to views
   }

   @NonNull
   @Override
   public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
      // Inflate the item layout and create a ViewHolder
      View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_layout, parent, false);
      return new ViewHolder(view);
   }

   public static class ViewHolder extends RecyclerView.ViewHolder {
      // Declare views and bind them in the constructor
      TextView textView;

      public ViewHolder(@NonNull View itemView) {
         super(itemView);
         // Initialize views
         textView = itemView.findViewById(R.id.textView);
      }
   }
}

// Firestore query
Query query = FirebaseFirestore.getInstance().collection("items");

// FirestoreRecyclerOptions
FirestoreRecyclerOptions<Item> options = new FirestoreRecyclerOptions.Builder<Item>()
   .setQuery(query, Item.class)
   .build();

// Create the adapter
MyAdapter adapter = new MyAdapter(options);

// RecyclerView setup
RecyclerView recyclerView = findViewById(R.id.recyclerView);
recyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false));
recyclerView.setAdapter(adapter);

// Start listening for Firestore data
adapter.startListening();

Output

Using SnapHelper with RecyclerView and Firestore

The second technique creates a dynamic horizontal RecyclerView by using the SnapHelper class offered by the Android Support Library. Using SnapHelper makes it possible to snap objects to a specific location for a better scrolling experience.

Algorithm

• First, set up the Firebase Firestore database and include the project's essential dependencies.

• Develop a model class for representing the Firestore collection's data objects.

• To store the opinions for each item in the RecyclerView, develop a class called ViewHolder.

• Configure a LinearSnapHelper and a RecyclerView in the activity layout file.

• Construct an exclusive adaptor that goes beyond RecyclerView.Data is populated using an adapter and Firestore.

Example

// Find and set up the RecyclerView
RecyclerView recyclerView = findViewById(R.id.recyclerView);
recyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false));

// Attach a LinearSnapHelper for snapping behavior
LinearSnapHelper snapHelper = new LinearSnapHelper();
snapHelper.attachToRecyclerView(recyclerView);

// Firestore query
Query query = FirebaseFirestore.getInstance().collection("items");

// FirestoreRecyclerOptions
FirestoreRecyclerOptions<Item> options = new FirestoreRecyclerOptions.Builder<Item>()
   .setQuery(query, Item.class)
   .build();

// Create the adapter
MyAdapter adapter = new MyAdapter(options);

// Set the adapter to the RecyclerView
recyclerView.setAdapter(adapter);

// Start listening for Firestore data
adapter.startListening();

Output

Using ViewPager2 with Firestore

The third technique makes use of ViewPager2, a more recent version of ViewPager that has been deprecated. ViewPager2 may construct a dynamic horizontal RecyclerView with Firestore data because it supports horizontal swiping between parts or views.

Algorithm

• Primarily, set up the Firebase Firestore database and include the project's essential dependencies.

• Implement a model class for displaying the Firestore collection's data objects.

• For illustrating each item in the ViewPager2, create a Fragment or View class.

• Configure the Activity Layout File's ViewPager2 object.

• Develop a unique converter that manages the development of views or parts that extends FragmentStateAdapter.

Example

// Find and set up the ViewPager2
ViewPager2 viewPager = findViewById(R.id.viewPager);

// Create the adapter
MyAdapter adapter = new MyAdapter(this);

// Set the adapter to the ViewPager2
viewPager.setAdapter(adapter);

// Firestore query
Query query = FirebaseFirestore.getInstance().collection("items");

// FirestoreRecyclerOptions
FirestoreRecyclerOptions<Item> options = new FirestoreRecyclerOptions.Builder<Item>()
   .setQuery(query, Item.class)
   .build();

// Set the options and start listening for Firestore data
adapter.setOptions(options);
adapter.startListening();

Output

Using FirestoreRecyclerAdapter with LinearLayoutManager

The fourth technique entails utilizing LinearLayoutManager and the FirestoreRecyclerAdapter to construct a dynamic horizontal RecyclerView in Android. The Firebase Firestore library's FirestoreRecyclerAdapter is a potent adapter that makes it easier to link Firestore data to a RecyclerView.

Algorithm

• Add the vital requirements to the Android application, then create the Firebase.

• Develop a model class to hold the information for all elements that will be shown in the RecyclerView.

• To describe the query for obtaining the data from Firebase Firestore, configure the FirestoreRecyclerOptions.

• Extend RecyclerView with a unique ViewHolder class. Each item's views are bound to a ViewHolder.

• Make a converter class that differs from FirestoreRecyclerAdapter to handle data binding and fetching.

• Create the RecyclerView to utilize LinearLayoutManager with a horizontal orientation in the process layout document.

• Make a custom adapter example then link it to the RecyclerView.

Example

public class MyAdapter extends FirestoreRecyclerAdapter<Item, MyAdapter.ViewHolder> {

   public MyAdapter(@NonNull FirestoreRecyclerOptions<Item> options) {
      super(options);
   }

   @Override
   protected void onBindViewHolder(@NonNull ViewHolder holder, int position, @NonNull Item model) {
      // Bind data to views in the ViewHolder
   }

   @NonNull
   @Override
   public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
      // Inflate the item layout and create a ViewHolder
      View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_layout, parent, false);
      return new ViewHolder(view);
   }

   public class ViewHolder extends RecyclerView.ViewHolder {
      // Declare views and bind them in the constructor
      TextView textView;

      public ViewHolder(@NonNull View itemView) {
         super(itemView);
         // Initialize views
         textView = itemView.findViewById(R.id.textView);
      }
   }
}

// Find and set up the RecyclerView
RecyclerView recyclerView = findViewById(R.id.recyclerView);
recyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false));

// Firestore instance
FirebaseFirestore firestore = FirebaseFirestore.getInstance();

// FirestoreRecyclerOptions
FirestoreRecyclerOptions<Item> options = new FirestoreRecyclerOptions.Builder<Item>()
   .setQuery(firestore.collection("items"), Item.class)
   .build();

// Create the adapter
MyAdapter adapter = new MyAdapter(options);

// Set the adapter to the RecyclerView
recyclerView.setAdapter(adapter);

// Start listening for Firestore data
adapter.startListening();

Output

Conclusion

In this article, we looked at four alternative ways to use Firebase Firestore to build a dynamic horizontal RecyclerView on Android. Each approach has its own merits and can be modified to meet certain project demands. Programmers may create user interfaces that are responsive and intuitive for showing real-time data by utilizing RecyclerView and Firestore. Select the approach that best meets the demands of your project, then add dynamic horizontal lists to improve your app.