Cara Membuat Tampilan GridView Menggunakan RecyclerView di Aplikasi Android

Halo semuanya, bagaimana kabar kalian hari ini? Saya harap kalian semua dalam keadaan yang baik-baik saja. Sebelumnya, saya sudah pernah membagikan kalian tutorial cara membuat custom recyclerview untuk menampilkan gambar dan teks di aplikasi android. Dari hasil tutorial tersebut, aplikasi menampilkan data berbentu daftar (list). Dan untuk itu, pada postingan kali ini, saya akan membagikan tutorial cara membuat tampilan gridview menggunakan widget recyclerview di aplikasi android.

Inilah salah satu perbedaan antara widget RecyclerView dengan ListView. Meskipun keduanya memiliki fungsi yang sama yaitu menampilkan kumpulan data-data menjadi satu tetapi widget RecyclerView yang lebih unggul. Karena hanya menggunakan widget RecyclerView, kita bisa mengubah tampilan yang awalnya tampilan daftar (listview) menjadi tampilan kotak (gridview).

Dan seperti janji saya pada tutorial yang sebelumnya. Saya akan menggunakan widget CardView dalam tutorial untuk membuat tampilan gridview menjadi lebih keren dan juga material design.

Maka dari itu, dalam tutorial ini kalian akan belajar cara membuat tampilan gridview pada widget recyclerview dan menggunakan CardView di aplikasi android dengan cara yang sangat mudah dan sederhana.

Tutorial Cara Membuat Tampilan GridView di Widget RecyclerView dan Menggunakan CardView Pada Android Studio

Dalam tutorial kali ini, saya masih menggunakan projek pada tutorial sebelumnya. Kalian bisa mengikuti tutorial sebelumnya pada link di bawah ini.

CARA MEMBUAT CUSTOM RECYCLERVIEW UNTUK MENAMPILKAN GAMBAR DAN TEKS DI ANDROID STUDIO

Atau kalian bisa langsung mendownload projek pada tutorial sebelumnya.

Jika kalian sudah mempersiapkan projek android studio nya, mari kita kerjakan tutorial ini:

Drawable File

Untuk tutorial kali ini, saya mengganti gambar yang akan ditampilkan pada aplikasi. Silahkan download file asset untuk tutorial ini pada link dibawah ini.

DOWNLOAD ASSET

Setelah kalian download, letakkan gambar poster tersebut ke dalam folder drawable pada projek android studio kalian.

XML Layout File

Buka file list_item.xml dalam folder layout. Ganti seluruh kode didalam file tersebut dengan kode di bawah ini. Berikut ini adalah kode lengkap untuk file list_item.xml

app/res/layout/list_item.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_margin="8dp"
        app:cardCornerRadius="5dp"
        app:cardElevation="3dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/imageList"
                android:layout_width="match_parent"
                android:layout_height="285dp"
                android:layout_gravity="center"
                android:scaleType="fitXY"
                android:src="@drawable/poster1" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/imageList"
                android:orientation="vertical"
                android:padding="8dp">

                <TextView
                    android:id="@+id/text_headline"
                    style="@style/TextAppearance.AppCompat.Title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Frozen II" />

                <TextView
                    android:id="@+id/text_subhead"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="2019" />
            </LinearLayout>
        </RelativeLayout>
    </androidx.cardview.widget.CardView>

</LinearLayout>

Java Activity File

Buka file MyItem.Java dalam folder java pada projek android studio kalian. Ubah kode dalam file tersebut dengan kode dibawah ini. Berikut adalah kode untuk file MyItem.java

app/java/com.androidrion.recyclerviewapp/MyItem.java

package com.androidrion.recyclerviewapp;

class MyItem {

    static int[] iconList = {
            R.drawable.poster5, R.drawable.poster2, R.drawable.poster3, R.drawable.poster4,
            R.drawable.poster1, R.drawable.poster6, R.drawable.poster7
    };

    static String[] Headline = {"Star Wars: The Rise of Skywalker", "Maleficent: Mistress of Evil", "Joker",
            "6 Underground", "Frozen II", "The Witcher",
            "Zombieland: Double Tap"
    };

    static String[] Subhead = {"2019", "2019", "2019",
            "2019", "2019", "2019",
            "2019"
    };
}

Sekarang buka file MainActivity.java. Pada line code 29, Ubah menjadi GridLayoutManager. Berikut ini adalah kode lengkap untuk file MainActivity.java

app/java/com.androidrion.recyclerviewapp/MainActivity.java

package com.androidrion.recyclerviewapp;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.DefaultItemAnimator;
import androidx.recyclerview.widget.DividerItemDecoration;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.os.Bundle;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    RecyclerView recyclerView;
    RecyclerView.Adapter recyclerViewAdapter;
    RecyclerView.LayoutManager recylerViewLayoutManager;
    ArrayList<ItemModel> data;

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

        recyclerView = findViewById(R.id.recyclerView);
        recyclerView.setHasFixedSize(true);

        recylerViewLayoutManager = new GridLayoutManager(this,2);
        recyclerView.setLayoutManager(recylerViewLayoutManager);

        data = new ArrayList<>();
        for (int i = 0; i < MyItem.Headline.length; i++) {
            data.add(new ItemModel(
                    MyItem.Headline[i],
                    MyItem.Subhead[i],
                    MyItem.iconList[i]
            ));
        }

        recyclerViewAdapter = new AdapterRecyclerView(data);
        recyclerView.setAdapter(recyclerViewAdapter);
    }
}

Run ‘app’

Jalankan projek android studio kalian. Aplikasi akan menampilkan widget RecyclerView yang menggunakan CardView dengan tampilan kotak-kotak. Jika kode diatas tidak terjadi error, maka aplikasi akan terlihat seperti pada gambar di bawah ini.

• 

• 

AKHIR KATA

Itulah tadi tutorial lanjutan tentang cara membuat tampilan GridView dari widget RecyclerView dengan menggunakan CardView di Android Studio. Tutorial diatas sangatlah mudah dikerjakan karena kita hanya mengganti tampilan pada file list_item.xml dan mengubah LinearLayoutManager menjadi GridLayoutManager pada file MainActivity.java. RecyclerView tidak hanya mengubah tampilan saja, tetapi kita bisa melakukan hal yang lain menggunakan widget yang keren ini.

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.