Android Programming Lecture 6 Testing notes List View and Custom View

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)

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

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); }

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

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

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 }

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(); } }

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

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:id="@android:id/list" 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 "@android:id/list" 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); }

Customize Cells customize the cells

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="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <ImageView android:id="@+id/icon" android:layout_width="20dp" android:layout_height="wrap_content" android:layout_marginLeft="4dp" android:layout_marginRight="4dp" android:layout_marginTop="4dp" android:src="@drawable/dog" /> <TextView android:id="@+id/label" android:layout_width="wrap_content" android:textSize=“15sp" /> </LinearLayout>

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.

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

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

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

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

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; } }

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); }

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.

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

View Class Base class for widgets and ViewGroup

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

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

Activity class Custom View class

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

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

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

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

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: http://developer.android.com/reference/android/graphics/Canvas.html

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

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

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

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

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: http://developer.android.com/reference/android/graphics/BitmapFactory.html Training: http://developer.android.com/training/displaying-bitmaps/index.html

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

Reading Using lists in Android http://www.vogella.com/tutorials/AndroidListView/articl e.html Creating custom and compound Views in Android http://www.vogella.com/tutorials/AndroidCustomViews /article.html