Cara Membuat Custom RecyclerView Untuk Menampilkan Gambar dan Teks di Aplikasi Android

Cara Membuat Custom RecyclerView Untuk Menampilkan Gambar dan Teks di Andorid Studio

Halo semuanya, bagaimana kabar kalian hari ini? Saya harap kalian semua dalam keadaan yang baik-baik saja. Pada tutorial sebelumnya, saya sudah membagikan tutorial cara membuat recyclerview di aplikasi android. Pada tutorial tersebut, recyclerview hanya menampilkan teks saja. Untuk itu, pada kesempatan kali ini saya akan membagikan tutorial cara membuat custom recyclerview untuk menampilkan gambar dan teks di aplikasi android.

Tutorial ini sebenarnya sama seperti ListView, tetapi mengingat bahwa RecyclerView adalah widget yang paling bagus untuk suatu aplikasi dari ListView maka dari itu saya tetap mengupload tutorial ini.

Dalam tutorial ini kalian akan belajar cara membuat custom recyclerview untuk menampilkan gambar dan teks pada aplikasi android dengan cara yang paling mudah.

Tutorial Cara Membuat Custom RecyclerView Untuk Menampilkan Gambar dan Teks di Android Studio

Buatlah projek android studio baru dengan informasi sebagai berikut:

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

Daftar file xml yang digunakan dalam projek ini:

  1. activity_main.xml
  2. list_item.xml

Daftar file java yang digunakan dalam projek ini:

  1. AdapterRecyclerView.java
  2. ItemModel.java
  3. MainActivity.java
  4. MyItem.java

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

Dependencies File

Buka file build.gradle pada projek android studio kalian. Tambahkan kode dibawah ini pada bagian dependencies file.

Gradle Scripts/build.gradle (Module: app)

    implementation 'com.google.android.material:material:1.0.0'

Ikuti tutorial pada link di bawah ini untuk menambahkan kode dependensi pada projek android studio.

CARA MENAMBAHKAN KODE DEPENDENSI PADA PROJEK ANDROID STUDIO

Drawable File

Sesuai dari judul tutorial, kita memerlukan gambar untuk di tampilkan pada recyclerview. Pada tutorial ini, saya menggunakan gambar yang telah saya siapkan pada link dibawah ini. Silahkan download file asset dan letakkan dalam folder drawable pada projek android studio kalian.

DOWNLOAD GAMBAR ASSET

XML Layout File

Buatlah file xml layout baru dengan cara klik kanan pada folder layout dalam aplikasi android kalian, lalu pilih New>Layout Resource file. Simpan file tersebut dengan nama list_item. 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"
    android:orientation="horizontal"
    android:paddingLeft="16dp"
    android:paddingTop="8dp"
    android:paddingRight="16dp"
    android:paddingBottom="8dp">

    <ImageView
        android:id="@+id/imageList"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@drawable/facebook" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:orientation="vertical">

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

        <TextView
            android:id="@+id/text_subhead"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Social Media" />
    </LinearLayout>
</LinearLayout>

Buka file activity_main.xml dalam folder layout pada projek android studio kalian. Tambahkan kode dibawah ini untuk menampilkan widget RecyclerView di aplikasi kalian. 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">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:scrollbars="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        tools:listitem="@layout/list_item"/>

</RelativeLayout>

Java Activity File

Pada folder java dalam projek android studio kalian, silahkan klik kanan lalu pilih New>Java Class. Simpan file java baru dengan nama MyItem. Berikut ini adalah kode lengkap untuk file MyItem.java

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

package com.androidrion.recyclerviewapp;

class MyItem {

    static int[] iconList = {
            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
    };

    static 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"
    };

    static String[] Subhead = {"Social Media", "Social Media", "Social Media", "Social Media",
            "Chatting App", "Chatting App", "Chatting App", "Chatting App", "Chatting App",
            "Video Streaming App", "Video Streaming App", "Video Streaming App", "Video Streaming App",
            "UI Design App", "UI Design App", "UI Design App", "UI Design App",
            "Operating System", "Operating System", "Operating System",
            "Browser App", "Browser App", "Browser App", "Browser App",
            "Payment Method", "Payment Method", "Payment Method",
            "Cryptocurrency", "Cryptocurrency"
    };
}

Lakukan lagi hal yang sama, yaitu membuat file java baru lagi. Simpan file dengan nama ItemModel. Berikut ini adalah kode lengkap untuk file ItemModel.java

app/java/com.androidrion.recyclerviewapp/ItemModel.java

package com.androidrion.recyclerviewapp;

public class ItemModel {

    private String name;
    private String type;
    private int image;

    public ItemModel(String name, String type, int image) {
        this.name = name;
        this.type = type;
        this.image=image;
    }

    public String getName() {
        return name;
    }

    public String getType() {
        return type;
    }

    public int getImage() {
        return image;
    }

}

Buat file java baru lagi denan nama AdapterRecyclerView dan tambahkan kode dibawah ini di dalam file tersebut. Berikut ini adalah kode lengkap untuk file AdapterRecyclerView.java

app/java/com.androidrion.recyclerviewapp/AdapterRecyclerView.java

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 AdapterRecyclerView extends RecyclerView.Adapter<AdapterRecyclerView.ViewHolder> {

    private 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.text_headline);
            textSubhead = v.findViewById(R.id.text_subhead);
            imageIcon = v.findViewById(R.id.imageList);
        }
    }

    AdapterRecyclerView(ArrayList<ItemModel> data) {

        this.dataItem = data;
    }

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

        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_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();
    }
}

Buka file MainActivity dalam folder java pada projek android studio kalian. Tambahkan kode dibawah ini untuk menampilkan custom recyclerview yang menampilkan gambar dan teks. Berikut ini adalah kode lengkap untuk file MainActivity.java

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

Run ‘app’

Sekarang jalankan projek android studio kalian. Ketika aplikasi berjalan dengan sempurna, kalian bisa melihat daftar yang menampilkan teks dan gambar. kalian bisa scroll aplikasi untuk melihat data lainnya. Jika kode diatas tidak terjadi error, maka aplikasi akan telihat seperti pada gambar dibawah ini.

AKHIR KATA

Itulah tadi tutorial yang lumayan sulit untuk dikerjakan tentang cara membuat custom recyclerview untuk menampilkan gambar dan teks di aplikasi android. Tampilan yang sederhana ini tidak terlihat berbeda dengan widget ListView. Namun, menggunakan widget RecyclerView untuk menampilkan list adalah yang terbaik dari pada menggunakan widget ListView karena hanya dengan widget ini kita bisa mengubah tampilan menjadi grid. sedangkan untuk widget ListView, kita harus mengganti widget GridView dan itu sangatlah tidak bagus dalam suatu aplikasi.

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.

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

You might also like

Leave A Reply

Your email address will not be published.