Android Custom GridView with Images and Text – Example

Create Layout:

activity_main.xml

<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"

    tools:context=".MainActivity" >

    <GridView

         android:numColumns="auto_fit"

         android:gravity="center"

         android:columnWidth="100dp"

         android:stretchMode="columnWidth"

         android:layout_width="fill_parent"

         android:layout_height="fill_parent"

         android:id="@+id/grid"

         />

</LinearLayout>

 

grid_single.xml

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

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:padding="5dp" >

    <ImageView

        android:id="@+id/grid_image"

        android:layout_width="50dp"

        android:layout_height="50dp">

    </ImageView>

    <TextView

        android:id="@+id/grid_text"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="15dp"

        android:textSize="9sp" >

    </TextView>

</LinearLayout>

 

Create Activity:

CustomGrid.java

public class CustomGrid extends BaseAdapter{

    private Context mContext;

    private final String[] web;

    private final int[] Imageid;

      public CustomGrid(Context c,String[] web,int[] Imageid ) {

          mContext = c;

          this.Imageid = Imageid;

          this.web = web;

      }

    @Override

    public int getCount() {

      // TODO Auto-generated method stub

      return web.length;

    }

    @Override

    public Object getItem(int position) {

      // TODO Auto-generated method stub

      return null;

    }

    @Override

    public long getItemId(int position) {

      // TODO Auto-generated method stub

      return 0;

    }

    @Override

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

      // TODO Auto-generated method stub

      View grid;

      LayoutInflater inflater = (LayoutInflater) mContext

        .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

          if (convertView == null) {

            grid = new View(mContext);

        grid = inflater.inflate(R.layout.grid_single, null);

            TextView textView = (TextView) grid.findViewById(R.id.grid_text);

            ImageView imageView = (ImageView)grid.findViewById(R.id.grid_image);

            textView.setText(web[position]);

            imageView.setImageResource(Imageid[position]);

          } else {

            grid = (View) convertView;

          }

      return grid;

    }

}

 

MainActivity.java

public class MainActivity extends Activity {

  GridView grid;

  String[] web = {"Google","Github","Instagram","Facebook","Flickr","Pinterest",

      "Quora","Twitter","Vimeo","WordPress","Youtube","Stumbleupon","SoundCloud",

      "Reddit","Blogger"} ;

  int[] imageId = {R.drawable.image1,R.drawable.image2,R.drawable.image3,

      R.drawable.image4,R.drawable.image5,R.drawable.image6,R.drawable.image7,

      R.drawable.image8,R.drawable.image9,R.drawable.image10,R.drawable.image11,

      R.drawable.image12,R.drawable.image13,R.drawable.image14,R.drawable.image15};

  @Override

  protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

    CustomGrid adapter = new CustomGrid(MainActivity.this, web, imageId);

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

        grid.setAdapter(adapter);

        grid.setOnItemClickListener(new AdapterView.OnItemClickListener() {

                @Override

                public void onItemClick(AdapterView<?> parent, View view,

                                        int position, long id) {

                    Toast.makeText(MainActivity.this, "You Clicked at " +web[+ position], Toast.LENGTH_SHORT).show();

                }

            });

  }

}