Infographic: Android history

Infographic by Android Developers at [x]cubelabs

Day 5-User Interface

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.

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.

3. Create a strings.xml file in res/values/ and edit the file to look like this:

The  element defines the title string referenced by the TextView and Spinner in

the layout above. The < span=""> element defines the list of strings that will be displayed

as the list in the Spinner widget.

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.

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.

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:

Run the application

Form Elements Tutorial

This 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

1.Start a new project named HelloFormStuff.

2.Create a basic LinearLayout in res/layout/main.xml 

3. onCreate() 

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.

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.

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

4. make the button do something when pressed, add the following code at the end of the 

onCreate() method:

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. To do something with the text that the user types, add the following code to the end of the 

onCreate() method:

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

):

2. To do something when the state is changed, add the following code to the end of the 

onCreate() method: