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
- Open Android Studio.
- Select New Project.
- Choose Empty Activity and click Next.
- Name your project ToDoApp.
- Select Kotlin as the programming language.
- 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
- Connect an Android device or use an emulator.
- Click the Run button in Android Studio.
- 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!