Technology Lesson: Android beginner tutorial Part 37 GridView widget

Thursday, February 5, 2015

Android beginner tutorial Part 37 GridView widget

In this tutorial well learn how to display text data using GridView widget.

The GridView component displays data in a table structure.

There are a few properties that we can use to customize the appearance of the widget.

The first one is android:numColumns - it determines how many columns the grid has. It can be set to "auto_fit" to fit as many columns as possible.

The android:verticalSpacing and android:horizontalSpacing variables determine the horizontal and vertical spacing between the cells.

The android:columnWidth property sets the width of each column.

The android:stretchMode property determines how the grid is stretched. You can set it to columnWidth to increase the cell width if there is any extra space left, or to spacingWidth to increase the spacing between the cells. Set to none to disable stretching.

Go to activity_main.xml layout file and create a simple layout with a TextView and a GridView:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >

<TextView
    android:id="@+id/text"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" />

<GridView 
    android:id="@+id/grid"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:verticalSpacing="35dp"
    android:horizontalSpacing="5dp"
    android:numColumns="auto_fit"
    android:columnWidth="100dp"
    android:stretchMode="columnWidth"
    android:gravity="center"
    />
    
</LinearLayout>

We need to have an array declared in our strings.xml file. Its the one from the previous tutorials:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">Code For Food Test</string>
    <string name="menu_settings">Settings</string>
    <string-array name="choices_array">
        <item>One</item>
        <item>Two</item>
        <item>Three</item>
        <item>Four</item>
        <item>Five</item>
        <item>Seven</item>
        <item>Eight</item>
        <item>Nine</item>
        <item>Ten</item>
    </string-array>

</resources>

Go to MainActivity.java class. Implement OnItemClickListener class:

public class MainActivity extends Activity implements OnItemClickListener{

Declare text and grid variables to later reference the TextView and GridView objects:

private TextView text;
private GridView grid;

Set their value sin onCreate() function. Then retreive the array from the strings.xml and apply it to an array adapter. Apply this adapter to this activity using setAdapter() method, then call setOnItemClickListener() method to add a click listener:

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

grid = (GridView)findViewById(R.id.grid);
text = (TextView)findViewById(R.id.text);

String[] choices = getResources().getStringArray(R.array.choices_array);

ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, choices);
grid.setAdapter(arrayAdapter);
grid.setOnItemClickListener(this);
}

Add a onItemClick() function, which handles the item click event. Display the selected item in the text field:

public void onItemClick(AdapterView<?> parent, View view, int pos, long id) {
    text.setText("The selected item is " + parent.getItemAtPosition(pos).toString());
    }

Full code:

package com.kircode.codeforfood_test;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import android.widget.TextView;

public class MainActivity extends Activity implements OnItemClickListener{

private TextView text;
private GridView grid;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

grid = (GridView)findViewById(R.id.grid);
text = (TextView)findViewById(R.id.text);

String[] choices = getResources().getStringArray(R.array.choices_array);

ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, choices);
grid.setAdapter(arrayAdapter);
grid.setOnItemClickListener(this);
}

public void onItemClick(AdapterView<?> parent, View view, int pos, long id) {
    text.setText("The selected item is " + parent.getItemAtPosition(pos).toString());
    }

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}

}

The results look like this:

Thanks for reading!

Technology Lesson

Thursday, February 5, 2015

Android beginner tutorial Part 37 GridView widget

No comments:

Post a Comment