Artikel Teknologi

Insight engineering, security, dan pengembangan produk digital.

Kumpulan artikel praktis dari pengalaman lapangan, mulai dari server hardening, pengembangan web modern, hingga automation workflow.

Filter /membuat-list-dengan-recyclerview-dan-activity-detail

Detail Artikel

Programming 17 Apr 2021 8.546 views

Membuat List Data dengan RecyclerView dan Activity Detail

  • Create Project , dengan Empty Activity.

  • Isi Name : My Distro , Package name : com.fahram.mydistro, dan Language : Java

  • Buatlah 3 class dengan cara klik kanan pada package name, kemudian new, Kemudian pilih “Java Class”
    • Distro
    • DistroAdapter
    • DistroData
  • Edit Class Distro Berikan attribute sesuai kebutuhan, pada project ini kita pakai 3 attribute : name, info, logo
public class Distro {
    private String name;
    private String info;
    private int logo;
}
  • Siapkan contructor  dan getter , dengan cara klik kanan pada code Distro pilih generate, pilih Costructor kemudian pilih semua attribute. Ulangi klik kanan pada code Distro pilih generate, pilih Getter  kemudian pilih semua attribute. sehingga menjadi seperti berikut :
public class Distro {
    private String name;
    private String info;
    private int logo;

    public Distro(String name, String info, int logo) {
        this.name = name;
        this.info = info;
        this.logo = logo;
    }

    public String getName() {
        return name;
    }

    public String getInfo() {
        return info;
    }

    public int getLogo() {
        return logo;
    }
}
  • Kemudian kita implementasi Parcelable pada class Distro
import android.os.Parcelable;

public class Distro implements Parcelable {
  • Klik Pada lampu merah untuk mengimplementasikan method secara otomatis

  • Klik Pada lampu merah lagi untuk mengimplemtasikan method secara otomatis

  • Sehingga Class Distro Menjadi Seperti ini.
package com.fahram.mydistro;

import android.os.Parcel;
import android.os.Parcelable;

public class Distro implements Parcelable {
    private String name;
    private String info;
    private int logo;

    public Distro(String name, String info, int logo) {
        this.name = name;
        this.info = info;
        this.logo = logo;
    }

    protected Distro(Parcel in) {
        name = in.readString();
        info = in.readString();
        logo = in.readInt();
    }

    public static final Creator<Distro> CREATOR = new Creator<Distro>() {
        @Override
        public Distro createFromParcel(Parcel in) {
            return new Distro(in);
        }

        @Override
        public Distro[] newArray(int size) {
            return new Distro[size];
        }
    };

    public String getName() {
        return name;
    }

    public String getInfo() {
        return info;
    }

    public int getLogo() {
        return logo;
    }

    @Override
    public int describeContents() {
        return 0;
    }

    @Override
    public void writeToParcel(Parcel dest, int flags) {
        dest.writeString(name);
        dest.writeString(info);
        dest.writeInt(logo);
    }
}
  • Siapkan data berupa text untuk name, info dan gambar untuk logo. Kemudian masukkan ke dalam class DistroData (Data yang saya gunakan dari DistroWatch.com), seperti di bawah ini :
package com.fahram.mydistro;

import java.util.ArrayList;
import java.util.List;

public class DistroData {
    private static String[] names = {
            "Manjaro Linux",
            "Linux Mint",
            "Pop!_OS",
    };
    private static String[] infos = {
            "Manjaro Linux is a fast, user-friendly, desktop-oriented operating system based on Arch Linux.",
            "Linux Mint is an Ubuntu-based distribution whose goal is to provide a classic desktop experience with many convenient",
            "Pop!_OS is an Ubuntu-based Linux distribution featuring a custom GNOME desktop. ",
    };
    private static int[] logos = {
            R.drawable.manjaro,
            R.drawable.mint,
            R.drawable.popos,
    };
    public static List<Distro> getDatas() {
        ArrayList<Distro> distros = new ArrayList<>();
        for (int i = 0; i < names.length; i++) {
            Distro distro = new Distro(names[i], infos[i], logos[i]);
            distros.add(distro);
        }
        return distros;
    }
}
  • Pastikan kalian sudah menyalin gambar ke folder res -> drawable seperti ini :

  • Sebelum lanjut ke Class DistroAdapter, kita harus siapkan layout untuk menampung data list. Klik kanan pada layout, kemudian pilih New, kemudian pilih Layout Resource File

  • Isi File name dengan nama : item_distro Kemudian klik OK

  • Buka tab Code pada layout item_distro.xml, edit menjadi seperti berikut
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="16dp"
    android:layout_marginTop="8dp"
    android:layout_marginRight="16dp"
    android:layout_marginBottom="8dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/iv_logo"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_marginStart="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            android:contentDescription="Distro Logo"
            android:src="@drawable/ic_launcher_background"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/tv_name"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:lines="2"
            android:text="Distro Name"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toEndOf="@+id/iv_logo"
            app:layout_constraintTop_toTopOf="@+id/iv_logo" />

        <TextView
            android:id="@+id/tv_info"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:lines="2"
            android:text="Distro Info"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/iv_logo"
            app:layout_constraintTop_toBottomOf="@+id/tv_name" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
  • Kemudian edit file activity_main.xml. ganti TextView dengan RecyclerView
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    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/rv_data"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
  • Kembali ke class DistroAdapter kita tambahkan inner class ViewHolder dengan mengekstend class RecyclerView.ViewHolder
public class DistroAdapter {

    public class ViewHolder extends RecyclerView.ViewHolder {
        TextView tvName, tvInfo;
        ImageView ivLogo;
        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            tvName = itemView.findViewById(R.id.tv_name);
            tvInfo = itemView.findViewById(R.id.tv_info);
            ivLogo = itemView.findViewById(R.id.iv_logo);
        }
    }
}
  • Tambahkan attribute dan constructor
public class DistroAdapter {
    private ArrayList<Distro> distros ;

    public DistroAdapter(ArrayList<Distro> distros) {
        this.distros = distros;
    }
....
  • Kemudian extend class DistroAdapter dengan RecyclerView.Adapter<DistroAdapter.ViewHolder>
public class DistroAdapter extends RecyclerView.Adapter<DistroAdapter.ViewHolder>{
  • kemudian implementasikan semua method yang dibutuhkan

  • Lengkapi ketiga method tersebut seperti berikut
    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_distro, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        Distro distro = distros.get(position);
        holder.tvName.setText(distro.getInfo());
        holder.tvInfo.setText(distro.getInfo());
        holder.ivLogo.setImageResource(distro.getLogo());
    }

    @Override
    public int getItemCount() {
        return distros.size();
    }
  • Kemudian kita lanjut pada class MainActivity.java Pada method onCreate kita daftarkan RecyclerView dan Adapter yang sudah kita buat, sehingga menjadi seperti berikut
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        RecyclerView recyclerView = findViewById(R.id.rv_data);
        recyclerView.setHasFixedSize(true);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        ArrayList<Distro> distros = new ArrayList<>();
        distros.addAll(DistroData.getDatas());
        DistroAdapter distroAdapter = new DistroAdapter(distros);
        recyclerView.setAdapter(distroAdapter);
    }

Sampai di sini kita sudah bisa menjalankan aplikasi List Data Distro,

untuk DetailActivity kita lanjutkan di materi berikutnya.

Artikel Terbaru

Konten pilihan untuk pengembangan skill

Materi disusun ringkas dan aplikatif agar bisa langsung Anda praktikkan.

Fix Zima VM Web Console via Cloudflare Tunnel Using NGINX Stream (Port 5700)
Note 07 Apr 2026

Fix Zima VM Web Console via Cloudflare Tunnel Using NGINX Stream (Port 5700)

Solusi untuk error WebSocket Zima VM melalui Cloudflare Tunnel menggunakan NGINX Stream (port 5700).

Buka Detail
Mengakses Server SSH Melalui Cloudflare Tunnel dengan Port Forwarding PostgreSQL
Note 09 Mar 2026

Mengakses Server SSH Melalui Cloudflare Tunnel dengan Port Forwarding PostgreSQL

Cara menggunakan SSH melalui Cloudflare Access sekaligus membuat port forwarding ke database PostgreSQL menggunakan konfigurasi ~/.ssh/config.

Buka Detail
Flutter Super App untuk Portal & Learning Management System
Portfolio 07 Mar 2026

Flutter Super App untuk Portal & Learning Management System

Fahram Mobile App adalah aplikasi mobile berbasis Flutter yang mengintegrasikan dua platform web utama: Portal Fahram – portal publik berisi artikel, galeri, dokumen, dan...

Buka Detail
LMS Web Platform
Portfolio 06 Mar 2026

LMS Web Platform

Fahram LMS adalah platform Learning Management System berbasis web yang dirancang untuk menyediakan pengalaman belajar digital yang modern, interaktif, dan mudah digunaka...

Buka Detail
Gratis Email Bisnis dengan Custom Domain
Services 05 Mar 2026

Gratis Email Bisnis dengan Custom Domain

Email custom domain adalah alamat email yang menggunakan nama domain bisnis Anda sendiri, bukan domain penyedia email gratis. Contoh perbandingan: Email biasa namabisni...

Buka Detail
Jasa Pembuatan Website Murah Profesional Mulai Rp500.000
Services 05 Mar 2026

Jasa Pembuatan Website Murah Profesional Mulai Rp500.000

Mulai Website Bisnis Anda Sekarang Jangan biarkan bisnis Anda tertinggal di era digital. Dengan investasi yang sangat terjangkau, Anda sudah bisa memiliki website profesi...

Buka Detail
Sistem Informasi Gudang & Aset Manajemen Terintegrasi
Portfolio 23 Feb 2026

Sistem Informasi Gudang & Aset Manajemen Terintegrasi

Kelola stok barang, aset perusahaan, penyusutan, mutasi, hingga audit log dalam satu platform terpusat. SIGAM dirancang untuk organisasi yang membutuhkan kontrol inventar...

Buka Detail
Portal Website Polres Cilegon
Portfolio 01 Jan 2026

Portal Website Polres Cilegon

Polres Cilegon adalah website resmi Kepolisian Resor Cilegon - bagian dari Kepolisian Negara Republik Indonesia (Polri) yang bertugas menjaga keamanan, ketertiban, dan pe...

Buka Detail
Sistem Manajemen Email Kampus
Portfolio 26 Jun 2025

Sistem Manajemen Email Kampus

Platform untuk otomatis membuat dan mengelola akun email mahasiswa/dosen pada Google Workspace atau Microsoft 365. Fitur utama mencakup pendaftaran, approval admin, provi...

Buka Detail
Buku Pemrograman web dengan PHP framework Laravel
Buku 25 Jul 2023

Buku Pemrograman web dengan PHP framework Laravel

Buku ini dirancang untuk pemula yang ingin mempelajari dasar-dasar pemrograman web menggunakan PHP dan juga bagi mereka yang ingin menguasai Laravel, framework PHP yang s...

Buka Detail
Kampus Komputer Cilegon Banten
Schools 15 Mar 2010

Kampus Komputer Cilegon Banten

- Nama Perguruan Tinggi Politeknik PIKSI Input Website https://piksiinputserang.ac.id/ Prodi Ilmu Komputer D4 - Rekayasa Keamanan Siber, D3 - Manajemen Inform...

Buka Detail
MINI SIEM - Solusi Monitoring Log & Deteksi Ancaman Real-Time untuk Infrastruktur Anda
Portfolio 25 Feb 2026

MINI SIEM - Solusi Monitoring Log & Deteksi Ancaman Real-Time untuk Infrastruktur Anda

Kelola log server, deteksi anomali, dan respon insiden keamanan dalam satu dashboard terpusat. Mini SIEM dirancang untuk organisasi yang membutuhkan visibilitas penuh ter...

Buka Detail