Cara Membuat Item Pada RecyclerView Bisa Swipe Di Aplikasi Android
Halo android developer, bagaimana kabar kalian hari ini? Saya harap kalian baik-baik saja. Sebelumnya saya sudah pernah membagikan tutorial Cara Membuat Custom RecyclerView Untuk Menampilkan Gambar dan Teks. Pada tutorial tersebut kalian hanya belajar cara membuat aplikasi android untuk menampilkan daftar yang memiliki item gambar dan teks. Untuk itu, pada kesempatan kali ini saya akan membagikan tutorial cara membuat item recyclerview bisa di swipe ke kiri dan ke kanan untuk di hapus pada project android studio.
RecyclerView adalah widget yang sangat berguna untuk menampilkan data berbentuk daftar baik itu secara linear dan grid. Tidak hanya itu saja, dengan widget ini kita bisa membuat data atau item yang ditampilkan bisa kita tambahkan aksi seperti menghapusnya dengan cara menggeser item tersebut ke arah kanan atau ke kiri. Aplikasi yang menggunakan fungsi ini ada pada aplikasi Gmail. Ketika user ingin menghapus pesan, user cukup menggeser pesan tersebut ke kiri atau ke kanan.
Untuk itu, pada tutorial ini kalian akan belajar cara membuat aplikasi android untuk menampilkan item pada RecyclerView yang bisa di swipe ke kiri atau ke kanan untuk menghapus item tersebut pada project android studio dengan cara yang mudah dan sederhana.
- Advertisement -
Tutorial Cara Membuat RecyclerView Swipe di Android Studio
Buatlah project android studio baru dengan informasi sebagai berikut:
| Application Name | : | Swipe App |
| Package Name | : | com.androidrion.swipeapp |
| Languge | : | Java |
| Minimum SDK | : | API 15: Android 4.0.3 (IceCreamSandwich) |
Daftar file xml layout yang digunakan dalam project ini.
- activity_main.xml
- list_item.xml
Daftar file java yang digunakan dalam project ini.
- AdapterRecyclerView.java
- ItemModel.java
- MainActivity.java
- MyItem.java
- RecyclerItemTouchHelper.java
Dibawah ini adalah langkah-langkah dalam pembuatan aplikasi Swipe App.
Library Material Design
Untuk menggunakan komponen ini dalam project android studio, kalian harus menambahkan terlebih dahulu library material design. Tambahkan kode dibawah ini pada project android studio kalian dalam file build.gradle (Module: app)
Gradle Scripts/build.gradle (Module: app)
implementation 'com.google.android.material:material:1.0.0'Ikuti tutorial di bawah ini untuk menambahkan library material design kedalam projek android studio.
CARA MENAMBAHKAN LIBRARY KE DALAM PROJEK ANDROID STUDIO
Download Asset
Pada tutorial ini saya menggunakan ikon sosial media sebagai item yang ditampilkan pada RecyclerView. Silahkan download asset pada link di bawah ini.
Letakkan file download tersebut ke dalam folder drawable dalam project android studio kalian.
Drawable File
Dalam tutorial ini, saya menggunakan beberapa ikon vector drawable material design. Untuk itu, tambahkan ikon dibawah ini.
Ikuti tutorial dibawah ini untuk menambahkan ikon ke dalam project android studio.
CARA MENAMBAHKAN IKON KE DALAM PROJECT ANDROID STUDIO
XML Layout File
Buatlah file xml layout baru dengan cara klik kanan pada folder layout lalu pilih New>Layout resource file. Simpan file baru 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"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:id="@+id/layout_hapus"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@android:color/holo_red_dark">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:src="@drawable/ic_delete"
android:tint="@android:color/white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:text="REMOVE"
android:textColor="@android:color/white" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/layout_tampil"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@android:color/white">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:gravity="center"
android:orientation="horizontal"
android:paddingStart="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp">
<ImageView
android:id="@+id/imageList"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/facebook" />
<TextView
android:id="@+id/text_headline"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_weight="1"
android:text="Facebook"
android:textColor="@android:color/black"
android:textAppearance="@style/TextAppearance.AppCompat.Medium" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_swap_horiz" />
</LinearLayout>
</RelativeLayout>
</FrameLayout>Buka file activity_main.xml dalam folder layout. Tambahkan widget RecyclerView di dalam CoordinatorLayout. Berikut ini adalah kode lengkap untuk file activity_main.xml
app/res/layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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"
android:id="@+id/coordinatorLayout"
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"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>Java Class File
Buatlah file java baru dengan cara klik kanan pada folder java, lalu pilih New>Java Class. Simpan file java baru tersebut dengan nama MyItem. Berikut ini adalah kode lengkap untuk file MyItem.java
app/java/com.androidrion.swipeapp/MyItem.java
package com.androidrion.swipeapp;
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"
};
}Buat file java baru lagi dengan nama ItemModel. Berikut ini adalah kode lengkap untuk file ItemModel.java
app/java/com.androidrion.swipeapp/ItemModel.java
package com.androidrion.swipeapp;
public class ItemModel {
private String name;
private int image;
public ItemModel(String name, int image) {
this.name = name;
this.image=image;
}
public String getName() {
return name;
}
public int getImage() {
return image;
}
}Masih buat file java baru lagi. Kali ini dengan nama RecyclerItemTouchHelper. Dibawah ini adalah kode lengkap untuk file RecyclerItemTouchHelper.java
app/java/com.androidrion.swipeapp/RecyclerItemTouchHelper.java
package com.androidrion.swipeapp;
import android.graphics.Canvas;
import android.view.View;
import androidx.recyclerview.widget.ItemTouchHelper;
import androidx.recyclerview.widget.RecyclerView;
public class RecyclerItemTouchHelper extends ItemTouchHelper.SimpleCallback {
private RecyclerItemTouchHelperListener listener;
RecyclerItemTouchHelper(int dragDirs, int swipeDirs, RecyclerItemTouchHelperListener listener) {
super(dragDirs, swipeDirs);
this.listener = listener;
}
@Override
public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
return true;
}
@Override
public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) {
if (viewHolder != null) {
final View foregroundView = ((AdapterRecyclerView.ViewHolder) viewHolder).layoutTampil;
getDefaultUIUtil().onSelected(foregroundView);
}
}
@Override
public void onChildDrawOver(Canvas c, RecyclerView recyclerView,
RecyclerView.ViewHolder viewHolder, float dX, float dY,
int actionState, boolean isCurrentlyActive) {
final View foregroundView = ((AdapterRecyclerView.ViewHolder) viewHolder).layoutTampil;
getDefaultUIUtil().onDrawOver(c, recyclerView, foregroundView, dX, dY,
actionState, isCurrentlyActive);
}
@Override
public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
final View foregroundView = ((AdapterRecyclerView.ViewHolder) viewHolder).layoutTampil;
getDefaultUIUtil().clearView(foregroundView);
}
@Override
public void onChildDraw(Canvas c, RecyclerView recyclerView,
RecyclerView.ViewHolder viewHolder, float dX, float dY,
int actionState, boolean isCurrentlyActive) {
final View foregroundView = ((AdapterRecyclerView.ViewHolder) viewHolder).layoutTampil;
getDefaultUIUtil().onDraw(c, recyclerView, foregroundView, dX, dY,
actionState, isCurrentlyActive);
}
@Override
public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
listener.onSwiped(viewHolder, direction, viewHolder.getAdapterPosition());
}
@Override
public int convertToAbsoluteDirection(int flags, int layoutDirection) {
return super.convertToAbsoluteDirection(flags, layoutDirection);
}
public interface RecyclerItemTouchHelperListener {
void onSwiped(RecyclerView.ViewHolder viewHolder, int direction, int position);
}
}Buat file java class baru lagi dengan nama AdapterRecyclerView. Dibawah ini adalah kode lengkap untuk file AdapterRecyclerView.java
app/java/com.androidrion.swipeapp/AdapterRecyclerView.java
package com.androidrion.swipeapp;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;
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;
ImageView imageIcon;
RelativeLayout layoutHapus, layoutTampil;
ViewHolder(View v) {
super(v);
textHead = v.findViewById(R.id.text_headline);
imageIcon = v.findViewById(R.id.imageList);
layoutHapus = v.findViewById(R.id.layout_hapus);
layoutTampil = v.findViewById(R.id.layout_tampil);
}
}
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);
return new ViewHolder(view);
}
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
TextView textHead = holder.textHead;
ImageView imageIcon = holder.imageIcon;
textHead.setText(dataItem.get(position).getName());
imageIcon.setImageResource(dataItem.get(position).getImage());
}
@Override
public int getItemCount() {
return dataItem.size();
}
void removeItem(int position) {
dataItem.remove(position);
notifyItemRemoved(position);
}
void restoreItem(ItemModel item, int position) {
dataItem.add(position, item);
notifyItemInserted(position);
}
}Setelah semuanya telah dibuat, sekarang buka file MainActivity dalam folder java. Dibawah ini adalah kode lengkap untuk file MainActivity.java
app/java/com.androidrion.swipeapp/MainActivity.java
[sociallocker id=”1410″]
package com.androidrion.swipeapp;
import androidx.appcompat.app.AppCompatActivity;
import androidx.coordinatorlayout.widget.CoordinatorLayout;
import androidx.recyclerview.widget.DividerItemDecoration;
import androidx.recyclerview.widget.ItemTouchHelper;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import com.google.android.material.snackbar.Snackbar;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity implements RecyclerItemTouchHelper.RecyclerItemTouchHelperListener {
RecyclerView recyclerView;
AdapterRecyclerView recyclerViewAdapter;
RecyclerView.LayoutManager recylerViewLayoutManager;
ArrayList<ItemModel> data;
CoordinatorLayout coordinatorLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
coordinatorLayout = findViewById(R.id.coordinatorLayout);
recyclerView = findViewById(R.id.recyclerView);
recyclerView.setHasFixedSize(true);
recylerViewLayoutManager = new LinearLayoutManager(this);
recyclerView.setLayoutManager(recylerViewLayoutManager);
recyclerView.addItemDecoration(new DividerItemDecoration(this, LinearLayoutManager.VERTICAL));
data = new ArrayList<>();
for (int i = 0; i < MyItem.Headline.length; i++) {
data.add(new ItemModel(
MyItem.Headline[i], MyItem.iconList[i]
));
}
recyclerViewAdapter = new AdapterRecyclerView(data);
recyclerView.setAdapter(recyclerViewAdapter);
ItemTouchHelper.SimpleCallback itemTouchHelperCallback = new RecyclerItemTouchHelper(
0, ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT, this);
new ItemTouchHelper(itemTouchHelperCallback).attachToRecyclerView(recyclerView);
}
@Override
public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction, int position) {
if (viewHolder instanceof AdapterRecyclerView.ViewHolder) {
String name = data.get(viewHolder.getAdapterPosition()).getName();
final ItemModel deletedItem = data.get(viewHolder.getAdapterPosition());
final int deletedIndex = viewHolder.getAdapterPosition();
recyclerViewAdapter.removeItem(viewHolder.getAdapterPosition());
Snackbar snackbar = Snackbar
.make(coordinatorLayout, name + " removed from list!", Snackbar.LENGTH_LONG);
snackbar.setAction("UNDO", new View.OnClickListener() {
@Override
public void onClick(View view) {
recyclerViewAdapter.restoreItem(deletedItem, deletedIndex);
}
});
snackbar.getView().setBackgroundColor(Color.BLACK);
snackbar.setActionTextColor(Color.RED);
snackbar.show();
}
}
}[/sociallocker]
Run ‘app’
Jalankan project android studio kalian. Apabila kode diatas tidak terjadi error, maka aplikasi akan terlihat seperti pada video di bawah ini.
AKHIR KATA
Itulah tadi tutorial yang lumayan sedikit rumit tentang cara membuat item recyclerview bisa di swipe pada aplikasi android studio. 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.
Download Project
Untuk download project pada tutorial ini, silahkan klik tombol dibawah ini.
[sociallocker id=”1406″]
[/sociallocker]
- Advertisement -