• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Day 5: Android User Interface [View Widgets]
 

Day 5: Android User Interface [View Widgets]

on

  • 6,432 views

 

Statistics

Views

Total Views
6,432
Views on SlideShare
1,081
Embed Views
5,351

Actions

Likes
1
Downloads
101
Comments
1

5 Embeds 5,351

http://droidtraining.wordpress.com 5292
http://droidtraining.wordpress.com. 51
http://webcache.googleusercontent.com 4
https://droidtraining.wordpress.com 3
http://translate.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Day 5: Android User Interface [View Widgets] Day 5: Android User Interface [View Widgets] Presentation Transcript

    • Android Application Development User Interface Ahsanul Karim ahsanul.karim@sentinelbd.com Sentinel Solutions Ltd. http://www.sentinelbd.com
    • User InterfaceTodayThe Android Widget Toolbox1.TextView2.EditText3.Spinner4.Button5.CheckBox6.RadioButton7.DatePicker8.TimePicker We have already used TextView, EditText and Button
    • User InterfaceAndroid Widget ToolboxForm Elements TutorialThis tutorial introduces a variety of widgets that are useful when creating forms, 1. image buttons, 2. text fields, 3. checkboxes, 4. radio buttons, 5. Toggle buttons, 6. Rating bar
    • User Interface Android Widget Toolbox Form Elements Tutorial (Contd.) 1. Start a new project named HelloFormStuff. 2. Create a basic LinearLayout in res/layout/main.xml3. onCreate()
    • User InterfaceAndroid Widget ToolboxForm Elements Tutorial (Contd.)- Custom ButtonWe’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 Normal Focused Pressed pressed, a short message will be displayed. 1. Copy the images on the right into the res/drawable/ directory of your project. These will be used for the different button states. 2. 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 stateof the button.
    • User Interface Android Widget Toolbox Form Elements Tutorial (Contd.)- Custom Button3. 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
    • User Interface Android Widget Toolbox Form Elements Tutorial (Contd.)- Custom Button4. o make the button do something when pressed, add the following code at the end of theonCreate() method: Normal Pressed After Pressed
    • 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.
    • User InterfaceAndroid Widget ToolboxForm Elements Tutorial (Contd.)- Edit Text2. To do something with the text that the user types, add the following code to the end of theonCreate() method:
    • User InterfaceAndroid Widget ToolboxForm Elements Tutorial (Contd.)- Edit Text
    • 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):
    • User InterfaceAndroid Widget ToolboxForm Elements Tutorial (Contd.)- Check Box2. To do something when the state is changed, add the following code to the end of theonCreate() method:
    • User InterfaceAndroid Widget ToolboxForm Elements Tutorial (Contd.)- Check Box
    • 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.1. Open the res/layout/main.xml file and add two RadioButtons, nested in a RadioGroup(inside the LinearLayout): Its 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
    • User InterfaceAndroid Widget ToolboxForm Elements Tutorial (Contd.)- Radio Button2. 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 newmember in the HelloFormStuff Activity3. Now, at the bottom of the onCreate() method, add the following:
    • User InterfaceAndroid Widget ToolboxForm Elements Tutorial (Contd.)- Radio Button
    • User InterfaceAndroid Widget ToolboxForm Elements Tutorial (Contd.)- Toggle ButtonIn this section, youll create a button used specifically for toggling between two states, usingthe 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). 1. Open the res/layout/main.xml file and add the ToggleButton element (inside the LinearLayout):
    • User InterfaceAndroid Widget ToolboxForm Elements Tutorial (Contd.)- Toggle Button2. To do something when the state is changed, add the following code to the end of theonCreate() 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 checksthe new state of the button, then shows a Toast message that indicates the current state.
    • User InterfaceAndroid Widget ToolboxForm Elements Tutorial (Contd.)- Toggle Button
    • User InterfaceAndroid Widget ToolboxForm Elements Tutorial (Contd.)- Rating Bar In this section, youll create a widget that allows the user to provide a rating, with the RatingBar widget. 1. 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 ofthe onCreate() method:
    • User InterfaceAndroid Widget ToolboxForm Elements Tutorial (Contd.)- Rating Bar
    • User InterfaceAndroid Widget ToolboxAuto Complete TutorialTo create a text entry widget that provides auto-complete suggestions, use theAutoCompleteTextView widget. Suggestions are received from a collection of strings associatedwith the widget through an ArrayAdapterIn this tutorial, you will create a AutoCompleteTextView widget that provides suggestions fora country name.
    • User InterfaceAndroid Widget ToolboxAuto 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 listof suggestions
    • User InterfaceAndroid Widget ToolboxAuto 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.
    • User Interface Android Widget Toolbox Auto Complete Tutorial (Contd.) 4. Open HelloAutoComplete.java and insert the following code for the onCreate() method:a. After the content view is set to the main.xml layout, the AutoCompleteTextView widgetis 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 inthe COUNTRIES string array (defined in the next step).c. Finally, setAdapter() is called to associate the ArrayAdapter with theAutoCompleteTextView widget so that the string array will populate the list of suggestions.
    • User InterfaceAndroid Widget ToolboxAuto Complete Tutorial (Contd.)5. Inside the HelloAutoComplete class, add the string array:
    • User InterfaceAndroid Widget ToolboxAuto Complete Tutorial (Contd.)6. Run the application
    • User InterfaceAndroid Widget ToolboxAuto Complete Tutorial (Contd.)7. Recommended: This can be done with a <string-array< resource in yourproject res/values/strings.xml file. For example: 8. From source code: