Cara Membuat Custom GridView Untuk Menampilkan Gambar dan Teks

Tutorial Cara Menampilkan gambar dan Teks di GridView pada Android Studio

Halo semuanya, bagaimana kabar kalian hari ini? saya harap kalian semua dalam keadaan baik-baik saja. Sebelumnya, saya sudah membuat dua buah tutorial tentang GridView, yaitu Cara Sederhana Membuat GridView dan Cara Menampilkan Gambar di GridView. Pada kesempatan kali ini, saya akan membagikan tutorial bagaimana cara menampilkan gambar dan teks pada GridView di Android Studio.

GridView adalah salah satu layout yang paling berguna dan paling penting di Android. Layout GridView digunakan untuk menampilkan data dalam kotak yang bisa di scroll jika data melebihi layar aplikasi. Layout GridView dapat digunakan dalam aplikasi seperti aplikasi pembaca berita, aplikasi penampilan gambar, aplikasi pemutar musik, aplikasi pencatatan dan lain-lain.

Dalam tutorial ini, kalian akan belajar membuat GridView khusus dan menampilkan gambar dan teks di dalamnya. Ketika item di klik, toast akan menampilkan teks dari judul gambar.

- Advertisement -

Tutorial Cara Menampilkan Gambar dan Teks Pada Layout GridView di Android Studio

Buatlah projek android studio baru dengan informasi sebagai berikut:

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

Daftar file xml layout yang digunakan dalam projek ini:

  1. activity_main.xml
  2. grid_layout.xml

Daftar file java yang digunakan dalam projek ini:

  1. GridViewCustom.java
  2. MainActivity.java

Di bawah ini adalah langkah-langkah dalam pembuatan aplikasi GridView App.

Drawable File

Karena kita akan menampilkan gambar pada aplikasi, maka kita perlu file drawable. Pada tutorial ini, saya menggunakan gambar seperti pada tutorial sebelumnya. Silahkan download gambar pada link dibawah ini.

DOWNLOAD ASSET PROJEK GRIDVIEW APP

Setelah kalian download, ektrak file lalu pindahkan ke dalam folder di projek android studio kalian.

XML Layout File

Buka file activity_main.xml projek kalian lalu tambahkan widget gridview di dalamnya. 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>

Buatlah file xml layout baru dengan nama file grid_layout lalu tambahkan kode di bawah untuk membuat tampilan kustom untuk gridview agar bisa menampilkan gambar dan teks. Berikut ini adalah kode lengkap untuk file grid_layout.xml

app/res/layout/grid_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/android_custom_gridview_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    android:padding="8dp"
    tools:ignore="UseCompoundDrawables">

    <ImageView
        android:id="@+id/grid_image"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/facebook"
        tools:ignore="ContentDescription" />

    <TextView
        android:id="@+id/grid_text"
        android:textColor="@android:color/black"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:text="Facebook" />
</LinearLayout>

Java Activity File

Sekarang buatlah BaseAdapter dengan nama file GridViewCustom dalam folder java. Berikut ini adalah kode lengkap untuk file GridViewCustom.java

app/java/com.androidrion.gridviewapp/GridViewCustom.java

package com.androidrion.gridviewapp;

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

public class GridViewCustom extends BaseAdapter {

    private Context mContext;
    private final int[] gridView_Image;
    private final String[] gridView_Text;

    public GridViewCustom(Context context, int[] gridViewGambar, String[] gridViewTeks) {
        mContext = context;
        this.gridView_Image = gridViewGambar;
        this.gridView_Text = gridViewTeks;
    }

    @Override
    public int getCount() {
        return gridView_Text.length;
    }

    @Override
    public Object getItem(int i) {
        return null;
    }

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

    @SuppressLint("InflateParams")
    @Override
    public View getView(int i, View convertView, ViewGroup parent) {
        View gridViewAndroid;
        LayoutInflater inflater = (LayoutInflater) mContext
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        if (convertView == null) {

            gridViewAndroid = inflater.inflate(R.layout.grid_layout, null);
            ImageView imageViewAndroid = gridViewAndroid.findViewById(R.id.grid_image);
            TextView textViewAndroid = gridViewAndroid.findViewById(R.id.grid_text);
            imageViewAndroid.setImageResource(gridView_Image[i]);
            textViewAndroid.setText(gridView_Text[i]);
        } else {
            gridViewAndroid = convertView;
        }

        return gridViewAndroid;
    }
}

Buka file MainActivity dalam folder java dan tambahkan kode dibawah ini agar layout GridView menjalankan BaseAdapter yang telah kita buat. 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
    };

    String[] Headline = {"Facebook", "Twitter", "Instagram", "SnapChat",
            "WhatsApp", "LINE", "KakaoTalk", "Telegram", "Messenger",
            "YouTube", "TikTok", "Vine", "Vimeo",
            "Figma", "Adobe XD", "Sketch", "Framer",
            "Android", "iOS", "Windows",
            "Opera", "Mozilla", "Safari", "Edge",
            "Paypal", "Mastercard", "Visa",
            "Bitcoin", "Ethereum"
    };

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

        GridViewCustom gridViewCustom = new GridViewCustom(MainActivity.this, iconList, Headline);
        gridView = findViewById(R.id.grid_view);
        gridView.setAdapter(gridViewCustom);

        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
                Toast.makeText(MainActivity.this, "GridView Item: "
                        + Headline[+position], Toast.LENGTH_SHORT).show();

            }
        });

    }

}

Run ‘app’

Sekarang jalankan projek android studio kalian. Pada tampilan awal aplikasi, kalian bisa melihat gambar beserta teks tersusun kotak dengan rapi. Jika kalian mengklik ikon tersebut, maka aplikasi akan menampilkan toast dengan informasi teks yang sesuai dengan gambar yang klik. Jika kode di atas tidak terjadi error, maka aplikasi akan terlihat seperti pada gambar di bawah ini.

AKHIR KATA

Itulah tadi tutorial singkat dan mudah cara membuat layout gridview menampilkan gambar dan teks di aplikasi android studio. Tutorial di atas mungkin lumayan susah tetapi kode di atas adalah salah satu metode yang paling mudah untuk 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.