android app development 03 : widget & ui

Download Android App Development 03 : Widget & UI

Post on 28-Jan-2015




3 download

Embed Size (px)




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

2. WidgetWidget has properties, you can use activitydesign to config the properties or use layouteditor to edit XML document. 3. Text ViewXML Attribute android:textColor="#33333" android:text="Hello World" android:textSize="30sp"Methods setText setTypeFaceRef: 4. Edit TextXML Attribute android:inputType="text"Methods getText setTextRef: 5. Edit Text inputType text number textPersonName numberSigned textPassword numberDecimal numberPassword AutoCompleteTextView textEmailAddress MultiAutoCompleteTextView phone textPostalAddress textMultiLine time dateRef: 6. ButtonsXML Attribute android:style="?android:attr/buttonStyleSmall" android:text="Button"Methods setOnClickListenerRef: 7. CheckboxesMethods isChecked setChecked(true) setOnClickListenerRef: 8. Radio ButtonsUse with RadioGroup LayoutMethods isChecked toggle setOnClickListenerRef: 9. Toggle ButtonsXML Attribute android:textOn="Vibrate on" android:textOff="Vibrate off"Methods setOnCheckedChangeListenerRef: 10. Workshop: Input FormCreate form input for register new user to thesystem (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) 11. SpinnerThe choices you provide for the spinner cancome from any source, but must be providedthrough an SpinnerAdapter, such as anArrayAdapter if the choices are available in anarray or a CursorAdapter if the choices areavailable from a database query.Ref: 12. SpinnerString resource file:Spinner spinner = (Spinner) findViewById(;// Create an ArrayAdapter using the string array and a defaultspinner layoutArrayAdapter adapter = ArrayAdapter.createFromResource(this,, 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); 13. SpinnerMethods getSelectedItem getSelectedItemId getSelectedItemPositionListener setOnClickListener setOnItemSelectedListener 14. List ViewThe display of elements in a lists is a verycommon pattern in mobile applications. Theuser sees a list of items and can scroll throughthem. 15. List ViewListener setOnItemClickListener setOnLongClickListener 16. Multi Columns List ViewCustom layout listview row, use adapter selectdata show in custom layout 17. Alert DialogA dialog that can show a title, up to threebuttons, a list of selectable items, or a customlayout.Ref: 18. Dialog with Custom LayoutIf you want to create your own dialogs, youcreate a layout file for the dialog. This layout fileis assigned to the dialog via thesetContentView() method 19. PickerAndroid provides controls for the user to pick atime or pick a date as ready-to-use dialogs.Using these pickers helps ensure that yourusers can pick a time or date that is valid,formatted correctly, and adjusted to the userslocale.Ref: 20. Time PickerIn Android, you can use android.widget.TimePicker class to render a time pickercomponent to select hour and minute in a pre-defined user interface, render a dialog box 21. Date PickerIn Android you can use android.widget.DatePicker class to render a date pickercomponent to select day, month and year in apre-defined user interface and render dialogbox via 22. ActionBarThe ActionBar is located at the top of theactivity. It can display the activity title, icon,actions which can be triggered, additional viewsViews other interactive items. It can also beused for navigation in your application.Ref: 23. ActionBar in old devicesActionBar has introduced in Android 3.0, TheActionBar Sherlock library allow to use theActionBar on old devices as Android 1.6 24. ActionBar : Home ButtonThe ActionBar shows an icon of your application, this iscalled the home icon. If you select this icon theonOptionsItemSelected() method will be called with thevalue The recommendation is toreturn to the main Activity in your program.ActionBar actionbar = getActionBar();actionbar.setHomeButtonEnabled(true); 25. Workshop: Navigating UpLike home button, ActionBar can use as upnavigation or goto parent activity, to enable upbutton use setDisplayHomeUpEnabled()method. You should includeFLAG_ACTIVITY_CLEAR_TOP in the Intent. 26. ActionBar: Action Viewa custom View can add to ActionBar, usesetCustomView method and enable display ofcustom View via setDisplay methods inActionBar.DISPLAY_SHOW_CUSTOM flag. 27. Workshop: Action ViewCreate an App with ActionBar, has 2 optionmenus refresh and setting, after push refreshmenu the show the progress bar. 28. ActionBar: Indeterminate progressActionBar can show progress bar userequestWindowsFeature in request to useinterminate progress barrequestWindowFeature(Window.FEATURE_INDETERMINATE_PROGRESS);setProgressBarIndeterminateVisibility(true); 29. ActionBar: Dimming navigationYou can also hide the software navigation button inyour Android application to have more spaceavailable. If the user touches the button of thescreen the navigation button are automaticallyshown again.getWindow().getDecorView(). setSystemUiVisibility(View.SYSTEM_UI_FLAG_HIDE_NAVIGATION); 30. NotificationAndroid allows to put notification into thetitlebar of your application. The user canexpand the notification bar and by selecting thenotification the user can trigger another activity.Ref: 31. NotificationTo create notifications you use theNotificationManager class which can bereceived from the Context, e.g. an activity or aservice, via the getSystemService() method.Notification noti = new Notification.Builder(this).setContentTitle("Title") .setContentText("Body").build(); 32. NotificationNotificationManager notificationManager =(NotificationManager) getSystemService(NOTIFICATION_SERVICE);// Hide the notification after its selectednoti.flags |= Notification.FLAG_AUTO_CANCEL;notificationManager.notify(0, noti); 33. Workshop: NotificationCreate App with a single button, after pushbutton the notification will appear in thenotification bar and use can cancel notification. 34. End