Develop an Android App using Android Layout and View components. Develop a better understanding of the Android Studio IDE

Transcription

1 Lab 2 To-Do List Objective Develop an Android App using Android Layout and View components. Develop a better understanding of the Android Studio IDE Android Studio User Guide Part 1 Create a new Android project for creating a To do list application. Consider using application and project names like TodoList. Select an API level 15 or higher. Select Blank Activity and provide a meaningful name, e.g., ToDoListActivity. Do not select the Use a Fragment option. SE4910 Lab 2: UI 9/14/2016 Jay Urbain 1

2 Select Finish, and let Gradle build the project. Open you activity_to_do_list.xml layout file in the res/ layout project folder. Modify your layout to include ListView and EditText View components within a LinearLayout. You must give both the EditText and ListView an ID so that you can get references to them in your code: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" xmlns:tools=" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.jayurbain.todolist.todolistactivity"> <EditText android:id="@+id/myedittext" android:layout_height="wrap_content" android:text="@string/additemhint" android:inputtype="text"/> <ListView android:id="@+id/mylistview" android:layout_height="wrap_content"/> </LinearLayout> SE4910 Lab 2: UI 9/14/2016 Jay Urbain 2

3 Add string resources that provide hint text and the content description to the strings.xml resource stored in the project's res/values folder. Take this opportunity to remove the default hello string value and add the following strings: <resources> <string name="app_name">todolist</string> <string name="additemhint">new To Do Item</string> </resources> With your UI defined, open the ToDoListActivity from your project's src package folder. Start by ensuring your UI is inflated using setcontentview(). Then get references to ListView and EditText using findviewbyid: package com.jayurbain.todolist; import android.support.v7.app.appcompatactivity; import android.os.bundle; import android.widget.edittext; import android.widget.listview; public class ToDoListActivity extends AppCompatActivity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_to_do_list); // Get references to UI widgets ListView mylistview = (ListView) findviewbyid(r.id.mylistview); EditText myedittext = (EditText) findviewbyid(r.id.myedittext); Notes: Cmd +, to bring up settings on Mac; Ctrl + Alt + s on Windows. Select Keymap to view shortcut keys. Instructions for Android Studio auto-complete: SE4910 Lab 2: UI 9/14/2016 Jay Urbain 3

4 To show a vertical list of scrollable items, use a ListView. Items for the ListView are populated using an Adapter. The simplest adapter to use is called an ArrayAdapter, because the adapter converts an ArrayList of objects into View items loaded into the ListView container. The ArrayAdapter fits in between an ArrayList (data source) and the ListView and configures two aspects of your list: Which array to use as the data source for the list. How to convert any given item in the array into a corresponding View object. Note: There are other data sources besides an ArrayAdapter such as CursorAdaptor, which we would use to bind directly to a result set from a local SQLite database. SE4910 Lab 2: UI 9/14/2016 Jay Urbain 4

5 Still within oncreate(), define an ArrayList of Strings for storing each to-do list item. You can bind a ListView to an ArrayList using an ArrayAdapter. Create a new ArrayAdapter instance to bind the to-do item array to the ListView. package com.jayurbain.todolist; import android.support.v7.app.appcompatactivity; import android.os.bundle; import android.widget.arrayadapter; import android.widget.edittext; import android.widget.listview; import java.util.arraylist; import java.util.list; public class ToDoListActivity extends AppCompatActivity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_to_do_list); // Get references to UI widgets ListView mylistview = (ListView) findviewbyid(r.id.mylistview); final EditText myedittext = (EditText) findviewbyid(r.id.myedittext); final List<String> todoitems = new ArrayList<String>(); final ArrayAdapter<String> aa = new ArrayAdapter<String>(this, android.r.layout.simple_list_item_1, todoitems); To let users add new to-do items. Add an onkeylistener to the EditText that listens for either a D-pad center button click or the Enter key being pressed. Either of these actions should add the contents of the EditText to the to-do list array created above, and notify the ArrayAdapter of the change. Finally, clear the EditText to prepare for the next item. The body of your Activity should look something like the following: mylistview.setadapter(aa); myedittext.setonkeylistener( new View.OnKeyListener() { public boolean onkey(view v, int keycode, KeyEvent event) { if( event.getaction == KeyEvent.ACTION_DOWN) { if( (keycode == KeyEvent.KEYCODE_ENTER)) { todoitems.add(0, myedittext.gettext().tostring()); aa.notifydatasetchanged(); myedittext.settext(""); return true; reutrn false; ); Note: KeyCodes can vary depending on the platform. SE4910 Lab 2: UI 9/14/2016 Jay Urbain 5

6 Run/debug your application. You should see a text entry box above a list, as shown below. Try adding breakpoints to the code to test the debugger. Optional: You can also experiment with the DDMS perspective which give you more information about your device. Note: we ll go over this in more detail later in the class. SE4910 Lab 2: UI 9/14/2016 Jay Urbain 6

7 Part 2 - Using Fragments for Your To-Do List In Part 1 of our to-do list App, we used a basic Linear Layout within an Activity to define the presentation. In Part 2, we re going to embed our to-do list UI functionality within a Fragment. Fragments enable you to more easily create optimized layouts for different screen sizes, e.g., smart phone or tablet, and they facilitate re-use. Fragments do however increase complexity. Optional tutorial on Fragments: FYI: In our next lecture we will discuss how we can use Intents to send messages between Activities and other applications. 1 - Create a new Blank Activity project in Android Studio. The contents of your Activity source should look something like the following. public class MainActivity extends AppCompatActivity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); 2 Create a new Blank Fragment. Select Layout XML to generate a layout file. Do not select Include Fragment Factory Methods, and do not select Include interface callbacks. They generate a lot of code that we will not be using and will make our App more complex than is necessary. See below snip below. SE4910 Lab 2: UI 9/14/2016 Jay Urbain 7

8 3 Update your list fragment layout file to include EditText and ListView. Note: we are using android-id/list. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_height="match_parent" android:orientation="vertical" > <EditText android:layout_height="wrap_content" android:inputtype="text"/> <ListView android:layout_height="wrap_content" > </ListView> </LinearLayout> SE4910 Lab 2: UI 9/14/2016 Jay Urbain 8

9 4 Update your activity layout with your fragment. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_height="match_parent" android:orientation="vertical" > <fragment android:name="com.jayurbain.simplelistfragment.mylistfragment" android:layout_height="match_parent" /> </LinearLayout> 5 Add the Activity functionality from Project 1 to your fragment. Notes: Inflate your UI in oncreateview, e.g.: view = inflater.inflate(r.layout.fragment_my_list, container, false); Use getview() to obtain the fragment container when referencing myedittext since it is attached to the fragment getview().findviewbyid(r.id.myedittext); Uset getlistview() to obtain a reference to ListView since you are extending ListFragement. E.g., setlistadapter(adapter); getlistview().setonitemclicklistener(this); Use getactivity() to obtain your Activity context. E.g., new ArrayAdapter<String>(getActivity(), android.r.layout.simple_list_item_1, todoitems); SE4910 Lab 2: UI 9/14/2016 Jay Urbain 9

10 6 Generate a toast message of the item selected in the list In your fragment, override the OnItemClickListener interface which requires you to implement the onitemclick() method. Due before Lab week 3. Submit a lab report with a short description of your work, snapshots sufficient to demonstrate proper functionality, and feedback on the lab. SE4910 Lab 2: UI 9/14/2016 Jay Urbain 10