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

Tutorial Cara Menampilkan Beberapa Gambar dari Galeri 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:

Application Name:GridView App
Package Name:com.androidrion.gridviewapp
Languge:Java
Minimum SDK:API 18: Android 4.3 (Jelly Bean)

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

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.

Get real time updates directly on you device, subscribe now.

You might also like
3 Comments
  1. brilian says

    Artikelnya bagus mudah dipahami, kunjungi website kami juga ya!

  2. Msyarif says

    Sangat bagus lanjut mas smg sllu lancar

    1. Android Rion says

      Iya, terima kasih atas supportnya. Semoga Msyarif juga ya.

Leave A Reply

Your email address will not be published.