{"id":87541,"date":"2023-05-15T10:11:51","date_gmt":"2023-05-15T04:41:51","guid":{"rendered":"https:\/\/techvidvan.com\/tutorials\/?p=87541"},"modified":"2023-05-15T10:11:51","modified_gmt":"2023-05-15T04:41:51","slug":"android-to-do-list-app","status":"publish","type":"post","link":"https:\/\/techvidvan.com\/tutorials\/android-to-do-list-app\/","title":{"rendered":"Android Kotlin Project – To Do List App"},"content":{"rendered":"

Hey there Android enthusiasts, today we are going to see and learn to implement an Android Project that is a To-do List App in android studio. We\u2019ll understand the complete project development in this article.<\/p>\n

The Todo List App will come in handy for keeping track of the tasks we want to complete in the future. With the assistance of this application, you can add new tasks you need to complete and choose whether to check them off after they’re finished. Users using to-do list apps can be more productive, experience less worry and stress, and feel a sense of success when they finish their tasks.<\/p>\n

About Android To Do List App<\/h3>\n

This is an Android project for those just learning the fundamentals of developing Android applications. This Android app’s user interface has a floating button in the bottom right corner of the home page that allows users to add new tasks.<\/p>\n

The home screen will display all the tasks entered by the user.<\/p>\n

We will use Android Studio and the programming language Kotlin to develop this Android application. Let’s look over the list of features that the user interface will include:<\/p>\n

1. The user interface will have a floating \u2018+\u2019 button at the right bottom corner of the home screen.
\n2. A bottom screen fragment will come up when the \u2018+\u2019 button is clicked which contains two text fields.
\n3. In the two text fields, the task name and description can be added by the user.
\n4. The \u2018Save\u2019 button at the bottom of the sheet fragment will save the newly entered task details onto the ROOM database and display it on the home screen.
\nAll of the tasks that the user has entered will be listed on the home screen, along with a checkbox that can be used to mark a task as complete.<\/p>\n

Prerequisites for To Do List App using Android<\/h3>\n

To develop this Android application the requirements and prerequisites are as follows:<\/p>\n

1. Kotlin:<\/strong> You need first be familiar with Kotlin programming. Given that we will write the app code in the programming language Kotlin, it is necessary.<\/p>\n

2. XML:<\/strong> Another crucial component of our Android application is XML. It will be applied to the development of the application’s user interface.<\/p>\n

3. Android Studio:<\/strong> The core of our application is Android Studio because that is how we will develop it. Also included with Android Studio is an Android virtual device that can be used to test the functionality of applications.<\/p>\n

4. ROOM DAOs:<\/strong> These refer to the queries that will be required to insert\/write the data into the database. Basic database management knowledge is important.<\/p>\n

Download Android To Do List App Project<\/h3>\n

Please download the source code of Android To Do List App Project from the following link: Android To Do List App Project Code<\/strong><\/a><\/p>\n

Steps to Create To Do List Project using Android<\/h3>\n

Following are the steps for developing the Android To Do List Project:<\/p>\n

Let’s begin by developing the to-do list app in Android Studio. For a better understanding of how the app works, step-by-step instructions have been provided for each and every file in this tutorial.<\/p>\n

You must complete a set of steps in order to create this Android todo-list application.<\/p>\n

1. Extract all the files from the downloaded zip file to the location of your choice.
\n2. Open Android Studio.
\n3. Click on File then Open.
\n4. Find and select the folder you extracted earlier and click on OK.<\/p>\n

You have successfully opened the todo-list app\u2019s source code in android studio.<\/p>\n

\"android<\/a><\/p>\n

Let’s go through each file in this project one at a time as we comprehend how the application works.<\/p>\n

1. The \u201cactivity_main\u201d is a XML file which is responsible for creating the text fields and buttons included in the user interface.<\/p>\n

Code:<\/strong><\/p>\n

<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<RelativeLayout\n    xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    tools:context=\".MainActivity\">\n\n    <androidx.recyclerview.widget.RecyclerView\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"match_parent\"\n        android:id=\"@+id\/todoListRecyclerView\"\n        android:backgroundTint=\"@color\/design_default_color_background\"\n        \/>\n\n    <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"wrap_content\"\n        android:text=\"Add Task\"\n        android:id=\"@+id\/newTaskButton\"\n        android:backgroundTint=\"?attr\/colorPrimary\"\n        android:textColor=\"?colorOnPrimary\"\n        android:layout_alignParentBottom=\"true\"\n        android:layout_alignParentEnd=\"true\"\n        android:padding=\"5dp\"\n        android:layout_margin=\"20dp\"\n        app:iconTint=\"?colorOnPrimary\"\n        app:icon=\"@drawable\/ic_baseline_add_24\"\n        \/>\n\n\n<\/RelativeLayout><\/pre>\n
\"activity<\/a><\/p>\n
2. The \u201cfragment_new_task_sheet\u201d is a XML file which is responsible for creating the edit text views for the user to enter new task\u2019s name and description along with the save button. This xml file will appear when the user click on the \u2018Add Task\u2019 in the main activity.<\/p>\n
Code:<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<LinearLayout\n    xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"wrap_content\"\n    tools:context=\".NewTaskSheet\"\n    android:orientation=\"vertical\">\n\n    <TextView\n        android:id=\"@+id\/taskTitle\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        android:text=\"New Task\"\n        android:textSize=\"30sp\"\n        android:layout_marginTop=\"20dp\"\n        android:layout_marginStart=\"20dp\"\n        style=\"@style\/TextAppearance.AppCompat.Title\"\/>\n\n\n    <com.google.android.material.textfield.TextInputLayout\n        style=\"@style\/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        android:layout_marginVertical=\"10dp\"\n        android:layout_marginHorizontal=\"20dp\">\n\n        <com.google.android.material.textfield.TextInputEditText\n            android:layout_width=\"match_parent\"\n            android:layout_height=\"match_parent\"\n            android:id=\"@+id\/name\"\n            android:hint=\"Name\"\/>\n\n    <\/com.google.android.material.textfield.TextInputLayout>\n\n    <com.google.android.material.textfield.TextInputLayout\n        style=\"@style\/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        android:layout_marginVertical=\"10dp\"\n        android:layout_marginHorizontal=\"20dp\">\n\n        <com.google.android.material.textfield.TextInputEditText\n            android:layout_width=\"match_parent\"\n            android:layout_height=\"match_parent\"\n            android:id=\"@+id\/desc\"\n            android:hint=\"Description\">\n\n        <\/com.google.android.material.textfield.TextInputEditText>\n\n    <\/com.google.android.material.textfield.TextInputLayout>\n\n    <com.google.android.material.button.MaterialButton\n        android:id=\"@+id\/saveButton\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        android:layout_gravity=\"center\"\n        android:layout_marginHorizontal=\"20dp\"\n        android:text=\"Save\"\/>\n\n<\/LinearLayout><\/pre>\n
\"fragment<\/a><\/p>\n
3. \u2018Task_item_cell\u2019 is a XML file which is responsible for creating the user interface (UI) for tasks that are presented on the home screen.<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<androidx.cardview.widget.CardView android:id=\"@+id\/taskCellContainer\"\n    app:cardCornerRadius=\"5dp\"\n    xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"90dp\"\n    android:layout_margin=\"5dp\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\">\n\n    <LinearLayout\n        android:orientation=\"horizontal\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"match_parent\">\n\n        <ImageButton\n            android:layout_width=\"wrap_content\"\n            android:layout_height=\"wrap_content\"\n            android:layout_gravity=\"center\"\n            android:scaleY=\"1.5\"\n            android:scaleX=\"1.5\"\n            android:contentDescription=\"@string\/checkbox\"\n            android:id=\"@+id\/completeButton\"\n            android:layout_marginHorizontal=\"15dp\"\n            android:src=\"@drawable\/unchecked_24\"\n            android:backgroundTint=\"@android:color\/transparent\"\n            \/>\n\n        <TextView\n            android:layout_width=\"0dp\"\n            android:layout_height=\"wrap_content\"\n            android:id=\"@+id\/name\"\n            android:text=\"@string\/place_holder\"\n            style=\"@style\/TextAppearance.AppCompat.Title\"\n            android:layout_gravity=\"center\"\n            android:layout_weight=\"1\"\n            \/>\n    <\/LinearLayout>\n<\/androidx.cardview.widget.CardView><\/pre>\n
\"task<\/a><\/p>\n
Let\u2019s start with setting up the necessary files required for creating a ROOM database that will store the task\u2019s name and description.<\/p>\n
1. \u2018TaskItem.kt\u2019 is an entity file for the ROOM database that will be created when database is initialized. With the help of this file, respective table and columns will be created in the database.<\/p>\n
Code:<\/strong><\/p>\n
import android.content.Context\nimport androidx.core.content.ContextCompat\nimport androidx.room.ColumnInfo\nimport androidx.room.Entity\nimport androidx.room.PrimaryKey\nimport java.time.LocalDate\nimport java.time.format.DateTimeFormatter\n\n\n@Entity(tableName = \"task_item_table\")\nclass TaskItem(\n    @ColumnInfo(name = \"name\")var name: String,\n    @ColumnInfo(name= \"desc\")var desc: String,\n    @ColumnInfo(name = \"completedDateString\")var completedDateString: String?,\n    @PrimaryKey(autoGenerate = true)var id: Int = 0\n) {\n    fun completedDate(): LocalDate? = if (completedDateString == null) null else LocalDate.parse(completedDateString, dateFormatter)\n    fun isCompleted() = completedDate() != null\n    fun imageResource(): Int = if(isCompleted()) R.drawable.checked_24 else R.drawable.unchecked_24\n    fun imageColor(context: Context): Int = if(isCompleted()) purple(context) else black(context)\n\n    private fun purple(context: Context) = ContextCompat.getColor(context, R.color.purple_500)\n    private fun black(context: Context) = ContextCompat.getColor(context, R.color.black)\n\n    companion object{\n        val dateFormatter: DateTimeFormatter = DateTimeFormatter.ISO_DATE\n    }\n}<\/pre>\n
\"task<\/a><\/p>\n
2. \u2018TaskItemDAO.kt\u2019 is an interface which is a data access object responsible for defining the methods that can access the database. Using annotations, we have defined \u2018insert\u2019 query in this file which will insert the data in the specified database table, \u2018update\u2019 which enables the user to update a task already stored in the database.<\/p>\n
Code:<\/strong><\/p>\n
import androidx.room.*\nimport kotlinx.coroutines.flow.Flow\n\n\n@Dao\ninterface TaskItemDao {\n    @Query(\"SELECT * FROM task_item_table ORDER BY id ASC\")\n    fun allTaskItems(): Flow<List<TaskItem>>\n\n    @Insert(onConflict = OnConflictStrategy.REPLACE)\n    suspend fun insertTaskItem(taskItem: TaskItem)\n\n    @Update\n    suspend fun updateTaskItem(taskItem: TaskItem)\n}<\/pre>\n
\"task<\/a><\/p>\n
3. \u2018AppDatabase.kt\u2019 is an abstract class file which is responsible to initialize the database. In this file, the code makes sure that only one instance of the database is created even if it is a triggered multiple time.<\/p>\n
Code:<\/strong><\/p>\n
import android.content.Context\nimport androidx.room.Database\nimport androidx.room.Room\nimport androidx.room.RoomDatabase\n@Database(entities = [TaskItem::class], version = 1, exportSchema = false)\npublic abstract class TaskItemDatabase : RoomDatabase()\n{\n    abstract fun taskItemDao(): TaskItemDao\n\n    companion object\n    {\n        @Volatile\n        private var INSTANCE: TaskItemDatabase? = null\n        fun getDatabase(context: Context): TaskItemDatabase\n        {\n            return INSTANCE ?: synchronized(this)\n            {\n                val instance = Room.databaseBuilder(\n       \t\t    context.applicationContext,\n                    TaskItemDatabase::class.java,\n                    \"task_item_database\"\n                ).build()\n                INSTANCE = instance\n                instance\n            }\n        }\n    }\n}<\/pre>\n
\"task<\/a><\/p>\n
Moving onto the files that are responsible for the working and functioning of the application.<\/p>\n
1. \u201cMainActivity\u201d is a kotlin file which is responsible to initialize our application.
\nThis file contains various functions that are responsible for the working and functioning of our application.<\/p>\n
Code:<\/strong><\/p>\n
import androidx.appcompat.app.AppCompatActivity\nimport android.os.Bundle\nimport androidx.activity.viewModels\nimport androidx.recyclerview.widget.LinearLayoutManager\nimport com.example.todo_techvidvan.databinding.ActivityMainBinding\n\nclass MainActivity : AppCompatActivity(), TaskItemListener {\n    private lateinit var binding: ActivityMainBinding\n    private val taskViewModel: TaskViewModel by viewModels {\n        TaskItemModelFactory((application as TodoApplication).repository)\n    }\n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n        binding = ActivityMainBinding.inflate(layoutInflater)\n        setContentView(binding.root)\n        binding.newTaskButton.setOnClickListener {\n            NewTaskSheet(null).show(supportFragmentManager, \"newTaskTag\")\n        }\n        setRecyclerView()\n    }\n\n    private fun setRecyclerView() {\n        val mainActivity = this\n        taskViewModel.taskItems.observe(this){\n            binding.todoListRecyclerView.apply {\n                layoutManager = LinearLayoutManager(applicationContext)\n                adapter = TaskItemAdapter(it, mainActivity)\n            }\n        }\n    }\n\n    override fun editTaskItem(taskItem: TaskItem) {\n        NewTaskSheet(taskItem).show(supportFragmentManager,\"newTaskTag\")\n    }\n\n    override fun completeTaskItem(taskItem: TaskItem) {\n        taskViewModel.setCompleted(taskItem)\n    }\n}<\/pre>\n
\"main<\/a><\/p>\n
2. \u2018NewTaskSheet\u2019 is a kotlin file which initializes the fragment which allows the user to add new tasks.<\/p>\n
Code:<\/strong><\/p>\n
import android.os.Bundle\nimport android.text.Editable\nimport android.view.LayoutInflater\nimport android.view.View\nimport android.view.ViewGroup\nimport androidx.lifecycle.ViewModelProvider\nimport com.example.todo_techvidvan.databinding.FragmentNewTaskSheetBinding\nimport com.google.android.material.bottomsheet.BottomSheetDialogFragment\n\nclass NewTaskSheet(var taskItem: TaskItem?) : BottomSheetDialogFragment() {\n\n    private lateinit var binding: FragmentNewTaskSheetBinding\n    private lateinit var taskViewModel: TaskViewModel\n\n    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {\n        super.onViewCreated(view, savedInstanceState)\n        val activity = requireActivity()\n\n        if(taskItem!=null){\n            binding.taskTitle.text = \"Edit Task\"\n            val editable = Editable.Factory.getInstance()\n            binding.name.text = editable.newEditable(taskItem!!.name)\n            binding.desc.text = editable.newEditable(taskItem!!.desc)\n        }else{\n            binding.taskTitle.text = \"New Task\"\n        }\n        taskViewModel = ViewModelProvider(activity).get(TaskViewModel::class.java)\n        binding.saveButton.setOnClickListener{\n            savAction()\n        }\n    }\n\n    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {\n        binding = FragmentNewTaskSheetBinding.inflate(inflater,container,false)\n        return binding.root\n    }\n\n\n    private fun savAction() {\n       val name = binding.name.text.toString()\n       val desc = binding.desc.text.toString()\n        if(taskItem==null){\n            val newTask = TaskItem(name,desc,null)\n            taskViewModel.addTaskItem(newTask)\n        }else{\n            taskItem!!.name = name\n            taskItem!!.desc = desc\n            taskViewModel.updateTaskItem(taskItem!!)\n        }\n        binding.name.setText(\"\")\n        binding.desc.setText(\"\")\n        dismiss()\n    }\n}<\/pre>\n
\"new<\/a><\/p>\n
3. \u2018TaskItemAdapter.kt\u2019 is a class which contains some important functions to work with the RecyclerView, they are mentioned as follows:<\/p>\n