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
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
/>
</RelativeLayout>
3. Buat layout baru dengan nama item_row_view.xml lalu ketikan kode berikut
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/cardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
>
<RelativeLayout
android:id="@+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="8dp"
android:paddingTop="4dp"
android:paddingBottom="4dp"
android:paddingRight="8dp">
<TextView
android:id="@+id/txtTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
<TextView
android:id="@+id/txtNumber"
android:padding="8dp"
android:layout_width="35dp"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:gravity="center"
android:background="@drawable/ic_circle" />
</RelativeLayout>
</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
package net.agusharyanto.dragdroprecyclerview;
import android.graphics.Color;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.recyclerview.widget.RecyclerView;
import java.util.ArrayList;
import java.util.Collections;
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.MyViewHolder> implements ItemMoveCallback.ItemTouchHelperContract {
private ArrayList<String> data;
public class MyViewHolder extends RecyclerView.ViewHolder {
private TextView mTitle, mNumber;
View rowView;
public MyViewHolder(View itemView) {
super(itemView);
rowView = itemView;
mTitle = itemView.findViewById(R.id.txtTitle);
mNumber = itemView.findViewById(R.id.txtNumber);
}
}
public RecyclerViewAdapter(ArrayList<String> data) {
this.data = data;
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_row_view, parent, false);
return new MyViewHolder(itemView);
}
@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
holder.mTitle.setText(data.get(position));
holder.mNumber.setText(position+1+"");
}
@Override
public int getItemCount() {
return data.size();
}
@Override
public void onRowMoved(int fromPosition, int toPosition) {
if (fromPosition < toPosition) {
for (int i = fromPosition; i < toPosition; i++) {
Collections.swap(data, i, i + 1);
}
} else {
for (int i = fromPosition; i > toPosition; i--) {
Collections.swap(data, i, i - 1);
}
}
notifyItemMoved(fromPosition, toPosition);
}
@Override
public void onRowSelected(MyViewHolder myViewHolder) {
myViewHolder.rowView.setBackgroundColor(Color.CYAN);
}
@Override
public void onRowClear(MyViewHolder myViewHolder) {
myViewHolder.rowView.setBackgroundColor(Color.WHITE);
}
}
5. Buat Class baru lagi dengan nama ItemMoveCallback.java lalu ketikan kode berikut
package net.agusharyanto.dragdroprecyclerview;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.ItemTouchHelper;
import androidx.recyclerview.widget.RecyclerView;
public class ItemMoveCallback extends ItemTouchHelper.Callback {
private final ItemTouchHelperContract mAdapter;
public ItemMoveCallback(ItemTouchHelperContract adapter) {
mAdapter = adapter;
}
@Override
public boolean isLongPressDragEnabled() {
return true;
}
@Override
public boolean isItemViewSwipeEnabled() {
return false;
}
@Override
public void onSwiped(@NonNull RecyclerView.ViewHolder viewHolder, int i) {
}
@Override
public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN;
return makeMovementFlags(dragFlags, 0);
}
@Override
public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder,
RecyclerView.ViewHolder target) {
mAdapter.onRowMoved(viewHolder.getAdapterPosition(), target.getAdapterPosition());
return true;
}
@Override
public void onSelectedChanged(RecyclerView.ViewHolder viewHolder,
int actionState) {
if (actionState != ItemTouchHelper.ACTION_STATE_IDLE) {
if (viewHolder instanceof RecyclerViewAdapter.MyViewHolder) {
RecyclerViewAdapter.MyViewHolder myViewHolder=
(RecyclerViewAdapter.MyViewHolder) viewHolder;
mAdapter.onRowSelected(myViewHolder);
}
}
super.onSelectedChanged(viewHolder, actionState);
}
@Override
public void clearView(RecyclerView recyclerView,
RecyclerView.ViewHolder viewHolder) {
super.clearView(recyclerView, viewHolder);
if (viewHolder instanceof RecyclerViewAdapter.MyViewHolder) {
RecyclerViewAdapter.MyViewHolder myViewHolder=
(RecyclerViewAdapter.MyViewHolder) viewHolder;
mAdapter.onRowClear(myViewHolder);
}
}
public interface ItemTouchHelperContract {
void onRowMoved(int fromPosition, int toPosition);
void onRowSelected(RecyclerViewAdapter.MyViewHolder myViewHolder);
void onRowClear(RecyclerViewAdapter.MyViewHolder myViewHolder);
}
}
6. Lalu kita edit class MainActivity.java lalu ketikan kode berikut
package net.agusharyanto.dragdroprecyclerview;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.ItemTouchHelper;
import androidx.recyclerview.widget.RecyclerView;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
RecyclerView recyclerView;
RecyclerViewAdapter mAdapter;
ArrayList<String> lyricArrayList = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
recyclerView = findViewById(R.id.recyclerView);
populateRecyclerView();
}
private void populateRecyclerView() {
lyricArrayList.add("Mulia indah cantik berseri");
lyricArrayList.add("Kulit putih bersih merahnya pipimu");
lyricArrayList.add("Dia aisyah putri abu bakar");
lyricArrayList.add("Istri rasulullah");
lyricArrayList.add("Sungguh sweet nabi mencintamu");
lyricArrayList.add("Hingga nabi minum di bekas bibirmu");
lyricArrayList.add("Bila marah nabi kan memanja");
lyricArrayList.add("Mencubit hidungnya");
// Collections.shuffle(lyricArrayList);
mAdapter = new RecyclerViewAdapter(lyricArrayList);
ItemTouchHelper.Callback callback =
new ItemMoveCallback(mAdapter);
ItemTouchHelper touchHelper = new ItemTouchHelper(callback);
touchHelper.attachToRecyclerView(recyclerView);
recyclerView.setAdapter(mAdapter);
}
}
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)
Leave a Reply