Skip to content

Instantly share code, notes, and snippets.

@rogerhu
Last active August 29, 2015 14:26
Show Gist options
  • Save rogerhu/fd21bd3e51de55efaff5 to your computer and use it in GitHub Desktop.
Save rogerhu/fd21bd3e51de55efaff5 to your computer and use it in GitHub Desktop.
In this video, I'm going to walk through a basic but functional ToDo list app.
- Going to rely on the Android Quickstart guide.
- The first step in building an app is scoping and wireframing it.
- Before you build anything, it's important to scope your app.
- We're going to define 3 different user scenarios: user can open the app and view a list, add a new item, and remove an item.
- First version we're not going to have marking completion or setting priority.
- Let's mock out our app to build the simplest wireframe for our app.
- It's important to think about the views and the interactions.
- It comes down to the Action Bar, the list of items vertically scrollable and click to remove,
textbox, and add button which will cause the input to be added to the list.
- The ListView is the most important part of most Android applications, so pay special attention.
- Now that we've wireframe, let's build the app.
- Create a New Application called ToDoApp with API 16.
- Basic anatomy of apps: an Activity is a UI screen, the XML representing the look of the screen, and the source is the behavior.
- We're going to drag the various views onto a RelativeLayout.
- Drag the ListView onto the screen.
- Drag a plain text to the bottom.
- Drag a button to the bottom.
- Resize the ListView to be above the text field so it doesn't overlap with the text field.
- Add a hint "Enter a new item..." to the text input.
- Add a string resource so the Add button shows.
- Make sure to change the ID references to: lvItems, etNewItems, btnAddItem
- Show how the RelativeLayout is configured in XML.
- Give a more descriptive identifier to the Views.
- Run the application in the emulator. There should be an empty ListView with no items. Show that there is no TextView or input.
- Every graphical editor is hiding the XML that describes that view.
- Open the main activity where the brains of the code lives.
- Highlight onCreate() which is where inflation of the XML happens in the view.
- We want to create the basic list of items.
- Create an ArrayList.
- Create an ArrayAdapter.
- Plug the ArrayAdapter to the ListView.
- Explain an adapter. It allows you to populate the items in a list (ListView, GridView).
- There are many different types of adapters based on the source of the data.
- An adapter translates a data to the view representation.
- Can be as simple as a String to a TextView, or as complex based on the underlying source (Yelp review -> image, text, etc).
- Create an ArrayList of items.
- Populate the list of items inside onCreateView() by creating a populateArrayItems().
- Type in the populateArrayItems() first so you don't forget invoking it.
- Add Item 1, Item 2, Item 3.
public void populateArrayItems() {
todoItems = new ArrayList<String>();
todoItems.add("Item 1");
todoItems.add("Item 2");
todoItems.add("Item 3");
aToDoAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, todoItems);
}
- Create an ArrayAdapter to map data to a view.
- Showcase the ArrayAdapter that accepts Context, resource ID, array of items that you wish to populate.
- We could create a layout to display. We can use a special resource called android.R.simple_list_item_1.
- Use Navigate Up to show what this special layout file does.
- Last parameter is the items.
- Set the adapter to the ListView
lvItems.setAdapter(aToDoAdapter);
- Run the emulator to show the items.
- Showcase that clicking does not work.
- Go back to slides to show next steps.
- Show how to add support for click handling for adding items.
- Modify the XML to add the onClick.
- Implement the same method on the Activity.
public void onAddItem(View view) {
editText = (EditText) findViewById(R.id.editText);
mArrayAdapter.add(editText.getText().toString());
editText.setText("");
}
- Create a reference to the EditText to access the input text that will be added to the list.
- Setup OnItemLongClickListener() that will delete the item.
- Show how to setup long click listener inside the Java.
- Construct an anonymous class to implement the long click interface.
- Show how there is an onItemClickListener method that has to be implemented.
public void setupListViewListener() {
lvItems.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener() {
public boolean onItemLongClick(AdapterView<?> parent, View view, int position,
long id) {
todoItems.remove(position);
return true;
}
});
}
- Position is really the only parameter is needed.
- Show the documentation from the OnItemClickListener.
- Return true to show that the method has run successfully.
- Show how if you can remove the item from the ArrayList.
- Run the emulator to see what happens.
- Notice how the app starts crashing and the stack trace.
- Show how the IllegalStateException gets triggered.
- We changed the underlying data but did not notify the adapter.
- Show how to use notifyDataSetChanged(). It will force the ArrayAdapter to refresh
the list and repopulate.
- aToDoAdapter.notifyDataSetChanged();
- Rerun the emulator and show how adding and deleting works.
- Show how to load and save data.
- The array data only lives in memory. We need to persist the data.
- We need to save the data to a file and read it back.
- We can use SQL or ORM, but let's keep it simple and do file persistence.
- Implement Loading data.
- Show how to use the Apache commons library to read/write from a file.
- Edit app/build.gradle and add 'commons-io:commons-io:2.4'.
- Create a reference for a special directory for the Android application.
private void readItems() {
File filesDir = getFilesDir();
File file = new File(filesDir, "todo.txt");
try {
todoItems = new ArrayList<String>(FileUtils.readLines(file));
} catch (IOException e) {
}
}
- Create a reference for the TODO file.
- Try/catch around IOException in case the file doesn't exist.
- Try to load the items into the ArrayList via FileUtils.readLines()
- Handle the case if the file doesn't exist.
- Delete the populate array items.
- Implement writing data.
- Create a reference for a special directory for the Android application.
private void writeItems() {
File filesDir = getFilesDir();
File file = new File(filesDir, "todo.txt");
try {
FileUtils.writeLines(file, todoItems)
} catch (IOException e) {
}
}
- Create a reference for the TODO.
- Implement FileUtils.writeLines()
- Show where these methods should be called (adding a new item or deleting one) + onCreate.
- Rerun the emulator.
- Show how no items are populated.
- Add a few.
- Re-launch the app and watch how the data gets restored.
- Show how to use DDMS to see the file.
- Go to /data/data/[app namespace] to see the file.
- Download the file.
- Summary: we've covered a lot.
- How to build an activity XML, add behavior to the activity class, and how to do event handlers.
- We've shown how to event handlers both the Java and XML way.
- Any view you pick has event handlers on them (same pattern for any event handlers)
- Creating a new anonymous class on the interface and the method that will be invoked.
- Passes around anonymous classes. Construct an anonymous class and implement a method
to execute. It can't pass arounds methods but can pass around classes.
- We showed how to create ArrayAdapter to map data sources to lists.
- In this case, we mapped a String to a view.
- An ArrayAdapter takes care of taking.
- We can also add items to the adapter and it keeps the data up to date.
- We've covered persistence.
- In future videos, we'll show networking, how to pull API data, how to use models, and how to build
more complex ListViews.
@kmolo
Copy link

kmolo commented Aug 15, 2015

Hi @rogerhu, what video does this gist refer to?

@rogerhu
Copy link
Author

rogerhu commented Aug 17, 2015

The ToDo app video

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment