Friday 30 March 2012

Grid View

GridView is a ViewGroup that displays items in a two-dimensional, scrollable grid. The grid items are automatically inserted to the layout using a ListAdapter.
Here we create a grid of text values. When an item is selected, a toast message will display the position of the text value and image of  the text value.
  1. Start a new project named MyGridView.
  2. Find some photos you'd like to use, or download these sample images. Save the image files into the project's res/drawable/ directory.
  3. Open the res/layout/main.xml file and insert the following:
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/hello" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="select one value"
            android:textColor="#FF00FF"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <GridView
            android:id="@+id/gridView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:numColumns="3" >
        </GridView>

    </LinearLayout>

 4.Open the class MyGeridView.java and inser the following codes.


package com.anna;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import android.widget.Toast;

public class MyGridViewActivity extends Activity {
    String s[]={"Apple","Baby","Car","cat","Flower"};
    GridView gv;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
       
        gv=(GridView)findViewById(R.id.gridView1);
        ArrayAdapter<String> arr=new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,s);
        gv.setAdapter(arr);
        gv.setOnItemClickListener(new OnItemClickListener() {
            public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
                String s1=gv.getItemAtPosition(position).toString();
                int p=position;
                Toast.makeText(MyGridViewActivity.this, ""+position, Toast.LENGTH_SHORT).show();
                switch (p) {
                case 0:
                   
                Intent iapple =new Intent(MyGridViewActivity.this,Apple.class);
                startActivity(iapple);
                   
                break;
               
                case 1:
                    Intent ibaby =new Intent(MyGridViewActivity.this,Baby.class);
                    startActivity(ibaby);
                    break;
                case 2:
                   
                    Intent icar =new Intent(MyGridViewActivity.this,Car.class);
                    startActivity(icar);
                       
                    break;
                   
                case 3:
                        Intent icat =new Intent(MyGridViewActivity.this,Cat.class);
                        startActivity(icat);
                        break;
                case 4:
                       
                        Intent ifl =new Intent(MyGridViewActivity.this,Flower.class);
                        startActivity(ifl);
                           
                        break;
                       

                default:
                    Toast.makeText(MyGridViewActivity.this, ""+position, Toast.LENGTH_SHORT).show();
                   
                    break;
                } 
               
                }
               
               
           
        });

       
    }
}


After the main.xml layout is set for the content view, the GridView is captured from the layout with findViewById(int). The setAdapter() method then sets a custom adapter (ImageAdapter) as the source for all items to be displayed in the grid. The ImageAdapter is created in the next step.
To do something when an item in the grid is clicked, the setOnItemClickListener() method is passed a new AdapterView.OnItemClickListener. This anonymous instance defines the onItemClick() callback method to show a Toast that displays the index position (zero-based) of the selected item.
To display the image of the item selected by using the switch-case and Intent.

5.Create new classes to display the item selected.Here giving an example classes-Apple.java.
Here we using position id to find out which item is selected.According to the position selected,the them display will change.

Apple.java

package com.anna;

import android.app.Activity;
import android.os.Bundle;

public class Apple extends Activity{
   

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.apple);
    }

}


Like this class we can create another classes too.


6.To set the images in to the layout by following codes:
eg: apple.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/apple" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="APPLE"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

 7.Run the program









then click one item.










No comments:

Post a Comment