Cara Menampilkan Beberapa Gambar Dari Galeri (Select Multiple) Ke GridView Di Android Studio

Halo android programmer, bagaimana kabar kalian hari ini? Saya harap kalian semua dalam keadaan yang baik-baik saja. Pada kesempatan kali ini saya akan membagikan tutorial tentang bagaimana Cara Menampilkan Beberapa Gambar dari Galeri ke GridView di Android Studio.

Android Layout GridView adalah salah satu layout yang banyak digunakan dalam android. Layout ini menampilkan data baik itu berupa teks, gambar, audio, video, dokumen ataupun lainnya dalam bentuk kotak-kotak. Aplikasi sosial media Instagram menggunakan layout ini ketika user mengklik profile. Ada juga pada aplikasi bawaan android yaitu Galeri. biasanya beberapa manufacture perangkat android menampilkan gambar pada galeri menggunakan layout GridView.

Sebelumnya, saya sudah pernah membagikan beberapa Tutorial Tentang GridView. Pada tutorial Cara Menampilkan Gambar Di Layout GridView, kalian belajar cara menampilkan gambar di gridview dengan cara sederhana. Yaitu kalian sudah menyediakan gambar untuk di tampilkan dalam Android Studio. Tetapi, pada tutorial ini kalian akan mendapatkan gambar untuk gridview dari galeri.

Jadi, pada tutorial ini kalian akan belajar cara membuat aplikasi android untuk menampilkan beberapa gambar dari galeri ke layout gridview di android studio.

Tutorial Cara Menampilkan Beberapa Gambar Dari Galeri (Select Multiple) Ke GridView Di Android Studio

Buatlah project android studio baru dengan informasi sebagai berikut:

Daftar file xml layout yang digunakan dalam project ini:

1. activity_main.xml
2. gridview_item.xml

Daftar file java class yang digunakan dalam project ini:

1. MainActivity.java
2. GridViewAdapter.java

Dibawah ini adalah langkah-langkah dalam pembuatan aplikasi GridView App.

XML Layout File

Buka file activity_main.xml dalam folder layout pada project android studio kalian. Tambahkan widget GridView di dalam RelativeLayout dan widget Button. Berikut ini adalah kode lengkap untuk file activity_main.xml

app/res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="vertical"
    tools:context=".MainActivity">

    <GridView
        android:id="@+id/grid_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:numColumns="3" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/grid_view"
        android:layout_centerHorizontal="true"
        android:layout_margin="50dp"
        android:text="BUKA GALERI" />

</RelativeLayout>

Buat file xml layout baru dengan cara klik kanan pada folder layout, lalu pilih New>Layout resource file. Simpan file xml layout baru tersebut dengan nama gridview_item. Tambahkan ImageView di dalam RelativeLayout. Berikut ini adalah kode lengkap untuk file gridview_item.xml

app/res/layout/gridview_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="125dp"
        android:layout_height="125dp"
        android:padding="8dp"
        android:scaleType="centerCrop"
        android:src="@mipmap/ic_launcher" />

</RelativeLayout>

Java Class File

Buatlah file java class adapter baru dengan cara klik kanan pada folder java, lalu pilih New>Java Class. Simpan file java class baru dengan nama GridViewAdapter. Berikut ini adalah kode lengkap untuk file GridViewAdapter.java

app/java/com.androidrion.gridviewapp/GridViewAdapter.java

package com.androidrion.gridviewapp;

import android.annotation.SuppressLint;
import android.content.Context;
import android.net.Uri;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;

import java.util.ArrayList;

public class GridViewAdapter extends BaseAdapter {

    private Context context;
    private ArrayList<Uri> mArrayUri;

    GridViewAdapter(Context context, ArrayList<Uri> mArrayUri) {

        this.context = context;
        this.mArrayUri = mArrayUri;
    }

    @Override
    public int getCount() {
        return mArrayUri.size();
    }

    @Override
    public Object getItem(int position) {
        return mArrayUri.get(position);
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        LayoutInflater inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        @SuppressLint("ViewHolder")
        View itemView = inflater.inflate(R.layout.gridview_item, parent, false);

        ImageView ivGallery = itemView.findViewById(R.id.image_view);

        ivGallery.setImageURI(mArrayUri.get(position));

        return itemView;
    }
}

Sekarang buka file MainActivity dalam folder java. Berikut ini adalah kode lengkap untuk file MainActivity.java

app/java/com.androidrion.gridviewapp/MainActivity.java

package com.androidrion.gridviewapp;

import androidx.appcompat.app.AppCompatActivity;

import android.content.ClipData;
import android.content.Intent;
import android.database.Cursor;
import android.net.Uri;
import android.os.Bundle;
import android.provider.MediaStore;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.GridView;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    int PICK_IMAGE_MULTIPLE = 1;
    String imageEncoded;
    List<String> imagesEncodedList;
    GridView gvGallery;

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

        Button btn = findViewById(R.id.button);
        gvGallery = findViewById(R.id.grid_view);

        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent();
                intent.setType("image/*");
                intent.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, true);
                intent.setAction(Intent.ACTION_GET_CONTENT);
                startActivityForResult(Intent.createChooser(intent, "Select Picture"), PICK_IMAGE_MULTIPLE);
            }
        });

    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        try {
            if (requestCode == PICK_IMAGE_MULTIPLE && resultCode == RESULT_OK
                    && null != data) {

                String[] filePathColumn = {MediaStore.Images.Media.DATA};
                imagesEncodedList = new ArrayList<>();
                GridViewAdapter galleryAdapter;
                if (data.getData() != null) {

                    Uri mImageUri = data.getData();

                    Cursor cursor = getContentResolver().query(mImageUri,
                            filePathColumn, null, null, null);
                    assert cursor != null;
                    cursor.moveToFirst();

                    int columnIndex = cursor.getColumnIndex(filePathColumn[0]);
                    imageEncoded = cursor.getString(columnIndex);
                    cursor.close();

                    ArrayList<Uri> mArrayUri = new ArrayList<>();
                    mArrayUri.add(mImageUri);
                    galleryAdapter = new GridViewAdapter(getApplicationContext(), mArrayUri);
                    gvGallery.setAdapter(galleryAdapter);
                    gvGallery.setVerticalSpacing(gvGallery.getHorizontalSpacing());
                    ViewGroup.MarginLayoutParams mlp = (ViewGroup.MarginLayoutParams) gvGallery
                            .getLayoutParams();
                    mlp.setMargins(0, gvGallery.getHorizontalSpacing(), 0, 0);

                } else {
                    if (data.getClipData() != null) {
                        ClipData mClipData = data.getClipData();
                        ArrayList<Uri> mArrayUri = new ArrayList<>();
                        for (int i = 0; i < mClipData.getItemCount(); i++) {

                            ClipData.Item item = mClipData.getItemAt(i);
                            Uri uri = item.getUri();
                            mArrayUri.add(uri);
                            Cursor cursor = getContentResolver().query(uri, filePathColumn, null, null, null);
                            assert cursor != null;
                            cursor.moveToFirst();

                            int columnIndex = cursor.getColumnIndex(filePathColumn[0]);
                            imageEncoded = cursor.getString(columnIndex);
                            imagesEncodedList.add(imageEncoded);
                            cursor.close();

                            galleryAdapter = new GridViewAdapter(getApplicationContext(), mArrayUri);
                            gvGallery.setAdapter(galleryAdapter);
                            gvGallery.setVerticalSpacing(gvGallery.getHorizontalSpacing());
                            ViewGroup.MarginLayoutParams mlp = (ViewGroup.MarginLayoutParams) gvGallery
                                    .getLayoutParams();
                            mlp.setMargins(0, gvGallery.getHorizontalSpacing(), 0, 0);

                        }
                        Log.v("LOG_TAG", "Selected Images" + mArrayUri.size());
                    }
                }
            } else {
                Toast.makeText(this, "You haven't picked Image",
                        Toast.LENGTH_LONG).show();
            }
        } catch (Exception e) {
            Toast.makeText(this, "Something went wrong", Toast.LENGTH_LONG)
                    .show();
        }

        super.onActivityResult(requestCode, resultCode, data);
    }
}

Run Project

Jika semua sudah di kerjakan, jalankan project android studio kalian. Apabila kode diatas tidak terjadi error, maka aplikasi akan terlihat seperti pada gambar dibawah ini.

AKHIR KATA

Itulah tadi tutorial yang lumayan rumit untuk membuat aplikasi android untuk menampilkan beberapa gambar dari galeri ke layout gridview di android studio.

Jika kalian mengalami kendala saat melakukan tutorial di atas, silahkan komentar di bawah artikel ini. Jangan lupa untuk like dan subscribe Channel YouTube Android Rion. Semoga artikel ini membantu kalian. Terima Kasih.

Download Project

Untuk download project pada tutorial ini, silahkan klik tombol dibawah ini.