Custom GridView in Android

Here, I am going to develop an application that displays icon with text as grid view.  In previous example, I showed you to create grid view with icons. In that case, only one xml is used to display the images. In case of custom grid view, you need to create two xml one for gridview and other for icon and text. After that we can inflate these two xml on your activity to create custom grid view


CustomGridViewActivity.java

package com.example;

import java.util.ArrayList;

import android.app.Activity;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ArrayAdapter;

import android.widget.GridView;

import android.widget.ImageView;

import android.widget.TextView;

public class CustomGridViewActivity extends Activity {

    private ArrayList<String> textfield;

      private ArrayList<Integer> imagefield;

      private CustomAdapter customadapter;

      /** Called when the activity is first created. */

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

        GridView gridView=(GridView)findViewById(R.id.gridView1);

        preparetext();

        prepareimage();

 

        customadapter= new CustomAdapter(this, textfield,imagefield);

        gridView.setAdapter(customadapter);

    }

    public void preparetext()

    {

        textfield=new ArrayList<String>();

        textfield.add("Sunday");

        textfield.add("Monday");

        textfield.add("Tuesday");

        textfield.add("Wednessday");

        textfield.add("Thursday");

        textfield.add("Friday");

        textfield.add("Saturday");

    }

    public void prepareimage()

    {

        imagefield=new ArrayList<Integer>();

        imagefield.add(R.drawable.icon);

        imagefield.add(R.drawable.icon);

        imagefield.add(R.drawable.icon);

        imagefield.add(R.drawable.icon);

        imagefield.add(R.drawable.icon);

        imagefield.add(R.drawable.icon);

        imagefield.add(R.drawable.icon);

  

    }

    private class CustomAdapter extends ArrayAdapter<Object>

    {

            Activity activity;

            ArrayList<String> textfield;

            ArrayList<Integer> imagefield;

      

     public CustomAdapter(Activity context, ArrayList<String> name,ArrayList<Integer> image)

         {             

             super(context, 0);

             activity=context;

             this.textfield=name;

             this.imagefield=image;

    }

  @Override

  public View getView(int position, View convertView, ViewGroup parent)

  { 

        

            ImageView imgViewFlag;

            TextView txtViewTitle;

            LayoutInflater inflator = activity.getLayoutInflater();

            convertView = inflator.inflate(R.layout.gridview, null);

            txtViewTitle = (TextView) convertView.findViewById(R.id.textView1);

           imgViewFlag = (ImageView) convertView.findViewById(R.id.imageView1);

           txtViewTitle.setText(textfield.get(position));

           imgViewFlag.setImageResource(imagefield.get(position));

           return convertView;

  }

  @Override

    public int getCount() {

      // TODO Auto-generated method stub

        return textfield.size();

    }

    @Override

    public String getItem(int position) {

        // TODO Auto-generated method stub

        return textfield.get(position);

    }

    @Override

    public long getItemId(int position) {

        // TODO Auto-generated method stub

        return 0;

    }

 }

}

main.xml

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

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    >

<TextView 

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:text="@string/hello"

    />

<GridView

android:id="@+id/gridView1"

android:numColumns="3" 

android:layout_width="match_parent"

android:layout_height="wrap_content">

</GridView>

</LinearLayout>