How to implement image with text in GridView .

                                                            GridView
   
 

We are discussing how to implement grid-view in android. Very easy  you can  create project in eclipse ,you click on File option left side in eclipse. the Grid View is very important layout in android. In this grid view implement image with text.

first , you can drop grid view in activity_main.xml, show example.

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

         android:gravity="center"

         android:columnWidth="100dp"

         android:stretchMode="columnWidth"

         android:layout_width="fill_parent"

         android:layout_height="fill_parent"

         android:id="@+id/griditem"

         />

</LinearLayout>

Second, you can create a new item.xml class. res/layout/grid_item.xml. show example

grid_viewitem.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="100dp"

        android:layout_height="100dp">

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

then, the items(for example Image & text) bind in customiseGridView extend baseAdapter in java class. show example.

CustomGrid_Androidbegnner.java

package com. Androidbeginnerpoint.gridview;

import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.ImageView;

import android.widget.TextView;

public class CustomGrid_Androidbegnner extends BaseAdapter{

    private Context mContext;

    private final String[] web;

    private final int[] Imageid;

      public CustomGrid_Androidbegnner(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_viewitem, 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;

      }

}

then , you can used find GirdView and setAdapter() in MainActiviy.java class ,and used ImagArray and textArray  the Array bind in BaseAdapter.

MainActivity.java

package com.CustomGrid_Androidbegnner .gridview;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

import android.os.Bundle;

import android.app.Activity;

import android.view.View;

import android.widget.AdapterView;

import android.widget.GridView;

import android.widget.Toast;

public class MainActivity extends Activity {

    GridView grid;

    String[] web = {

            "image1",

            "image2",

            "image3",

            "image4",

            "image5",

            "image6",

            "image7",

            "image8"

            

    } ;

    int[] imageId = {

            R.drawable.image,

            R.drawable.imageone,

            R.drawable.imagetwo,

            R.drawable.imagethree,

            R.drawable.imagefour,

            R.drawable.imagefive,

            R.drawable.imagesix,

            R.drawable.imageeight

    };

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

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

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

                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();

                    }

                });

    }

}