Belanjar Android Drag and Drop Items RecyclerView dengan data Lirik Lagu Aisyah Istri Rasulullah

Sudah lama juga tidak nulis tentang android. Kali ini kita coba nulis lagi tentang android topik kita kali ii adalah tentang pembuatan RecyclerView yang bisa di tukar posisiny dnegan cara Drag and Drop. Supaya Menarik kita akan buat RecylerView isisnya lirik lagu yang lagi trending yaitu “Aisyah Istri Rasulullah”.

Sekarang mari kita coba buat
1. Buat project baru, pada Project Template pilih “Empty Activity” lalu klik Nextdengan nama “DragDropRecyclerView” lalu klik Finish.

2. Setelah inisialisasi project selesai. Pada Directory res/layout Edit activity_main.xml

01<?xml version="1.0" encoding="utf-8"?>
02<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
03    xmlns:app="http://schemas.android.com/apk/res-auto"
04    xmlns:tools="http://schemas.android.com/tools"
05    android:layout_width="match_parent"
06    android:layout_height="match_parent"
07    tools:context=".MainActivity">
08 
09    <androidx.recyclerview.widget.RecyclerView
10        android:id="@+id/recyclerView"
11        android:layout_width="match_parent"
12        android:layout_height="wrap_content"
13        android:orientation="vertical"
14        android:layout_alignParentTop="true"
15        android:layout_alignParentLeft="true"
16        android:layout_alignParentStart="true"
17        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
18        />
19     
20</RelativeLayout>

3. Buat layout baru dengan nama item_row_view.xml lalu ketikan kode berikut

01<?xml version="1.0" encoding="utf-8"?>
02<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
03    android:id="@+id/cardView"
04    android:layout_width="match_parent"
05    android:layout_height="wrap_content"
06    android:layout_margin="5dp"
07    >
08     
09    <RelativeLayout
10        android:id="@+id/relativeLayout"
11        android:layout_width="match_parent"
12        android:layout_height="match_parent"
13        android:paddingLeft="8dp"
14        android:paddingTop="4dp"
15        android:paddingBottom="4dp"
16        android:paddingRight="8dp">
17         
18        <TextView
19            android:id="@+id/txtTitle"
20            android:layout_width="wrap_content"
21            android:layout_height="wrap_content"
22            android:layout_centerVertical="true"
23            android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
24        <TextView
25            android:id="@+id/txtNumber"
26            android:padding="8dp"
27            android:layout_width="35dp"
28            android:layout_height="wrap_content"
29            android:layout_alignParentEnd="true"
30            android:layout_alignParentRight="true"
31            android:layout_centerVertical="true"
32            android:gravity="center"
33            android:background="@drawable/ic_circle" />
34 
35    </RelativeLayout>
36</androidx.cardview.widget.CardView>

Kalau ada error jangan khawatir itu karena ada ressource yang belum kita buat. Untuk membuatnya bisa klik kanan drectory res lalu pilih new–>Image Asset. Seperti gambar dibawah ini

4. Buat Class baru dengan namaRecyclerViewAdapter.java lalu ketikan kode berikut

01package net.agusharyanto.dragdroprecyclerview;
02 
03 
04import android.graphics.Color;
05import android.view.LayoutInflater;
06import android.view.View;
07import android.view.ViewGroup;
08import android.widget.TextView;
09 
10import androidx.recyclerview.widget.RecyclerView;
11 
12import java.util.ArrayList;
13import java.util.Collections;
14 
15public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.MyViewHolder> implements ItemMoveCallback.ItemTouchHelperContract {
16 
17    private ArrayList<String> data;
18 
19    public class MyViewHolder extends RecyclerView.ViewHolder {
20 
21        private TextView mTitle, mNumber;
22        View rowView;
23 
24        public MyViewHolder(View itemView) {
25            super(itemView);
26 
27            rowView = itemView;
28            mTitle = itemView.findViewById(R.id.txtTitle);
29            mNumber = itemView.findViewById(R.id.txtNumber);
30 
31        }
32    }
33 
34    public RecyclerViewAdapter(ArrayList<String> data) {
35        this.data = data;
36    }
37 
38    @Override
39    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
40        View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_row_view, parent, false);
41        return new MyViewHolder(itemView);
42    }
43 
44    @Override
45    public void onBindViewHolder(MyViewHolder holder, int position) {
46        holder.mTitle.setText(data.get(position));
47        holder.mNumber.setText(position+1+"");
48    }
49 
50 
51    @Override
52    public int getItemCount() {
53        return data.size();
54    }
55 
56 
57    @Override
58    public void onRowMoved(int fromPosition, int toPosition) {
59        if (fromPosition < toPosition) {
60            for (int i = fromPosition; i < toPosition; i++) {
61                Collections.swap(data, i, i + 1);
62            }
63        } else {
64            for (int i = fromPosition; i > toPosition; i--) {
65                Collections.swap(data, i, i - 1);
66            }
67        }
68        notifyItemMoved(fromPosition, toPosition);
69    }
70 
71    @Override
72    public void onRowSelected(MyViewHolder myViewHolder) {
73        myViewHolder.rowView.setBackgroundColor(Color.CYAN);
74 
75    }
76 
77    @Override
78    public void onRowClear(MyViewHolder myViewHolder) {
79        myViewHolder.rowView.setBackgroundColor(Color.WHITE);
80 
81    }
82}

5. Buat Class baru lagi dengan nama ItemMoveCallback.java lalu ketikan kode berikut

01package net.agusharyanto.dragdroprecyclerview;
02 
03import androidx.annotation.NonNull;
04import androidx.recyclerview.widget.ItemTouchHelper;
05import androidx.recyclerview.widget.RecyclerView;
06 
07public class ItemMoveCallback extends ItemTouchHelper.Callback {
08 
09    private final ItemTouchHelperContract mAdapter;
10 
11    public ItemMoveCallback(ItemTouchHelperContract adapter) {
12        mAdapter = adapter;
13    }
14 
15    @Override
16    public boolean isLongPressDragEnabled() {
17        return true;
18    }
19 
20    @Override
21    public boolean isItemViewSwipeEnabled() {
22        return false;
23    }
24 
25 
26 
27    @Override
28    public void onSwiped(@NonNull RecyclerView.ViewHolder viewHolder, int i) {
29 
30    }
31 
32    @Override
33    public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
34        int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN;
35        return makeMovementFlags(dragFlags, 0);
36    }
37 
38    @Override
39    public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder,
40                          RecyclerView.ViewHolder target) {
41        mAdapter.onRowMoved(viewHolder.getAdapterPosition(), target.getAdapterPosition());
42        return true;
43    }
44 
45    @Override
46    public void onSelectedChanged(RecyclerView.ViewHolder viewHolder,
47                                  int actionState) {
48 
49 
50        if (actionState != ItemTouchHelper.ACTION_STATE_IDLE) {
51            if (viewHolder instanceof RecyclerViewAdapter.MyViewHolder) {
52                RecyclerViewAdapter.MyViewHolder myViewHolder=
53                        (RecyclerViewAdapter.MyViewHolder) viewHolder;
54                mAdapter.onRowSelected(myViewHolder);
55            }
56 
57        }
58 
59        super.onSelectedChanged(viewHolder, actionState);
60    }
61    @Override
62    public void clearView(RecyclerView recyclerView,
63                          RecyclerView.ViewHolder viewHolder) {
64        super.clearView(recyclerView, viewHolder);
65 
66        if (viewHolder instanceof RecyclerViewAdapter.MyViewHolder) {
67            RecyclerViewAdapter.MyViewHolder myViewHolder=
68                    (RecyclerViewAdapter.MyViewHolder) viewHolder;
69            mAdapter.onRowClear(myViewHolder);
70        }
71    }
72 
73    public interface ItemTouchHelperContract {
74 
75        void onRowMoved(int fromPosition, int toPosition);
76        void onRowSelected(RecyclerViewAdapter.MyViewHolder myViewHolder);
77        void onRowClear(RecyclerViewAdapter.MyViewHolder myViewHolder);
78 
79    }
80}

6. Lalu kita edit class MainActivity.java lalu ketikan kode berikut

01package net.agusharyanto.dragdroprecyclerview;
02 
03import android.os.Bundle;
04 
05import androidx.appcompat.app.AppCompatActivity;
06import androidx.recyclerview.widget.ItemTouchHelper;
07import androidx.recyclerview.widget.RecyclerView;
08 
09import java.util.ArrayList;
10 
11public class MainActivity extends AppCompatActivity {
12    RecyclerView recyclerView;
13    RecyclerViewAdapter mAdapter;
14    ArrayList<String> lyricArrayList = new ArrayList<>();
15 
16    @Override
17    protected void onCreate(Bundle savedInstanceState) {
18        super.onCreate(savedInstanceState);
19        setContentView(R.layout.activity_main);
20 
21        recyclerView = findViewById(R.id.recyclerView);
22 
23        populateRecyclerView();
24    }
25 
26    private void populateRecyclerView() {
27        lyricArrayList.add("Mulia indah cantik berseri");
28         lyricArrayList.add("Kulit putih bersih merahnya pipimu");
29         lyricArrayList.add("Dia aisyah putri abu bakar");
30         lyricArrayList.add("Istri rasulullah");
31         lyricArrayList.add("Sungguh sweet nabi mencintamu");
32         lyricArrayList.add("Hingga nabi minum di bekas bibirmu");
33         lyricArrayList.add("Bila marah nabi kan memanja");
34         lyricArrayList.add("Mencubit hidungnya");
35 
36       // Collections.shuffle(lyricArrayList);
37        mAdapter = new RecyclerViewAdapter(lyricArrayList);
38 
39        ItemTouchHelper.Callback callback =
40                new ItemMoveCallback(mAdapter);
41        ItemTouchHelper touchHelper = new ItemTouchHelper(callback);
42        touchHelper.attachToRecyclerView(recyclerView);
43 
44        recyclerView.setAdapter(mAdapter);
45    }
46}

Perhatikan pengisian data ArrayList diatas itu saya isi dengan sebagian lirik lagu yang lagi Trending di Youtube yaitu lagu Aisyah Istri Rasulullah.
7. Jangan Lupa di bagian Gradle Script – Module:App pada bain dependencies tambahkan library untuk recyclerview dan cardview
implementation ‘androidx.recyclerview:recyclerview:1.1.0’
implementation ‘androidx.cardview:cardview:1.0.0’
8. Jalankan Aplikasi, jika sudah tidak ada error maka akan tampil seperti ini.

Tentunya dari sini kita akan punya ide untuk buat aplikasi android yang memanfaatkan fungsi Drag and Drop Items RecyclerView ini.

Semoga bermanfaat.
Salam Hangat Developer Android

Agus Haryanto

Referensi
https://www.journaldev.com/
Untuk Lirik Lagu Aisyah Putri Rasulullah
Judul Lagu: Aisyah Istri Rasulullah
Komposisi: Razif Bin Zainuddin (Razif)/ Projector Band
Adaptasi Lirik: Hasbi Bin Haji Muh. Ali (Mr. Bie)

Blog Belajar Pengembangan Aplikasi android, Blackberry, Jquery, Javascript dan Java

Categories

Belanjar Android Drag and Drop Items RecyclerView dengan data Lirik Lagu Aisyah Istri Rasulullah

Leave a Reply Cancel reply

Recent Posts

Privacy Policy

Meta