Kotlin Firebase Storage – Get List of Files example – Image List with FirebaseRecyclerAdapter | Android

We had known the way to upload/download data. In this tutorial, we’re gonna look at way to get list of files example – display list of Images with Firebase UI Database FirebaseRecyclerAdapter.

Related Posts:
Kotlin Firebase Storage – Upload Data from Memory, Local File, Stream | Android
Kotlin Firebase Storage – Download Files to Memory, Local File | Android
Kotlin Firebase Realtime Database – Read/Write Data example | Android

I. How to do

firebase-storage-display-list-goal

To display list of Images, we need to:
– add Firebase to Android App & enable Firebase Auth
– use Firebase Cloud Storage to upload and store images
– use Firebase Realtime Database to store images’ information (name + url)
– use FirebaseRecyclerAdapter to display images in RecyclerView with the help of Picasso lib.

0. Depedencies

After setup Project, build.gradle file (App-level):

1. Upload and store images

Use Firebase Cloud Storage:

kotlin-firebase-storage-display-list-demo-storage-console

2. Store images’ information

Use Firebase Realtime Database:

kotlin-firebase-storage-display-list-demo-database-console

3. Display list of Images
3.1 Model and ViewHolder

Model class is a class that represents the data from Firebase:

ViewHolder layout (R.layout.item_image) with UI items that correspond to Model fields:

ViewHolder class contains Android UI fields that point to layout items:

3.2 FirebaseRecyclerAdapter subclass

We need a subclass of the FirebaseRecyclerAdapter and implement its populateViewHolder() method:

Now look at these lines of code:

– We tell FirebaseRecyclerAdapter object to use UploadInfo.class when reading from the database.
– Each Message will be displayed in a R.layout.item_image (that has 2 elements: tvImgName, imgView).
– We indicate class for ViewHolder
– We can just give reference to database node or sort/filter data by using Query:

FirebaseRecyclerAdapter will call populateViewHolder() method for each Model it finds in database. It passes us the Model and a ViewHolder.
So what we should do is map the fields from model to the correct UI elements:

3.3 RecyclerView

Now we set the adapter for RecyclerView object to provide child views on demand:

Remember to call adapter cleanup() method to stop listening for changes in the Firebase database:

II. Practice

1. Goal

We will build an Android App that can:
– create Account, sign in/sign out for Firebase Authentication.
– read/write user to Firebase Realtime Database.
(2 lines above come from this Post).
– upload image to Firebase Cloud Storage (from this Post)
– display list of Images using FirebaseUI FirebaseRecyclerAdapter.

kotlin-firebase-storage-display-list-demo-app-goal

2. Technology

– Gradle 3.0.1
– Android Studio 3.x
– Firebase Android SDK 11.x
– Firebase UI Database 2.3.0
– Picasso 2.5.2

3. Project Structure

kotlin-firebase-storage-display-list-structure

LoginActivity is for Authentication, then user can enter StorageActivity to upload Image to Firebase Storage, Image’s information to Firebase Database, and show list of Images.

4. Step by step
4.1 Create Android Project

– Generate new Android Project with package com.javasampleapproach.kotlin.firebase.storagerealdb.
– Add Firebase Auth, Firebase Realtime Database, Firebase Storage, Picasso.
– Check dependency after setup Project, build.gradle file (App-level):

4.2 Enable Firebase Auth

Go to Your Firebase Project Console -> Authentication -> SIGN-IN METHOD -> Enable Email/Password.

4.3 Model

4.4 LoginActivity

In this tutorial, we don’t explain way to authenticate an user again. To know how to implement Firebase Authentication App Client, please visit:
Kotlin Firebase Authentication – How to Sign Up, Sign In, Sign Out, Verify Email | Android

4.5 ViewHolder

4.6 StorageActivity

4.7 Android Manifest

4.8 Run & Check result

– Use Android Studio, build and Run your Android App:

kotlin-firebase-storage-display-list-demo-app-goal

– Firebase Console:
+ Storage:
kotlin-firebase-storage-display-list-demo-storage-console

+ Database:
kotlin-firebase-storage-display-list-demo-database-console

III. Source code

Kotlin-FireBaseStorageRealtimeDB

By grokonez | December 27, 2017.

Last updated on July 13, 2018.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*