How to Create Dynamic Bottom Sheet Dialog in Android using Firebase Firestore?


A dynamic bottom sheet in Android alludes to a client interface component that slides up from the foot of the screen to show extra data, choices, or activities. Not at all like inactive foot sheets with settled substance, energetic foot sheets recover information from a source like Firebase Firestore, permitting engineers to powerfully populate the sheet with important data. This empowers real-time overhauls and customization without adjusting the app's code. Energetic foot sheets improve client interaction by giving relevant and up-to-date substance, such as client profiles, item subtle elements, or menu alternatives, in a helpful and outwardly engaging way, progressing general client involvement and app usefulness.

Methods Used

  • Manual implementation

Manual Implementation

Manual implementation within the setting of making an energetic foot sheet exchange in Android utilising Firebase Firestore alludes to the method of physically coding and characterising the usefulness and behaviour of the foot sheet discourse utilising programming procedures. Rather than depending on pre-built libraries or systems, engineers have total control over planning and executing the energetic foot sheet from scratch. Manual usage includes assignments such as recovering information from Firebase Firestore, powerfully populating the foot sheet substance, taking care of client intuition, and overseeing the stream and moves of the exchange. This approach gives adaptability and customization choices, permitting engineers to make interesting and custom-made footer dialogues that adjust to their app's plan and prerequisites.

Algorithm

  • Begin the application.

  • Initialise Firebase Firestore and design the vital dependencies.

  • Create a format record for the energetic foot sheet dialogue.

  • Define a course for the footnote discourse fragment.

  • Implement the fundamental strategies and audience members for the footnote discourse fragment.

  • Set up the format and see the footer sheet dialogue.

  • Retrieve the information from Firebase Firestore using suitable queries.

  • Map the recovered information to the comparing objects.

  • Populate the footnote with the energetic substance based on the recovered data.

  • Handle client intuition inside the footnote discourse, such as button clicks or thing selections.

  • Update the UI or perform vital activities based on client input.

  • Test the application to guarantee the energetic foot sheet exchange capacities as expected.

  • Optimise the code for execution and memory usage.

  • Handle any potential mistakes or special cases gracefully.

  • Finalise the application, conduct intensive testing, and make essential alterations based on client criticism or bug reports.

Example

XML Program

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/idRLBottomSheet"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:background="@color/white"
   android:padding="20dp">

   <!-- ImageView for displaying our image -->
   <ImageView
      android:id="@+id/idIVimage"
      android:layout_width="120dp"
      android:layout_height="120dp"
      android:layout_margin="10dp"
      android:padding="5dp"
      android:src="@drawable/your_image" />

   <!-- Text view for displaying a heading text -->
   <TextView
      android:id="@+id/idTVtext"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_margin="10dp"
      android:layout_toRightOf="@id/idIVimage"
      android:padding="5dp"
      android:text="Updated Message One"
      android:textColor="@color/black"
      android:textSize="20sp"
      android:textStyle="bold" />

   <!-- Text View for displaying description text -->
   <TextView
      android:id="@+id/idTVtextTwo"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_below="@id/idTVtext"
      android:layout_margin="10dp"
      android:layout_marginTop="10dp"
      android:layout_toEndOf="@id/idIVimage"
      android:padding="5dp"
      android:text="Updated Message Two"
      android:textColor="@color/black"
      android:textSize="16sp" />

   <!-- Add a border to the RelativeLayout -->
   <RelativeLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_below="@id/idTVtextTwo"
      android:background="@drawable/border"
      android:padding="10dp">

      <!-- Add more text views with different colors -->
      <TextView
         android:id="@+id/idTVtextThree"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignParentStart="true"
         android:text="Updated Message Three"
         android:textColor="@color/blue"
         android:textSize="14sp" />

      <TextView
         android:id="@+id/idTVtextFour"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_below="@id/idTVtextThree"
         android:layout_marginTop="10dp"
         android:layout_toEndOf="@id/idTVtextThree"
         android:text="Updated Message Four"
         android:textColor="@color/red"
         android:textSize="14sp" />

      <!-- Add a button with a background color -->
      <Button
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_below="@id/idTVtextFour"
         android:background="@drawable/button_background"
         android:text="Button"
         android:textColor="@color/white" />

   </RelativeLayout>

</RelativeLayout>

XML Program for Theme

<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>

Java Program

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;

import com.google.android.material.bottomsheet.BottomSheetDialog;
import com.google.firebase.firestore.DocumentReference;
import com.google.firebase.firestore.DocumentSnapshot;
import com.google.firebase.firestore.EventListener;
import com.google.firebase.firestore.FirebaseFirestore;
import com.google.firebase.firestore.FirebaseFirestoreException;
import com.squareup.picasso.Picasso;

public class MainActivity extends AppCompatActivity {

   // Variables for Firebase Firestore and bottom sheet RelativeLayout
   private FirebaseFirestore db;
   private RelativeLayout bottomSheetRL;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);

      // Initializing Firebase Firestore and bottom sheet RelativeLayout
      db = FirebaseFirestore.getInstance();
      bottomSheetRL = findViewById(R.id.idRLBottomSheet);

      // Calling method to display the bottom sheet
        displayBottomSheet();
   }

   private void displayBottomSheet() {

      // Creating a BottomSheetDialog
      final BottomSheetDialog bottomSheetDialog = new BottomSheetDialog(MainActivity.this, R.style.BottomSheetDialogTheme);

      // Inflating the layout file for the bottom sheet dialog
      View layout = LayoutInflater.from(MainActivity.this).inflate(R.layout.bottom_sheet_layout, bottomSheetRL);

      // Setting the inflated layout file to the bottom sheet dialog
      bottomSheetDialog.setContentView(layout);

      // Making the bottom sheet dialog cancelable and set to be canceled on touch outside
      bottomSheetDialog.setCancelable(true);
      bottomSheetDialog.setCanceledOnTouchOutside(true);

      // Displaying the bottom sheet dialog
      bottomSheetDialog.show();

      // Initializing the image view and text views from the inflated layout
      ImageView imageIV = layout.findViewById(R.id.idIVimage);
      TextView textOneTV = layout.findViewById(R.id.idTVtext);
      TextView textTwoTV = layout.findViewById(R.id.idTVtextTwo);

      // Creating a document reference for our Firestore collection and document
      DocumentReference documentReference = db.collection("BottomSheetDialog").document("Data");

      // Adding a snapshot listener to the document reference
      documentReference.addSnapshotListener(new EventListener<DocumentSnapshot>() {
         @Override
         public void onEvent(@Nullable DocumentSnapshot value, @Nullable FirebaseFirestoreException error) {
            // Inside the onEvent method
            if (error != null) {
               // Handling the error if it's not null
               Toast.makeText(MainActivity.this, "Error: " + error.getMessage(), Toast.LENGTH_SHORT).show();
               return;
            }

            if (value != null && value.exists()) {
               // Retrieving data from the Firestore document and setting it to the views
               textOneTV.setText(value.getString("textOne"));
               Picasso.get().load(value.getString("Image")).into(imageIV);
               textTwoTV.setText(value.getString("textTwo"));
            }
         }
      });
   }
}

Output

Conclusion

This article gives a comprehensive guide on making an energetic footnote in Android utilising Firebase Firestore. The energetic foot sheet could be a client interface component that slides up from the foot of the screen, showing significant and real-time data brought from Firebase Firestore. By taking the manual usage approach, designers have total control over planning and executing the usefulness of the foot sheet exchange. The article traces the vital steps, counting initialising Firebase Firestore, characterising the format, actualizing the essential strategies and audience members, recovering information from Firestore, populating the foot sheet with energetic substance, dealing with client intelligence, testing the usefulness, and optimising the code. By and large, the article offers a down-to-earth and nitty-gritty clarification of making an energetic foot sheet exchange in Android.

Updated on: 31-Jul-2023

350 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements