Custom Grid View in Android/Grid View with icons and text/GridView example in android

Custom Grid View in android/Grid View with icons and text/GridView example 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"?> <LinearLayout xmlns: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>

Result

See More

GridView with icon
Listview
Custom ListView
Custom Spinner
Custom Optionsmenu