How To Create ToDoList Android App From Scratch


You want to create android apps and you are wondering where to start? Maybe you can get started making great applications and make some cold hard cash – I make no guarantees that you will be richer than you are now, therefore don’t sue me for saying you might make money! Let us get to it, shall we?

Here is what our final app will look like:

final todo app 300x300 How To Create ToDoList Android App From Scratch

This might end up being the simplest application you will ever build if you choose to go further. As you can see, all we have is an input area to type our to do items and when you press the center button on the right side, the input area is cleared and the item is added to the list. Nothing very fancy but still good for a start.

Setting Up TheAndroid Development Tools

I am not going to assume anything here today except some java programming basics. That means you don’t have to worry about what you don’t have already. We will need several things before we start building our To Do List android app. I am going to guide you through downloading and installing the software needed. There are several options on how to get started and that implies that my way is not the only way.

Step 1 : Download and Install a Java Runtime Environment

If you don’t have a Java Runtime Environment already installed, you can easily download it from here - simply choose the right one for your operating system. Installation is straight-forward. We need it because we will be using the Eclipse IDE which requires Java to work.

Step 2 : Download Android SDK ADT Bundle.

I highly recommend downloading the SDK Bundle because it makes everything simple. You don’t have to worry about putting the pieces together and running into problems. You can find the bundle here and just to make it clear, here is how the page looks like:

how to build android apps 300x181 How To Create ToDoList Android App From Scratch

While on the above page, click the download button and you will be on your way. I figured you might be asking yourself – “do I need to perform any configurations or setups?” That is why I want to share this other setup snapshot.

how to setup android sdk 300x173 How To Create ToDoList Android App From Scratch

If the above image is not very clear, please click it. Basically, what you should do after the download is done is double click it to unzip. Please do not move any files away from the folder. Navigate to where eclipse is within that same folder that you just unzipped and launch it.

Note: Using Eclipse Plugin - If you already have Eclipse installed, you might prefer to install the Android tools without installing eclipse twice. If that is the case, please click installing android ADT on Eclipse to find the right instructions on how to setup your environment.

Setting up the To Do List App project on Eclipse

This To Do List app will be very simple. It will provide a user with an input area where one can type text and when they press the center button, the same text will be added to the  list and neatly displayed on the view. It will also clear the input area for more items to be entered. Simple right? Are you excited about this? Using your eclipse click File -> New -> Android Application Project. You should see something like this:

creating android project 300x225 How To Create ToDoList Android App From Scratch

Note: You might notice that Android Application Project is not visible the first time you create a similar project. In that case, do this: File -> New -> Other. From here, you will be able to locate Android Application Project under Android. At this point, I assume you have installed everything as explained above. Next follow the project wizard and fill up the properties like this:

creating android project 2 300x225 How To Create ToDoList Android App From Scratch

Once again, please click the above image to zoom in. Basically, all you need to do is give your application a name and a package. For now, you can leave the rest as default. Click Next. Keep clicking Next until the end where you click Finish.

A project will be created with everything you need to get started. For now however, we will focus on two files: MainActivity.java and main.xml. You might be thinking, where the heck is main.xml? I only see layout_main.xml.  Do not worry, I changed mine from layout_main.xml to main.xml to make it look better. You can leave yours the way it is or change it to whatever reasonable name you want – remember to edit in both res/layout/main.xml and MainActivity.java inside onCreate() method. In summary, we will be focusing on these two files today:

MainActivity.java

android projects 3 300x225 How To Create ToDoList Android App From Scratch

And main.xml

android programming eclipse 300x225 How To Create ToDoList Android App From Scratch

Please click the above images to look closer. Don’t worry, we will be coding both of them right now so that you can copy and paste if you wish to follow along and test for yourself.

Inside main.xml file

When you created your first android app project, several files were generated including main.xml and MainActivity.java –  the activity that your application will use. It is a subclass of the Activity class. We will edit main.xml to add what our app needs : input area and a list view to display our to do items. Let us do it:


< ?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="https://schemas.android.com/apk/res/android"
   android:orientation="vertical"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent">
   <edittext android:id="@+id/myEditText"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Enter a New Item">
   </edittext>
   <listview android:id="@+id/myListView
       android:layout_width="fill_parent"
       android:layout_height="wrap_content">
   </listview>
</linearlayout>

That is all we need for this file. Please remember to type RelativeLayout, EditText and ListView as I have written here as opposed to what you see in the above code. The syntax highlighter made everything lowercase which is not what it should be.

In the above main.xml, we are using @+id/myEditText and @+id/myListView so that we can reference them inside MainActivity.java. Let us take a look at this file now

It seems reasonable to use an ArrayList for our to do list right? We are going to do exactly that.

package com.simpledeveloper.todolist;

import java.util.ArrayList;

import android.os.Bundle;
import android.app.Activity;
import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnKeyListener;
import android.widget.ArrayAdapter;
import android.widget.EditText;
import android.widget.ListView;

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    final EditText myEditText = (EditText)findViewById(R.id.myEditText);
    ListView myListView = (ListView)findViewById(R.id.myListView);

    final ArrayList todoItems = new ArrayList lt;string>();

    //create an array adapter to bind the array to list view
    final ArrayAdapter lt;string> aa = new ArrayAdapter lt;string>(this,
    android.R.layout.simple_list_item_1, todoItems);

    /*bind the array adapter to the ListView */
    myListView.setAdapter(aa);

    myEditText.setOnKeyListener(new OnKeyListener(){
        public boolean onKey(View v, int keyCode, KeyEvent event){
             if (event.getAction() == KeyEvent.ACTION_DOWN){
                 if (keyCode == KeyEvent.KEYCODE_DPAD_CENTER){
                      todoItems.add(0, myEditText.getText().toString());
                      aa.notifyDataSetChanged();
                      myEditText.setText("");
                      return true;
                 }
            }
            return false;
        }
   });

  }
}

Explanation of what just happened

Believe it or not, that is all we need for our simple to do list android app! We can now start making a few dollars – not really. Let me briefly explain to you what that code does. It is not as complicated as it might seem (especially if this is your first time).

  • Inside onCreate() method, we setContentView(R.layout.main) – basically saying, when this app is started, display the components inside main.xml which is located in the layout folder…see?
  • We then make references to the components we defined inside main.xml (myEditText and myListView). We use findViewById(R.id.myEditText, R.id.myListView) respectively. Remember the ids we created earlier inside main.xml? There you go.
  • As I stated a few minutes ago, it makes sense to use ArrayList to store our to do items. Our to do items will be strings and that is why our ArrayList will expect strings to be stored. If you know of another way, then try that. So we define it for later use.
  • In order for us to bind a ListView to an ArrayList, we use an ArrayAdapter. That is what we created above immediately after defining the ArrayList object. Don’t worry so much about understanding all of it at once – you can spend more time going through the documentation for more information. After defining an ArrayAdpter instance, we bind it to myListView using setAdapter() method.
  • Finally, we need to enable users to type in some items. We will use an OnKeyListener which we add to EditText. This listens for a D-Pad Center Button click before adding the content of the EditText to the to do list array and notifying the ArrayAdapter of the change. We finally clear the EditText to create room for another item to be typed.

That, just so you know, is our simple to do list android app! You did it. You can now pat yourself and grab a beer or something that returns the same outcome. If you did everything correctly, click the run button on the editor to see your app working.

In summary and all honesty, we have just touched the surface of android development. This being so minimal however, is a good place to start your journey. Explore further. Do not stop here, in fact, add more features to this application and even publish it for others to download.

Thank you for your patience through this post. If you liked it, please consider sharing with your friends using the buttons below. Please remember to subscribe and tell me what you think through the comments – I would love to hear from you. Thank you once again and if you have any questions, you are free to ask. See you soon.

Perhaps it goes without saying that you MUST pay a visit to the Android Documentations if you are learning to create android apps.

 


7 thoughts on “How To Create ToDoList Android App From Scratch

  1. You should *probably* mention setting up the manifest or at least choosing a minimum/target api level when setting up the project. Otherwise, people may not be able to run your code.

    • But you don’t need to change/modify the manifest in this example. The only two files they should edit are the main activity class and the main xml file inside layout. I agree that I should have talked about the target api but again, I didn’t want to complicate this simple application for those starting out.

      • I meant change the manifest to the correct api levels or at least set them correctly when creating the project. Sorry for not being clear on that point. It’s in the image but without explicitly telling people what they are for, you may get people changing the values; especially since this is aimed at new Android developers.

  2. hi elisha i read your blog “how to program todolist android app from scratch” and i want to make my own app as u teach us but i have a big problem to download java SE runtime Environment
    when i click on the link that u provide here diractly, a another site opend named “oracle”
    Oracle Technology Network ->Java ->Java SE -> Downloads

    where we need to accept the agreement of license i accept the license and there are many java application to download
    i don’t know which java application is right to download for my operating system
    i have a “window 7 ultimate 32 bit operating system”
    by the way i download ” Windows x86 Offline” but it is not installed in my pc please help me and i want to say that you are doing very good job

  3. sorry I got confused…
    where should i write these two..
    @+id/myEditText and @+id/myListView??
    i didn’t c them in the above code..tq

    • For some weird reason this syntax highlighter deleted that part of the xml code. I have fixed it and I am sorry for the inconvenience caused by this tool.

      I hope you enjoy this tutorial! Thanks for stopping by!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">