How to Set Text and Image(Image URL) to Gridview in Android

Question

How to SetText and Image(Image URL) to Gridview in Android and the ImageSize should be fixed to all images Note: Am collecting these datas(IMage URL and Text) from webservice

Answer 1

1)create an xml layout for gridview.

<?xml version="1.0" encoding="utf-8"?>
<GridView
 xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/GridView01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
    android:padding="10dp"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:numColumns="auto_fit"
    android:columnWidth="80dp"
    android:stretchMode="columnWidth"
    android:gravity="center"
    android:background="@color/white"
    >
</GridView>

2) create one more layout home_screen_text.xml

 <LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/widget44"
 android:layout_width="wrap_content"
  android:layout_height="wrap_content"
 android:orientation="vertical"
 android:layout_x="201px"
android:layout_y="165px"
 android:gravity="center_horizontal"
 >
 <ImageView
 android:id="@+id/icon_image"
 android:layout_width="wrap_content"
 android:layout_height="80dp"

  >
 </ImageView>
 <TextView
 android:id="@+id/icon_text"
 android:typeface="serif"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:gravity="center_horizontal"
 android:textColor="@color/black"
 android:textStyle="bold"
 android:lines="2">
</TextView>
</LinearLayout>

3) then use a gridView. GridView gridview = (GridView) findViewById(R.id.GridView01); gridview.setAdapter(new ImageAdapter(this)); gridview.setOnItemClickListener(new OnItemClickListener() { public void onItemClick(AdapterView parent, View v, int position, long id) { } }

4) create a imageadapter class that inherits baseadapter.

  public class ImageAdapter extends BaseAdapter {
    private Context mContext;
    public static final int ACTIVITY_CREATE = 10;

    public ImageAdapter(Context c) {
        mContext = c;
    }

    public int getCount() {
        return mThumbIds1.size();
    }

    public Object getItem(int position) {
        return null;
    }

    public long getItemId(int position) {
        return 0;
    }

    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView;
        View v;

        if (convertView == null) {
            imageView = new ImageView(mContext);
            LayoutInflater li = getLayoutInflater();
            v = li.inflate(R.layout.home_screen_text, null);
            TextView tv = (TextView) v.findViewById(R.id.icon_text);
            tv.setText("" + iconText.get(position).toString());
            ImageView iv = (ImageView) v.findViewById(R.id.icon_image);
            iv.setImageResource(mThumbIds1.get(position));

        } else {
            v = convertView;
            imageView = new ImageView(mContext);
            LayoutInflater li = getLayoutInflater();
            v = li.inflate(R.layout.home_screen_text, null);
            TextView tv = (TextView) v.findViewById(R.id.icon_text);
            tv.setText("" + iconText.get(position).toString());
            ImageView iv = (ImageView) v.findViewById(R.id.icon_image);
    iv.setImageDrawble(drawable_from_url("url of the image", "name"));

        }
        return v;
    }
}

The method that returns drawable. Drawable drawable_from_url(String url, String src_name) throws java.net.MalformedURLException, java.io.IOException { return Drawable.createFromStream(((java.io.InputStream)new java.net.URL(url).awagetContent()), src_name); }

Answer 2

you have to make your own layout for example,

 <RelativeLayout 
        android:id="@+id/relGrid"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"  >

            <GridView  
                android:id="@+id/gridview"
                android:layout_width="fill_parent" 
                android:layout_height="wrap_content"
                android:columnWidth="90dp"
                android:numColumns="3"
                android:verticalSpacing="10dp"
                android:horizontalSpacing="10dp"
                android:stretchMode="columnWidth"
                android:listSelector="@null" />

    </RelativeLayout>

make one more layout for each item in the grid

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"  
  android:layout_width="wrap_content"
  android:layout_height="120dp"
  android:background="@drawable/background">

    <ImageView 
        android:layout_width="wrap_content"
        android:id="@+id/imgGrid"    
        android:layout_centerHorizontal="true"

        android:layout_height="wrap_content"/>

    <TextView
        android:layout_below="@+id/imgGrid" 
        android:layout_centerInParent="true"
        android:id="@+id/txtTitle"
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content" 
        android:gravity="center"
        android:text=""
        android:textStyle="bold"
        android:textSize="15dp"     
        android:textColor="@color/blue"/>


</RelativeLayout>

Then use gridView like this,

setContentView(R.layout.main);

    GridView gridview = (GridView) findViewById(R.id.gridview);
            gridview.setAdapter(new ImageAdapter(MainActivity.this,R.layout.grid_layout , imgArray, titleArray));

            gridview.setOnItemClickListener(new OnItemClickListener() {
                public void onItemClick(AdapterView<?> parent, View v, int position, long id) 
                {
                    if(position == 0)
                    {
                       //your code
                    }
                }
            });

ImageAdapter.java

import android.content.Context;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;


public class ImageAdapter extends ArrayAdapter<Object>
{
    String TAG = "ImageAdapter";

    private int resource;
    private Integer[] mImgGrid;
    private String[] mTitleText;

    public ImageAdapter(Context context, int resorce, Integer[] imgGrid,String[] titleText) 
    {
        super(context, resorce, imgGrid);
        Log.i(TAG," in set adapter lstRecipes "+ imgGrid.length );
        this.resource = resorce;
        this.mImgGrid = imgGrid;
        this.mTitleText = titleText;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) 
    {
        ViewHolder holder;

        if (convertView == null)
        {
            LayoutInflater layoutInflater = LayoutInflater.from(getContext());
            convertView  = layoutInflater.inflate(resource, parent, false);
            holder = new ViewHolder();
            holder.txtTitle = (TextView)convertView.findViewById(R.id.txtTitle);
            holder.imgGrid = (ImageView)convertView.findViewById(R.id.imgGrid);

            convertView.setTag(holder);
        }
        else 
        {
             holder=(ViewHolder)convertView.getTag();
        }

        try
        {
            holder.txtTitle.setText(mTitleText[position]);
            holder.imgGrid.setImageResource(mImgGrid[position]);
        }
        catch (Exception e) 
        {
            e.printStackTrace();
        }

        return convertView;
    }

    public static class ViewHolder
    {
        private TextView txtTitle;
        private ImageView imgGrid;
    }
}

If you are use images and text directly from webservice then its not big deal you can parse your data from webService and you can set that in this ImageView and TextView.