Android App Development- Controls Part Four: Spinner and GridView

In this tutorial we are going to cover a couple more Android selection controls: the Spinner and the GridView.

The Spinner

The Spinner control is similar to the ComboBox in C#. It displays a list to select from in a popup window so it may be a better choice over ListView if you have a lot items to display because it will save space.

It works in a similar way to that of the the ListView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <Spinner
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/Spinner"
    />
</LinearLayout>

When you click on the spinner it popups like this:

The following code will handle the selected item:

final String [] items=new String[]{"Item1","Item2","Item3","Item4"};
        ArrayAdapter ad=new ArrayAdapter(this,android.R.layout.simple_spinner_item,items);
        ad.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        Spinner spin=(Spinner)findViewById(R.id.Spinner);
        spin.setAdapter(ad);
        spin.setOnItemSelectedListener(new OnItemSelectedListener()
        {

   public void onItemSelected(AdapterView arg0, View arg1,
     int arg2, long arg3) {
    TextView txt=(TextView)findViewById(R.id.txt);
    TextView temp=(TextView)arg1;
    txt.setText(temp.getText());

   }

   public void onNothingSelected(AdapterView arg0) {
    // TODO Auto-generated method stub

   }

        });

The above code displays the selected item text in the textview.

The parameters of the OnItemClick method are:
AdapterView Arg0: the Spinner, notice that it is of type AdapterView.

• View Arg1: the view that represents the selected item, in this example it will be a TextView.
• int Arg2: the position of the selected item.
• long Arg3: the id of the selected item.

That is it for the Spinner control, we will now move on to the GridView.

GridView

The GridView is similar to ListView but it gives you the ability to control the look of the grid. You can specify the number of columns and columns width and spacing.
This example displays some items in a grid in a normal way:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <GridView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/grid"

    />
</LinearLayout>

final String [] items=new String[]{"Item1","Item2","Item3","Item4"};
        ArrayAdapter ad=new ArrayAdapter(this,android.R.layout.simple_list_item_1,items);
        GridView grid=(GridView)findViewById(R.id.grid);
        grid.setAdapter(ad);

This is a simple grid, similar to a ListView.

We can specify the number of columns that the grid has by specifying the android:numColumns property:

<GridView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/grid"
    android:numColumns="2"
    />

Or by using the code:

grid.setNumColumns(2);

The grid will be like this:

If we specified the number of columns to be three, it will be like this:

And so on, you get the idea.

We can also set the android:numColumns property to “auto_fit” so that the grid autommatically sets the number of columns according to the available space. We can control the vertical spacing between columns using android:verticalSpacing property:

<GridView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/grid"
    android:numColumns="2"
    android:verticalSpacing="100px"
    />

Or by using this code:

grid.setVerticalSpacing(150);

We can also control the horizontal spacing between columns using android:horizontalSpacing property:

<GridView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/grid"
    android:numColumns="2"
    android:horizontalSpacing="100px"    />

Or by using this code:

grid.setHorizontalSpacing(150);

and that was it for the GridView.

Today we covered two more controls for Android, Spinner and Gridview. Check back next week for a new Android app development tutorial and feel free to ask any questions in the comments.