Kotlin Android App Development Course: Creating a To-Do List App

Hello! In this tutorial, we will learn how to create a To-Do List app using Kotlin for Android. This app will have a simple user interface, allowing users to add tasks, display the list, and delete completed tasks.

Table of Contents

1. Required Materials

To develop the app, you will need the following materials:

  • Android Studio: Install the latest version
  • Kotlin: Ensure the latest version is included
  • Emulator or connected Android device: An environment to test the app

2. Project Setup

Open Android Studio and create a new project. Select the “Empty Activity” template and enter the following settings:

  • Name: ToDoListApp
  • Package name: com.example.todolistapp
  • Save location: Choose your desired location
  • Language: Kotlin
  • Minimum API level: API 21 (Lollipop)

Once the project is created, it is important to understand the basic structure of Android Studio. Take a careful look and open the ‘MainActivity.kt’ file.

3. UI Design

Now, modify the XML layout file to design the user interface. Open the ‘res/layout/activity_main.xml’ file and enter the following code:


    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <EditText
            android:id="@+id/task_input"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter your task"
            android:layout_margin="16dp"/>

        <Button
            android:id="@+id/add_task_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Add"
            android:layout_below="@id/task_input"
            android:layout_marginStart="16dp"
            android:layout_marginTop="8dp"/>

        <ListView
            android:id="@+id/task_list"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_below="@id/add_task_button"
            android:layout_marginTop="8dp"
            android:layout_weight="1"/>

    </RelativeLayout>

The above code includes an EditText for users to enter their tasks, a Button to add tasks, and a ListView to display the task list.

4. Writing Kotlin Code

Now, open the MainActivity.kt file and add the following code to implement the functionality of the task list:


    package com.example.todolistapp

    import android.os.Bundle
    import android.view.View
    import android.widget.ArrayAdapter
    import android.widget.Button
    import android.widget.EditText
    import android.widget.ListView
    import androidx.appcompat.app.AppCompatActivity

    class MainActivity : AppCompatActivity() {
        private lateinit var taskInput: EditText
        private lateinit var addTaskButton: Button
        private lateinit var taskListView: ListView
        private val taskList = mutableListOf()

        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)

            taskInput = findViewById(R.id.task_input)
            addTaskButton = findViewById(R.id.add_task_button)
            taskListView = findViewById(R.id.task_list)

            val adapter = ArrayAdapter(this, android.R.layout.simple_list_item_1, taskList)
            taskListView.adapter = adapter

            addTaskButton.setOnClickListener {
                addTask()
            }

            taskListView.setOnItemClickListener { _, _, position, _ ->
                removeTask(position)
            }
        }

        private fun addTask() {
            val task = taskInput.text.toString()
            if (task.isNotEmpty()) {
                taskList.add(task)
                taskInput.text.clear()
                (taskListView.adapter as ArrayAdapter<*>).notifyDataSetChanged()
            }
        }

        private fun removeTask(position: Int) {
            taskList.removeAt(position)
            (taskListView.adapter as ArrayAdapter<*>).notifyDataSetChanged()
        }
    }

This code handles two functionalities: adding tasks and deleting them when clicked. It displays the content entered by the user in the ListView, allowing them to delete items by clicking on the list items.

5. App Testing

Before running the app, ensure there are no errors in the code. Click the “Run” button at the bottom left of Android Studio to run the app, or press Shift + F10 to execute. Make sure an emulator or a real device is connected.

Once the app is running, you will see a task input field, an add button, and a task list on the screen. You can enter the necessary tasks and click the ‘Add’ button to add them to the list. Clicking on an item in the list will delete it.

6. Conclusion

In this tutorial, we learned how to create a simple To-Do List app using Kotlin. We learned how to handle user input and interact with UI elements. By creating such a simple app, you can enhance your understanding of Android app development. Challenge yourself to expand functionality by adding complexity to the code and design!

Thank you!