Android Drag Drop Views Menggunakan Linearlayout

Disini kita akan membahas Drag Drop Views / Widget yang ada di dalam sebuah Linearlayout, dengan menggunakan kelas kustom yang memperpanjang Linearlayout. Kode di dalam kelas kustom ini cukup panjang, namun saya sudah membuatnya menjadi sebuah library, sehingga Anda hanya perlu mengunduh library tersebut kedalam project Anda.

Namun bila Anda ingin membuatnya menjadi kelas Anda sendiri, silahkan klik link ini untuk melihat / menyalin nya. Kelas ini bukan murni kreasi saya, saya hanya menambah dan merubah / memperbaharui beberapa kode yang sudah usang. Berikut video dari tutorial project ini :

Baik, pertama mari kita persiapkan sebuah project dengan minimum SDK 21 (Lolipop). Pada contoh ini nama projectnya adalah Drag Drop dengan nama paket com.gwnbs.dragdrop. Kemudian untuk mengunduh library nya, buka build.gradle(Project) lalu tambahkan maven { url 'https://jitpack.io' } kedalam repositories allprojects :

allprojects {
    repositories {
        google()
        jcenter()
        maven { url 'https://jitpack.io' }
    }
}

Selanjutnya buka build.gradle(Module) dan tambahkan implementasi library berikut ke dalam dependencies kemudian sync project untuk mulai mengunduh library :

implementation 'com.github.daltray:DragLinearLayout:1.1.0'

Library ini mendukung baik orientasi vertical maupun horizontal. Dalam contoh ini kita akan menggunakan vertical. Views yang dapat di drag dan drop adalah views child yang berada satu tingkat didalam parent layout. Analoginya misalnya saya punya sepuluh anak, kesepuluh anak saya ini bisa saling drag drop, namun cucu-cucu saya (anak-anak dari anak-anak saya) tidak bisa di drag drop, mereka akan mengikut orang tuanya yang di drag drop.

Untuk memulai menggunakan library ini, pada activity_main.xml panggil dengan tag <com.gwnbs.library.GwnbsDragLinear , tentukan atribut-atribut dan tambahkan child-child view. Seperti contoh dibawah ini memiliki 6 child view dan 3 grand child view.

activity_main.xml :

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    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">

    <TextView
        android:id="@+id/textGuide"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:alpha="0.7"
        android:background="#F6F1F1"
        android:fontFamily="serif"
        android:gravity="center"
        android:padding="20dp"
        android:text="@string/teks_guide"
        android:textColor="@color/black"
        android:textSize="18sp"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- Parent Layout -->
    <com.gwnbs.library.GwnbsDragLinear
        android:id="@+id/dragDrop"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="10dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textGuide">

        <!-- Child view 1-->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:autoLink="web"
            android:background="@drawable/bg_margin"
            android:fontFamily="serif"
            android:padding="10dp"
            android:text="@string/blog_gwnbs"
            android:textColor="@color/black"
            android:textSize="20sp" />

        <!-- Child view 2-->
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:background="@drawable/bg_margin"
            android:contentDescription="@string/app_name"
            android:padding="10dp"
            android:src="@drawable/ic_android" />

        <!-- Child view 3-->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:background="@drawable/bg_margin"
            android:fontFamily="serif"
            android:padding="10dp"
            android:text="@string/bahasa_java"
            android:textColor="@color/black"
            android:textSize="20sp" />

        <!-- Child view 4-->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:background="@drawable/bg_margin"
            android:fontFamily="serif"
            android:padding="10dp"
            android:text="@string/subscribe"
            android:textColor="@color/black"
            android:textSize="20sp" />

        <!-- Child view 5-->
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:background="@drawable/bg_margin"
            android:contentDescription="@string/app_name"
            android:padding="10dp"
            android:src="@drawable/ic_java" />

        <!-- Child view 6-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center_vertical"
            android:background="@drawable/bg_margin"
            android:layout_margin="5dp"
            android:padding="10dp">

            <!-- GrandChild view 1-->
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:contentDescription="@string/app_name"
                android:src="@drawable/ic_android" />

            <!-- GrandChild view 2-->
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="10dp"
                android:contentDescription="@string/app_name"
                android:src="@drawable/ic_java" />

            <!-- GrandChild view 3-->
            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:fontFamily="serif"
                android:layout_marginStart="10dp"
                android:text="@string/android_java"
                android:textColor="@color/black"
                android:textSize="20sp" />

        </LinearLayout>

    </com.gwnbs.library.GwnbsDragLinear>

</androidx.constraintlayout.widget.ConstraintLayout>

Untuk kode di konteks MainActivity.java kita hanya perlu beberapa baris kode saja untuk menyetel view-view dapat di drag drop, karena memang sudah diimplementasikan di dalam kelas yang ada pada library.

Pertama dengan menginisialisasi variabel dan id dari kelas GwnbsDragLinear, kemudian menggunakan loop untuk menghitung jumlah child view, terakhir memanggil metode setViewDraggable.

MainActivity.java :

package com.gwnbs.dragdrop;

import android.os.Bundle;
import android.view.View;

import androidx.appcompat.app.AppCompatActivity;

import com.gwnbs.library.GwnbsDragLinear;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //Inisialisasi variabel dan id class GwnbsDragLinear
        GwnbsDragLinear dragDrop = findViewById(R.id.dragDrop);

        //Java loop untuk menghitung jumlah child view didalam GwnbsDragLinear
        for (int i = 0; i < dragDrop.getChildCount(); i++) {
            View child = dragDrop.getChildAt(i);
            //Menyetel views dapat diseret menggunakan setViewDraggable
            dragDrop.setViewDraggable(child, child);
        }
    }
}

Berikut isi dari bg_margin.xml drawable yang digunakan sebagai background untuk child-child view diatas :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <corners android:radius="5dp"/>
    <solid android:color="@color/white"/>
    <stroke android:color="@color/black"
        android:width="1dp"/>

</shape>

Nah jika Anda ingin memodifikasi, baik menambahkan kode / metode ataupun merubah kode, silahkan klik link yang sudah ditautkan diatas sebelumnya untuk menyalin kode. Pertama buat sebuah Java Class dengan nama GwnbsDragLinear (Anda dapat merubahnya nanti dengan cara Refactor > Rename setelah seluruh kode di pastekan), lalu pastekan seluruh kode yang Anda salin dari link tersebut.

Baik, sekian tutorial ini. Terimakasih atas waktu dan kunjungannya. Jika ada pertanyaan silahkan disampaikan di komentar.