Open In App

Android Drag and Drop with Kotlin

Improve
Improve
Like Article
Like
Save
Share
Report

In most android applications where data is displayed in the form of a list format, there is a functionality with the help of which we can simply drag and drop any item from that list to any specific position within the list. To implement this type of drag and drop functionality we have to use a Drag Linear layout so that we can drag and drop items within our linear layout. In this article, we will be building a simple application for the demonstration of Drag Linear layout within our android application using Kotlin. A sample video is given below to get an idea about what we are going to do in this article.

Note: If you are looking to implement Drag Linear Layout in Android using Java. Check out the following article: Drag and Drop using Drag Linear Layout in Android using Java

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.

Step 2: Add dependency to build.gradle(Module:app)

Navigate to the Gradle Scripts > build.gradle(Module:app) and add the below dependency in the dependencies section. 

implementation ‘com.jmedeisis:draglinearlayout:1.1.0’

After adding the dependency simply sync your project to install the dependency. 

Step 3: Adding images to the drawable folder

Copy the images you want to add. Navigate to app > res > drawable folder > Right-click on it > and simply click on the paste to add it. 

Step 4: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.

XML




<?xml version="1.0" encoding="utf-8"?>
<com.jmedeisis.draglinearlayout.DragLinearLayout 
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
  
    <!--on below line we are creating a 
        simple card view for our item -->
    <androidx.cardview.widget.CardView
        android:id="@+id/idCardOne"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        android:padding="4dp"
        app:cardCornerRadius="5dp"
        app:cardElevation="8dp">
  
        <!--on below line we are creating a linear layout 
            for each item in horizontal format-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:padding="5dp">
  
            <!--inside linear layout we are
                 creating an image view-->
            <ImageView
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:layout_margin="5dp"
                android:src="@drawable/android" />
  
            <!--inside this linear layout we are 
                creating a simple text view-->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Android"
                android:textAlignment="center"
                android:textColor="@color/purple_200"
                android:textSize="20sp"
                android:textStyle="bold" />
  
        </LinearLayout>
  
    </androidx.cardview.widget.CardView>
  
    <!--on below line we are creating 
        a simple card view for our item -->
    <androidx.cardview.widget.CardView
        android:id="@+id/idCardTwo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        android:padding="4dp"
        app:cardCornerRadius="5dp"
        app:cardElevation="8dp">
  
        <!--on below line we are creating a linear layout 
            for each item in horizontal format-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:padding="5dp">
  
            <!--inside linear layout we are 
                creating an image view-->
            <ImageView
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:layout_margin="5dp"
                android:src="@drawable/c" />
  
            <!--inside this linear layout we are 
                creating a simple text view-->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="C++"
                android:textAlignment="center"
                android:textColor="@color/purple_200"
                android:textSize="20sp"
                android:textStyle="bold" />
  
        </LinearLayout>
  
    </androidx.cardview.widget.CardView>
  
    <!--on below line we are creating a 
        simple card view for our item -->
    <androidx.cardview.widget.CardView
        android:id="@+id/idCardThree"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        android:padding="4dp"
        app:cardCornerRadius="5dp"
        app:cardElevation="8dp">
  
        <!--on below line we are creating a linear layout 
            for each item in horizontal format-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:padding="5dp">
  
            <!--inside linear layout we are 
                creating an image view-->
            <ImageView
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:layout_margin="5dp"
                android:src="@drawable/java" />
  
            <!--inside this linear layout we are
                 creating a simple text view-->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Java"
                android:textAlignment="center"
                android:textColor="@color/purple_200"
                android:textSize="20sp"
                android:textStyle="bold" />
            
        </LinearLayout>
  
    </androidx.cardview.widget.CardView>
  
    <!--on below line we are creating
         a simple card view for our item -->
    <androidx.cardview.widget.CardView
        android:id="@+id/idCardFour"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        android:padding="4dp"
        app:cardCornerRadius="5dp"
        app:cardElevation="8dp">
  
        <!--on below line we are creating a linear layout 
            for each item in horizontal format-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:padding="5dp">
  
            <!--inside linear layout we 
                are creating an image view-->
            <ImageView
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:layout_margin="5dp"
                android:src="@drawable/js" />
  
            <!--inside this linear layout we 
                are creating a simple text view-->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="JavaScript"
                android:textAlignment="center"
                android:textColor="@color/purple_200"
                android:textSize="20sp"
                android:textStyle="bold" />
  
        </LinearLayout>
  
    </androidx.cardview.widget.CardView>
  
</com.jmedeisis.draglinearlayout.DragLinearLayout>


Step 5: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

Kotlin




package com.gtappdevelopers.kotlingfgproject
  
import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity
import com.jmedeisis.draglinearlayout.DragLinearLayout
  
class MainActivity : AppCompatActivity() {
  
    // on below line we are creating
    // a variable for our drag linear layout
    lateinit var dragLinearLayout: DragLinearLayout
  
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // on below line we are initializing 
        // our drag linear layout with its id. 
        dragLinearLayout = findViewById(R.id.container)
  
        // on below line we are running a for loop.
        for (i in 0 until dragLinearLayout.getChildCount()) {
  
            // below is the child inside dragger layout
            val child: View = dragLinearLayout.getChildAt(i)
  
            // below line will set all children draggable
            // except the header layout.
            // the child is its own drag handle.
            dragLinearLayout.setViewDraggable(child, child)
        }
  
    }
}


Now run your application to see the output of it. 

Output: 



Last Updated : 12 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads