Используем Firebase в качестве хранилища изображений для Android-приложения

В этой статье вы узнаете, как извлечь изображение из хранилища Firebase для Android-приложения.

Firebase

Firebase — это платформа для разработки мобильных и веб-приложений, разработанная компанией Firebase в 2011 году и приобретённая Google в 2014 году. По состоянию на октябрь 2018 года платформа Firebase насчитывает 18 продуктов, которые используются в 1,5 миллионах приложений. Она помогает быстро разрабатывать высококачественные приложения, расширять базу пользователей и зарабатывать больше денег.

Glide

Glide — это библиотека для загрузки изображений в Android-приложениях, разработанная компанией Bump Tech и рекомендованная Google. Она используется во многих проектах Google с открытым исходным кодом, включая официальное приложение Google I/O 2014. Glide поддерживает загрузку, декодирование и отображение изображений, видеоизображений и анимированных GIF-файлов.

Настройка Firebase

Давайте настроим Firebase для нашего Android-проекта.

• Откройте firebase.google.com.

  
  

• Нажмите «Начать проект».

  
  

• Нажмите «Добавить проект».

  
  

• Дайте своему проекту имя.

  
  

• Нажмите кнопку «Создать проект» внизу.

  
  

• Нажмите на значок Android.

  
  

• Вы увидите страницу под названием «Добавить Firebase в своё Android-приложение».

• Добавьте название пакета вашего Android-приложения.

Например → com.example.retrieving_images_from_firebase.

• Добавьте ключ SHA1 и нажмите «Зарегистрировать приложение».

  
  

• Нажмите кнопку «Скачать google-services.json», чтобы загрузить этот файл.

  
  

• Затем добавьте google-services.json в папку app вашего проекта.

  
  

• Откройте gradle-файл уровня проекта. Добавьте эту зависимость внутрь блока зависимостей:

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

Так это должно выглядеть:

• Откройте gradle-файл уровня приложения. Добавьте зависимости:

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' 

Так это должно выглядеть:

• Теперь добавьте packagingOptions снизу от блока buildTypes:

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

Так это должно выглядеть:

• Откройте firebase.google.com, выберите ваш проект.

Теперь нажмите на База данных → Правила. Добавьте следующие строки:

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

Нажмите на Хранилище → Правила. Добавьте следующие строки:

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

• Теперь нажмите на Хранилище → Файлы. Загрузите изображение с помощью кнопки «Загрузить файл».

• Нажмите на любое загруженное изображение. Затем с правой стороны внизу вы найдете Download URL1. Скопируйте это.

Activity_main.xml

Создайте ImageView, в котором будет отображаться изображение.

<?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);

        // 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);
    }
}

Поздравляем! Теперь вы можете запустить ваше приложение.

После запуска приложения вы увидите ваше изображение.

Весь код вы можете скачать с нашего репозитория на GitHub.