Post
Ask Question

Xamarin.Android - To Do List App

Introduction 
 
In this article, I shall show you how to make a To Do List app in Xamarin.Android.
 
The prerequisite
  • Android Support Library v7 AppCompat
The steps given below are required to be followed in order to create a To Do List App in Xamarin.Android, using Visual Studio.
 
Step 1 - Create Android Project
 
Create your Android solution in Visual Studio or Xamarin Studio. Select Android and from the list, choose Android Blank App. Give it a name, like ToDoList.
 
Step 2 - Add Android Support v7 AppCompat Library
 
First of all, in References, add a reference of Android.Support.v7. AppCompat using NuGet Package Manager, as shown below.

 
 
Step 3 - Main Layout
 
Open Solution Explorer-> Project Name-> Resources-> Layout-> Main.axml. Open this main layout file and add the following code.
 
(File Name: Main.axml , Folder Name: Layout)
 
XML Code
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent">  
  6. <ListView  
  7.     android:id="@+id/lstTask"  
  8.     android:layout_width="match_parent"  
  9.     android:layout_height="match_parent"/>  
  10. </LinearLayout>  
Step 4 - Add New Layout
 
Next, add a new layout by going to Solution Explorer-> Project Name-> Resources-> Layout. Right-click to add a new item, select Layout, and give it a name, such as row.axml. Open this layout file and add the following code.
 
(Folder Name: Layout , File Name: row.axml)
 
XML Code
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent">  
  5.   <TextView  
  6.   android:id="@+id/task_title"  
  7.   android:text="Example"  
  8.   android:textSize="20sp"  
  9.   android:textColor="@android:color/black"  
  10.   android:layout_alignParentLeft="true"  
  11.   android:layout_alignParentStart="true"  
  12.   android:layout_width="wrap_content"  
  13.   android:layout_height="wrap_content"/>  
  14.   <Button  
  15.   android:id="@+id/btnDelete"  
  16.   android:text="DELETE"  
  17.   android:textSize="20sp"  
  18.   android:textColor="@android:color/black"  
  19.   android:layout_alignParentRight="true"  
  20.   android:layout_alignParentEnd="true"  
  21.   android:layout_width="wrap_content"  
  22.   android:layout_height="wrap_content"/>  
  23. </RelativeLayout>  
Step 5 - Add Menu
 
Next, add a new folder by going to Solution Explorer-> Project Name-> Resources-> Right-click to add a new folder. Give it a name, like Menu, and right-click on menu folder to add a new item. Select XML, and give it a name as menu_item.xml. Open this XML file and add the following code.
 
(Folder Name: menu , File Name: menu_item.xml)
 
XML Code
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <menu xmlns:android="http://schemas.android.com/apk/res/android">  
  3.   <item  
  4.     android:id="@+id/action_add"  
  5.     android:icon="@android:drawable/ic_menu_add"  
  6.     android:title="Add New Task"  
  7.     android:showAsAction="always"/>   
  8. </menu>  
Step 6 - Writing DbHelper Class
 
Before you go further, you need to write your DbHelper Class. For this, go to Solution Explorer-> Project Name and right-click. Select Add -> New Item-> Class. Give it a name like DbHelper.cs and write the following code with appropriate namespaces.
 
(File Name: DbHelper.cs)
 
C# Code
  1. using Android.Content;  
  2. using Android.Database;  
  3. using Android.Database.Sqlite;  
  4. using System;  
  5. using System.Collections.Generic;  
  6. namespace ToDoList.Helper  
  7. {  
  8.     public class DbHelper : SQLiteOpenHelper  
  9.     {  
  10.         private static String DB_NAME = "Ahsan";  
  11.         private static int DB_VERSION = 1;  
  12.         private static String DB_TABLE = "Task";  
  13.         private static String DB_COLUMN = "TaskName";  
  14.         public DbHelper(Context context) : base(context, DB_NAME, null, DB_VERSION)  
  15.         {  
  16.         }  
  17.         public override void OnCreate(SQLiteDatabase db)  
  18.         {  
  19.             string query = $"CREATE TABLE {DbHelper.DB_TABLE} (ID INTEGER PRIMARY KEY AUTOINCREMENT, {DbHelper.DB_COLUMN} TEXT NOT NULL);";  
  20.             db.ExecSQL(query);  
  21.         }  
  22.         public override void OnUpgrade(SQLiteDatabase db, int oldVersion, int newVersion)  
  23.         {  
  24.             string query = $"DELETE TABLE IF EXISTS {DB_TABLE}";  
  25.             db.ExecSQL(query);  
  26.             OnCreate(db);  
  27.         }  
  28.         public void InsertNewTask(String task)  
  29.         {  
  30.             SQLiteDatabase db = this.WritableDatabase;  
  31.             ContentValues values = new ContentValues();  
  32.             values.Put(DB_COLUMN, task);  
  33.             db.InsertWithOnConflict(DB_TABLE, null, values, Android.Database.Sqlite.Conflict.Replace);  
  34.             db.Close();  
  35.         }  
  36.         public void deleteTask(String task)  
  37.         {  
  38.             SQLiteDatabase db = this.WritableDatabase;  
  39.             db.Delete(DB_TABLE, DB_COLUMN + " = ?", new String[] { task });  
  40.             db.Close();  
  41.         }  
  42.         public List<string> getTaskList()  
  43.         {  
  44.             List<string> taskList = new List<string>();  
  45.             SQLiteDatabase db = this.ReadableDatabase;  
  46.             ICursor cursor = db.Query(DB_TABLE, new string[] { DB_COLUMN }, null, null, null, null, null);  
  47.             while (cursor.MoveToNext())  
  48.             {  
  49.                 int index = cursor.GetColumnIndex(DB_COLUMN);  
  50.                 taskList.Add(cursor.GetString(index));  
  51.             }  
  52.             return taskList;  
  53.         }  
  54.     }  
  55. }  
Step 7 - Writing CustomAdapter Class
 
Similarly, add a new class - CustomAdapter.cs and add the following code with appropriate namespaces.
(File Name: CustomAdapter.cs)
 
C# Code
  1. using Android.Content;  
  2. using Android.Views;  
  3. using Android.Widget;  
  4. using System.Collections.Generic;  
  5. namespace ToDoList.Helper  
  6. {  
  7.     public class CustomAdapter : BaseAdapter  
  8.     {  
  9.         private MainActivity mainActivity;  
  10.         private List<string> taskList;  
  11.         private DbHelper dbHelper;  
  12.         public CustomAdapter(MainActivity mainActivity, List<string> taskList, DbHelper dbHelper)  
  13.         {  
  14.             this.mainActivity = mainActivity;  
  15.             this.taskList = taskList;  
  16.             this.dbHelper = dbHelper;  
  17.         }  
  18.         public override int Count { get { return taskList.Count; } }  
  19.         public override Java.Lang.Object GetItem(int position)  
  20.         {  
  21.             return position;  
  22.         }  
  23.         public override long GetItemId(int position)  
  24.         {  
  25.             return position;  
  26.         }  
  27.         public override View GetView(int position, View convertView, ViewGroup parent)  
  28.         {  
  29.             LayoutInflater inflater = (LayoutInflater)mainActivity.GetSystemService(Context.LayoutInflaterService);  
  30.             View view = inflater.Inflate(Resource.Layout.row, null);  
  31.             TextView txtTask = view.FindViewById<TextView>(Resource.Id.task_title);  
  32.             Button btnDelete = view.FindViewById<Button>(Resource.Id.btnDelete);  
  33.             txtTask.Text = taskList[position];  
  34.             btnDelete.Click += delegate   
  35.             {  
  36.                 string task = taskList[position];  
  37.                 dbHelper.deleteTask(task);  
  38.                 mainActivity.LoadTaskList(); // Reload Data  
  39.             };  
  40.             return view;  
  41.         }  
  42.     }  
  43. }  
Step 8 - Main Activity Class
 
Now, go to Solution Explorer-> Project Name-> MainActivity and add the following code with appropriate namespaces.
 
(FileName: MainActivity)
 
C# Code
  1. using Android.App;  
  2. using Android.Widget;  
  3. using Android.OS;  
  4. using Android.Support.V7.App;  
  5. using Android.Views;  
  6. using Android.Content;  
  7. using System;  
  8. using ToDoList.Helper;  
  9. using System.Collections.Generic;  
  10. namespace ToDoList  
  11. {  
  12.     [Activity(Label = "ToDoList", MainLauncher = true , Theme ="@style/Theme.AppCompat.Light")]  
  13.     public class MainActivity : AppCompatActivity  
  14.     {  
  15.         EditText edtTask;  
  16.         DbHelper dbHelper;  
  17.         CustomAdapter adapter;  
  18.         ListView lstTask;  
  19.         public override bool OnCreateOptionsMenu(IMenu menu)  
  20.         {  
  21.             MenuInflater.Inflate(Resource.Menu.menu_item, menu);  
  22.             return base.OnCreateOptionsMenu(menu);  
  23.         }  
  24.         public override bool OnOptionsItemSelected(IMenuItem item)  
  25.         {  
  26.             switch (item.ItemId)  
  27.             {  
  28.                 case Resource.Id.action_add:  
  29.                     edtTask = new EditText(this);  
  30.                     Android.Support.V7.App.AlertDialog alertDialog = new Android.Support.V7.App.AlertDialog.Builder(this)  
  31.                         .SetTitle("Add New Task")  
  32.                         .SetMessage("What do you want to do next?")  
  33.                         .SetView(edtTask)  
  34.                         .SetPositiveButton("Add", OkAction)  
  35.                         .SetNegativeButton("Cancel", CancelAction)  
  36.                         .Create();  
  37.                     alertDialog.Show();  
  38.                     return true;  
  39.             }  
  40.             return base.OnOptionsItemSelected(item);  
  41.         }  
  42.         private void CancelAction(object sender, DialogClickEventArgs e)  
  43.         {  
  44.         }  
  45.         private void OkAction(object sender, DialogClickEventArgs e)  
  46.         {  
  47.             string task = edtTask.Text;  
  48.             dbHelper.InsertNewTask(task);  
  49.             LoadTaskList();  
  50.         }  
  51.         public void LoadTaskList()  
  52.         {  
  53.             List<string> taskList = dbHelper.getTaskList();  
  54.             adapter = new CustomAdapter(this, taskList, dbHelper);  
  55.             lstTask.Adapter = adapter;  
  56.         }  
  57.         protected override void OnCreate(Bundle savedInstanceState)  
  58.         {  
  59.             base.OnCreate(savedInstanceState);  
  60.             // Set our view from the "main" layout resource  
  61.             SetContentView(Resource.Layout.Main);  
  62.             dbHelper = new DbHelper(this);  
  63.             lstTask = FindViewById<ListView>(Resource.Id.lstTask);  
  64.             //Load Data  
  65.             LoadTaskList();  
  66.         }  
  67.     }  
  68. }  
Output
 
After a few seconds, the app will start running on your Android Emulator. You will see that your app is working successfully.
 
 
 
Summary
 
This was the process of creating a To Do List app in Xamarin.Android, using Visual Studio. Please share your comments and feedback.


Similar Articles