Android App Development 03 : Widget & UI

Widget & UIAnuchit Chalothornanoochit@gmail.com

3Licensed 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● textPersonName● textPassword● numberPassword● textEmailAddress● phone● textPostalAddress● textMultiLine● time● date

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

● number● numberSigned● numberDecimal● AutoCompleteTextView● MultiAutoCompleteTextView

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)● setOnClickListener

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

Radio Buttons

Use with RadioGroup LayoutMethods

● isChecked● toggle● setOnClickListener

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 layoutArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,R.array.services, android.R.layout.simple_spinner_item);// Specify the layout to use when the list of choices appearsadapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);// Apply the adapter to the spinnerspinner.setAdapter(adapter);

Spinner

Methods● getSelectedItem● getSelectedItemId● getSelectedItemPosition

Listener● setOnClickListener● 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 selectednoti.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.

End