Cara Membuat Item Pada RecyclerView Bisa Swipe Di Aplikasi Android

Last updated May 21, 2020 7,719 0

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.

**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.

DOWNLOAD

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

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();
        }
    }
}

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.