Your SlideShare is downloading. ×
Android User Interface Tutorial: DatePicker, TimePicker & Spinner
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Android User Interface Tutorial: DatePicker, TimePicker & Spinner

47,765
views

Published on

These slides are for self-learners and trainees of my BASIS and DIIT Android course. …

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
47,765
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
566
Comments
6
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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