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.
- Advertisement -
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:
- activity_main.xml
- gridview_item.xml
Daftar file java class yang digunakan dalam project ini:
- MainActivity.java
- 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.
- Advertisement -
Artikelnya bagus mudah dipahami, kunjungi website kami juga ya!
Sangat bagus lanjut mas smg sllu lancar
Iya, terima kasih atas supportnya. Semoga Msyarif juga ya.