How to Create a Simple To-Do List App using Android Studio

by

Let’s walk through building a simple To-Do List App using Android Studio and Kotlin. This app will allow users to add, delete, and view their tasks.

Step-by-Step Instructions:

1. Set Up Your Android Project

  1. Open Android Studio.
  2. Select New Project.
  3. Choose Empty Activity and click Next.
  4. Name your project ToDoApp.
  5. Select Kotlin as the programming language.
  6. Click Finish to create the project.

2. Design the Layout (XML)

We will create a simple layout with an EditText (for entering tasks), a Button (for adding tasks), and a RecyclerView (for displaying tasks).

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!-- EditText for entering tasks -->
    <EditText
        android:id="@+id/editTextTask"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="Enter task"
        android:padding="16dp"
        android:layout_margin="16dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/buttonAddTask"/>

    <!-- Button for adding tasks -->
    <Button
        android:id="@+id/buttonAddTask"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Add"
        android:layout_marginEnd="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/editTextTask"
        android:layout_marginTop="16dp"/>

    <!-- RecyclerView for displaying tasks -->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="16dp"
        app:layout_constraintTop_toBottomOf="@+id/editTextTask"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

This layout contains:

  • An EditText to input tasks.
  • A Button to add tasks.
  • A RecyclerView to display the list of tasks.

3. Create the Task Data Model

In the MainActivity.kt, we will need a simple data class to represent the tasks.

Task.kt

package com.example.todoapp

data class Task(val name: String)

This class simply represents a task with a name.

4. Create the Adapter for RecyclerView

The RecyclerView Adapter will bind the tasks to the RecyclerView to display the task list.

TaskAdapter.kt

package com.example.todoapp

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.Button
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView

class TaskAdapter(private val tasks: MutableList<Task>, private val onDeleteClick: (Task) -> Unit) :
    RecyclerView.Adapter<TaskAdapter.TaskViewHolder>() {

    // ViewHolder to hold each task item view
    class TaskViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val textViewTaskName: TextView = itemView.findViewById(R.id.textViewTaskName)
        val buttonDeleteTask: Button = itemView.findViewById(R.id.buttonDeleteTask)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): TaskViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.item_task, parent, false)
        return TaskViewHolder(view)
    }

    override fun onBindViewHolder(holder: TaskViewHolder, position: Int) {
        val task = tasks[position]
        holder.textViewTaskName.text = task.name

        // Handle delete button click
        holder.buttonDeleteTask.setOnClickListener {
            onDeleteClick(task)
        }
    }

    override fun getItemCount(): Int {
        return tasks.size
    }
}

This adapter does the following:

  • Holds a list of tasks (tasks).
  • Binds each task to a TextView in the RecyclerView.
  • Handles the task deletion via a button click.

5. Create the Item Layout for RecyclerView

You will also need an XML file to define how each task will look in the RecyclerView.

item_task.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="8dp">

    <!-- TextView for displaying the task name -->
    <TextView
        android:id="@+id/textViewTaskName"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:textColor="@android:color/black"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/buttonDeleteTask"/>

    <!-- Button to delete the task -->
    <Button
        android:id="@+id/buttonDeleteTask"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Delete"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

6. Implement Main Activity Logic

Now, let’s add the main functionality of the app. We will allow the user to add tasks and delete tasks by interacting with the layout.

MainActivity.kt

package com.example.todoapp

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.recyclerview.widget.LinearLayoutManager
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    private val taskList = mutableListOf<Task>()
    private lateinit var taskAdapter: TaskAdapter

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

        // Set up RecyclerView
        taskAdapter = TaskAdapter(taskList) { task ->
            deleteTask(task) // Handle delete task
        }
        recyclerView.adapter = taskAdapter
        recyclerView.layoutManager = LinearLayoutManager(this)

        // Handle Add Task button click
        buttonAddTask.setOnClickListener {
            val taskName = editTextTask.text.toString()
            if (taskName.isNotEmpty()) {
                addTask(taskName)
                editTextTask.text.clear() // Clear input after adding
            }
        }
    }

    private fun addTask(taskName: String) {
        val task = Task(taskName)
        taskList.add(task)
        taskAdapter.notifyItemInserted(taskList.size - 1)
    }

    private fun deleteTask(task: Task) {
        val position = taskList.indexOf(task)
        taskList.removeAt(position)
        taskAdapter.notifyItemRemoved(position)
    }
}

7. Run the App

  1. Connect an Android device or use an emulator.
  2. Click the Run button in Android Studio.
  3. The app will launch, allowing you to:
  • Add tasks via the EditText and Add button.
  • Delete tasks via the Delete button next to each task in the RecyclerView.

Key Points of the App:

  • EditText for inputting tasks.
  • Button to add tasks to the list.
  • RecyclerView to display tasks.
  • Adapter to manage task items.
  • Delete functionality using a button for each task.

This simple app covers key Android concepts like layouts, RecyclerView, adapters, and handling user input, making it a great beginner project!

Leave a Comment