Using Firebase as Image Storage for an Android Application

In this article, you will learn how to extract an image from Firebase storage for an Android application.

Firebase

Firebase is a mobile and web application development platform developed by Firebase in 2011 and acquired by Google in 2014. As of October 2018, the Firebase platform has 18 products that are used in 1.5 million applications. It helps to quickly develop high-quality applications, expand the user base and make more money.

Glide

Glide is a library for downloading images in Android applications developed by Bump Tech and recommended by Google. It is used by many Google open source projects, including the official Google I / O 2014 app. Glide supports loading, decoding, and displaying images, videos, and animated GIFs.

Configure Firebase

Let's set up Firebase for our Android project.

• Open firebase.google.com .

  
  

• Click "Start Project . "

  
  

• Click Add Project .

  
  

• Give your project a name .

  
  

• Click the Create Project button below.

  
  

• Click on the Android icon .

  
  

• You will see a page titled “Add Firebase to Your Android App” .

• Add the package name of your Android application .

For example → com.example.retrieving_images_from_firebase.

• Add the SHA1 key and click "Register Application" .

  
  

• Click the "Download google-services.json" button to download this file.

  
  

• Then add google-services.json to the app folder of your project.

  
  

• Open the project-level gradle file. Add this dependency inside the dependency block:

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

So it should look like this:

• Open the application level gradle 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' 

So it should look like this:

• Now add packagingOptions to the bottom of the buildTypes block :

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

So it should look like this:

• 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;
    }
  }
}

• Now click on Storage → Files . Download the image using the “Upload file” button .

• Click on any uploaded image. Then on the bottom right you will find Download URL1 . Copy this.

Activity_main.xml

Create an ImageView in which the image will be displayed.

<?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns: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"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="RETRIEVE FROM FIREBASE"android:gravity="center"android:textSize="30dp"android:textColor="#000000"/><ImageViewandroid: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;
publicclassMainActivityextendsAppCompatActivity{
    ImageView imageView;
    @OverrideprotectedvoidonCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageView=findViewById(R.id.image);
        // URL изображения, который мы получили выше
        String url="https://firebasestorage.googleapis.com/v0/b/retrieve-images-958e5.appspot.com/o/9.PNG?alt=media&token=6bd05383-0070-4c26-99cb-dcb17a23f7eb";
        Glide.with(getApplicationContext()).load(url).into(imageView);
    }
}

Congratulations! Now you can launch your application.

After starting the application, you will see your image.

You can download all the code from our repository on GitHub .