Android Drag and Drop with Kotlin
Last Updated :
07 Aug, 2024
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:
Explanation of the above Program:
XML Layout:
- A TextView (draggableView) is set to be dragged.
- A LinearLayout (dropTarget) acts as the drop target.
Activity Setup:
- Long Click Listener: Sets up the draggableView to start a drag event when long-clicked.
- Drag Listener: Handles various drag events on the dropTarget (ACTION_DRAG_STARTED, ACTION_DRAG_ENTERED, ACTION_DRAG_LOCATION, ACTION_DRAG_EXITED, ACTION_DROP, ACTION_DRAG_ENDED).
Similar Reads
How to Use Drag-and-Drop in Android Apps?
You may utilize the Android drag/drop framework to enable your users to move data with a graphical drag and drop action. This can be from one View in your own program to another, or between your app and another when the multi-window mode is enabled. A drag event class, drag listeners, and auxiliary
7 min read
Android - Create BarChart with Kotlin
Bar Chart is a UI component that is seen in most FinTech applications. These bar charts are used to display vast amounts of data in an easily readable form. In this article, we will be building a simple Bar Chart within our Android application using Kotlin. A sample GIF is given below to get an idea
4 min read
Kotlin Flow in Android with Example
Kotlin Flow is a tool that helps developers work with data that changes over time like search results, live updates, or user input. It’s part of Kotlin’s coroutines, which are used for writing code that doesn’t block the app while waiting for something to finish, like a network call or a file to loa
8 min read
Android - Deep Linking with Kotlin
Deep Links are seen in most applications where users can use these links to redirect to any specific screen or activity within the application. We can also pass data using these links within our application. In this article, we will take a look at Implementing Deep Links in Android applications usin
5 min read
Calendar View App in Android with Kotlin
Calendar View is seen in most travel booking applications in which the user has to select the date of the journey. For the selection of the date, this view is used. In this article, we will take a look at How to implement Calendar View within our Android application using Kotlin. A sample video is g
3 min read
Drag and Drop using DragLinearLayout in Android with Example
In most of the To-do list apps, we need to create a view such that the user can prioritize his daily tasks according to his priority. For this feature to work he should be able to drag and drop view items. For adding this type of functionality inside our app we have to use DragLinearLayout inside ou
3 min read
How to Create a Workout Android App with Kotlin?
In this tutorial, we will explore how to build a workout app in Kotlin that allows users to track their exercises, includes a countdown timer for each exercise, and displays animated GIFs for a visually engaging workout experience. We'll leverage the power of the Glide library to seamlessly load and
4 min read
Dagger Hilt in Android with Example
Dependency Injection (DI) is a design pattern to decouple the conventional dependency relationship between objects. When it comes to DI in android Dagger always takes a lead. But it is very complex and requires a lot of boilerplate codes in order to set up the Dagger. So, to overcome this problem Hi
8 min read
Design Patterns in Android with Kotlin
Design patterns is basically a solution or blueprint for a problem that we get over and over again in programming, so they are just typical types of problems we can encounter as programmers, and these design patterns are just a good way to solve those problems, there is a lot of design pattern in an
5 min read
Android Mastery with Kotlin: Beginner to Advanced
Are you looking to build your first Android app, or perhaps you’re a seasoned developer seeking to enhance your skills with a modern language? Have you heard about Kotlin but aren’t sure why it’s become the preferred choice for Android development? With its clear syntax, powerful features, and seaml
5 min read