Android Application Development<br />User Interface<br />Ahsanul Karim<br />ahsanul.karim@sentinelbd.com<br />Sentinel Sol...
User Interface<br />Android User Interface: Day 7<br />The Android Widget Toolbox<br />TextView<br />EditText<br />Spinner...
User Interface<br />Today<br />The Android Widget Toolbox<br />TextView<br />EditText<br />Spinner<br />Button<br />CheckB...
User Interface<br />Android Widget Toolbox<br />Date Picker Tutorial<br />To provide a widget for selecting a date, use th...
User Interface<br />Android Widget Toolbox<br />Date Picker Tutorial (Cont.)<br />Start a new project named HelloDatePicke...
User Interface<br />Android Widget Toolbox<br />Date Picker Tutorial (Cont.)<br />3. Open HelloDatePicker.java <br />4. ad...
User Interface<br />Android Widget Toolbox<br />Date Picker Tutorial (Cont.)<br />5. Now we add following code in onCreate...
User Interface<br />Android Widget Toolbox<br />Date Picker Tutorial (Cont.)<br />First, the content is set to the main.xm...
User Interface<br />Android Widget Toolbox<br />Date Picker Tutorial (Cont.)<br />5. Now we need to add a DataSetListener ...
User Interface<br />Android Widget Toolbox<br />Date Picker Tutorial (Cont.)<br />6. Now we see<br />
User Interface<br />Android Widget Toolbox<br />Date Picker Tutorial (Cont.)<br />6. Now we add this method to show the da...
User Interface<br />Android Widget Toolbox<br />Date Picker Tutorial (Cont.)<br />7. We set the selected date in DatePicke...
User Interface<br />Android Widget Toolbox<br />Date Picker Tutorial (Cont.)<br />8. We add the following code to initiate...
User Interface<br />Android Widget Toolbox<br />Date Picker Tutorial (Cont.)<br />2. onCreate<br />
User Interface<br />Android Widget Toolbox<br />Date Picker Tutorial (Cont.)<br />3. callback method for creating dialog<b...
User Interface<br />Android Widget Toolbox<br />Date Picker Tutorial (Cont.)<br />
User Interface<br />Android Widget Toolbox<br />Time Picker Tutorial<br />To provide a widget for selecting a date, use th...
User Interface<br />Android Widget Toolbox<br />Time Picker Tutorial (Contd.)<br />Hints:<br />
User Interface<br />Android Widget Toolbox<br />Spinner Tutorial<br />Spinner is a widget similar to a drop-down list for ...
User Interface<br />Android Widget Toolbox<br />Spinner Tutorial (Contd.)<br />Start a new project named HelloSpinner<br /...
User Interface<br />Android Widget Toolbox<br />Spinner Tutorial (Contd.)<br />3. Create a strings.xml file in res/values/...
User Interface<br />Android Widget Toolbox<br />Spinner Tutorial (Contd.)<br />4. Now open the HelloSpinner.java file and ...
User Interface<br />Android Widget Toolbox<br />Spinner Tutorial (Contd.)<br />5. Now create a nested class that implement...
User Interface<br />Android Widget Toolbox<br />Spinner Tutorial (Contd.)<br />6. Now the MyOnItemSelectedListener needs t...
User Interface<br />Android Widget Toolbox<br />Spinner Tutorial (Contd.)<br />Run the application<br />
User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial<br />This tutorial introduces a variety of widgets ...
User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)<br />Start a new project named HelloFormSt...
User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)- Custom Button<br />We’ll create an image ...
User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)- Custom Button<br />3. Open the res/layout...
User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)- Custom Button<br />4. o make the button d...
User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)- Edit Text<br />In this section, you will ...
User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)- Edit Text<br />2. To do something with th...
User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)- Edit Text<br />
User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)- Check Box<br />In this section, you will ...
User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)- Check Box<br />2. To do something when th...
User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)- Check Box<br />
User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)- Radio Button<br />In this section, you wi...
User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)- Radio Button<br />2. To do something when...
User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)- Radio Button<br />
User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)- Toggle Button<br />In this section, you'l...
User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)- Toggle Button<br />2. To do something whe...
User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)- Toggle Button<br />
User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)- Rating Bar<br />In this section, you'll c...
User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)- Rating Bar<br />
Upcoming SlideShare
Loading in...5
×

Android User Interface Tutorial: DatePicker, TimePicker & Spinner

49,565

Published on

These slides are for self-learners and trainees of my BASIS and DIIT Android course.
I have used information, content and images from various sources. As these materials are for non-commercial use, I think they won’t infringe any copyright issue.

6 Comments
6 Likes
Statistics
Notes
No Downloads
Views
Total Views
49,565
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
626
Comments
6
Likes
6
Embeds 0
No embeds

No notes for slide

Android User Interface Tutorial: DatePicker, TimePicker & Spinner

  1. 1. Android Application Development<br />User Interface<br />Ahsanul Karim<br />ahsanul.karim@sentinelbd.com<br />Sentinel Solutions Ltd.<br />http://www.sentinelbd.com<br />
  2. 2. User Interface<br />Android User Interface: Day 7<br />The Android Widget Toolbox<br />TextView<br />EditText<br />Spinner<br />Button<br />CheckBox<br />RadioButton<br />DatePicker<br />TimePicker<br />Layouts<br />FrameLayout<br />LinearLayout<br />RelativeLayout<br />TableLayout<br />AbsoluteLayout<br />GridLayout<br />Tab Layout<br />We have already used TextView, EditText and Button<br />
  3. 3. User Interface<br />Today<br />The Android Widget Toolbox<br />TextView<br />EditText<br />Spinner<br />Button<br />CheckBox<br />RadioButton<br />DatePicker<br />TimePicker<br />We have already used TextView, EditText and Button<br />
  4. 4. User Interface<br />Android Widget Toolbox<br />Date Picker Tutorial<br />To provide a widget for selecting a date, use the DatePicker widget, which allows the user to <br />select the month, day, and year, in a familiar interface.<br />We’ll create a DatePickerDialog, which presents the date picker in a floating dialog box at the press of a button. <br />When the date is set by the user, a TextView will update with the new ate.<br />
  5. 5. User Interface<br />Android Widget Toolbox<br />Date Picker Tutorial (Cont.)<br />Start a new project named HelloDatePicker.<br />Open the res/layout/main.xml file and insert the following:<br />This creates a basic LinearLayout with a TextView that will display the date and a Button that <br />will open the DatePickerDialog.<br />
  6. 6. User Interface<br />Android Widget Toolbox<br />Date Picker Tutorial (Cont.)<br />3. Open HelloDatePicker.java <br />4. add the following members to the class<br />
  7. 7. User Interface<br />Android Widget Toolbox<br />Date Picker Tutorial (Cont.)<br />5. Now we add following code in onCreate() method to capture View elements and add <br />listener to the Button.<br />6. Now we show the dialog in button action<br />
  8. 8. User Interface<br />Android Widget Toolbox<br />Date Picker Tutorial (Cont.)<br />First, the content is set to the main.xml layout. <br />Then the TextView and Button elements are captured from the layout with <br />findViewById(int). <br />A new View.OnClickListeneris created for the Button, so that when it is clicked, <br />it will call  showDialog(int), passing the unique integer ID for the date picker <br />dialog. <br />Using showDialog(int) allows the Activity to manage the life-cycle of the dialog <br /> and will call the onCreateDialog(int) callback method to request the Dialog that <br /> should be displayed.<br />
  9. 9. User Interface<br />Android Widget Toolbox<br />Date Picker Tutorial (Cont.)<br />5. Now we need to add a DataSetListener which will invoke when user selects a date<br />
  10. 10. User Interface<br />Android Widget Toolbox<br />Date Picker Tutorial (Cont.)<br />6. Now we see<br />
  11. 11. User Interface<br />Android Widget Toolbox<br />Date Picker Tutorial (Cont.)<br />6. Now we add this method to show the date in display TextView<br />
  12. 12. User Interface<br />Android Widget Toolbox<br />Date Picker Tutorial (Cont.)<br />7. We set the selected date in DatePicker and get it from callback<br />
  13. 13. User Interface<br />Android Widget Toolbox<br />Date Picker Tutorial (Cont.)<br />8. We add the following code to initiate with current date<br />
  14. 14. User Interface<br />Android Widget Toolbox<br />Date Picker Tutorial (Cont.)<br />2. onCreate<br />
  15. 15. User Interface<br />Android Widget Toolbox<br />Date Picker Tutorial (Cont.)<br />3. callback method for creating dialog<br />4. Initialize a new <br />DatePickerDialog.OnDateSetListener<br />for when the user has set the date <br />(by clicking the "Set" button)<br />
  16. 16. User Interface<br />Android Widget Toolbox<br />Date Picker Tutorial (Cont.)<br />
  17. 17. User Interface<br />Android Widget Toolbox<br />Time Picker Tutorial<br />To provide a widget for selecting a date, use the TimePicker widget, which allows the user to <br />select the hour and minute in a familiar interface.<br />We’ll create a TimePickerDialog, which presents the date picker in a floating dialog box at the press of a button. <br />When the time is set by the user, a TextView will update with the new time.<br />Do it yourself<br />
  18. 18. User Interface<br />Android Widget Toolbox<br />Time Picker Tutorial (Contd.)<br />Hints:<br />
  19. 19. User Interface<br />Android Widget Toolbox<br />Spinner Tutorial<br />Spinner is a widget similar to a drop-down list for selecting items.<br />In this tutorial, you'll create a simple spinner widget that displays a list of planets. <br />When one is selected, a toast message will display the selected item.<br />
  20. 20. User Interface<br />Android Widget Toolbox<br />Spinner Tutorial (Contd.)<br />Start a new project named HelloSpinner<br />Open the res/layout/main.xml file and insert the following:<br />Notice that the TextView's android:text attribute and the Spinner's android:prompt attribute <br />both reference the same string resource. This text behaves as a title for the widget. When <br />applied to the Spinner, the title text will appear in the selection dialog that appears upon <br />selecting the widget.<br />
  21. 21. User Interface<br />Android Widget Toolbox<br />Spinner Tutorial (Contd.)<br />3. Create a strings.xml file in res/values/ and edit the file to look like this: <br />The <string> element defines the title string referenced by the TextView and Spinner in <br />the layout above. The <string-array element defines the list of strings that will be displayed <br />as the list in the Spinner widget.<br />
  22. 22. User Interface<br />Android Widget Toolbox<br />Spinner Tutorial (Contd.)<br />4. Now open the HelloSpinner.java file and insert the following code for the onCreate() <br />method:<br />After the main.xml layout is set as the content view, the Spinner widget is captured from <br />the layout with findViewById(int).<br />The createFromResource() method then creates a new ArrayAdapter, which binds each item <br />in the string array to the initial appearance for the Spinner<br />TheR.array.planets_array ID references the string-array defined above and the <br />android.R.layout.simple_spinner_item ID references a layout for the standard spinner <br />appearance, defined by the platform.<br />
  23. 23. User Interface<br />Android Widget Toolbox<br />Spinner Tutorial (Contd.)<br />5. Now create a nested class that implements AdapterView.OnItemSelectedListener. <br />This will provide a callback method that will notify your application when an item has <br />been selected from the Spinner. Here's what this class should look like<br />This will work both for array from resources or static String array<br />The AdapterView.OnItemSelectedListener requires the onItemSelected() and <br />onNothingSelected() callback methods.<br />
  24. 24. User Interface<br />Android Widget Toolbox<br />Spinner Tutorial (Contd.)<br />6. Now the MyOnItemSelectedListener needs to be applied to the Spinner. <br />Go back to the onCreate() method and add the following line to the end:<br />
  25. 25. User Interface<br />Android Widget Toolbox<br />Spinner Tutorial (Contd.)<br />Run the application<br />
  26. 26. User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial<br />This tutorial introduces a variety of widgets that are useful when creating forms, <br />image buttons, <br />text fields, <br />checkboxes, <br />radio buttons,<br />Toggle buttons,<br />Rating bar<br />
  27. 27. User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)<br />Start a new project named HelloFormStuff.<br />Create a basic LinearLayoutin res/layout/main.xml <br />3. onCreate() <br />
  28. 28. User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)- Custom Button<br />We’ll create an image button with 3 states<br />Using the Button widget and an XML file that defines three different images to use for the <br />different button states. When the button is pressed, a short message will be displayed.<br />Normal<br />Focused<br />Pressed<br />Copy the images on the right into the res/drawable/ directory of your project. These will <br />be used for the different button states.<br />Create a new file in the res/drawable/ directory named android_button.xml. <br />Insert the following XML:<br />This defines a single drawable resource, which will change its image based on the current state <br />of the button.<br />
  29. 29. User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)- Custom Button<br />3. Open the res/layout/main.xml file and add the Button element:<br />The android:background attribute specifies the drawable<br />resource to use for the button background (which, when saved at res/drawable/android.xml, <br />is referenced as @drawable/android). This replaces the normal background image used for <br />buttons throughout the system. In order for the drawable to change its image based on the <br />button state, the image must be applied to the background<br />
  30. 30. User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)- Custom Button<br />4. o make the button do something when pressed, add the following code at the end of the <br />onCreate() method:<br />After Pressed<br />Normal<br />Pressed<br />
  31. 31. User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)- Edit Text<br />In this section, you will create a text field for user input, using the EditText widget. Once text <br />has been entered into the field, the "Enter" key will display the text in a toast message.<br />1. Open the res/layout/main.xml file and add the EditText element (inside the LinearLayout):<br />2. <br />
  32. 32. User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)- Edit Text<br />2. To do something with the text that the user types, add the following code to the end of the <br />onCreate() method:<br />
  33. 33. User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)- Edit Text<br />
  34. 34. User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)- Check Box<br />In this section, you will create a checkbox for selecting items, using the CheckBox widget. <br />When the checkbox is pressed, a toast message will indicate the current state of the checkbox.<br />1. Open the res/layout/main.xml file and add the CheckBox element (inside the LinearLayout):<br />
  35. 35. User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)- Check Box<br />2. To do something when the state is changed, add the following code to the end of the <br />onCreate() method:<br />
  36. 36. User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)- Check Box<br />
  37. 37. User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)- Radio Button<br />In this section, you will create two mutually-exclusive radio buttons (enabling one disables the <br />other), using the RadioGroup and RadioButton widgets. <br />When either radio button is pressed, a toast message will be displayed.<br />Open the res/layout/main.xml file and add two RadioButtons, nested in a RadioGroup <br />(inside the LinearLayout):<br />It's important that the RadioButtons are grouped together by the RadioGroup element so that <br />no more than one can be selected at a time. This logic is automatically handled by the Android <br />system. When one RadioButton within a group is selected, all others are automatically deselected<br />
  38. 38. User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)- Radio Button<br />2. To do something when each RadioButton is selected, you need an View.OnClickListener.<br /> In this case, you want the listener to be re-usable, so add the following code to create a new <br />member in the HelloFormStuff Activity<br />3. Now, at the bottom of the onCreate() method, add the following:<br />
  39. 39. User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)- Radio Button<br />
  40. 40. User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)- Toggle Button<br />In this section, you'll create a button used specifically for toggling between two states, using <br />the ToggleButton widget. This widget is an excellent alternative to radio buttons if you have<br /> two simple states that are mutually exclusive ("on" and "off", for example).<br />Open the res/layout/main.xml file and add the ToggleButton element (inside the <br />LinearLayout):<br />
  41. 41. User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)- Toggle Button<br />2. To do something when the state is changed, add the following code to the end of the <br />onCreate() method:<br />This captures the ToggleButton element from the layout, then adds an View.OnClickListener. <br />The View.OnClickListener must implement the onClick(View) callback method, which defines<br /> the action to perform when the button is clicked. In this example, the callback method checks <br />the new state of the button, then shows a Toast message that indicates the current state.<br />
  42. 42. User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)- Toggle Button<br />
  43. 43. User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)- Rating Bar<br />In this section, you'll create a widget that allows the user to provide a rating, with the <br />RatingBar widget.<br />Open the res/layout/main.xml file and add the RatingBar element (inside the <br />LinearLayout):<br />2. To do something when a new rating has been set, add the following code to the end of <br />the onCreate() method:<br />
  44. 44. User Interface<br />Android Widget Toolbox<br />Form Elements Tutorial (Contd.)- Rating Bar<br />
  1. A particular slide catching your eye?

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

×