Android App Development 03 : Widget & UI

3
Widget & UI
Anuchit Chalothorn
anoochit@gmail.com

Licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

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

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

Edit Text
XML Attribute
● android:inputType="text"
Methods
● getText
● setText

Ref: http://developer.android.com/reference/android/widget/EditText.html

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

Buttons
XML Attribute
● android:style="?android:attr/buttonStyleSmall"
● android:text="Button"
Methods
● setOnClickListener

Ref: http://developer.android.com/reference/android/widget/Button.html

Checkboxes
Methods
● isChecked
● setChecked(true)

Ref: http://developer.android.com/reference/android/widget/CheckBox.html

Radio Buttons
Use with RadioGroup Layout
Methods
● isChecked
● toggle

Ref: http://developer.android.com/guide/topics/ui/controls/radiobutton.html

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

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)

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

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);

Spinner
Methods
● getSelectedItem
● getSelectedItemId
● getSelectedItemPosition
Listener
● setOnItemSelectedListener

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.

List View
Listener
● setOnItemClickListener
● setOnLongClickListener

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

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

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

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

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

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.

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

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

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);

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.

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.

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

ActionBar: Indeterminate progress
ActionBar can show progress bar use
requestWindowsFeature in request to use
interminate progress bar

requestWindowFeature(Window.
FEATURE_INDETERMINATE_PROGRESS);
setProgressBarIndeterminateVisibility(true);

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);

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

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();

Notification

NotificationManager notificationManager =
(NotificationManager) getSystemService
(NOTIFICATION_SERVICE);

// Hide the notification after its selected
noti.flags |= Notification.FLAG_AUTO_CANCEL;

notificationManager.notify(0, noti);

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

Android App Development 03 : Widget & UI

Recommended

More Related Content

Viewers also liked (18)

Similar to Android App Development 03 : Widget & UI (20)

More from Anuchit Chalothorn (20)