[안드로이드] Firebase Storage 이미지 리스트 part2

이번 시간에는 Firebase를 통해서 업로드한 이미지를 가져와서

리스트로 보여주는 방법을 알아보겠습니다. 

이전에 했던 포스팅을 이어서 하니 먼저 보시면 됩니다.

2022.03.16 - [안드로이드] - [안드로이드] Firebase Storage 이미지 업로드 part1

[안드로이드] Firebase Storage 이미지 업로드 part1

 

먼저 Realtime Database 설정을 해야 하기 때문에 모르시면

아래 링크를 보시고 따라 하시면 됩니다. 

2022.03.09 - [안드로이드] - [안드로이드] Firebase 시작하기 실시간 데이터베이스 Realtime Database (간단한 데이터 읽기, 쓰기) part1

[안드로이드] Firebase 시작하기 실시간 데이터베이스 Realtime Database (간단한 데이터 읽기, 쓰기) part

---

목차

1. 실행 화면

2. 라이브러리 등록

3. 이미지 리스트 화면 만들기

4. 이미지 어뎁터 만들기

5. 이미지 액티비티 생성

6. 메인 화면 구성 activity_main.xml

7. 메인 코드 구현 MainActivity.java

---

1. 실행 화면

 

2. 라이브러리 등록

build.gradle(Module:프로젝트명:app)

dependencies 괄호 안에 아래 코드를 넣어주시면 됩니다.

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

 

setting.gradle

repositories 괄호 안에 아래 코드를 넣어주시면 됩니다.

maven { url 'https://jitpack.io' }

참조 문서

https://github.com/bumptech/glide

GitHub - bumptech/glide: An image loading and caching library for Android focused on smooth scrolling

 

3. 이미지 리스트 화면 만들기

 - 설명 - 

 이미지뷰를 통해 이미지를 보여줍니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="250dp"
    android:layout_margin="20dp"
    android:elevation="10dp">

    <ImageView
        android:id="@+id/m_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop" />
</androidx.cardview.widget.CardView>

 

4. 이미지 어뎁터 만들기

 - 설명 - 

 등록한 라이브러리 Glide를 통해 이미지를 이미지 뷰에 보여줍니다. 

public class ImageAdapter extends RecyclerView.Adapter<ImageAdapter.MyViewHolder>{

    Context context;

    ArrayList<Model> list = new ArrayList<>();

    public ImageAdapter(Context context, ArrayList<Model> list) {
        this.context = context;
        this.list = list;
    }

    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {

        LayoutInflater inflater = LayoutInflater.from(context);

        View view = inflater.inflate(R.layout.list_item, parent, false);

        return new MyViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {

        Glide.with(context).load(list.get(position).getImageUri()).into(holder.mImageView);

    }

    @Override
    public int getItemCount() {
        return list.size();
    }

    class MyViewHolder extends RecyclerView.ViewHolder{

        ImageView mImageView;


        public MyViewHolder(@NonNull View itemView) {
            super(itemView);

            mImageView = itemView.findViewById(R.id.m_image);

        }
    }
}

 

 

5. 이미지 액티비티 생성

app 선택 -> 마우스 오른쪽 클릭 -> New -> Activity -> Empty Activity

Activity Name: ImageActivity

 

activity_image.xml

 - 설명 - 

 RecyclerView를 통해 이미지를 리스트로 보여줍니다. 

<?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"
    android:orientation="vertical"
    tools:context=".ImageActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/recycler_view"/>
</LinearLayout>

 

 ImageActivity.java

public class ImageActivity extends AppCompatActivity {

    private RecyclerView recyclerView;
    private ArrayList<Model> list;
    ImageAdapter adapter;

    private DatabaseReference root = FirebaseDatabase.getInstance().getReference("Image");

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_image);

        recyclerView = findViewById(R.id.recycler_view);
        recyclerView.setHasFixedSize(true);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));

        list = new ArrayList<>();

        adapter = new ImageAdapter(ImageActivity.this ,list);

        recyclerView.setAdapter(adapter);

        root.addValueEventListener(new ValueEventListener() {
            @Override
            public void onDataChange(@NonNull DataSnapshot snapshot) {

                for(DataSnapshot dataSnapshot : snapshot.getChildren()){

                    Model model = dataSnapshot.getValue(Model.class);
                    list.add(model);
                }
                adapter.notifyDataSetChanged();
            }

            @Override
            public void onCancelled(@NonNull DatabaseError error) {

            }
        });
    }
}

 

6. 메인 화면 구성 activity_main.xml

 - 추가 부분 -

 - 설명 - 

 이미지리스트 액티비티로 이동시킬 버튼을 추가했습니다. 

<androidx.appcompat.widget.AppCompatButton
        android:id="@+id/image_list_btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:layout_marginStart="15dp"
        android:layout_marginEnd="15dp"
        android:textSize="20sp"
        android:text="IMAGE LIST"/>

 - 전체 코드 - 

<?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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:layout_marginTop="50dp"
        android:layout_gravity="center"
        android:src="@drawable/ic_add_photo"
        android:id="@+id/image_view"/>

    <ProgressBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/progress_View"/>

    <androidx.appcompat.widget.AppCompatButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="15dp"
        android:layout_marginEnd="15dp"
        android:layout_marginTop="50dp"
        android:text="UPLOAD"
        android:textSize="20sp"
        android:id="@+id/upload_btn"/>

    <androidx.appcompat.widget.AppCompatButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="15dp"
        android:layout_marginEnd="15dp"
        android:layout_marginTop="50dp"
        android:text="IMAGE LIST"
        android:textSize="20sp"
        android:id="@+id/image_list_btn"/>
</LinearLayout>

 

 

7. 메인 코드 구현 MainActivity.java

 - 추가 부분 - 

 - 설명 - 

 버튼을 클릭하면, 이미지 리스트 액티비티로 이동한다. 

Button imageListBtn = findViewById(R.id.image_list_btn);
        imageListBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                startActivity(new Intent(MainActivity.this, ImageActivity.class));
            }
        });

 

- 전체 코드 - 

public class MainActivity extends AppCompatActivity {

    private ImageView imageView;
    private ProgressBar progressBar;
    
    private final DatabaseReference root = FirebaseDatabase.getInstance().getReference("Image");
    private final StorageReference reference = FirebaseStorage.getInstance().getReference();
    
    private Uri imageUri;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //컴포넌트 객체에 담기
        Button uploadBtn = findViewById(R.id.upload_btn);
        progressBar = findViewById(R.id.progress_View);
        imageView = findViewById(R.id.image_view);
        
        //프로그래스바 숨기기
        progressBar.setVisibility(View.INVISIBLE);
        
        //이미지 클릭 이벤트
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                
                Intent galleryIntent = new Intent();
                galleryIntent.setAction(Intent.ACTION_GET_CONTENT);
                galleryIntent.setType("image/*");
                activityResult.launch(galleryIntent);
            }
        });
        
        //업로드버튼 클릭이벤트
        uploadBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                
                if(imageUri != null){
                    
                    uploadToFirebase(imageUri);
                }else{
                    Toast.makeText(MainActivity.this, "사진을 선택해주세요",
                            Toast.LENGTH_SHORT).show();
                }
            }
        });

        //이미지 리스트
        Button imageListBtn = findViewById(R.id.image_list_btn);
        imageListBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                startActivity(new Intent(MainActivity.this, ImageActivity.class));
            }
        });
    }//onCreate

    //파이어베이스 이미지 업로드
    private void uploadToFirebase(Uri uri) {
        
        StorageReference fileRef = reference.child(System.currentTimeMillis() + "." + 
                getFileExtension(uri));
        
        fileRef.putFile(uri).addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {
            @Override
            public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) {
                //성공시
                
                fileRef.getDownloadUrl().addOnSuccessListener(new OnSuccessListener<Uri>() {
                    @Override
                    public void onSuccess(Uri uri) {
                        
                        //이미지 모델에 담기
                        Model model = new Model(uri.toString());
                        
                        //키로 아이디 생성
                        String modelId = root.push().getKey();
                        
                        //데이터 넣기
                        root.child(modelId).setValue(model);
                        
                        //프로그래스바 숨김
                        progressBar.setVisibility(View.INVISIBLE);

                        Toast.makeText(MainActivity.this, "업로드 성공",
                                Toast.LENGTH_SHORT).show();
                        
                        imageView.setImageResource(R.drawable.ic_add_photo);
                    }
                });
            }
        }).addOnProgressListener(new OnProgressListener<UploadTask.TaskSnapshot>() {
            @Override
            public void onProgress(@NonNull UploadTask.TaskSnapshot snapshot) {
                //프로그래스바 보여주기
                progressBar.setVisibility(View.VISIBLE);
                
            }
        }).addOnFailureListener(new OnFailureListener() {
            @Override
            public void onFailure(@NonNull Exception e) {
                //실패
                Toast.makeText(MainActivity.this, "업로드 실패", Toast.LENGTH_SHORT).show();
            }
        });
    }
    
    private String getFileExtension(Uri uri){
        
        ContentResolver cr = getContentResolver();
        MimeTypeMap mime = MimeTypeMap.getSingleton();
        
        return mime.getExtensionFromMimeType(cr.getType(uri));
    }

    //사진 가져오기
    ActivityResultLauncher<Intent> activityResult = registerForActivityResult(
            new ActivityResultContracts.StartActivityForResult(),
            new ActivityResultCallback<ActivityResult>() {
                @Override
                public void onActivityResult(ActivityResult result) {
                    
                    if(result.getResultCode() == RESULT_OK && result.getData() != null){
                        
                        imageUri = result.getData().getData();
                        
                        imageView.setImageURI(imageUri);
                    }
                }
            });


}//MainActivity

2022.03.12 - [안드로이드] - [안드로이드] Firebase Realtime Database RecyclerView 사용자 등록하는 방법

[안드로이드] Firebase Realtime Database RecyclerView 사용자 등록하는 방법

2022.03.13 - [안드로이드] - [안드로이드] Firebase Realtime Database RecyclerView 사용자 리스트 보는 방법

[안드로이드] Firebase Realtime Database RecyclerView 사용자 리스트 보는 방법

2022.03.14 - [안드로이드] - [안드로이드] Firebase Realtime Database RecyclerView 사용자 수정하는 방법

[안드로이드] Firebase Realtime Database RecyclerView 사용자 수정하는 방법

2022.03.15 - [안드로이드] - [안드로이드] Firebase Realtime Database RecyclerView 사용자 삭제하는 방법

[안드로이드] Firebase Realtime Database RecyclerView 사용자 삭제하는 방법