How to Build a Todo List App with Kotlin and Android Studio

Posted on by Panther

In this tutorial, we will learn how to build a Todo List app using Kotlin and Android Studio. We will create a simple app that allows users to create and manage their todo list.

Prerequisites

Before we begin, make sure you have the following installed on your system:

  • Android Studio (version 4.0 or above)
  • Kotlin plugin for Android Studio

Step 1: Create a New Project

Let’s start by creating a new project in Android Studio:

  1. Open Android Studio and click on “Start a new Android Studio project” from the welcome screen.
  2. Choose “Empty Activity” and click “Next”.
  3. Enter the project name as “TodoListApp” and choose a package name for your app. Also, make sure the language is set to “Kotlin”.
  4. Choose the minimum API level that you want to support and click “Finish”.

Step 2: Design the User Interface

Next, let’s design the user interface for our app:

  1. Open the activity_main.xml file located in the res/layout directory.
  2. Replace the default contents of the file with the following XML code:
<LinearLayout 
    xmlns_android="http://schemas.android.com/apk/res/android"
    xmlns_tools="http://schemas.android.com/tools"
    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_orientation="vertical"
    android_padding="16dp"
    tools_context=".MainActivity">

    <EditText
        android_id="@+id/todoEditText"
        android_layout_width="match_parent"
        android_layout_height="wrap_content"
        android_hint="Enter a todo item" />

    <Button
        android_id="@+id/addButton"
        android_layout_width="wrap_content"
        android_layout_height="wrap_content"
        android_text="Add" />

    <ListView
        android_id="@+id/todosListView"
        android_layout_width="match_parent"
        android_layout_height="0dp"
        android_layout_weight="1" />

</LinearLayout>

This layout consists of an EditText view for entering a new todo item, a Button for adding the item, and a ListView to display the list of todo items.

Step 3: Create the Todo Item Model

Now, let’s create a data model for our todo items.

  1. Right-click on the package name in the Project panel.
  2. Select “New” -> “Kotlin Class” to create a new Kotlin class.
  3. Enter “TodoItem” as the name and click “OK”.
  4. Replace the contents of the newly created TodoItem.kt file with the following code:
data class TodoItem(val name: String, val completed: Boolean)

This data class represents a todo item with a name and a completed flag.

Step 4: Implement the Adapter

The next step is to implement an adapter class that will be used to populate the ListView with the todo items.

  1. Right-click on the package name in the Project panel.
  2. Select “New” -> “Kotlin Class” to create a new Kotlin class.
  3. Enter “TodoListAdapter” as the name and click “OK”.
  4. Replace the contents of the newly created TodoListAdapter.kt file with the following code:
import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.BaseAdapter
import kotlinx.android.synthetic.main.todo_item.view.*

class TodoListAdapter(private val context: Context, private val todoItems: List<TodoItem>) : BaseAdapter() {

    override fun getCount() = todoItems.size

    override fun getItem(position: Int) = todoItems[position]

    override fun getItemId(position: Int) = position.toLong()

    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
        val view = convertView ?: LayoutInflater.from(context).inflate(R.layout.todo_item, parent, false)

        val todoItem = todoItems[position]

        view.todoNameTextView.text = todoItem.name

        return view
    }
}

This adapter class extends the BaseAdapter class and overrides its methods to provide the required functionality. It takes a list of todo items as input and populates the ListView with them.

Step 5: Implement the MainActivity

Now, let’s implement the MainActivity class, which will be the main entry point of our app.

  1. Open the MainActivity.kt file located in the java directory.
  2. Replace the default contents of the file with the following code:
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    private val todoItems = mutableListOf<TodoItem>()
    private lateinit var todoListAdapter: TodoListAdapter

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

        todoListAdapter = TodoListAdapter(this, todoItems)
        todosListView.adapter = todoListAdapter

        addButton.setOnClickListener {
            val todoName = todoEditText.text.toString().trim()

            if (todoName.isNotEmpty()) {
                val todoItem = TodoItem(todoName, false)
                todoItems.add(todoItem)
                todoListAdapter.notifyDataSetChanged()
                todoEditText.text.clear()
            }
        }
    }
}

This code sets the TodoListAdapter as the adapter for the ListView and binds the addButton click event to add a new todo item to the list.

Step 6: Run the App

Finally, let’s run the app and test our todo list functionality.

  1. Connect an Android device to your computer or start an emulator.
  2. Click on the “Run” button in the Android Studio toolbar.
  3. Select the target device and click “OK”.
  4. After the app is installed, it will launch on your device.

You should now see the app running on your device. You can enter a new todo item in the EditText and click the “Add” button to add it to the list. The list will be updated with the new item, and you can scroll to view all the items.

Congratulations! You have successfully built a Todo List app with Kotlin and Android Studio.

Conclusion

In this tutorial, we learned how to build a Todo List app using Kotlin and Android Studio. We created a simple app that allows users to create and manage their todo list. We covered topics such as designing the user interface, creating the data model, implementing the adapter, and writing the main activity code.

You can further enhance this app by adding features like editing and deleting todo items, marking items as completed, and persisting the todo list data using a local database.

Related Post