Basic Todo App Tutorial

This tutorial is a complementary reference which can be used in conjunction with this Todo app presentation to reference the source code step-by-step.

Note: This tutorial is designed for Android Studio and not for Eclipse. For building this in Eclipse, see this slide presentation.

Creating the Project

First, we create a new Android project with minimum SDK 14 named SimpleTodo and then select "Empty Activity". Hit Finish to generate the project.

Configuring Android Studio

Go into Preferences for Android Studio. On a Mac through Android Studio => Preferences or on Windows with File -> Settings. Then find Editor -> General -> Auto Import and for Java we need to:

Change Insert imports on paste to All

Check Add unambigious imports on the fly option

Creating our Layout

Next, we need to define the layout of our views. In particular, we want to add Button, a EditText and a ListView to our Activity in app/src/main/res/layout/activity_main.xml:

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><ListViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:id="@+id/lvItems"android:layout_alignParentTop="true"android:layout_alignParentLeft="true"android:layout_alignParentStart="true"android:layout_above="@+id/btnAddItem"/><EditTextandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:id="@+id/etNewItem"android:layout_alignTop="@+id/btnAddItem"android:hint="Enter a new item"android:layout_alignParentLeft="true"android:layout_alignParentStart="true"android:layout_toLeftOf="@+id/btnAddItem"android:layout_toStartOf="@+id/btnAddItem"android:layout_alignParentBottom="true"/><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Add Item"android:id="@+id/btnAddItem"android:layout_alignParentBottom="true"android:layout_alignParentRight="true"android:layout_alignParentEnd="true"/></RelativeLayout>

which results in this layout for our Todo app:

Modifying our Activity

Now we need to open up our generated Activity java source file in app/src/main/java/.../MainActivity.java which looks like this by default:

publicclassMainActivityextendsActivity{@OverrideprotectedvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);}@OverridepublicbooleanonCreateOptionsMenu(Menumenu){// Inflate the menu; this adds items to the action bar if it is present.getMenuInflater().inflate(R.menu.main,menu);returntrue;}}

Creating List of Items

We need to create a list of todo items to display and an adapter to display them in our ListView within the Activity java file: