Last Updated on 5 months 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.
misi gan, kalo untuk membuat detail aktivitynya kalo semisal kita klik salah satu itemnya gimana? terima kasih
bisa baca ini gan http://www.twoh.co/2016/09/tutorial-menambahkan-onclicklistener-pada-recyclerview-di-android/
kak, kalo mau menambahkan webview ke dalam recyclerview gimana? mohon bantuannya ??
android:src=”@drawable/ic_add_white”…
iconnya mana gan ?? Hehe..
Cari sembarang di internet aja gan hehe