Cara Menampilkan Gambar Di Layout GridView

Tutorial Cara Menampilkan gambar di GridView pada Android Studio

Halo semuanya, bagaimana kabar kalian hari ini? Saya harap kalian semua dalam keadaan yang baik-baik saja. Sebelumnya saya sudah pernah membagikan tutorial cara membuat gridview sederhana di android studio. Kali ini, saya ingin membagikan tutorial cara menampilkan gambar pada layout gridview.

GridView adalah ViewGroup yang digunakan untuk menampilkan item dalam kotak. Layout GridView bisa di-scroll jika ada banyak item yang ditampilkan. Widget ini tidak hanya menampilkan teks saja, tetapi bisa menampil gambar juga.

Menampilkan gambar di gridview tidak begitu sulit. Ada banyak cara untuk menampilkan gambar dalam layout gridview dan dalam tutorial ini, kalian akan belajar menampilkan gambar di layout GridView menggunakan salah satu cara termudah.

- Advertisement -

Tutorial Cara Menampilkan Gambar Di Layout GridView Pada Aplikasi Android Studio

Buatlah projek android studio baru dengan informasi sebagai berikut:

Application Name:GridView App
Company Name:com.androdrion.gridviewapp
Language Java:Java
Minimum SDK:API 15: Android 4.0.3 (IceCreamSandwich)

Daftar file xml layout yang digunakan dalam projek ini:

  • activity_main.xml

Daftar file java activity yang digunakan dalam projek ini:

  • MainActivity.java

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

Drawable File

Dalam tutorial ini, saya menggunakan gambar atau icon yang sama seperti pada tutorial Cara Membuat Custom ListView Menggunakan ArrayAdapter. Untuk itu, silahkan download gambar pada link di bawah ini.

DOWNLOAD ASSET GRIDVIEW APP

Setelah kalian download asset, silahkan pindahkan ke dalam folder drawable pada projek android studio kalian.

XML Layout File

Buka file activity_main.xml dalam projek android studio kalian dan tambahkan widget GridView di dalam layout yang telah disediakan. Pada widget GridView, tambahkan atribut seperti columnWidth, minHeight, numColumns dan strecthMode. 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"
    tools:context=".MainActivity">

    <GridView
        android:id="@+id/grid_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:layout_gravity="center"
        android:gravity="center"
        android:numColumns="4"
        android:stretchMode="columnWidth" />

</RelativeLayout>

Java Activity File

Buka file MainActivity dalam folder java pada projek android studio kalian. Tambakan kode di bawah ini untuk membuat layout gridview menampilkan gambar pada aplikasi android. 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.Context;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    GridView gridView;

    int[] iconList = new int[]{
            R.drawable.facebook, R.drawable.twitter, R.drawable.instagram, R.drawable.snapchat,
            R.drawable.whatsapp, R.drawable.line, R.drawable.kakaotalk, R.drawable.telegram, R.drawable.messenger,
            R.drawable.youtube, R.drawable.tiktok, R.drawable.vine, R.drawable.vimeo,
            R.drawable.figma, R.drawable.adobe_xd, R.drawable.sketch, R.drawable.framer,
            R.drawable.android, R.drawable.apple, R.drawable.windows,
            R.drawable.opera, R.drawable.firefox, R.drawable.safari, R.drawable.edge,
            R.drawable.paypal, R.drawable.mastercard, R.drawable.visa,
            R.drawable.bitcoin, R.drawable.ethereum
    };

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

        gridView = findViewById(R.id.grid_view);

        gridView.setAdapter(new ImageGridViewAdapter(this));

        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
                Toast.makeText(getBaseContext(),
                        "Grid Item " + (position + 1) + " Selected",
                        Toast.LENGTH_SHORT).show();

            }
        });

    }

    public class ImageGridViewAdapter extends BaseAdapter {
        private Context mContext;

        ImageGridViewAdapter(Context c) {
            mContext = c;
        }

        public int getCount() {
            return iconList.length;
        }

        public Object getItem(int position) {
            return null;
        }

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

        public View getView(int position, View convertView, ViewGroup parent) {
            ImageView mImageView;

            if (convertView == null) {
                mImageView = new ImageView(mContext);
                mImageView.setLayoutParams(new GridView.LayoutParams(200, 200));
                mImageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
                mImageView.setPadding(16, 16, 16, 16);
            } else {
                mImageView = (ImageView) convertView;
            }
            mImageView.setImageResource(iconList[position]);
            return mImageView;
        }
    }
}

Run ‘app’

Sekarang jalankan projek android studio kalian. Pada tampilan awal aplikasi, kalian bisa melihat gambar yang tersusun rapi pada aplikasi. Jika kalian mengklik salah satu gambar atau icon yang terdapat pada gridview, maka aplikasi akan menampilkan toast untuk mengetahui nomor urutan gambar. Jika kode diatas tidak terjadi error, maka aplikasi akan terlihat seperti pada gambar di bawah ini.

AKHIR KATA

Itulah tadi tutorial singkat dan mudah cara menampilkan gambar pada layout gridview di android studio. Tutorial di atas sangatlah mudah untuk dikerjakan karena tidak begitu banyak file java yang digunakan untuk menampilkan gambar pada layout gridview. Tutorial ini masih bisa dikembangkan seperti cara menampilkan gambar dan teks pada layout gridview.

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.

- Advertisement -

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

You might also like

- Advertisement -

Leave A Reply

Your email address will not be published.