This article explains how to develop an improved To-Do List app on the Android platform using Java. This tutorial will be detailed enough for everyone from beginners to intermediate users to follow along. We will create a basic To-Do List app and learn how to enhance its features to provide a better experience for users.
Table of Contents
- 1. Project Setup
- 2. Basic User Interface Design
- 3. Data Storage and Management
- 4. Implementing Add and Delete Functions
- 5. Implementing Task Completion Indication
- 6. Improving the UI of the App
- 7. App Deployment and Conclusion
1. Project Setup
Open Android Studio and create a new project. Select “Empty Activity” and set the project name to “ToDoListApp” and the package name to “com.example.todolist”.
Choose Java instead of Kotlin to create the project. The basic structure will be automatically generated in this configured project.
2. Basic User Interface Design
The user interface is primarily designed using XML, creating a layout as shown below. Open the ‘activity_main.xml’ file and add the code below.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<EditText
android:id="@+id/editTextTask"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enter your task here"/>
<Button
android:id="@+id/buttonAdd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add"/>
<ListView
android:id="@+id/listViewTasks"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
In the above code, EditText provides a text field for users to enter tasks, the Button adds tasks to the list, and ListView displays the added task list.
3. Data Storage and Management
To store the to-do list, we will use a data structure like List. The items to add to the list are defined by a model class called “Task”.
public class Task {
private String task;
private boolean isCompleted;
public Task(String task) {
this.task = task;
this.isCompleted = false;
}
public String getTask() {
return task;
}
public boolean isCompleted() {
return isCompleted;
}
public void completeTask() {
isCompleted = true;
}
}
Now, implement the logic to add the entered task to the list in MainActivity.java. We will use ListView and ArrayAdapter to display the list.
4. Implementing Add and Delete Functions
Open the MainActivity.java file and implement the function to add a task. Add the code below.
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ListView;
import androidx.appcompat.app.AppCompatActivity;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
private ArrayList<Task> taskList;
private ArrayAdapter<String> adapter;
private EditText editTextTask;
private ListView listViewTasks;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
editTextTask = findViewById(R.id.editTextTask);
Button buttonAdd = findViewById(R.id.buttonAdd);
listViewTasks = findViewById(R.id.listViewTasks);
taskList = new ArrayList<>();
adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, new ArrayList<>());
listViewTasks.setAdapter(adapter);
buttonAdd.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String taskInput = editTextTask.getText().toString();
if (!taskInput.isEmpty()) {
Task task = new Task(taskInput);
taskList.add(task);
adapter.add(task.getTask());
editTextTask.setText("");
}
}
});
listViewTasks.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
Task task = taskList.get(position);
if (task.isCompleted()) {
task.completeTask();
} else {
task.completeTask();
}
adapter.notifyDataSetChanged();
}
});
}
}
In the above code, the functionality to add a task to the list based on user input and toggle task completion status on list item clicks is implemented. This allows users to easily manage the status of their tasks.
5. Implementing Task Completion Indication
To improve the user interface when a user completes a task, we will add a method to change the background color of the item. We can override the getView method in ArrayAdapter to change the color of completed items.
import android.content.Context;
import android.graphics.Color;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;
import java.util.List;
public class TaskAdapter extends ArrayAdapter<Task> {
public TaskAdapter(Context context, List<Task> tasks) {
super(context, 0, tasks);
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
Task task = getItem(position);
if (convertView == null) {
convertView = LayoutInflater.from(getContext()).inflate(android.R.layout.simple_list_item_1, parent, false);
}
TextView textView = convertView.findViewById(android.R.id.text1);
textView.setText(task.getTask());
if (task.isCompleted()) {
textView.setTextColor(Color.GRAY);
} else {
textView.setTextColor(Color.BLACK);
}
return convertView;
}
}
You need to replace the adapter in MainActivity.java with TaskAdapter. Now users will see that the color of completed items changes to gray for easy identification.
6. Improving the UI of the App
To enhance user experience in the app, various UI elements can be added. For example, adding a prompt for users to input their tasks or displaying a confirmation message after a task is completed are potential improvements. Additionally, using RecyclerView can allow for efficient data management.
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerViewTasks"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
Using RecyclerView allows for efficient handling of more data items. Consider adding simple item click animations to enhance the user’s experience while using the app.
7. App Deployment and Conclusion
After completing app development, you can deploy it to the Google Play Store for users. Set the necessary permissions in the AndroidManifest.xml file and build the app to create the APK file.
After deployment, you can continuously improve the app based on user feedback and enhance the user experience by updating additional features.
Conclusion
Today, we looked at the process of developing an improved To-Do List app using Java and Android Studio. I hope what you learned will help you in actual app development. You can further develop the app with additional features and turn it into a useful tool for users. In the next tutorial, we will cover more advanced topics, so please look forward to it.