How to Upload an Image, Update and Delete Data: Firebase (Working with Realtime Database and Storage Bucket)

This series is a continuation from Part 1 Here:

PART 2 (Upload Image to Storage Bucket and Reference path to RealTime Database)

In the Firebase console: create the storage bucket and then set the rules as this. (remember this is a test project, you should always change rules to be more secure in production)) : follow this link to understand rules: https://firebase.google.com/docs/database/security

select storage
edit the rules to be this

LETS CODE NOW

  1. The first step is to add Kotlin Android Extension which basically helps us to view identification i.e. say goodbye to findViewById() Awesome!! in your build.gradle (app level) add this plugin at the top:
     apply plugin: 'kotlin-android-extensions'
 sync to gradle and now you can just call the id of the widget for view identification

2. Adjust the pickImage() method to be this:

  1. We need to save the path of the image that the user has selected using the onActivityResult() method to pick the data: Here we use the URI class in android that Represents a Uniform Resource Identifier (URI) reference(the path).

above the onCreate() method add this declaration of the tag for the URI reference

               private var filePath: Uri? = null
then the onActivityResult method should look like this:

4. Now we can proceed to upload the image to the storage bucket, on that note again above the onCreate() method you will need to declare a Firebase storage reference tag and also a reference location where the images will be stored: the whole gist is we upload the image to the storage bucket first and then the download URL of that image to the Real-Time Database, which we will refer to when reading the data.

a). In the build.gradle app-level add this tag
(replace 16.0.4 version: with a version of firebase you are connected to
check any other firebase implementation e.g the real-time database and use the same version)


                 implementation 'com.google.firebase:firebase-storage:16.0.4'

                 implementation platform('com.google.firebase:firebase-bom:26.3.0')
                 implementation 'com.google.firebase:firebase-database-ktx'

b). Above the onCreate() method add these references

                    private var firebaseStore: FirebaseStorage? = null
                    private var storageReference: StorageReference? = null
                    private var databaseReference: DatabaseReference? = null

c). Modify the data class constructor to add an item for Image: Hero.kt

d). Now edit the saveRating() to read : (check comments to know what lines of code do 🙂 )

Upload Activity (MainActivity) in Full

PART 3 (READ AND DISPLAY IN RECYCLERVIEW)

RecyclerView makes it easy to efficiently display large sets of data. You supply the data and define how each item looks, and the RecyclerView library dynamically creates the elements when they’re needed.

  1. Step one, in Android Project: Create a new Activity called RecyclerViewActivity and in the layout create a layout resource file called example_item: and add the following code to each set

RecyclerView XML

example_item

To be able to use the RecyclerView widget and the card view widget, add the following implementations to the build.gradle app level:

implementation 'androidx.recyclerview:recyclerview:1.2.0'  
  implementation 'androidx.cardview:cardview:1.0.0'

also in this step add this library called Glide to help us with image handling, then sync Gradle

implementation 'com.github.bumptech.glide:glide:4.12.0'  
  annotationProcessor 'com.github.bumptech.glide:compiler:4.12.0'

2. Now we proceed to create the Adapter class: Adapters provide a binding from an app-specific data set to views that are displayed within a RecyclerView: Create a Kotlin Class called RecyclerViewAdapter and add the following code :

This code has a constructor to pick the data expected, also inherit’s the RecyclerView class to attach an Adapter, and also declare a View Holder Class for View Identification of the Recycled item i.e example_item.xml. This inheritance will prompt you to execute some member functions namely, onCreateViewHolder: to attach the recycled item layout, onBindViewHolder: to bind data from our data class Hero.kt , getItemCount: to declare the size of our recycler view and finally the subclass ViewHolder for view identification of widgets in our recycled item.

that’s it for the adapter! For now, at least, I will use the adapter for the update and delete process.

3. In the RecyclerViewActivity class, we attach our recycler view to the adapter and also read data from Firebase then set the data to be held in our data class which is Hero.kt , this data is what is passed to the onBindViewHolder method in the adapter

To read the data from Firebase we use the interface ValueEventListener: Classes implementing this interface can be used to receive events about data changes at a location. The events are saved in a reference called a snapshot which is a picture of the data at a particular Firebase Database Reference at a single point 

This interface is to be initialized within the onCreate() lifecycle method of the activity

RecyclerViewActivity class

and that’s it when we are reading data from firebase 🙂

PART 4 (UPDATE AND DELETE)

  1. Step one in the update and delete process, is to prepare the update and delete interface, our data is being displayed in a recycler view thus the effect will be when an item is clicked it launches an interface where the user can either update or delete the item. In the previous post, the item’s card view had an id which we tagged in the ViewHolder subclass inside our adapter thus we can use this tag to set up an onClickListener which will run our method to build our interface.

In the Adapter class append this to the onBindViewHolder() member function, we will save references to the items name, id, rating, and image inside variables:

the method updateandDeleteDialog will pass as arguments i.e the item’s id, name of the hero, rating of hero, and image of hero to the Dialog popup

Lets create the update dialog interface

create a new Layout resource file called

update_hero.xml

the updateandDeleteDialog() method: read comments for a guide on what each code does: method belongs to adapter class.

the method updateHero(): this method takes in the users updated input as arguments and updates the node file in Firebase with new details

Finally the deleteHero() method :

RecyclerViewAdapter in full :

Run the app, and test all the CRUD functionality.

Happy Coding 🙂

Bitbucket code repository clone link : https://josephbill@bitbucket.org/josephbill/kotlincrud.git

5 Shares:
You May Also Like