Android App Development 03 : Widget & UI


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Android App Development 03 : Widget & UI

  1. 1. 3 Widget & UI Anuchit Chalothorn anoochit@gmail.comLicensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
  2. 2. WidgetWidget has properties, you can use activitydesign to config the properties or use layouteditor to edit XML document.
  3. 3. Text ViewXML Attribute ● android:textColor="#33333" ● android:text="Hello World" ● android:textSize="30sp"Methods ● setText ● setTypeFaceRef:
  4. 4. Edit TextXML Attribute ● android:inputType="text"Methods ● getText ● setTextRef:
  5. 5. Edit Text inputType● text ● number● textPersonName ● numberSigned● textPassword ● numberDecimal● numberPassword ● AutoCompleteTextView● textEmailAddress ● MultiAutoCompleteTextView● phone● textPostalAddress● textMultiLine● time● dateRef:
  6. 6. ButtonsXML Attribute ● android:style="?android:attr/buttonStyleSmall" ● android:text="Button"Methods ● setOnClickListenerRef:
  7. 7. CheckboxesMethods ● isChecked ● setChecked(true) ● setOnClickListenerRef:
  8. 8. Radio ButtonsUse with RadioGroup LayoutMethods ● isChecked ● toggle ● setOnClickListenerRef:
  9. 9. Toggle ButtonsXML Attribute ● android:textOn="Vibrate on" ● android:textOff="Vibrate off"Methods ● setOnCheckedChangeListenerRef:
  10. 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. 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. 12. SpinnerString resource file:Spinner spinner = (Spinner) findViewById(;// Create an ArrayAdapter using the string array and a defaultspinner layoutArrayAdapter<CharSequence> 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. 13. SpinnerMethods ● getSelectedItem ● getSelectedItemId ● getSelectedItemPositionListener ● setOnClickListener ● setOnItemSelectedListener
  14. 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. 15. List ViewListener ● setOnItemClickListener ● setOnLongClickListener
  16. 16. Multi Columns List ViewCustom layout listview row, use adapter selectdata show in custom layout
  17. 17. Alert DialogA dialog that can show a title, up to threebuttons, a list of selectable items, or a customlayout.Ref:
  18. 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. 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. 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. 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. 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. 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. 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. 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. 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. 27. Workshop: Action ViewCreate an App with ActionBar, has 2 optionmenus refresh and setting, after push refreshmenu the show the progress bar.
  28. 28. ActionBar: Indeterminate progressActionBar can show progress bar userequestWindowsFeature in request to useinterminate progress barrequestWindowFeature(Window.FEATURE_INDETERMINATE_PROGRESS);setProgressBarIndeterminateVisibility(true);
  29. 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. 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. 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. 32. NotificationNotificationManager notificationManager = (NotificationManager) getSystemService(NOTIFICATION_SERVICE);// Hide the notification after its selectednoti.flags |= Notification.FLAG_AUTO_CANCEL;notificationManager.notify(0, noti);
  33. 33. Workshop: NotificationCreate App with a single button, after pushbutton the notification will appear in thenotification bar and use can cancel notification.
  34. 34. End
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.