Graphical User Interface (GUI) components

1. Graphical User Interface (GUI) components Aim: display graphical things on screen and interact with user Means: use (descendants of) the View class Two groups: • “Normal” Views: basic elements of the GUI TextView (label), EditText(text box), Button, RadioButton, CheckBox, ImageButton (button on which one can display a picture) and many more • ViewGroup: can contain other Views, including other ViewGroups layouts (define how the Views contained in it are displayed), e.g., LinearLayout (displays children next to each other, horizontally or vertically) AdapterViews (children determined by an Adapter, a helper class that is not visible), e.g. ListView (displays list of items) • AllViews can react to touch events! Special role: Canvas – not a descendant of View (do not confuse with canvas of Graphical designer!) Used to draw on, e.g., an ImageButton GUI classes in Android similar but different from standard Java GUI classes

2. Choice of components and how to get help (show) • Find a View in the Palette of the Graphical Designer that seems to fulfill the function that you need • Look up the API in the Android reference to find more detail • Choose from drop-down list to get the API reference for the class • Complete the name of the View and enter will get you to a page with references to other relevant Google documentation (tutorials, (related) API references) • Use the web to find out more if needed (Google’s documentation is not always clear and complete – other users have stumbled across the same problem!)

3. GUI – View – constructor, position and size All Views have a constructor that takes a Context as argument (usually the Activity) – Context is discussed later Position of View can be set with setX and setY, both of which take a float (huh?) as argument which specifies position in pixels. The size of a View v can be set (and passed to its parent) with v.setLayoutParams which takes as arguments a parameter of type ViewGroup.LayoutParamsor a subclass of this class, depending on the parent ViewGroup Constructor of LayoutParams takes two integers: a width and a height in pixels Special values: MATCH_PARENT (== FILL_PARENT) - fill up parent (-1) WRAP_CONTENT - be big enough to enclose content (-2) With Graphical Designer or in XML one can specify a unit, e.g., px (pixels), dp (density-independent pixels i.e. size of a pixel at 160 dpi) or mm, e.g., 10px, 100mm

4. GUI – View methods Some of the methods defined by View: • setBackgroundColor(intcolor) set background color; Color has various constants such as Color.WHITE custom colors can be defined in colors.xml (via Graphical Designer) • setVisibility(intvisibility) make View (in)visible • setOnClickListener(View.OnClickListener l) set an OnClickListener to handle click events (click == touch + lift) • setOnTouchListener(View.OnTouchListenerl) set an OnTouchListener to handle touch events (touch, lift, motion) • onDraw(Canvas canvas) implement to draw on the View • invalidate() force a redraw

5. GUI – TextView and EditText Most important methods: • setText(CharSequencetext) set the text of the View • setTextColor(intcolor) set the color of the text • setTextSize(float size) set the text size (“scaled pixel” units: essentially the same as a dp but scaled by user’s preferred text size, i.e. the font size set in Settings/Display/Font Size on the device) • EditablegetText() get the text displayed by the View, in particular, for an EditText; calling toString() on the return value converts it to a String

6. GUI – events When the user touches the screen, Android determines from the coordinates where the screen was touched. From that, it calculates which View was touched. Android then searches for a class that implements the OnClickListener or the OnTouchListener interface and that is registered as a listener for this particular View Registering is done with a call v.setOnClickListener(this) or v.setOnTouchListener(this); A class that implements one of these interfaces must implement the onClick resp. the onTouch method. These methods are then called with a parameter that is a reference to the View from which the event originated. A class may “listen” to several Views Touching the screen always gives 1 click event, but at least two touch events

7. OnClickListener Interface with one method: public void onClick(View v) View: View that was clicked Touching a View results in a single call to the onClick method of the listener Typically used for Buttons

8. OnTouchListener Interface with one method: public booleanonTouch(View v, MotionEvent event) View: View that was clicked MotionEvent: event that caused the call returns: whether the event was handled Method can be invoked many times, but at least called for an “ACTION_DOWN” and an “ACTION_UP” event (see demo) Usage (in body of onTouch): intaction = event.getAction(); switch (action){ case MotionEvent.ACTION_DOWN: ... }

9. On the Asus I have from BCF, when OnTouchListener is registered, the onClick method is not called any more. On the AVD on my PC, the onClick IS called Not clear if this is a bug and if different devices may respond differently…

10. OnTouchListener Registering an OnTouchListener for a View: OnClickListener not invoked Touching a View and moving along the view: sequence of events can include: Typical actions: value (NEVER USE! – only for demo) MotionEvent.ACTION_DOWN 0 MotionEvent.ACTION_UP 1 MotionEvent.ACTION_MOVE 2 MotionEvent.ACTION_CANCEL 3(canceled gesture) MotionEvent.ACTION_POINTER_2_DOWN 261(second finger down) MotionEvent.ACTION_POINTER_2_UP 262(second finger up)

11. Other events: Type On in the search box of the package index: many listeners Examples (arbitrarily chosen): OnAccountsUpdateListener Listener called when the AccountManager starts up and whenever the account set changes OnNavigationListener Listener called whenever a navigation item in your action bar is selected OnBreadCrumbClickListener Listener called when a bread crumb is clicked (whatever that may be) OnShowListener Listener called when a dialog is shown.

12. GUI – Button No additional (interesting) methods • Usage: // implement OnClickListener interface to respond to events public class SimpleDemoextends Activity implementsOnClickListener{ // either class attribute or local variable Button b; // create button (in onCreate method) b = new Button(this); // set its on click listener b.setOnClickListener(this); // we could make a separate class for this // add method to handle the event public void onClick(View v) { if(v== ...){ // if check is needed // do something } }

13. GUI – Layouts - LinearLayout Normally, top-level element in GUI is a ViewGroup (otherwise only one element possible): usually a layout; see, e.g., Hello Layouts have method addView(View child) to add a child View to it (but there are more, e.g., addView(View child, int index) to insert child at position index. LinearLayout: lay out children either horizontally or vertically next to each other Methods: • setOrientation(int orientation) orientation can be LinearLayout.HORIZONTAL orLinearLayout.VERTICAL • Methods to set the gravity (determines how children are positioned – will not be discussed)

14. GUI – GridLayout GridLayoutdisplays children in a grid – very flexible! Methods: • setRowCount(int rows) • setColumnCount(int columns) By default,addView adds successively added child Views to successive cells depending on the orientation of the GridLayout: HORIZONTAL(default) will fill from left to right and from top to bottom; VERTICAL from top to bottom and left to right. Next slide shows how to make more fancy layouts and to control exactly which view is added to which cell(s), but as this uses static inner classes which are not treated, this is included f.y.i. only

15. (information on this slide not part of exam) Children can occupy several rows/ columns, e.g.: Which and how many rows/columns each child Viewv occupies is determined by the GridLayout.LayoutParamspassed in v.setLayoutParams Constructor: GridLayout.LayoutParams(GridLayout.SpecrowSpec, GridLayout.SpeccolSpec) GridLayout.Spec:create with static methods spec(...) ofGridLayoutto set start row/column, row/column span and alignment, e.g., GridLayout.SpecrowSpec = new GridLayout.spec(0,1); // start row, #rows GridLayout.SpeccolSpec = new GridLayout.spec(0,2); // start col, #cols Place child View in row 0, 2 cells wide and in column 0, 1 cell high (top-left child View)

16. GUI – GridLayout(continued) The Graphical Designer (GD) for GridLayout in the current version of the IDE is useable but must be used with care to get the result you want. Previous version of the IDE, the designer for GridLayout: was a . It was almost impossible to position children; column/row count changed spontaneously… (still does, but otherwise better) Other possibilities: Use code Or create GridLayoutwith one child with GD and then copy/paste in the layout.xml (OUTSIDE Eclipse) to create the layout you want. Advantage of this: result is visible in GD! Notice: (1,1) in GD pop up means row 0, column 0! nightmare

17. GUI – GridLayout(continued) XML after trying to add buttons • <?xml version="1.0" encoding="utf-8"?> <= created with GD • <GridLayoutxmlns:android="http://schemas.android.com/apk/res/android" • android:layout_width="match_parent" • android:layout_height="wrap_content" • android:columnCount="3" <= set with GD • android:rowCount="3" > • <ImageButton • android:id="@+id/imageButton1" • android:layout_column="0" • android:layout_columnSpan="3"<= oops – 1 was meant • android:layout_gravity="left" • android:layout_row="0" • android:layout_rowSpan="4"<= oops – 1 was meant • android:src="@drawable/white_icon" /> • </GridLayout> • Copy and paste the red part as many times as required and set id, column/row and column/rowSpan to appropriate values • Demo: show use of GD

18. GUI – RelativeLayout (fyi only) • RelativeLayout allows to position children relative to the parent or to each other • Views define positions with RelativeLayout.LayoutParams(static inner class) • Constructor of these LayoutParams takes width and height as parameters: • RelativeLayout.LayoutParamsrllp = • new RelativeLayout.LayoutParams.LayoutParams(intw, int h); • With the import • import android.widget.RelativeLayout.LayoutParams; • this can be shortened to • LayoutParamsrllp = new LayoutParams(intw, int h);

19. Relative Layout - Methods of LayoutParams : • addRule(intverb) define what position is relative to, e.g., lp.addRule(RelativeLayout.ALIGN_PARENT_LEFT) lp.addRule(RelativeLayout.ALIGN_PARENT_TOP) align child with left and top of the parent • addRule(intverb, int anchor)anchor: id of another View relative to which the position is defined; constants like ALIGN_RIGHT specify the alignment (an id can not only be set with the GD, it can also be set for View v with the method v.setId(int id) • setMargins(intleft, int top, int right, int bottom) • set distance between the View used in the rule and the View itself • in the example above: only need to specify left and top • Example projects: RelativeLayoutExampleTestNest(XML) projects for complex layouts