Cara Membuat Tampilan GridView Sederhana di Aplikasi Android

Tutorial Cara membuat GridView Sederhana Di Android Studio

Halo semuanya. Bagaimana kabar kalian hari ini? Saya harap kalian semua dalam keadaan baik-baik saja. Sebelumnya, saya sudah pernah membagikan tutorial cara membuat ListView sederhana di Android Studio. Untuk itu, pada kesempatan kali ini saya akan membagikan tutorial cara membuat tampilan GridView di aplikasi android.

GridView adalah salah satu komponen android yang berguna yang membuat kita untuk menampilkan item yang berbeda dalam berbentuk kotak. Semua item pada GridView secara otomatis ke layout menggunakan ListAdapter. GridView diperlukan ketika kalian ingin menampilkan data dalam layout grid seperti aplikasi berita – Google Play Newsstand, aplikasi tampilan gambar – Pinterest, Google Play Music, aplikasi kalender dan lain-lain.

Dalam tutorial ini, kalian akan belajar cara membuat aplikasi android sederhana menggunakan GridView.

- Advertisement -

Tutorial Sederhana Cara Membuat Tampilan 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:

  • activity_main.xml

Daftar file java activity yang digunakan dalam projek ini:

  • MainActivity.java

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

XML Layout File

Buka file activity_main.xml projek kalian dan tambahkan widget GridView di dalam RelativeLayout. Dalam widget GridView, tambahkan attribut columnWidth, minHeight, numColumns dan stretchMode. 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:columnWidth="125dp"
        android:gravity="center"
        android:minHeight="125dp"
        android:numColumns="auto_fit"
        android:stretchMode="columnWidth" />

</RelativeLayout>

Java Activity File

Buka file MainActivity dalam folder java pada projek android studio kalian. Tambahkan kode di bawah ini untuk menampilkan teks pada GridView. Berikut ini adalah kode lengkap untuk file MainActivity

app/java/com.androdrion.gridviewapp/MainActivity.java

package com.androidrion.gridviewapp;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    GridView gridView;
    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);

        gridView = findViewById(R.id.grid_view);

        ArrayAdapter<String> adapter = new ArrayAdapter<>(
                this, android.R.layout.simple_list_item_1, Headline);
        gridView.setAdapter(adapter);

        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
                Toast.makeText(getApplicationContext(),
                        ((TextView) v).getText() + " is Clicked", Toast.LENGTH_SHORT).show();
            }
        });

    }
}

Run ‘app’

Sekarang jalankan projek android studio kalian tentang aplikasi GridView App. Pada tampilan awal aplikasi, kalian akan melihat nama-nama aplikasi yang tersusun rapi dalam kotak. Kalian bisa mengklik salah satu nama item tersebut untuk menampilkan toast pada aplikasi. Jika kode diatas tidak terjadi masalah, maka aplikasi akan terlihat seperti pada gambar di bawah ini.

AKHIR KATA

Itulah tadi tutorial singkat dan mudah cara membuat gridview sederhana di android studio. Tutorial di atas sangatlah mudah dikerjakan karena tutorial di atas sangatlah sederhana. Widget ini memiliki banyak atribut yang membuat kalian untuk menyesuaikan aplikasi kalian. Kalian dapat menambahkan gambar, gambar dan teks dan banyak lagi.

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.