[Android&Firebase]파이어 스토리지에 저장된 이미지 불러오기

※ 해당 포스터는 파이어 스토리지에 저장된 이미지를 불러오는 내용을 담고 있습니다

※ 안드로이드 스튜디오에서 파이어 스토리지를 연동하는 방법은 >>여기<< 를 참고해주세요.

※ 해당 포스터에서 사용한 안드로이드 SDK 버전은 29이며, buildToolsVersion은 29.0.3을 사용했습니다

---

 

※ 실행 화면 ※

 

 

 

1. 스토리지에서 불러온 이미지를 보여줄 xml 생성

activity_imgload.xml 디자인

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <ImageView
            android:id="@+id/loadimg"
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:layout_gravity="center"
            android:src="@drawable/ic_baseline_perm_media_24" />
            
    </androidx.cardview.widget.CardView>
    
</LinearLayout>

▶ drawable에 백터 이미지를 추가해 삽입하여 사용하였습니다. 

 

 

 

2. Glide을 사용하기 위해 dependency에 코드 추가

▶ Glide : 안드로이드에서 이미지를 빠르고 효율적으로 불러올 수 있도록 도와주는 라이브러리로 사용 방법이 간단하고 확장성이 넓은 장점을 가지고 있다.

▶ build.gradle(:app)의 dependencies에 Glide 라이브러리 이용을 위한 코드 추가

implementation 'com.github.bumptech.glide:glide:4.11.0' annotationProcessor 'com.github.bumptech.glide:compiler:4.11.0'

 

 

 

3. 스토리지에 접근하기 위해 manifest에 권한 코드를 추가

▶ Androidmanifest.xml에 스토리지에 접근하는 외부 통신이 가능하도록 인터넷 권한 부여해주는 코드 추가

<uses-permission android:name="android.permission.INTERNET" />

 

 

 

4. Activity 파일 생성

package com.example.firebasetest;

import android.net.Uri;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.Toast;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import com.bumptech.glide.Glide;
import com.google.android.gms.tasks.OnFailureListener;
import com.google.android.gms.tasks.OnSuccessListener;
import com.google.firebase.storage.FirebaseStorage;
import com.google.firebase.storage.StorageReference;


public class LoadActivity extends AppCompatActivity {

    ImageView load;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_imgload);
        load=(ImageView)findViewById(R.id.loadimg);
        FirebaseStorage storage = FirebaseStorage.getInstance();
        StorageReference storageReference = storage.getReference();
        StorageReference pathReference = storageReference.child("photo");
        if (pathReference == null) {
            Toast.makeText(LoadActivity.this, "저장소에 사진이 없습니다." ,Toast.LENGTH_SHORT).show();
        } else {
            StorageReference submitProfile = storageReference.child("photo/1.png");
            submitProfile.getDownloadUrl().addOnSuccessListener(new OnSuccessListener<Uri>() {
                @Override
                public void onSuccess(Uri uri) {
                    Glide.with(LoadActivity.this).load(uri).into(load);

                }
            }).addOnFailureListener(new OnFailureListener() {
                @Override
                public void onFailure(@NonNull Exception e) {

                }
            });
        }
    }

}

▶ FirebaseStorage storage : 스토리지에 접근하기 위해 인스턴스 생성

▶ StorageReference pathReference : 스토리지에 어떤 폴더에 접근할 것인지 알려주는 코드로 폴더 명을 작성. 

(스토리지 내부에 폴더가 없다면 폴더 명 대신 불러올 이미지 이름을 입력. 예를 들어 1.png를 불러오고 싶다고 하면 child("1.png") 형식으로 작성하면 된다. 해당 상황 시 예시코드를 아래 첨부하겠다.)

package com.example.firebasetest;

import android.net.Uri;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.Toast;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;

import com.bumptech.glide.Glide;
import com.google.android.gms.tasks.OnFailureListener;
import com.google.android.gms.tasks.OnSuccessListener;
import com.google.firebase.storage.FirebaseStorage;
import com.google.firebase.storage.StorageReference;


public class LoadActivity extends AppCompatActivity {

    ImageView load;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_imgload);
        load=(ImageView)findViewById(R.id.loadimg);
        FirebaseStorage storage = FirebaseStorage.getInstance();
        StorageReference storageReference = storage.getReference();
        StorageReference pathReference = storageReference.child("1.png");
        pathReference.getDownloadUrl().addOnSuccessListener(new OnSuccessListener<Uri>() {
            @Override
            public void onSuccess(Uri uri) {
                Glide.with(LoadActivity.this).load(uri).into(load);
            }
        }).addOnFailureListener(new OnFailureListener() {
            @Override
            public void onFailure(@NonNull Exception e) {

            }
        });
    }
}

▶ if(pathReference == null) ~ : 스토리지에 pathReference에 입력된 폴더가 없을 경우 null값이 들어가게 되므로 해당 코드는 child에 적힌 폴더가 스토리지 내부에 존재하지 않을 경우 실행됨

▶ StorageReference submitProfile : pathReference에서 지정한 폴더 안에 어떤 파일을 가져올지 정하는 코드로 폴더 위치부터 파일 명까지 정확하게 기입해야 함.

▶ Glide ~ : 스토리지에 저장된 파일을 정상적으로 불러오면, Glide를 이용해 ImageView에 사진을 올림.