EECS 4443 Mobile User Interfaces More About Layouts Scott MacKenzie York University Overview (Review) A layout defines the visual structure for a user interface, such as the UI for an activity or app widget Two ways to declare a layout: 1. XML vocabulary. Android provides a straightforward XML vocabulary that organizes the View classes and subclasses, such as those for widgets and layouts. 2. Java code. Instantiate layout elements at runtime. Create and configure View and ViewGroup objects programmatically. 2 1
XML advantage: XML vs. Code Better separation of the presentation of an application from the code that controls its behaviour UI descriptions are external to the application code (simplifies modifications, promotes re use) Easier to visualize the UI structure Easier to debug 3 XML (main.xml) Demo Android 4 2
XML (main.xml) Demo Android Elements Attributes 5 XML main.xml ID Attribute @ The string is expanded as an XML resource + Anew resource to create and add to R.java Code DemoAndroidActivity.java gen R.java 6 3
Load the XML Resource DemoAndroidActivity.java 7 Layout Parameters (1) Layout attributes take the form layout_something Define layout parameters for the views in the view group Parent class ViewGroup.LayoutParams All ViewGroup classes implement a nested class that extends ViewGroup.LayoutParams Examples: LinearLayout LinearLayout.LayoutParams RelativeLayout RelativeLayout.LayoutParams Next slide 8 4
Layout Parameters (2) 9 Common Layouts 10 5
LinearLayout (1) Demo Android 11 LinearLayout (2) Supports Layout Weight for child views Weights assign importance to views Sets relative space a view occupies Larger weight (e.g., 3 ) more space Smaller weight (e.g., 1 ) less space Default is 0 (space provided as necessary) Specified weights will fill available space in proportion to the values Example (next slide) 12 6
LinearLayout (3) Demo Scale main.xml <LinearLayout... > <TextView android:layout_width="fill_parent android:layout_height="wrap_content.../> PaintPanel height fills available space <...PaintPanel android:layout_width="fill_parent android:layout_height="0dp android:layout_weight="1".../> <LinearLayout android:layout_width="fill_parent android:layout_height="wrap_content android:orientation="horizontal"...>... </LinearLayout> </LinearLayout> 13 RelativeLayout (1) Demo Layout 14 7
RelativeLayout (2) layout-land/main.xml edittext1 <RelativeLayout...> <EditText android:id="@+id/edittext1 android:layout_alignparenttop="true.../> button1 button2 <Button android:id="@+id/button1 android:layout_alignleft="@id/edittext1 android:layout_below="@id/edittext1.../> <Button android:id="@+id/button2" android:layout_below="@id/edittext1" android:layout_torightof="@id/button1.../>... </RelativeLayout> 15 Building Layouts With Adapters If The layout is dynamic (not pre determined) Then Use a layout that subclasses AdapterView to populate the layout with views at runtime (e.g., ListView, GridView) AdapterView Uses an Adapter to bind data to its layout Behaves as a middle man between the data source and the AdapterView layout The Adapter retrieves the data (from a source such as an array) and converts each entry into a view that is added into the AdapterView layout 16 8
ListView Demo ListView 17 GridView Demo GridView 18 9
Filling An Adapter View With Data Populate an AdapterView (e.g., ListView) by binding the AdapterView instance to an Adapter The Adapter retrieves data from an external source and creates a View for each data entry Don t use Adapter directly Do use a subclass of Adapter Examples: ArrayAdapter (next slide) CursorAdapter (no demo yet) 19 ArrayAdapter Used if the data source is an array By default ArrayAdapter creates a view for each array item by calling tostring() on each item and placing the contents in a TextView Or If you want an ImageView (instead of a TextView) Extend ArrayAdapter and override getview to return an ImageView Examples: Demo ListView, Demo GridView 20 10
Homework For the demo programs in these slides Download Import into Android projects Run on your Android device (use USB debugging mode) Read APIs (and links within) Study code 21 Thank You 22 11