android app development 03 : widget & ui
DESCRIPTION
TRANSCRIPT
Widget & UIAnuchit [email protected]
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