Tutorial Cara Menambahkan Item Baru di RecyclerView Android

Last Updated on 8 years by Mas Herdi

Halo semua, malam ini kita masih belajar tentang RecyclerView sebagai bagian dari series tentang membuat Material Design di Android. Di tutorial sebelumnya kita telah belajar tentang cara membuat RecyclerView di Android, mengimplementasikan CardView di dalam RecyclerView, dan yang terakhir mengeset OnClick Listener pada RecyclerView. Di tutorial terakhir, pada saat item di RecyclerView diklik, maka item tersebut akan dihapus / diremove dari list item pada RecyclerView itu. Nah sekarang kebalikannya, kita akan belajar cara menambahkan data baru ke dalam list RecyclerView.

Cara Menambahkan Data Baru ke dalam list RecyclerView

Sebenarnya caranya sangat mudah, cuma sebelum kita belajar ada baiknya kalian membaca dan melakukan terlebih dahulu tutorial-tutorial berikut.

Pre-Requisites :

• Membuat Project Android Baru di Android Studio
• Tutorial Membuat RecyclerView di Android
• Tutorial Membuat RecyclerView dengan CardView
• Tutorial Set OnClickListener pada RecyclerView

Pertama-tama, kita akan membuat sebuah interface untuk menambahkan data, yaitu berupa FloatingActionButton yang apabila diklik akan menambahkan satu baris data baru di list RecyclerView.

Buka file activity_main.xml, dan tambahkan FloatingActionButton pada file xml tersebut. Oh iya, kita juga merubah layoutnya menjadi memakai RelativeLayout 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:background="@color/primary_material_light"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:layout_below="@id/toolbar"
        android:id="@+id/rv_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_add_white"
        android:layout_marginBottom="20dp"
        android:layout_marginRight="20dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        app:fabSize="normal" />

</RelativeLayout>

Kemudian kita akan menyiapkan data yang akan ditambahkan, yaitu berupa ArrayList<String> yang berisi daftar nama-nama. Ketika FloatingActionButton tadi diklik, maka kita akan mengambil random satu nama dari ArrayList tersebut, dan menambahkannya ke bagian paling bawah dari list RecyclerView. Mudah kan logic nya 🙂

Buka file MainActivity.java, dan tambahkan ArrayList baru seperti berikut pada method initDataSet() :

    private ArrayList<String> addDataSet;
    
    // rest of code ...
    private void initDataset(){

        /**
         * Tambahkan item ke dataset tambahan
         * dalam prakteknya bisa bermacam2
         * tidak hanya String seperti di kasus ini
         */

        addDataSet.add("Anna");
        addDataSet.add("Sofia");
        addDataSet.add("Emilia");
        addDataSet.add("Emma");
        addDataSet.add("Neele");
        addDataSet.add("Franziska");
        addDataSet.add("Heike");
        addDataSet.add("Katrin");
        addDataSet.add("Katharina");
        addDataSet.add("Liselotte");
    }

Untuk mencapai tujuan itu, kita akan tambahkan satu method add() terlebih dahulu ke dalam file RecyclerViewAdapter.java :

    public void add(int position, String item) {
        rvData.add(position, item);
        notifyItemInserted(position);
    }

Jika sudah kita akan kembali ke class MainActivity.java, untuk menambahkan FloatingActionButton dan juga mengeset OnClickListener.

    private FloatingActionButton fab;
       
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        
        // rest of code ...

        fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                // menyiapkan integer random dari 0 - 9
                int i = new Random().nextInt(9 - 0 + 1);

                // mengambil nama pada posisi random 0 - 9
                String additional = addDataSet.get(i);

                // memasukkan nama tersebut ke dalam
                // daftar nama di RecyclerView
                ((RecyclerViewAdapter)adapter).add(dataSet.size(), additional);

                // membuat RecyclerView otomatis
                // scroll ke bawah setelah nama baru ditambahkan
                rvView.scrollToPosition(dataSet.size()-1);
            }
        });
    }

Setelah dimodifikasi, maka file MainActivity.java menjadi seperti ini :

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;

import java.util.ArrayList;
import java.util.Random;

/**
 * Created by Herdi_WORK on 15.09.16.
 */
public class MainActivity extends AppCompatActivity {

    private RecyclerView rvView;
    private RecyclerView.Adapter adapter;
    private RecyclerView.LayoutManager layoutManager;
    private FloatingActionButton fab;
    private ArrayList<String> dataSet;
    private ArrayList<String> addDataSet;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_recyclerview);
        dataSet = new ArrayList<>();
        addDataSet = new ArrayList<>();

        initDataset();

        rvView = (RecyclerView) findViewById(R.id.rv_main);
        rvView.setHasFixedSize(true);

        /**
         * Kita menggunakan LinearLayoutManager untuk list standar
         * yang hanya berisi daftar item
         * disusun dari atas ke bawah
         */
        layoutManager = new LinearLayoutManager(this);
        rvView.setLayoutManager(layoutManager);

        adapter = new RecyclerViewAdapter(dataSet);
        rvView.setAdapter(adapter);

        fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                // menyiapkan integer random dari 0 - 9
                int i = new Random().nextInt(9 - 0 + 1);

                // mengambil nama pada posisi random 0 - 9
                String additional = addDataSet.get(i);

                // memasukkan nama tersebut ke dalam
                // daftar nama di RecyclerView
                ((RecyclerViewAdapter)adapter).add(dataSet.size(), additional);

                // membuat RecyclerView otomatis
                // scroll ke bawah setelah nama baru ditambahkan
                rvView.scrollToPosition(dataSet.size()-1);
            }
        });
    }

    private void initDataset(){

        /**
         * Tambahkan item ke dataset
         * dalam prakteknya bisa bermacam2
         * tidak hanya String seperti di kasus ini
         */
        dataSet.add("Karin");
        dataSet.add("Ingrid");
        dataSet.add("Helga");
        dataSet.add("Renate");
        dataSet.add("Elke");
        dataSet.add("Ursula");
        dataSet.add("Erika");
        dataSet.add("Christa");
        dataSet.add("Gisela");
        dataSet.add("Monika");

        addDataSet.add("Anna");
        addDataSet.add("Sofia");
        addDataSet.add("Emilia");
        addDataSet.add("Emma");
        addDataSet.add("Neele");
        addDataSet.add("Franziska");
        addDataSet.add("Heike");
        addDataSet.add("Katrin");
        addDataSet.add("Katharina");
        addDataSet.add("Liselotte");
    }
}

Dan file RecyclerViewAdapter menjadi seperti ini :

import android.support.design.widget.Snackbar;
import android.support.v7.widget.CardView;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.ArrayList;

/**
 * Created by Herdi_WORK on 15.09.16.
 */
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {

    private ArrayList<String> rvData;

    public RecyclerViewAdapter(ArrayList<String> inputData) {
        rvData = inputData;
    }

    public class ViewHolder extends RecyclerView.ViewHolder {

        // di tutorial ini kita hanya menggunakan data String untuk tiap item
        public TextView tvTitle;
        public TextView tvSubtitle;
        public CardView cvMain;

        public ViewHolder(View v) {
            super(v);
            tvTitle = (TextView) v.findViewById(R.id.tv_title);
            tvSubtitle = (TextView) v.findViewById(R.id.tv_subtitle);
            cvMain = (CardView) v.findViewById(R.id.cv_main);
        }
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        // membuat view baru
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.view_rv_item, parent, false);
        // mengeset ukuran view, margin, padding, dan parameter layout lainnya
        ViewHolder vh = new ViewHolder(v);
        return vh;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        // - mengambil elemen dari dataset (ArrayList) pada posisi tertentu
        // - mengeset isi view dengan elemen dari dataset tersebut
        final String name = rvData.get(position);
        holder.tvTitle.setText(rvData.get(position));

        // Set onclicklistener pada view tvTitle (TextView)
        holder.tvTitle.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                remove(name);
            }
        });

        holder.tvSubtitle.setText("Frau " + position);

        // Set onclicklistener pada view cvMain (CardView)
        holder.cvMain.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Clicked element "+name, Snackbar.LENGTH_LONG).show();
            }
        });
    }

    @Override
    public int getItemCount() {
        // menghitung ukuran dataset / jumlah data yang ditampilkan di RecyclerView
        return rvData.size();
    }

    public void add(int position, String item) {
        rvData.add(position, item);
        notifyItemInserted(position);
    }

    public void remove(String item) {
        int position = rvData.indexOf(item);
        rvData.remove(position);
        notifyItemRemoved(position);
    }
}

Jika sudah, bisa langsung jalankan aplikasinya.

Demo

Untuk demonya, kita bisa langsung saksikan video berikut supaya lebih jelas (hanya 30-an detik) 🙂

That’s all ! Semoga membantu. ? Dan jangan lupa untuk clone project nya sebagai Android Studio module di GitHub saya ya, dengan terlebih dahulu follow dan star project tersebut. ?Silahkan bertanya di bagian komentar jika ada yang kurang jelas.