About Me

Agus Haryanto,
Android Trainner,
GoogleMaps (JavaScript) Trainer
JQuery and JQuery Mobile Trainer
Java, Java Script and PHP Trainer
Freelance Developer Android
Freelance Developer Blackberry
Freelance Developer Web (GIS Googlemaps)
Freelance Developer SMS Gateway

jika ingin contact saya bisa emali ke agus.superwriter@gmail.com

ym: agus_h23

Pin BB : 2AD38B33

Facebook : Agus Haryanto


Article

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

<?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)

Share

Leave a Reply

 

 

 

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spam protection by WP Captcha-Free