1. Android 9: Input Controls Kirk Scott

2. The Great Crested Grebe • (Old World) • What you’ve probably seen in Anchorage: • The Red-Necked Grebe

7. These are the sections in this unit: • 9.1 Introduction • 9.2 Input Controls • 9.3 Buttons • 9.4 Text Fields • 9.5 Checkboxes • 9.6 Radio Buttons • 9.7 Toggle Buttons • 9.8 Spinners • 9.9 Pickers

8. 9.1 Introduction

9. As usual, the decision to present this material at this point is based partially on background ideas found in the book • The contents of the overheads consist largely of material taken from the online tutorials, with occasional commentary by me • The commentary will either be introduced as commentary or appear in square brackets • If not set off in this way, the content is taken from the tutorials

10. As mentioned before, what you’re getting is an idiosyncratic path through some of the various topics covered in the tutorials • The goal is to cover enough of the items involved in sufficient depth so that the perceptive learner could pick up more when needed

11. The more immediate goal is to provide material for the second half of the second homework assignment • You can pick from among the topics in this set of overheads for items to get points for on the assignment

12. 9.2 Input Controls

13. Input Controls • Input controls are the interactive components in your app's user interface. • Android provides a wide variety of controls you can use in your UI, such as buttons, text fields, seek bars, checkboxes, zoom buttons, toggle buttons, and many more.

15. Adding an input control to your UI is as simple as adding an XML element to your XML layout. • For example, here's a layout with a text field and button: • [See the following overhead. • If they show this again I’ll either have to cry or stop copying it…]

16. <?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="horizontal">    <EditTextandroid:id="@+id/edit_message"android:layout_weight="1"android:layout_width="0dp"android:layout_height="wrap_content"android:hint="@string/edit_message" />    <Button android:id="@+id/button_send"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="@string/button_send"android:onClick="sendMessage" /></LinearLayout>

17. Each input control supports a specific set of input events so you can handle events such as when the user enters text or touches a button. • [This bland statement is actually of some consequence. • It touches on the topic of event handling. • We’ve seen that with buttons and sendMessage(), but it’s a much broader topic.]

18. Common Controls • Here's a list of some common controls that you can use in your app. • Follow the links to learn more about using each one. • [On the overheads following the next one.]

19. Note: • Android provides several more controls than are listed here. • Browse the android.widget package to discover more. • If your app requires a specific kind of input control, you can build your own custom components.

22. 9.3 Buttons

23. Buttons • A button consists of text or an icon (or both text and an icon) that communicates what action occurs when the user touches it. • Depending on whether you want a button with text, an icon, or both, you can create the button in your layout in three ways:

24. With text, using the Button class: • <Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="@string/button_text"    ... />

25. With an icon, using the ImageButton class: • <ImageButtonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/button_icon"    ... />

26. With text and an icon, using the Button class with the android:drawableLeft attribute: • <Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="@string/button_text"android:drawableLeft="@drawable/button_icon"    ... />

27. Responding to Click Events • When the user clicks a button, the Button object receives an on-click event. • To define the click event handler for a button, add the android:onClick attribute to the <Button> element in your XML layout.

28. The value for this attribute must be the name of the method you want to call in response to a click event. • The Activity hosting the layout must then implement the corresponding method. • For example, here's a layout with a button using android:onClick:

29. <?xml version="1.0" encoding="utf-8"?><Button xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/button_send"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="@string/button_send"android:onClick="sendMessage" />

30. Within the Activity that hosts this layout, the following method handles the click event: • /** Called when the user touches the button */public void sendMessage(View view) {    // Do something in response to button click}

31. The method you declare in the android:onClick attribute must have a signature exactly as shown above. • Specifically, the method must: • Be public • Return void • Define a View as its only parameter (this will be the View that was clicked)

32. Using an OnClickListener • You can also declare the click event handler pragmatically rather than in an XML layout. • This might be necessary if you instantiate the Button at runtime or you need to declare the click behavior in a Fragment subclass. • [Notice the two conditions: • Either you’re creating the button at run time, • Or you’re coding with fragments.]

33. To declare the event handler programmatically, create an View.OnClickListener object and assign it to the button by calling setOnClickListener(View.OnClickListener). • For example: • [Wait. • First we’ll have a stroll down memory lane on anonymous inner classes and listeners.]

34. [Consider the code on the following overhead, taken from the CSCE 202 overheads. • A call is made to construct an instance of a class that implements the ActionListener interface. • The definition of the class immediately follows the constructor, and is part of the same line of code. • The critical element of the class definition is the one method, which is the listener method, which is declared in the interface. • The code defines an anonymous inner class and the listener object is an instance of it.]

35. ActionListenermyListener = new ActionListener() • { • public void actionPerformed(ActionEvent event) • { • String inputString = myField.getText(); • myOutputPanel.setString(inputString); • myField.setText(“”); • myOutputPanel.repaint(); • } • };

36. [Now consider the shown on the overhead following the next one, which is the next thing in the tutorials. • It doesn’t create a button. • It uses one defined in XML.

37. It creates an anonymous inner class which implements the View.OnClickListener interface. • The critical method is the onClick() method. • Note that I double checked the Android API, and this is an interface. • There are other, similar interfaces, like DialogInterface.OnClickListener.]

38. Button button = (Button) findViewById(R.id.button_send);button.setOnClickListener(new View.OnClickListener() {    public void onClick(View v) {        // Do something in response to button click    }});

39. Styling Your Button • The appearance of your button (background image and font) may vary from one device to another, because devices by different manufacturers often have different default styles for input controls. • [Note that the next two overheads actually give an insight into using themes and styles rather than information on specific attributes of buttons that can be set.]

40. You can control exactly how your controls are styled using a theme that you apply to your entire application. • For instance, to ensure that all devices running Android 4.0 and higher use the Holo theme in your app, declare android:theme="@android:style/Theme.Holo" in your manifest's <application> element. • Also read the blog post, Holo Everywhere for information about using the Holo theme while supporting older devices.

41. To customize individual buttons with a different background, specify the android:background attribute with a drawable or color resource. • Alternatively, you can apply a style for the button, which works in a manner similar to HTML styles to define multiple style properties such as the background, font, size, and others. • For more information about applying styles, see Styles and Themes.

42. Borderless button • One design that can be useful is a "borderless" button. • Borderless buttons resemble basic buttons except that they have no borders or background but still change appearance during different states, such as when clicked. • To create a borderless button, apply the borderlessButtonStyle style to the button. • For example:

43. <Buttonandroid:id="@+id/button_send"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="@string/button_send"android:onClick="sendMessage"    style="?android:attr/borderlessButtonStyle" />

44. Custom background • If you want to truly redefine the appearance of your button, you can specify a custom background. • Instead of supplying a simple bitmap or color, however, your background should be a state list resource that changes appearance depending on the button's current state.

45. [It could be a simple bitmap or color, but they want to show something a little more interesting, a state list.] • You can define the state list in an XML file that defines three different images or colors to use for the different button states.

46. To create a state list drawable for your button background: • 1. Create three bitmaps for the button background that represent the default, pressed, and focused button states. • To ensure that your images fit buttons of various sizes, create the bitmaps as Nine-patch bitmaps.

47. 2. Place the bitmaps into the res/drawable/ directory of your project. • Be sure each bitmap is named properly to reflect the button state that they each represent, such as button_default.9.png, button_pressed.9.png, and button_focused.9.png.

48. 3. Create a new XML file in the res/drawable/ directory (name it something like button_custom.xml). • Insert the following XML:

49. <?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@drawable/button_pressed"android:state_pressed="true" />    <item android:drawable="@drawable/button_focused"android:state_focused="true" />    <item android:drawable="@drawable/button_default" /></selector> • [Notice the tags, selector and item.]

50. This defines a single drawable resource, which will change its image based on the current state of the button. • The first <item> defines the bitmap to use when the button is pressed (activated). • The second <item> defines the bitmap to use when the button is focused (when the button is highlighted using the trackball or directional pad). • The third <item> defines the bitmap to use when the button is in the default state (it's neither pressed nor focused).