Android Quickstart

Building a Todo Application

(with Android Studio)

Todo App - Simple & Functional

  • Best way to learn is to build!
  • We’ll look at the essentials for apps
  • We’ll build a simple Todo List

Scoping the Todo App

  • View a list of existing items
  • Add a new item
  • Remove an item

For this application we need just one screen which mean a single Activity.

(Bonus: future versions could enable marking completion or setting priorities.)

Wireframe the Todo App

Basic interface:

(A) Basic Label with App Name

(B) Basic List of Items

  • Vertically Scrollable
  • Hold Down to Remove Item

(C) Adding items with Textbox and Button

A

B

C

Create New Android Project

Select Platform and Version

Select “Empty Activity”

Configure “MainActivity”

Configure Line Numbers

1. Select Android Studio → Preferences in top menu

2. Find Editor → General → Appearance

3. Enable “Show line numbers”

Configure Imports

Set “Imports on Paste” to “All

Check “Add unambiguous imports on the fly”

Open activity_main.xml

Click on the second tab to reveal the XML file

Give it a Run on a Device or in the Emulator

Android Framework Orientation

Activity

==

1 UI Screen

src/res/

layout

==

Look

src/main/

*.java

==

Behavior

Anatomy of Android App

Anatomy of an Android App

ToDo Activity (Screen)

Settings Activity (Screen)

Layout and Look in res/layout/activity_todo.xml

Behavior and Logic in src/main/ToDoActivity.java

Layout and Look in res/layout/

activity_settings.xml

Behavior and Logic in src/main/SettingsActivity.java

Launches

Build the Interface, Pt 1

1. Click on “Hello World” label and press the backspace key to remove.

2. Drag a Button from left-hand side (Widgets) to Bottom-Right of Layout

Note: When dragging views onto layout, ensure green lines confirm location before releasing.

Build the Interface, Pt. 2

Drag More Views onto Layout

  • 1. Text Fields → Plain Text
    • Drag to Bottom-Left
    • Resize Right Side to Button
  • 2. Containers → ListView
    • Drag to Top Left Corner
    • Resize Bottom Above Button

Note: When dragging new views to layout, ensure green lines confirm location before releasing.

Build the Interface

  • Assign Hint to EditText
  • Double-click on view to assign ID
    • ListView = lvItems
    • EditText = etNewItem
    • Button = btnAddItem

Visual UI Builder Automatically Generates XML

  • Every action was translated into XML
  • All three views are wrapped in a "Layout"
  • All three views have listed properties (id, height, width, etc.)

Give it a Run on a Device or in the Emulator

Code Basic Behavior

  • The XML layout for this activity is applied in onCreate()
  • Every Activity extends from the same base class
  • This is where we add our application logic

Create List of Items and Display in ListView

  • Create an ArrayList
  • Create an ArrayAdapter
  • Get a handle to ListView
  • Attach adapter to ListView

An adapter allows us to easily display the contents of an ArrayList within a ListView.

Give it a Run on a Device or in the Emulator

Add Items to the List

  • Add "onClick" property to Button in XML
  • Create onAddItem() method to MainActivity.java which adds input item to the list

Remove Items from List

  • Create method for setting up the listener
  • Invoke listener from onCreate()
  • Attach a LongClickListener to each Item for ListView that:
    • Removes that item
    • Refreshes the adapter

Methods for Loading and Saving Items from a File

Important! FileUtils is in a library called Apache Commons IO which we need to add as a dependency in our app/build.gradle file:

  • Create method to open a file and read a newline-delimited list of items
  • Create method to save a file and write a newline-delimited list of items

dependencies {
compile 'commons-io:commons-io:2.4'
}

Invoking Methods to Load and Save Files

  • Load items during onCreate()
  • Save items when a new list item is added
  • Save items when a list item is removed

Note: Be sure to remove items = new ArrayList<String>(); from onCreate when adding the call to readItems(); and also be sure to remove the “test items” being added every time.

Run the Final Todo App

ToDo App Summary

Congratulations! You have built your very first functioning application using many essential concepts:

  • Activity XML (Layouts and Views)
  • Activity Source (Java Code for App Logic)
  • View IDs and Properties
  • ListViews, EditText and Button View Types
  • List Adapters for Displaying List Items
  • Click Handling for Buttons and List Items
  • Testing Applications with the Emulator

What you would add to the ToDo List next?

Building the Todo Android App in Studio - Google Slides