Android UI

USER INTERFACE
1
Android application development

USER INTERFACE
2
The Android Widget Toolbox
1. TextView
2. EditText
3. Spinner
4. Button
5. CheckBox
6. RadioButton
7. DatePicker
8. TimePicker
Layouts
1. Frame Layout
2. Linear Layout
3. Relative Layout
4. Table Layout
5. Absolute Layout
6. Grid Layout
7. Tab Layout

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.
1. We’ll create a DatePickerDialog, which presents the date picker in a floating
3
dialog box at the press of a button.
2. When the date is set by the user, a TextView will update with the new date.

USER INTERFACE
4
Date Picker Tutorial (Cont.)
1. Start a new project named HelloDatePicker.
2. 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.

USER INTERFACE
5
3. Open HelloDatePicker.java
4. add the following members to the class

USER INTERFACE
6
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

USER INTERFACE
7
1. First, the content is set to the main.xml layout.
2. Then the TextView and Button elements are captured from the layout with
findViewById(int).
3. A new View.OnClickListener is 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.
4. 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.

USER INTERFACE
8
5. Now we need to add a DateSetListener which will invoke when user selects a date

USER INTERFACE
9
6. Now we see

USER INTERFACE
10
6. Now we add this method to show the date in display TextView

USER INTERFACE
11
7. We set the selected date in DatePicker and get it from callback

USER INTERFACE
12
8. We add the following code to initiate with current date

USER INTERFACE
13
2. onCreate

USER INTERFACE
14
3. callback method for creating dialog
4. Initialize a new
DatePickerDialog.OnDateSetListen
er
for when the user has set the date
(by clicking the "Set" button)

USER INTERFACE
15

USER INTERFACE
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.
1. We’ll create a TimePickerDialog, which presents the date picker in a floating
16
dialog box at the press of a button.
2. When the time is set by the user, a TextView will update with the new time.
Do it yourself

USER INTERFACE
17
Time Picker Tutorial (Contd.)
Hints:

USER INTERFACE
18
Spinner Tutorial
Spinner is a widget similar to a drop-down list for selecting items.
1. In this tutorial, you'll create a simple spinner widget that displays a list of planets.
2. When one is selected, a toast message will display the selected item.

USER INTERFACE
19
Spinner Tutorial (Contd.)
1. Start a new project named HelloSpinner
2. 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.

USER INTERFACE
20
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.

USER INTERFACE
21
4. Now open the HelloSpinner.java file and insert the following code for
the onCreate() method:
a. After the main.xml layout is set as the content view, the Spinner widget is captured from
the layout with findViewById(int).
b. The createFromResource() method then creates a new ArrayAdapter, which binds each item
in the string array to the initial appearance for the Spinner
c. 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.

USER INTERFACE
22
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
The AdapterView.OnItemSelectedListener requires the onItemSelected() and
onNothingSelected() callback methods.

USER INTERFACE
23
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:

USER INTERFACE
24
Run the application

USER INTERFACE
Form Elements Tutorial
This tutorial introduces a variety of widgets that are useful when creating forms,
25
1. image buttons,
2. text fields,
3. checkboxes,
4. radio buttons,
5. Toggle buttons,
6. Rating bar

USER INTERFACE
26
Form Elements Tutorial (Contd.)
1. Start a new project named HelloFormStuff.
2. Create a basic LinearLayout in res/layout/main.xml
3. onCreate()

USER INTERFACE
We’ll create an image button with 3 states Using the Button widget and an XML file
27
Form Elements Tutorial (Contd.)- Custom Button
Normal Focused Pressed
that defines three different images to use
for the different button states. When the
button is 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 state of the button.

USER INTERFACE
28
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

USER INTERFACE
4. o make the button do something when pressed, add the following code at the end of the
onCreate() method:
29
Normal Pressed After Pressed

USER INTERFACE
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):
30
2.

USER INTERFACE
2. To do something with the text that the user types, add the following code to the
end of the onCreate() method:
31

USER INTERFACE
32

USER INTERFACE
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):
33

USER INTERFACE
2. To do something when the state is changed, add the following code to the end
of the onCreate() method:
34

USER INTERFACE
35

USER INTERFACE
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):
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
36

USER INTERFACE
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
37
3. Now, at the bottom of the onCreate() method, add the following:

USER INTERFACE
38

USER INTERFACE
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).
1. Open the res/layout/main.xml file and add the ToggleButton element (inside the
LinearLayout):
39

USER INTERFACE
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.
40

USER INTERFACE
41

USER INTERFACE
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.
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
42
the end of the onCreate() method:

USER INTERFACE
43
Form Elements Tutorial (Contd.)- Rating Bar

Android UI

More Related Content

What's hot (20)

Similar to Android UI (20)

More from nationalmobileapps (16)

Recently uploaded (20)

Android UI