안드로이드: 파이어베이스 클라우드 스토리지 Firebase Cloud storage url로 이미지 불러오기!

공감 및 댓글은 포스팅 하는데  아주아주 큰 힘이 됩니다!! 포스팅 내용이 찾아주신 분들께  도움이 되길 바라며 더 깔끔하고 좋은 포스팅을  만들어 나가겠습니다^^

이번 포스팅에서는 파이어베이스 스토리지에 이미지를 저장해놓고,

url로 이미지를 안드로이드 이미지뷰에 바인딩하는 방법에 대해 알아보겠습니다.

》 안드로이드 프로젝트 만들기

》 파이어베이스 프로젝트 만들고 안드로이드 프로젝트 추가하기

+ gradle 및 설정 코드 추가하기

》 파이어베이스 스토리지 권한 설정 및 이미지 업로드

》 FirebaseStorage 및 Glide 를 이용한 이미지 바인딩하기

이런 순서대로 진행하겠습니다.

1. 안드로이드 프로젝트 만들기

안드로이드 스튜디오를 열어 새로운 프로젝트를 생성해주세요.

저는 Empty Activity로 생성했습니다.

간단하기 때문에 설명은 생략하겠습니다 ㅎㅎ

2. 파이어베이스 프로젝트 만들고 안드로이드 프로젝트 추가하기 

   + gradle 및 설정 코드 추가하기

https://console.firebase.google.com/

위 링크로 들어가셔서 프로젝트 추가하기를 선택합니다.

위 같은 화면이 뜨면 원하는 프로젝트 이름을 입력하시고,

지역을 대한민국으로 설정해주세요.

조금 기다리면 프로젝트 준비가 완료됩니다.

아래는 초기화면인데요. 안드로이드 앱에 파이어베이스 추가를 선택해주세요.

아래같은 화면이 뜨면 manifest.xml 파일에 존재하는 패키지이름 전체를 복사해서

붙여넣어주세요. 그리고 아래 사진들에서 시키는대로 하시면 끝!!

--------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------

3. 파이어베이스 스토리지 권한 설정 및 이미지 업로드

만드신 파이어베이스 프로젝트에 들어가시면 왼쪽에 아래 사진과 같은 탭이 있습니다.

Storage로 들어가주세요.

그리고 규칙 탭을 누르면 초기 설정은 아래와 같은데요.

우리는 따로 인증 절차를 거치지 않을 거기 때문에

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

아래처럼 바꿔주세요.

그리고 파일 탭에서 아무 이미지나 올려주시면 됩니다.

저 같은 경우는 images라는 폴더를 만들고 그 아래에 .jpg 파일 3개를 업로드했습니다.

4. FirebaseStorage 및 Glide 를 이용한 이미지 바인딩하기

이제 안드로이드 스튜디오로 넘어갑니다.

-Gradle 추가하기

compile 'com.google.firebase:firebase-storage:12.0.0'
compile 'com.firebaseui:firebase-ui-storage:3.2.2'
implementation 'com.github.bumptech.glide:glide:4.6.1'
annotationProcessor 'com.github.bumptech.glide:compiler:4.6.1'

위 4줄을 build.gradle(Build:app) 의 dependencies{} 블록에 추가해주세요.

-AppGlideModule을 상속받는 클래스 만들기

@GlideModule
public class MyGlideModule extends AppGlideModule {
    @Override
    public void registerComponents(@NonNull Context context, @NonNull Glide glide, @NonNull Registry registry) {
        registry.append(StorageReference.class, InputStream.class, new FirebaseImageLoader.Factory());
    }
}
 

이 클래스는 만들어만 주면 됩니다.

위랑 똑같이!

 FirebaseStorage fs = FirebaseStorage.getInstance();
StorageReference imagesRef = fs.getReference().child(imageUrl);
Glide.with(this)
         .load(imagesRef)
         .into(binding.profileImgView);
 

- 이미지 뷰에 바인딩하기!

간단하죠?

imageUrl 자리에 본인의 파이어베이스스토어 주소를 제외한 경로를 넣어주면 됩니다.

저 같은 경우는 images 라는 디렉토리를 만들었기 때문에

"images/aaa.jpg" 처럼 넣어줬어요.

그럼 아래 사진처럼 잘 바인딩이 됩니다.

저는 이미지를 동그랗게 나오도록 따로 또 처리하여서 동그랗게 나오는 거에요~

이미지뷰 동그랗게 만들기

2017/12/05 - [안드로이드] - 안드로이드 ImageView 완전 동그랗게 만드는 방법 ( 라이브러리 없이 )

이상입니다.

감사합니다!