[Tutorial Lanjutan] Cara Merubah Tampilan List Menjadi Grid pada RecyclerView di Android Studio

Cara Merubah Tampilan List Menjadi Grid pada RecyclerView di Android Studio

Halo para Android Developer. Bagaimana kabar kalian semua hari ini? Saya harap kalian semua dalam keadaan yang baik-baik saja. Pada kesempatan kali ini, saya akan membagikan Tutorial Cara Merubah Tampilan RecyclerView dari List Menjadi Grid di Android Studio

Seperti yang saya katakan sebelumnya bahwa widget yang satu ini sangatlah hebat karena begitu banyak yang bisa kita lakukan dengan menggunakan satu widget saja. Jika kita tidak ingin menampilkan data dalam bentuk List, kita bisa mengubah tampilannya menjadi Grid. Itu semua hanya menggunakan RecyclerView saja. Padahal Android Studio telah menyediakan widget untuk masing-masing tampilan, Jika kalian ingin menampilkan item dalam bentuk List maka kalian bisa menggunakan ListView dan jika kalian ingin menampilkan item dalam bentuk Grid, Android Studio telah menyediakan widget GridView.

Tapi untuk RecyclerView cukup satu widget saja. Dan itu semua bisa dilakukan oleh RecyclerView. Jadi langsung saja ikuti langkah-langkah dibawah ini.

Tutorial Cara Merubah Tampilan ListView Menjadi GridView pada RecyclerView di Android Studio

Dalam tutorial ini, saya menggunakan project yang lama atau yang sebelumnya. Kalian bisa mengikuti tutorial sebelumnya pada link dibawah ini.

Jika kalian sudah selesai mengikuti tutorial diatas, maka kalian sudah bisa mengikuti tutorial pada artikel ini. Untuk kalian yang kelamaan mengikuti tutorial tersebut, Saya sudah menyertakan link download project tersebut tepat dibawah artikel. Silahkan di download jika kalian tidak ingin terlalu lama mengerjakannya. Apabila sudah, mari kita kerjakan project yang ada pada tutorial sekarang.

Daftar file xml yang digunakan dalam projek ini:

  1. activity_main.xml [tutorial sebelumnya]
  2. list_item.xml [tutorial sebelumnya]
  3. grid_item.xml [tutorial lanjutan]

Daftar file java yang digunakan dalam projek ini:

  1. AdapterRecyclerView.java [tutorial sebelumnya + perubahan nama file]
  2. ItemModel.java [tutorial sebelumnya]
  3. MainActivity.java [tutorial sebelumnya + perbarui]
  4. MyItem.java [tutorial sebelumnya]
  5. GridAdapterView [tutorial lanjutan]

Daftar file menu yang digunakan dalam project ini:

  1. menu_main.xml [tutorial lanjutan]

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

XML Layout File

Membuat File Layout grid_item.xml

Buatlah file dalam folder layout dengan cara klik kanan pada folder res lalu pilih New>Layout Resource File. Simpan dengan nama grid_item. Apabila sudah, tambahkan LinearLayout di dalamnya dan juga widget ImageView dan TextView. Berikut ini adalah kode lengkap untuk file grid_item.xml

app/res/layout/grid_item.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:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:padding="12dp"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/imageGrid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="1dp"
        android:scaleType="fitCenter"
        tools:src="@tools:sample/avatars" />

    <TextView
        android:id="@+id/headlineGrid"
        style="@style/TextAppearance.AppCompat.Title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Facebook" />

    <TextView
        android:id="@+id/sublineGrid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Social Media" />
</LinearLayout>

Android Resource Directory

Membuat Menu File

Untuk membuat directory menu dalam folder res, kalian bisa mengikuti tutorial pada link dibawah ini.

Jika sudah, simpan file dengan nama menu_main.xml. Dalam menu ini saya menggunakan dua item yaitu List View dan Grid View. berikut ini adalah kode lengkap untuk file menu_main.xml

app/res/menu/menu_main.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/menu_list"
        android:title="List View"
        app:showAsAction="never" />
    <item
        android:id="@+id/menu_grid"
        android:title="Grid View"
        app:showAsAction="never" />
</menu>

Java File

Membuat File Java GridAdapterView

Buatlah file GridAdapterView dengan cara klik kanan pada folder java, lalu pilih New>Java Class. Kode yang dimasukkan dalam file ini hampir sama dengan file AdapterRecyclerView yang nanti akan kita ubah nama filenya. Berikut ini adalah kode lengkapnya.

app/java/com.androidrion.recyclerviewapp/GridAdapterView

package com.androidrion.recyclerviewapp;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;

public class GridAdapterView extends RecyclerView.Adapter<GridAdapterView.ViewHolder> {

    private final ArrayList<ItemModel> dataItem;

    static class ViewHolder extends RecyclerView.ViewHolder {

        TextView textHead;
        TextView textSubhead;
        ImageView imageIcon;

        ViewHolder(View v) {

            super(v);

            textHead = v.findViewById(R.id.headlineGrid);
            textSubhead = v.findViewById(R.id.sublineGrid);
            imageIcon = v.findViewById(R.id.imageGrid);
        }
    }

    GridAdapterView(ArrayList<ItemModel> data) {

        this.dataItem = data;
    }

    @NonNull
    @Override
    public GridAdapterView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {

        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.grid_item, parent, false);
        //myonClickListener
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {

        TextView textHead = holder.textHead;
        TextView textSubhead = holder.textSubhead;
        ImageView imageIcon = holder.imageIcon;

        textHead.setText(dataItem.get(position).getName());
        textSubhead.setText(dataItem.get(position).getType());
        imageIcon.setImageResource(dataItem.get(position).getImage());
    }

    @Override
    public int getItemCount() {

        return dataItem.size();
    }
}

Merubah Nama File AdapterRecyclerView

Agar tidak terjadi kesalahan dalam melakukan penamaan file, saya sarankan untuk merubah nama file AdapterRecyclerView menjadi ListAdapterView dengan cara Klik kanan pada file AdapterRecyclerView lalu pilih Refactor>Rename Seperti pada gambar dibawah ini.

Jika sudah, maka Android Studio akan menampilkan jendela Rename, lakukan perubahan nama file didalam kotak yang saya tandai lalu klik tombol Refactor seperti pada gambar dibawah ini.

Perbarui MainActivity File

Buka file MainActivity dalam folder java. Lalu tambahkan function onCreateOptionsMenu untuk menampilkan menu pada toolbar dan juga function onOptionsItemSelected untuk membuat aksi pada menu yang ditampilkan. Berikut ini adalah kode lengkapnya.

app/java/com.androidrion.recyclerviewapp/MainActivity

package com.androidrion.recyclerviewapp;

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

import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    RecyclerView recyclerView;
    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);


        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]
            ));
        }

        showList();

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (item.getItemId() == R.id.menu_list) {
            showList();
        } else if (item.getItemId() == R.id.menu_grid) {
            showGrid();
        }
        return true;
    }

    private void showList() {
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        ListAdapterView listAdapterView = new ListAdapterView(data);
        recyclerView.setAdapter(listAdapterView);
    }

    private void showGrid() {
        recyclerView.setLayoutManager(new GridLayoutManager(this, 3));
        GridAdapterView gridAdapterView = new GridAdapterView(data);
        recyclerView.setAdapter(gridAdapterView);
    }
}

Run ‘app’

Jika sudah menambahkan kode diatas, Jalankan project Android Studio kalian. Pada tampilan awal aplikasi, kalian akan diperlihatkan RecyclerView dengan tampilan List. Untuk merubah tampilan list menjadi grid, kalian cukup menekan menu yang ada pada Toolbar lalu pilih Grid View. Aplikasi pun akan menampilkan GridView dari RecyclerView. Apabila kode diatas tidak terjadi eror, maka aplikasi akan terlihat seperti pada gambar dibawah ini.

AKHIR KATA

Itulah tadi tutorial Cara Merubah Tampilan List menjadi Grid pada RecyclerView di Android Studio. Tutorial diatas sangatlah mudah untuk dikerjakan Karena tidak memerlukan file atau kode yang rumit. Jika kalian mengalami kendala saat melakukan langkah-langkah diatas, silahkan beri komentar di bawah artikel ini.

Jangan lupa juga untuk subscribe Channel YouTube Android Rion. Semoga artikel ini membantu kalian semua. Terima kasih.

Download Project

Untuk download project pada tutorial ini, silahkan klik tombol dibawah ini.

Exit mobile version