Retrieve Image from Firebase Storage in Android

In this Tutorial, we will learn how to retrieve image from firebase storage in Android Studio.  We have already shown you how to do Google Firebase authentication you can check the Firebase Tutorial. So lets start this Firebase Storage.

Firebase

Firebase is a mobile and web application development platform developed by Firebase, Inc. in 2011, then acquired by Google in 2014. As of October 2018, the Firebase platform has 18 products, which are used by 1.5 million apps. It helps us to quickly develop high-quality apps, grow our user base, and earn more money.

GLIDE

Glide is an Image Loader Library for Android developed by bump tech and is a library that is recommended by Google. It has been used in many Google open source projects including Google I/O 2014 official application. Glide supports fetching, decoding, and displaying video stills, images, and animated GIFs.

LET’S CONFIGURE FIREBASE TO YOUR ANDROID PROJECT

1. Open  firebase.google.com.

2. Click on “Get Started project”.

3. Click on “Add Project”.

4. Add Project Name of your choice.

5. Click on the “Create Project” Button at the bottom.

6. Click on Android symbol.

7. You will see a page titled “Add Firebase to your Android app”

8. Add your Android package name.

For example  ->   com.example.retrieving_images_from_firebase;

9. Add SHA1 key and click on “Register App”.

10. Click on “Download google-services.json” button to download this file.

11. Then, add google-services.json inside your project/app folder.

12. Open your Project’s gradle(Project)file. Add this dependency inside dependencies block.

classpath "com.google.gms:google-services:3.0.0"

Below is a screenshot of the same:-

13. Open your project’s gradle(Module:app)file. Add dependencies:-

androidTestImplementation 'com.android.support.test:runner:1.0.2'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
implementation 'com.squareup.picasso:picasso:2.71828'
testImplementation 'junit:junit:4.12'
implementation 'com.github.bumptech.glide:glide:4.7.1'
compile 'com.android.support.constraint:constraint-layout:1.1.3'
compile 'com.google.firebase:firebase-database:11.0.2' 
compile 'com.google.firebase:firebase-storage:11.0.2' 
compile 'com.google.firebase:firebase-auth:11.0.2' 
compile 'com.firebaseui:firebase-ui-database:2.1.0' 

Below is a screenshot of the same:-

14. Now finally add below packagingOptions just bottom of buildTypes block.

packagingOptions {
        exclude 'META-INF/LICENSE'
        exclude 'META-INF/LICENSE-FIREBASE.txt'
        exclude 'META-INF/NOTICE'
    }

Below is a screenshot of the same:-

15. Open firebase.google.com, Select your project.

Now click on Database -> Rules. Add the following lines:

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

Click on Storage -> Rules. Add the following lines:

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

16. Now Click on Storage->Files. Upload an image using the “Upload file” button.

17. Click on any uploaded image. Then on the right-hand side, at the bottom, you will find Download URL1. Copy that location.

Activity_main.xml

Create an Imageview to retrieve an image of a given URL.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="RETRIEVE FROM FIREBASE"
        android:gravity="center"
        android:textSize="30dp"
        android:textColor="#000000"
        />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/image"/>

</LinearLayout>

MainActivity.java

package com.example.retrieving_images_from_firebase;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;

import com.bumptech.glide.Glide;

public class MainActivity extends AppCompatActivity {

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

        imageView=findViewById(R.id.image);

        String url="https://firebasestorage.googleapis.com/v0/b/retrieve-images-958e5.appspot.com/o/9.PNG?alt=media&token=6bd05383-0070-4c26-99cb-dcb17a23f7eb";//Retrieved url as mentioned above

        Glide.with(getApplicationContext()).load(url).into(imageView);

    }
}

Congratulations!! Now, You are in a position to run your application.

After running your application, you will find your retrieved image.

You can access code through our GitHub link also:-

DOWNLOAD FROM GITHUB

This was a simple tutorial based on Firebase Storage Image Retrieval. Comment down below for any query.

Stay tuned for more such Android articles!!!!!!!