Basic Todo App Tutorial

Building the Todo App

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.

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 -> 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:

<RelativeLayout xmlns: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">

    <ListView
        android: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" />

    <EditText
        android: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" />

    <Button
        android: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:

public class MainActivity extends Activity {

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


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
}

Creating List of Items

We need to create a list of todo items to display and an adapter to display them in our ListView:

public class MainActivity extends Activity {
    private ArrayList<String> items;
    private ArrayAdapter<String> itemsAdapter;
    private ListView lvItems;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // ADD HERE
        lvItems = (ListView) findViewById(R.id.lvItems);
        items = new ArrayList<String>();
        itemsAdapter = new ArrayAdapter<String>(this,
				android.R.layout.simple_list_item_1, items);
        lvItems.setAdapter(itemsAdapter);
        items.add("First Item");
        items.add("Second Item");
    }
}

which when we run the app with Run => 'app' results in:

Adding Items

First, let's add an android:onClick handler to our layout XML file in app/src/main/res/layout/activity_main.xml:

<Button
    android: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" 
    android:onClick="onAddItem"
/>

and then add the following method handler to the Activity file:

public class MainActivity extends Activity {

    // ...onCreate method

    public void onAddItem(View v) {
        EditText etNewItem = (EditText) findViewById(R.id.etNewItem);
        String itemText = etNewItem.getText().toString();
        itemsAdapter.add(itemText);
        etNewItem.setText("");
    }

    // ...
}

And now we are able to add items to the list.

Removing Items

public class MainActivity extends Activity {

    // ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // ... existing code ...
        items.add("Second Item");
        // Setup remove listener
        setupListViewListener();
    }

    private void setupListViewListener() {
        lvItems.setOnItemLongClickListener(
                new AdapterView.OnItemLongClickListener() {
            @Override
            public boolean onItemLongClick(AdapterView<?> adapter,
                                           View item, int pos, long id) {
                items.remove(pos);
                itemsAdapter.notifyDataSetChanged();
                return true;
            }

        });
    }

    // ...onAddItem method

}

and now we are able to remove items from the list.

Persistent to File

First, we need to load a third-party JAR file to make reading and writing easier. First, download commons-io-2.4.jar and copy and paste the file into the libs folder in Android Studio.

Next, right-click on the jar within the lib folder and select Add as Library... and then hit OK. Then if you don't notice a sync happen, select Tools => Android => Sync Project with Gradle Files to reload the dependencies.

With the library loaded, we need to define the methods to read and write the data to a file:

public class MainActivity extends Activity {

    private void readItems() {
        File filesDir = getFilesDir();
        File todoFile = new File(filesDir, "todo.txt");
        try {
            items = new ArrayList<String>(FileUtils.readLines(todoFile));
        } catch (IOException e) {
            items = new ArrayList<String>();
        }
    }

    private void writeItems() {
        File filesDir = getFilesDir();
        File todoFile = new File(filesDir, "todo.txt");
        try {
            FileUtils.writeLines(todoFile, items);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

and then call those methods when the app is launched (read from disk) and then write to disk when items change (items added or removed) within the Activity:

public class MainActivity extends Activity {

   @Override
    protected void onCreate(Bundle savedInstanceState) {
        // ... super, setContentView, define lvItems
        readItems(); // <---- Add this line
        itemsAdapter = new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_1, items);
        // ... rest of existing code
    }

    private void setupListViewListener() {
        lvItems.setOnItemLongClickListener(
                new AdapterView.OnItemLongClickListener() {
            @Override
            public boolean onItemLongClick(AdapterView<?> adapter,
                                           View item, int pos, long id) {
                items.remove(pos);
                itemsAdapter.notifyDataSetChanged();
                writeItems(); // <---- Add this line
                return true;
            }

        });
    }

    public void onAddItem(View v) {
        EditText etNewItem = (EditText) findViewById(R.id.etNewItem);
        String itemText = etNewItem.getText().toString();
        itemsAdapter.add(itemText);
        etNewItem.setText("");
        writeItems(); // <---- Add this line
    }

}