Android Drag and Drop with Kotlin
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: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: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: