This document provides information on various widgets and UI elements in Android, including TextViews, EditTexts, buttons, checkboxes, radio buttons, toggle buttons, spinners, list views, alert dialogs, pickers, the ActionBar, and notifications. It describes the XML attributes and common methods for each widget, and provides references to the Android developer documentation for further information. It also includes examples of how to implement things like custom dialogs, navigation with the up button, adding an action view to the ActionBar, and displaying notifications.

1. 3
Widget & UI
Anuchit Chalothorn
anoochit@gmail.com
Licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

2. Widget
Widget has properties, you can use activity
design to config the properties or use layout
editor to edit XML document.

5. Text View
XML Attribute
● android:textColor="#33333"
● android:text="Hello World"
● android:textSize="30sp"
Methods
● setText
● setTypeFace
Ref: http://developer.android.com/reference/android/widget/TextView.html

6. Edit Text
XML Attribute
● android:inputType="text"
Methods
● getText
● setText
Ref: http://developer.android.com/reference/android/widget/EditText.html

7. Edit Text inputType
● text ● number
● textPersonName ● numberSigned
● textPassword ● numberDecimal
● numberPassword ● AutoCompleteTextView
● textEmailAddress ● MultiAutoCompleteTextView
● phone
● textPostalAddress
● textMultiLine
● time
● date
Ref: http://developer.android.com/guide/topics/ui/controls/text.html

8. Buttons
XML Attribute
● android:style="?android:attr/buttonStyleSmall"
● android:text="Button"
Methods
● setOnClickListener
Ref: http://developer.android.com/reference/android/widget/Button.html

9. Checkboxes
Methods
● isChecked
● setChecked(true)
● setOnClickListener
Ref: http://developer.android.com/reference/android/widget/CheckBox.html

10. Radio Buttons
Use with RadioGroup Layout
Methods
● isChecked
● toggle
● setOnClickListener
Ref: http://developer.android.com/guide/topics/ui/controls/radiobutton.html

11. Toggle Buttons
XML Attribute
● android:textOn="Vibrate on"
● android:textOff="Vibrate off"
Methods
● setOnCheckedChangeListener
Ref: http://developer.android.com/guide/topics/ui/controls/togglebutton.html

12. Workshop: Input Form
Create form input for register new user to the
system (fake), use following fields:
● Firstname Lastname (Edit Text)
● Birthdate (Edit Text, Datepicker)
● Gender (Radio Button)
● Subscribe (Checkbox)
● Email (Edit Text)
● Password (Edit Text)
● Submit Button (Button)

14. Spinner
The choices you provide for the spinner can
come from any source, but must be provided
through an SpinnerAdapter, such as an
ArrayAdapter if the choices are available in an
array or a CursorAdapter if the choices are
available from a database query.
Ref: http://developer.android.com/guide/topics/ui/controls/spinner.html

15. Spinner
String resource file:
Spinner spinner = (Spinner) findViewById(R.id.spinner);
// Create an ArrayAdapter using the string array and a default
spinner layout
ArrayAdapter<CharSequence> adapter = ArrayAdapter.
createFromResource(this,R.array.services, android.R.layout.
simple_spinner_item);
// Specify the layout to use when the list of choices appears
adapter.setDropDownViewResource(android.R.layout.
simple_spinner_dropdown_item);
// Apply the adapter to the spinner
spinner.setAdapter(adapter);

16. Spinner
Methods
● getSelectedItem
● getSelectedItemId
● getSelectedItemPosition
Listener
● setOnClickListener
● setOnItemSelectedListener

18. List View
The display of elements in a lists is a very
common pattern in mobile applications. The
user sees a list of items and can scroll through
them.

19. List View
Listener
● setOnItemClickListener
● setOnLongClickListener

21. Multi Columns List View
Custom layout listview row, use adapter select
data show in custom layout

24. Alert Dialog
A dialog that can show a title, up to three
buttons, a list of selectable items, or a custom
layout.
Ref: http://developer.android.com/guide/topics/ui/dialogs.html

26. Dialog with Custom Layout
If you want to create your own dialogs, you
create a layout file for the dialog. This layout file
is assigned to the dialog via the
setContentView() method

28. Picker
Android provides controls for the user to pick a
time or pick a date as ready-to-use dialogs.
Using these pickers helps ensure that your
users can pick a time or date that is valid,
formatted correctly, and adjusted to the user's
locale.
Ref: http://developer.android.com/guide/topics/ui/controls/pickers.html

29. Time Picker
In Android, you can use android.widget.
TimePicker class to render a time picker
component to select hour and minute in a pre-
defined user interface, render a dialog box via
android.app.TimePickerDialog

31. Date Picker
In Android you can use android.widget.
DatePicker class to render a date picker
component to select day, month and year in a
pre-defined user interface and render dialog
box via android.app.DatePickerDialog.

33. ActionBar
The ActionBar is located at the top of the
activity. It can display the activity title, icon,
actions which can be triggered, additional views
Views other interactive items. It can also be
used for navigation in your application.
Ref: http://developer.android.com/guide/topics/ui/actionbar.html

34. ActionBar in old devices
ActionBar has introduced in Android 3.0, The
ActionBar Sherlock library allow to use the
ActionBar on old devices as Android 1.6

35. ActionBar : Home Button
The ActionBar shows an icon of your application, this is
called the home icon. If you select this icon the
onOptionsItemSelected() method will be called with the
value android.R.id.home. The recommendation is to
return to the main Activity in your program.
ActionBar actionbar = getActionBar();
actionbar.setHomeButtonEnabled(true);

37. Workshop: Navigating Up
Like home button, ActionBar can use as up
navigation or goto parent activity, to enable up
button use setDisplayHomeUpEnabled()
method. You should include
FLAG_ACTIVITY_CLEAR_TOP in the Intent.

39. ActionBar: Action View
a custom View can add to ActionBar, use
setCustomView method and enable display of
custom View via setDisplay methods in
ActionBar.DISPLAY_SHOW_CUSTOM flag.

40. Workshop: Action View
Create an App with ActionBar, has 2 option
menus refresh and setting, after push refresh
menu the show the progress bar.

42. ActionBar: Indeterminate progress
ActionBar can show progress bar use
requestWindowsFeature in request to use
interminate progress bar
requestWindowFeature(Window.
FEATURE_INDETERMINATE_PROGRESS);
setProgressBarIndeterminateVisibility(true);

44. ActionBar: Dimming navigation
You can also hide the software navigation button in
your Android application to have more space
available. If the user touches the button of the
screen the navigation button are automatically
shown again.
getWindow().
getDecorView(). setSystemUiVisibility(View.
SYSTEM_UI_FLAG_HIDE_NAVIGATION);

46. Notification
Android allows to put notification into the
titlebar of your application. The user can
expand the notification bar and by selecting the
notification the user can trigger another activity.
Ref: http://developer.android.com/guide/topics/ui/notifiers/notifications.html

47. Notification
To create notifications you use the
NotificationManager class which can be
received from the Context, e.g. an activity or a
service, via the getSystemService() method.
Notification noti = new Notification.Builder(this)
.setContentTitle("Title")
.setContentText("Body").build();

48. Notification
NotificationManager notificationManager =
(NotificationManager) getSystemService
(NOTIFICATION_SERVICE);
// Hide the notification after its selected
noti.flags |= Notification.FLAG_AUTO_CANCEL;
notificationManager.notify(0, noti);

49. Workshop: Notification
Create App with a single button, after push
button the notification will appear in the
notification bar and use can cancel notification.

51. End