Pada tutorial sebelumnya, saya sudah pernah membahas tentang cara membuat list view dengan gambar di Android. Mungkin secara fungsi sekilas hampir sama yaitu menampilkan sebuah list pada aplikasi kita, tapi apasih berbedaanya??
Sejak Google memperkenalkan Material Designnya, Recycler View termasuk pula didalamnya. Dan pada saat itu pula, Recycler View diperkenalkan untuk menggantikan List View yang sudah ada sebelumnya ada di Android Studio. Hal itu dilakukan karena Recycler View memiliki kelebihan fitur dibandingkan dengan List View, Apa sajakah kelebihan dari Recycler View ini, berikut merupakan kelebihan dari Recycler View :
Kelebihan Recycler View :
- Mendaur ulang view (cell) ketika di scroll keatas / kebawah - Dengan mengimplementasikan ViewHolder pada Recycler View Adapter, kita bisa membuat list secara efisien dengan tidak membuat view baru. Jika kita membuat view baru sebagai solusinya, maka setiap kita membuat view yang baru maka view yang kita scroll keatas list tersebut masih tersimpan. Oleh karena itu Recycler View memiliki fitur recycler yang berfungsi untuk menangani hal tersebut.
- Memisahkan list dari wadah penampungnya - Dengan Recycler View, kita dapat meletakkan list item secara mudah pada saat runtime di wadah penampung (container) berbeda (LinearLayout, GridLayout). Cukup mudah bukan?. Hal tersebut dapat dilakukan dengan LayoutManager.
Contoh :
mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);
mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
//atau
mRecyclerView.setLayoutManager(new GridLayoutManager(this, 2));- Memberi efek animasi pada list - Animasi dipisahkan dan didelegasikan pada ItemAnimator.
Kesimpulannya adalah dengan Recycler View memiliki kelebihan sehingga membuatnya lebih mudah untuk diatur. Dan secara tampilan Recycler View memiliki tampilan yang lebih fleksibel untuk menangani masalah "list data".
Persiapan Project
Seperti biasa sebelum lanjut ke tahap berikutnya pertama-tama buat project baru di Android Studio.
Buka file build.gradle dibawah folder app dan tambahkan dependency RecyclerView dan Support design yang nantinya akan dipakai pada saat pembuatan aplikasi.
Jika sudah maka selanjutnya tambahkan kode dibawah pada masing-masing file colors.xml, styles.xml
Persiapan Project
Seperti biasa sebelum lanjut ke tahap berikutnya pertama-tama buat project baru di Android Studio.
Buka file build.gradle dibawah folder app dan tambahkan dependency RecyclerView dan Support design yang nantinya akan dipakai pada saat pembuatan aplikasi.
// Support Design
implementation 'com.android.support:design:26.1.0'
// Recycler View
implementation 'com.android.support:recyclerview-v7:26.1.0'
Jika sudah maka selanjutnya tambahkan kode dibawah pada masing-masing file colors.xml, styles.xml
<resources>
<color name="colorPrimary">#fafafa</color>
<color name="colorPrimaryDark">#c7c7c7</color>
<color name="colorAccent">#ff4081</color>
</resources>
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
Selanjutnya bukan activity_main.xml yang terletak pada folder res. Disinilah Recycler View yang kita buat berada.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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="id.malvinr.recyclerview.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/Theme.AppCompat.Light">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
app:popupTheme="@style/Theme.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.design.widget.CoordinatorLayout>
Buatlah satu file lagi dengan nama task_item.xml, layout ini digunakan untuk menampilkan data yang nantinya akan kita masukkan ke dalam recycler view. Komponen tersebut terdiri atas 3 Text View yang masing-masing digunakan untuk menampilkan judul, nama, waktu, dan lokasi tugas tersebut yang akan kita lakukan nanti.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="100dp"
xmlns:tools="http://schemas.android.com/tools"
android:background="@android:color/white"
android:layout_margin="2dp">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="16dp">
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-medium"
android:textColor="#111"
android:textSize="22sp"
tools:text="Buy a Milk" />
<TextView
android:id="@+id/location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="Supermarket"
android:layout_below="@+id/title"
android:textColor="#535353"
android:textSize="16sp" />
</RelativeLayout>
<TextView
android:id="@+id/time"
android:layout_alignParentRight="true"
android:layout_marginRight="12dp"
android:layout_centerVertical="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="8dp"
tools:text="14:00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"/>
</RelativeLayout>
Setelah membuat tampilan (layout) untuk aplikasi kita, selanjutnya kita akan membuat logic java nya. Karena kita membutuhkan model untuk menampung data, maka buatlah file baru bernama Task.java dan tambahkan kode berikut.
package id.malvinr.recyclerview;
/**
* Created by Alvin on 26/11/2017.
*/
public class Task {
private String time;
private String title;
private String location;
public Task(String time, String title, String location) {
this.time = time;
this.title = title;
this.location = location;
}
public String getTime() {
return time;
}
public String getTitle() {
return title;
}
public String getLocation() {
return location;
}
}
Selanjutnya buat file baru bernama TaskAdapter.java, file tersebut memiliki fungsi yang sama jika kita sebelumnya sudah pernah menggunakan List View. Akan tetapi, ada beberapa perubahan pada jika dibandingkan dengan adapter versi list view, kurang lebih seperti berikut :
- onCreateViewHolder() : Digunakan untuk memanggil layout task_item.xml yang nantinya akan menjadi list item untuk recycler view kita.
- onBindViewHolder() : Digunakan untuk menampilkan data yang sudah disiapkan sebelumnya dan mencetaknya ke dalam komponen masing-masing. Pada kasus ini kita mencetaknya ke dalam 3 buah Text View.
- getItemCount() : Digunakan untuk menghitung total data (size) yang ada.
- TaskItemViewHolder : Recycler view menggunakan ViewHolder untuk menyimpan referensi dari view-view yang digunakan pada sebuah item pada Recyclerview. Viewholder adalah sebuah class static yang ada didalam adapter Recycler view yang digunakan untuk menyimpan referensi dari view yang digunakan pada sebuah item pada Recyclerview. Dengan ViewHolder, kita dapat menghemat waktu dibandingkan memakai findViewById() ketika ingin mengupdate list dengan data yang baru.
package id.malvinr.recyclerview;
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.List;
/**
* Created by Alvin on 26/11/2017.
*/
public class TaskAdapter extends RecyclerView.Adapter<TaskAdapter.TaskItemViewHolder> {
private List<task> mList;
public TaskAdapter(List<task> itemModelList) {
this.mList = itemModelList;
}
@Override
public TaskItemViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View mView = LayoutInflater.from(parent.getContext()).inflate(R.layout.task_item, parent, false);
return new TaskItemViewHolder(mView);
}
@Override
public void onBindViewHolder(TaskItemViewHolder holder, int position) {
Task itemModel = mList.get(position);
holder.onBind(itemModel);
}
@Override
public int getItemCount() {
return mList.size();
}
public class TaskItemViewHolder extends RecyclerView.ViewHolder {
TextView title;
TextView time;
TextView location;
public TaskItemViewHolder(View itemView) {
super(itemView);
title = (TextView) itemView.findViewById(R.id.title);
time = (TextView) itemView.findViewById(R.id.time);
location = (TextView) itemView.findViewById(R.id.location);
}
void onBind(Task itemModel) {
title.setText(itemModel.getTitle());
location.setText(itemModel.getLocation());
time.setText(itemModel.getTime());
}
}
}
Terakhir buka file MainActivity.java dan salinlah kode-kode berikut. Disinilah kita akan mengatur tampilan untuk Recyclerview dan mengisi data yang dibutuhkan untuk list kita.
- setLayoutManager() : Digunakan untuk mengatur tampilan layout pada Recyclerview.
package id.malvinr.recyclerview;
import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
List<Task> itemList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setupToolbar();
setTaskData();
setupRecyclerView();
}
private void setupToolbar() {
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
if (toolbar != null) {
getSupportActionBar().setDisplayShowTitleEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setTitle("All Tasks");
}
}
private void setupRecyclerView() {
RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
recyclerView.setLayoutManager(new LinearLayoutManager(this));
TaskAdapter adapter = new TaskAdapter(itemList);
recyclerView.setAdapter(adapter);
}
private void setTaskData() {
itemList = new ArrayList<>();
itemList.add(new Task("7:00", "Meet Emma", "Office"));
itemList.add(new Task("8:30", "Monthly Reports", "Meeting Room"));
itemList.add(new Task("10:00", "Update Blog", "Home"));
itemList.add(new Task("14:45", "Hang with Friends", "Food Court"));
itemList.add(new Task("18:10", "Doing Homework", "Home"));
itemList.add(new Task("19:00", "Call Andi", null));
itemList.add(new Task("19:40", "Get Discount groceries", "Mart"));
itemList.add(new Task("21:00", "Read a Book", null));
}
}
Terakhir kita tinggal menjalankan kode yang sudah kita buat tadi. Jika tidak ada error maka hasilnya akan seperti berikut :
Sekian dari saya semoga tutorial yang singkat ini bermanfaat dan jika ada yang ingin dipertanyakan jangan sungkan untuk menanyakannya di kolom komentar dibawah.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon