1. Android Programming Lecture 6
Testing notes
List View and Custom View

2. List View
Android provides the view "List View" which is capable of displaying a scrollable list of items.
Lists are one of the most common designs in mobile apps
Scrollable
Selectable
Programmable to bring up the next Activity (screen)

3. Create the List
public class MainActivity extends ListActivity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// do not call the method setContentView(), as the
List Activity has its default layout with a list
view embedded
// Step 1: Create the data
String[] values = new String[] { "Android", "iPhone", "WindowsMobile", "Blackberry", "WebOS", "Ubuntu", "Windows7", "Max OS X", "Linux", "OS/2" };
// Step 2: Create an Adapter object to convert data to list row
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, values);
// Step 3: Load the adapter to list view
setListAdapter(adapter); }
"List Activity" extends "Activity" and provides simplified handling of lists

4. Create the List public class MainActivity extends ListActivity {
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// do not call the method setContentView(), as the
List Activity has its default layout with a list
view embedded
// Step 1: Create the data
String[] values = new String[] { "Android", "iPhone", "WindowsMobile", "Blackberry", "WebOS", "Ubuntu", "Windows7", "Max OS X", "Linux", "OS/2" };
// Step 2: Create an Adapter object to convert data to list row
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, values);
// Step 3: Load the adapter to list view
setListAdapter(adapter); }

5. Adapter: Man in the middle
ArrayAdapter: use TextView to represent the list items
SimpleCursorAdapter: used with SQLite databases and content providers by converting cursor rows to list items

6. android.R.layout.simple_list_item_1, values);
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, values);
simple_list_item_1
simple_list_item_2
simple_list_item_single_choice

7. User Interaction in List View
User setListAdapter() to inflate the list view using the adapter
If the user select in the list a list entry the method onListItemClick() will be called. This method allows to access the selected element.
@Override protected void onListItemClick(ListView l, View v, int position, long id) { super.onListItemClick(l, v, position, id);
// Callback function when an item in the list is clicked // ListView l: The ListView where the click happened // View v: The view that was clicked within the ListView // int position: The position of the view in the list // long id: The row id of the item that was clicked }

8. public class MainActivity extends ListActivity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); String[] values = new String[] { "Android", "iPhone", "Windows Mobile", "Blackberry", "WebOS", "Ubuntu", "Windows 7", "Max OS X", "Linux", "Windows 8" }; ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1, R.id.label, values); setListAdapter(adapter); } @Override protected void onListItemClick(ListView l, View v, int position, long id) { super.onListItemClick(l, v, position, id); String item = (String) getListAdapter().getItem(position); Toast.makeText(this, item + " selected with position " + position + " and id " + id,
Toast.LENGTH_LONG).show(); } }

9. Apply Your Own Layout Using default layout in ListActivity
Using your own layout file

10. Customize List View
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="20sp" android:gravity="center_horizontal" android:text="This is Tom's list view" android:textColor="#f00" android:textSize="30sp" /> <ListView android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="50dp"/>
In case you don't want to use one of the pre-defined layouts your own layout must have an element with the id which is the ListView
In activity java file, still use the method setContentView()
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); }

11. Customize Cells
customize the cells

12. ListActivity with your own layout
You can also define your own layout for the rows and assign this layout to your row adapter. In this example, we will add a graphic to each row
Create the following layout file in res/layout folder of your project
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<ImageView
android:layout_width="20dp"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:layout_marginTop="4dp"
/>
<TextView
android:layout_width="wrap_content"
android:textSize=“15sp" />
</LinearLayout>

13. Now In the MyList class we write the following code
public class MainActivity extends ListActivity {
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
String[] values = new String[] { "Android", "iPhone", "WindowsMobile",
"Blackberry", "WebOS", "Ubuntu", "Windows7", "Max OS X",
"Linux", "OS/2" };
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.list_view_layout, R.id.label, values);
setListAdapter(adapter); }
The only difference is that we are using our own layout in the
ArrayAdapter and telling the adapter which UI element (identified by id) should contains the text.

14. ListActivities with Flexible Layout
Build custom Adapter to create customized rows in list view

15. ListActivities with Flexible Layout
Create a new Java class in the project
Right click on the packet, select New -> Java Class

16. ListActivities with Flexible Layout
Create a new Java class in the project
Right click on the packet, select New -> Java Class

17. ListActivities with Flexible Layout
Create a name for the custom class, e.g., MySimpleArrayAdapter
The class will be used to create the cells of the list view, instead of the default Adapter class

18. public class MySimpleArrayAdapter extends ArrayAdapter { private final Context context; private final String[] values; // Constructor which is called when the custom adapter is created public MySimpleArrayAdapter(Context context, String[] values) { // Select the layout for the cell super(context, R.layout.list_layout, values); this.context = context; this.values = values; } @Override public View getView(int position, View convertView, ViewGroup parent) { LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); View rowView = inflater.inflate(R.layout.list_layout, parent, false); // Link the widgets on the layout with the Java codes TextView textView = (TextView) rowView.findViewById(R.id.label); ImageView imageView = (ImageView) rowView.findViewById(R.id.icon); // Set the content of the text based on the values string in the main activity textView.setText(values[position]); // Change the icon for Windows String s = values[position]; if (s.startsWith("Windows")) { imageView.setImageResource(R.drawable.dog); } else { imageView.setImageResource(R.drawable.cat); } return rowView; } }

19. public class MainActivity extends ListActivity {
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
String[] values = new String[] { "Android", "iPhone", "WindowsMobile", "Blackberry", "WebOS", "Ubuntu", "Windows7", "Max OS X", "Linux", "OS/2" };
MySimpleArrayAdapter adapter = new MySimpleArrayAdapter(this, values);
setListAdapter(adapter); }

20. ListActivities with Flexible Layout
Step 1: Build custom adapter by extending from the fundamental adapter class
We extend ArrayAdapter but we could also directly implement "BaseAdapter“
Step 2: Override the methods there
Override the getView() method.
This method is responsible for creating the view of individual rows of your "ListView".
For this read the pre-defined layout via the class "LayoutInflator" and return one individual view per row. If "convertView" is not null we re-used this view. Android recycles rows (views) which are not displayed anymore. Using existing rows saves memory and CPU consumption.

21. Custom View
Android framework provides several default views but developer can also create their custom views and use them in their application

22. View Class
Base class for widgets and ViewGroup

23. View Class
View is the base class for widgets, which are used to create interactive UI components (buttons, text fields, etc.)
To learn the View class can help us better understand the widgets and how they are presented in the app
The View class represents the basic building block for user interface components.
A View occupies a rectangular area on the screen and is responsible for drawing and event handling

24. Working with View Extend View class or its subclass
Override some methods
Draw the view: onDraw()
Event handling, e.g., onTouchEvent() …
Use the new view in your layout

25. Activity class
Custom View class

26. 1. Extend View class or its subclass Override some methods
Activity class
Custom View class

27. 2. Override the callback functions
Activity class
Custom View class
Draw
Event Handling

28. 3. Use the view as the content of the activity
Activity class
Custom View class

29. Draw the View To draw something, you need 4 basic components:
a Canvas to host the draw calls
a paint (to describe the colors and styles for the drawing)
a drawing primitive (e.g. Rect, Path, text, Bitmap)
Canvas
Path and Paint
Bitmap

30. Canvas class
Canvas provides API to draw (e.g., Text, Bitmap, different shapes, color, points, …) on the canvas
Refer to class reference in Android developer site:

31. Paint
The Paint class holds the style and color information about how to draw geometries, text and bitmaps

32. Event Handling
developer.android.com/reference/android/view/View.html

33. Event Handling
developer.android.com/reference/android/view/View.html

34. // Event Handling for Touch Event @Override public boolean onTouchEvent(MotionEvent event) { // Retrieve the coordinate of the point touched currentX = event.getX(); currentY = event.getY(); // Call onDraw() to re-draw the view based on the updated // attributes, i.e., currentX and currentY in this example invalidate(); return true; }
Call onDraw() method to invalidate the whole view

35. Draw Bitmap
BitmapFactory: creates Bitmap objects from various sources, including files, streams, and byte-arrays.
// Create the bitmap object using BitmapFactory
// Access the application resource, and then retrieve the drawable
Bitmap bitmap = BitmapFactory.decodeResource(this.getResources(), R.drawable.plane);
// Draw the bitmap on the canvas
canvas.drawBitmap(bitmap, currentX, currentY, paint);
Class Reference:
Training:

36. How Android Draws Views
When an Activity receives the focus, it must provide the root node of its layout hierarchy to the Android system
Start the draw procedure from the root of the layout hierarchy
Drawing the layout is a two pass process
Measuring pass (via onMeasure()) to compute the dimension metrics of View object
Layout pass (via onLayout()) to position the View objects
Drawing the View object in the layout by triggering invalidate() method of each View object

37. Reading Using lists in Android
e.html
Creating custom and compound Views in Android
/article.html