Android Grid View with Custom base Adapter

Question

i have started to learn android development. i am making an app in which i want to show movie thumbnails(image view and text view) combined in grid view layout i have made custo

Answer 1

Here's the solution to your issue. You're using the adapter incorrectly. You're inflating the 'GridView' with the adapter in this line.

convertView =inflater.inflate(R.layout.activity_main,viewGroup,false);

That's no what you want to do. You want to make an other XML Layout that represents each movie's title in a TextView and image in an Imageview

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/movieimage"
    android:src="@drawable/moviethumb"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/movie_title"
    android:id="@+id/todo_list_item_bottom_text"
    android:layout_marginTop="10dp"
    android:textSize="12sp"/>
</LinearLayout>

This tutorial should help you. It's for a list view but all adapters in android pretty much work the same way. Adapter Tutorial

I noticed a something you can improve upon. Put your inflator inside you convertview == null. There's no point to creating this object when it's not used.

Answer 2

Make your own grid item layout.

layout/grid_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/gridItemIV"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/gridItemTextTV"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>

Change:

    if(convertView==null){
        holder = new NewHolder();
        convertView =inflater.inflate(R.layout.grid_item,viewGroup,false);

            holder.imageView = (ImageView)convertView.findViewById(R.id.gridItemIV)
            holder.textView = (TextView)convertView.findViewById(R.id.gridItemTextTV)
     }else {
...

Answer 3

You should not inflate the main activity layout in your adapter. Instead you should have a layout of the individual row to inflate in your getView() method.

What you have to do is, You have to give adapter a list of data you want to set in gridview. Adapter inflates the rows (the individual item in Grid) according to the count of data(models) given, then you will have to assign the data to the individual elements of the row.

So, I have corrected the adapter. Hope this will be helpful:

    public class ImageAdapter extends BaseAdapter {

    private Context mContext;
    private LayoutInflater inflater;



    private Integer[] mThumbIds = {
            R.drawable.sample_2, R.drawable.sample_3,
            R.drawable.sample_4, R.drawable.sample_5,
            R.drawable.sample_6, R.drawable.sample_7,
            R.drawable.sample_0, R.drawable.sample_1,
            R.drawable.sample_2, R.drawable.sample_3,
            R.drawable.sample_4, R.drawable.sample_5,
            R.drawable.sample_6, R.drawable.sample_7,
            R.drawable.sample_0, R.drawable.sample_1,
            R.drawable.sample_2, R.drawable.sample_3,
            R.drawable.sample_4, R.drawable.sample_5,
            R.drawable.sample_6, R.drawable.sample_7
    };

    private String mTexts[]={"a","b","d",....,"your texts"};

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

    @Override
    public int getCount() {
        return mThumbIds.length; // adapter inflates the row according to the count of data given
    }

    @Override
    public Object getItem(int i) {
        return null;
    }

    @Override
    public long getItemId(int i) {
        return mThumbIds.length;// inflates rows according to data given
    }

    @Override
    public View getView(int position, View convertView, ViewGroup viewGroup) {


        NewHolder holder = null;
        ImageView imageView;

        if(convertView==null){//if convert view is null then only inflate the row
            inflater = (LayoutInflater) mContext.getSystemService( Context.LAYOUT_INFLATER_SERVICE );
            convertView = inflater.inflate(R.layout.grid_item_layout,viewGroup,false);

            holder = new NewHolder();

            //find views in item row
            holder.imageView = (ImageView)convertView.findViewById(R.id.imageview_id);
            holder.textView = (ImageView)convertView.findViewById(R.id.textview_id);

            convertView.setTag(holder);
        }
        else { //otherwise get holder from tag
            holder = (NewHolder) convertView.getTag();
        }

        //set data here
        holder.imageView.setImageResource(mThumbIds[position]);
        holder.textView.setText(mTexts[position]);

        return convertView;
    }

    public class NewHolder {
        public ImageView imageView;
        public TextView textView;
    }

}

and your grid_item.xml should have layout for each item in GridView like:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp" >

<ImageView
        android:id="@+id/textview_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

 <TextView android:id="@+id/imageview_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>