Your SlideShare is downloading. ×
Android User Interface: Basic Form Widgets
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: Basic Form Widgets

21,846
views

Published on

Published in: Education, Technology

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
21,846
On Slideshare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
290
Comments
0
Likes
2
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 [email_address] Sentinel Solutions Ltd. http://www.sentinelbd.com
  • 2. User Interface Today
    • The Android Widget Toolbox
    • TextView
    • EditText
    • Spinner
    • Button
    • CheckBox
    • RadioButton
    • DatePicker
    • TimePicker
    We have already used TextView , EditText and Button
  • 3. 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
  • 4. User Interface Android Widget Toolbox Form Elements Tutorial (Contd.)
    • Start a new project named  HelloFormStuff .
    • Create a basic LinearLayout in res/layout/main.xml  
    3. onCreate()  
  • 5. User Interface Android Widget Toolbox Form Elements Tutorial (Contd.)- Custom Button Normal Focused Pressed 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.
    • 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.
  • 6. 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
  • 7. 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: Normal Pressed After Pressed
  • 8. 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.
  • 9. 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:
  • 10. User Interface Android Widget Toolbox Form Elements Tutorial (Contd.)- Edit Text
  • 11. 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 ):
  • 12. 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:
  • 13. User Interface Android Widget Toolbox Form Elements Tutorial (Contd.)- Check Box
  • 14. 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  RadioButton s, nested in a  RadioGroup  
    • (inside the  LinearLayout ):
    It's important that the  RadioButton s 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
  • 15. 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:
  • 16. User Interface Android Widget Toolbox Form Elements Tutorial (Contd.)- Radio Button
  • 17. 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 ):
  • 18. 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.
  • 19. User Interface Android Widget Toolbox Form Elements Tutorial (Contd.)- Toggle Button
  • 20. 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:
  • 21. User Interface Android Widget Toolbox Form Elements Tutorial (Contd.)- Rating Bar
  • 22. User Interface Android Widget Toolbox Auto Complete Tutorial To create a text entry widget that provides auto-complete suggestions, use the  AutoCompleteTextView  widget. Suggestions are received from a collection of strings associated with the widget through an  ArrayAdapter In this tutorial, you will create a  AutoCompleteTextView  widget that provides suggestions for a country name.
  • 23. User Interface Android Widget Toolbox Auto Complete Tutorial (Contd.) 1. Start a new project named  HelloAutoComplete . 2. Create an XML file named list_item.xml and save it inside the  res/layout/  folder. Edit the file to look like this: This file defines a simple  TextView  that will be used for each item that appears in the list of suggestions
  • 24. User Interface Android Widget Toolbox Auto Complete Tutorial (Contd.) 3. Open the  res/layout/main.xml  file and insert the following: The  TextView  is a label that introduces the  AutoCompleteTextView  widget.
  • 25. User Interface Android Widget Toolbox Auto Complete Tutorial (Contd.) 4. Open  HelloAutoComplete.java  and insert the following code for the  onCreate()  method:
    • After the content view is set to the  main.xml  layout, the  AutoCompleteTextView  widget
    • is captured from the layout with  findViewById(int) .
    • b. A new  ArrayAdapter  is then initialized to bind the  list_item.xml  layout to each list item in
    • the COUNTRIES string array (defined in the next step).
    • c. Finally,  setAdapter()  is called to associate the ArrayAdapter  with the 
    • AutoCompleteTextView  widget so that the string array will populate the list of suggestions.
  • 26. User Interface Android Widget Toolbox Auto Complete Tutorial (Contd.) 5. Inside the  HelloAutoComplete  class, add the string array:
  • 27. User Interface Android Widget Toolbox Auto Complete Tutorial (Contd.) 6. Run the application
  • 28. User Interface Android Widget Toolbox Auto Complete Tutorial (Contd.) 7. Recommended: This can be done with a <string-array< resource in your project  res/values/strings.xml  file. For example: 8. From source code: