Home Tutorials Retrieve Image from Firebase Storage in Android

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.

Firebase Image Create

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

6. Click on Android symbol.

Firebase-image

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

Image from Firebase 1

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.

Retrieve Image 3

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

Android Dependencies Retrieve Image 4

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

dependencies Retrieve Image 5

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

Retrieve Image 6

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.

Firebase storage Retrieve Image 7

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

firebase Retrieve Image 8

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.

Image from Firebase

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

16 COMMENTS

  1. bookmarked!!, I like your blog! Greetings!
    Very helpful advice in this particular article!
    It is the little changes that make the most significant changes.
    Thanks for sharing! Howdy! This post couldn’t be written much better!
    Looking at this post reminds me of my previous roommate!
    He constantly kept preaching about this. I’ll forward this post
    to him. Pretty sure he’s going to have a very good read. Thank you for sharing!

  2. Write more, thats all I have to say. Literally, it
    seems as though you relied on the video to make your point.
    You obviously know what youre talking about, why waste your intelligence on just posting videos to your
    blog when you could be giving us something enlightening to read?

  3. When I originally commented I clicked the “Notify me when new comments are added” checkbox and now each time
    a comment is added I get three e-mails with the same
    comment. Is there any way you can remove me from that service?
    Bless you!

  4. With havin so much content do you ever run into any issues of plagorism or copyright infringement?
    My site has a lot of completely unique content I’ve
    either written myself or outsourced but it seems a lot of it
    is popping it up all over the web without my authorization. Do you know any methods to help prevent content from being stolen? I’d truly appreciate it.

  5. Hello,

    Would you like to increase your traffic and engagement for 2020?

    If so, contact me now for full details along with an exclusive offer for new clients only.

    Best Regards,
    Brian
    BulkComments Network

  6. Good day! I know this is kind of off topic but I was wondering which blog platform are you using
    for this website? I’m getting tired of WordPress because I’ve had issues
    with hackers and I’m looking at options for another
    platform. I would be fantastic if you could point me in the direction of a good platform.

  7. Woah! I’m really enjoying the template/theme of this blog.
    It’s simple, yet effective. A lot of times it’s challenging to
    get that “perfect balance” between user friendliness and visual appearance.

    I must say you’ve done a great job with this. Additionally, the blog loads
    very fast for me on Chrome. Excellent Blog!

  8. Every few minutes Firefox tries to open a site. Because I just got a Trojan off my computer. So the link to the virus does not work anymore but Firefox keeps trying to open it. It says it cannot display this webpage. So how do I stop this?.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

How to save your Google Allo chats before the shutdown of App

Google Allo is a smart messaging app. It has a lot of features like —like Smart Reply, GIFs and desktop support. Allo was stated...

Pokémon Go: Complete list of Shiny Pokemon

Pokemon Go is still around and fans are still playing it. In this article, I am posting a list of all Shiny Pokemon that...

How to Flash a ROM in Android?

You might be a new user to Android OS or a normal user of android device till now who wants. You might be sad...

How to get all stats of a player in Clash Royale?

Clash Royale is a spin-off type of Clash of Clans developed by the same company, Super Cell. The game combines elements from collectible card...