안드로이드 코틀린 : Firebase Storage 이미지 저장

 

안녕하세요, 랴파파입니다.

오늘은 파이어베이스 스토리지 ( Firebase Storage ) 기능을 사용해서

아래와 같이 앨범에서 선택한 사진을 Firebase Storage 공간에 사진을 업로드하는

예제 프로그램을 만들어 볼 예정입니다.

 

Firebase Storage를 적용한 예제 프로그램 화면

 

1. 매니페스트 ( AndroidManifest ) 설정

<?xml version="1.0" encoding="utf-8"?>
<manifest 
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:Android="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        package="...">

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

    <application
            ...
    </application>

</manifest>

먼저 기기의 앨범에서 사진을 불러오는 기능을 추가하기 위한 permission을 추가합니다. 해당 permission은 위와 같이  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />을 추가하시면 됩니다.

 

2. 라이브러리 ( Library ) 추가

dependencies {
    ...
    implementation 'com.google.firebase:firebase-storage:19.0.0'
    ...
}

Firebase Storage에 선택한 이미지를 저장하기 위해 < build.gradle(Module:app) >에서 위와 같이 < implementation 'com.google.firebase:firebase-storage:19.0.0' >을 입력하시고 오른쪽 상단에 표시되는 < Sync Now >를 눌러서 Firebase Storage 기능을 사용할 수 있도록 설정해주시기 바랍니다.

 

3. 레이아웃 ( Layout ) 구성

예제 프로그램의 레이아웃 디자인

레이아웃 구성은 앨범에서 선택한 이미지를 불러와서 디스플레이 해 줄 ImageView와 해당 기능과 Firebase Storage에 이미지를 업로드 기능까지 진행할 "UPLOAD" 버튼으로 구성하였습니다. 해당 레이아웃에 대한 XML Code는 아래와 같습니다.

파일명 : fragment_main_profile.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:gravity="center_horizontal"
        tools:context=".Fragment.FragmentMainProfile">

    <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:id="@+id/xml_frg_prf_img_profile"
            android:layout_marginTop="5dp" />

    <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/xml_frg_prf_btn_upload"
            android:layout_marginTop="5dp"
            android:layout_marginLeft="5dp"
            android:text="Upload" />

</LinearLayout>

 

4. 코틀린 소스코드 ( Kotlin Source Code ) 구성

A. MainActivity.kt

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        ...

        ActivityCompat.requestPermissions(this, arrayOf(Manifest.permission.READ_EXTERNAL_STORAGE), 1)
        ...
    }

위의 예제 프로그램의 동작을 보여주는 사진에서 맨 처음에 앱에서 앨범에 접근을 허용할 것인지 물어보는 부분이 있습니다. 위의 코드는 앨범에 접근하는 것을 허용할지 선택을 하는 메시지를 띄우게 합니다. 한 번 허용을 하면 앱이 설치되어 있는 동안은 메시지는 다시 뜨지 않습니다.

 

B. FragmentMainProfile.kt

    private var viewProfile : View? = null
    var pickImageFromAlbum = 0
    var fbStorage : FirebaseStorage? = null
    var uriPhoto : Uri? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        ...
    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        viewProfile = inflater.inflate(R.layout.fragment_main_profile, container, false)

        //Initialize Firebase Storage
        fbStorage = FirebaseStorage.getInstance()

        viewProfile!!.xml_frg_prf_btn_upload.setOnClickListener {
            //Open Album
            var photoPickerIntent = Intent(Intent.ACTION_PICK)
            photoPickerIntent.type = "image/*"
            startActivityForResult(photoPickerIntent, pickImageFromAlbum)
        }

        return viewProfile
    }

onCreateView 함수에서는 Firebase Storage를 이니셜라이즈하고 UPLOAD 버튼이 클릭될 시에 동작에 대해서 리스너로 구성되었습니다. 리스너 내부 내용은 앨범 창을 띄우고 이후 동작에 대해서는 아래의 onActivityResult 함수 내부에서 처리하도록 구성되었습니다.

 

    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)

        if(requestCode == pickImageFromAlbum){
            if(resultCode == Activity.RESULT_OK){
                //Path for the selected image
                uriPhoto = data?.data
                xml_frg_prf_img_profile.setImageURI(uriPhoto)

                if(ContextCompat.checkSelfPermission(viewProfile!!.context, Manifest.permission.READ_EXTERNAL_STORAGE) == PackageManager.PERMISSION_GRANTED){
                    funImageUpload(viewProfile!!)
                }
            }
            else{

            }
        }
    }

onActivityResult 함수에서는 앨범에서 사진을 선택할 시에 대한 동작에 대해서 구성되었습니다. 먼저 사진이 선택되면 해당 사진을 imageView에 도출을 하고 영상을 Firebase Storage에 업로드하는 funImageUpload 함수가 동작되도록 구성되었습니다.

 

    private fun funImageUpload(view : View){

        var timeStamp = SimpleDateFormat("yyyyMMdd_HHmmss").format(Date())
        var imgFileName = "IMAGE_" + timeStamp + "_.png"
        var storageRef = fbStorage?.reference?.child("images")?.child(imgFileName)

        storageRef?.putFile(uriPhoto!!)?.addOnSuccessListener {
            Toast.makeText(view.context, "Image Uploaded", Toast.LENGTH_SHORT).show()
        }
    }

funImageUpload 함수에서는 timeStamp, imgFileName 변수를 통해서 Firebase Storage에 저장할 이미지의 파일명의 포맷을 정하고 storageRef 변수를 통해서 Storage의 사진 저장 경로를 지정합니다. 이후 putFile 함수와 addOnSuccessListner를 통해서 Storage에 사진 저장이 성공할 시 앱에서 Toast 메시지를 통해서 업로드 완료를 표시합니다. 그래서 위의 예제 프로그램의 동작을 보여주는 사진을 자세히 보시면 마지막에 "Image Uploaded"라는 Toast 메시지가 표시되는 것을 확인하실 수 있으실 겁니다.

 

Firebase Console : Storage

이후 Firebase Console로 들어가셔서 위의 사진과 같이 Storage를 확인해보시면 앱에서 선택한 사진이 업로드되어 있는 것을 보실 수 있습니다.

 

이것으로 오늘은 Firebase Storage 기능을 활용해서 예제 프로그램을 구성해봤습니다.

오늘 글도 여러분께 많은 도움이 됐기를 희망합니다.

감사합니다!