MOBILE APPLICATION DEVELOPMENT LECTURE 08 UI AND EVENT HANDLING IMRAN IHSAN ASSISTANT PROFESSOR WWW.IMRANIHSAN.COM User Interface User Interface The Android Widget Toolbox 1. TextView 2. EditText 3. Spinner 4. Button 5. CheckBox 6. RadioButton 7. DatePicker 8. TimePicker Layouts 1. FrameLayout 2. LinearLayout 3. RelativeLayout 4. TableLayout 5. AbsoluteLayout 6. GridLayout 7. Tab Layout We have already used TextView, EditText and Button 1
Toasts A toast provides simple feedback about an operation in a small popup. It only fills the amount of space required for the message and the current activity remains visible and interactive. For example, navigating away from an email before you send it triggers a "Draft saved" toast to let you know that you can continue editing later. Toasts automatically disappear after a timeout. Toast Button and Toast Widget Edit Text Button Toast 2
Button and Toast Button Button and Toast Toast 3
Button and Toast Final Picture Custom Button We ll create an image button with 3 states Normal Focused Pressed Using the Button widget and an XML file that defines three different images to use for the different button states. When the button is pressed, a short message will be displayed. 1. Copy the images on the right into the res/drawable/ directory of your project. These will be used for the different button states. 2. Create a new file in the res/drawable/ directory named android_button.xml. Insert the following XML: This defines a single drawable resource, which will change its image based on the current state of the button. 4
Custom Button 3. Open the res/layout/main.xml file and add the Button element: The android:background attribute specifies the drawable resource to use for the button background (which, when saved at res/drawable/android.xml, is referenced as @drawable/android). This replaces the normal background image used for buttons throughout the system. In order for the drawable to change its image based on the button state, the image must be applied to the background Custom Button 4. make the button do something when pressed, add the following code at the end of the oncreate() method: Normal Pressed After Pressed 5
Edit Textbox In this section, you will create a text field for user input, using the EditText widget. Once text has been entered into the field, the "Enter" key will display the text in a toast message. 1. Open the res/layout/main.xml file and add the EditText element (inside the LinearLayout): Edit Textbox Getting and setting a value from Edit Text field 6
Edit Textbox 2. To do something with the text that the user types, add the following code to the end of the oncreate() method: Edit Textbox http://www.101apps.co.za/index.php/articles/capturing-user-inputwith-android-s-textfields.html 7
Edit Textbox In this section, you will create a checkbox for selecting items, using the CheckBox widget. When the checkbox is pressed, a toast message will indicate the current state of the checkbox. 1. Open the res/layout/main.xml file and add the CheckBox element (inside the LinearLayout): Checkbox 2. To do something when the state is changed, add the following code to the end of the oncreate() method: 8
Checkbox Checkbox In this section, you will create two mutually-exclusive radio buttons (enabling one disables the other), using the RadioGroup and RadioButton widgets. When either radio button is pressed, a toast message will be displayed. 1. Open the res/layout/main.xml file and add two RadioButtons, nested in a RadioGroup (inside the LinearLayout): It's important that the RadioButtons are grouped together by the RadioGroup element so that no more than one can be selected at a time. This logic is automatically handled by the Android system. When one RadioButton within a group is selected, all others are automatically deselected 9
Radio Button 2. To do something when each RadioButton is selected, you need an View.OnClickListener. In this case, you want the listener to be re-usable, so add the following code to create a new member in the HelloFormStuff Activity 3. Now, at the bottom of the oncreate() method, add the following: Radio Button 10
Toggle Button In this section, you'll create a button used specifically for toggling between two states, using the ToggleButton widget. This widget is an excellent alternative to radio buttons if you have two simple states that are mutually exclusive ("on" and "off", for example). 1. Open the res/layout/main.xml file and add the ToggleButton element (inside the LinearLayout): Toggle Button 2. To do something when the state is changed, add the following code to the end of the oncreate() method: This captures the ToggleButton element from the layout, then adds an View.OnClickListener. The View.OnClickListener must implement the onclick(view) callback method, which defines the action to perform when the button is clicked. In this example, the callback method checks the new state of the button, then shows a Toast message that indicates the current state. 11
Toggle Button Rating Bar In this section, you'll create a widget that allows the user to provide a rating, with the RatingBar widget. 1. Open the res/layout/main.xml file and add the RatingBar element (inside the LinearLayout): 2. To do something when a new rating has been set, add the following code to the end of the oncreate() method: 12
Rating Bar Auto Complete To create a text entry widget that provides auto-complete suggestions, use the AutoCompleteTextView widget. Suggestions are received from a collection of strings associated with the widget through an ArrayAdapter In this tutorial, you will create a AutoCompleteTextView widget that provides suggestions for a country name. 13
Auto Complete 1. Start a new project named HelloAutoComplete. 2. Create an XML file named list_item.xml and save it inside the res/layout/ folder. Edit the file to look like this: This file defines a simple TextView that will be used for each item that appears in the list of suggestions Auto Complete 3. Open the res/layout/main.xml file and insert the following: The TextView is a label that introduces the AutoCompleteTextView widget. 14
Auto Complete 4. Open HelloAutoComplete.java and insert the following code for the oncreate() method: a. After the content view is set to the main.xml layout, the AutoCompleteTextView widget is captured from the layout with findviewbyid(int). b. A new ArrayAdapter is then initialized to bind the list_item.xml layout to each list item in the COUNTRIES string array (defined in the next step). c. Finally, setadapter() is called to associate the ArrayAdapter with the AutoCompleteTextView widget so that the string array will populate the list of suggestions. Auto Complete 5. Inside the HelloAutoComplete class, add the string array: 15
Auto Complete 6. Run the application Auto Complete 7. Recommended: This can be done with a <string-array< resource in your project res/values/strings.xml file. For example: 8. From source code: 16
To provide a widget for selecting a date, use the DatePicker widget, which allows the user to select the month, day, and year, in a familiar interface. 1. We ll create a DatePickerDialog, which presents the date picker in a floating dialog box at the press of a button. 2. When the date is set by the user, a TextView will update with the new date. 1. Start a new project named HelloDatePicker. 2. Open the res/layout/main.xml file and insert the following: This creates a basic LinearLayout with a TextView that will display the date and a Button that will open the DatePickerDialog. 17
3. Open HelloDatePicker.java 4. Add the following members to the class 5. Now we add following code in oncreate() method to capture View elements and add listener to the Button. 6. Now we show the dialog in button action 18
1. First, the content is set to the main.xml layout. 2. Then the TextView and Button elements are captured from the layout with findviewbyid(int). 3. A new View.OnClickListener is created for the Button, so that when it is clicked, it will call showdialog(int), passing the unique integer ID for the date picker dialog. 4. Using showdialog(int) allows the Activity to manage the life-cycle of the dialog and will call the oncreatedialog(int) callback method to request the Dialog that should be displayed. 5. Now we need to add a DataSetListener which will invoke when user selects a date 19
6. Now we see 6. Now we add this method to show the date in display TextView 20
7. We set the selected date in DatePicker and get it from callback 8. We add the following code to initiate with current date 21
2. oncreate 3. Callback method for creating dialog 4. Initialize a new DatePickerDialog.OnDateSetListen er for when the user has set the date (by clicking the "Set" button) 22
Time Picker To provide a widget for selecting a date, use the TimePicker widget, which allows the user to select the hour and minute in a familiar interface. 1. We ll create a TimePickerDialog, which presents the date picker in a floating dialog box at the press of a button. 2. When the time is set by the user, a TextView will update with the new time. Do it yourself 23
Time Picker Questions? 24