using grid view and image View to display some images

Question

i am creating a simple android application that will display several images and on the selected one the system will display it in the image view .. but the problem is that the system display the id of the images than on the select of specific image the system display the image in the image view .

can anyone help me to fix this problem ??

log cat

12-03 08:57:16.493: E/AndroidRuntime(3126): Caused by: java.lang.ClassCastException: android.widget.ImageView cannot be cast to android.widget.TextView
12-03 08:57:16.493: E/AndroidRuntime(3126):     at android.widget.ArrayAdapter.createViewFromResource(ArrayAdapter.java:379)

GridActivity.java

package com.devleb.listviewdemo;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.TextView;

public class GridActivity extends Activity implements
        AdapterView.OnItemClickListener {

    private ImageView Selection;
    private static final Integer[] items = { R.drawable.image1,
            R.drawable.image2, R.drawable.image3, R.drawable.image4,
            R.drawable.image5, R.drawable.image6, R.drawable.image4,
            R.drawable.image2 };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_grid);
        Selection = (ImageView) findViewById(R.id.selection);
        GridView grid = (GridView) findViewById(R.id.grid);
        grid.setAdapter(new ArrayAdapter<Integer>(this, R.layout.cell, items));

        grid.setOnItemClickListener(this);

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.grid, menu);
        return true;
    }

    @Override
    public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
        // TODO Auto-generated method stub

        Selection.setImageResource(items[arg2]);
    }

}

activity_grid.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".GridActivity" >

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

    <GridView
        android:id="@+id/grid"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:columnWidth="100dip"
        android:gravity="center"
        android:horizontalSpacing="5dip"
        android:numColumns="auto_fit"
        android:stretchMode="columnWidth"
        android:verticalSpacing="40dip" >
    </GridView>

</LinearLayout>

cell.xml

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

</ImageView>

Answer 1

I've modified your code by a custom adapter, now it's working fine, please note it.

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;

public class MainActivity extends Activity implements
        AdapterView.OnItemClickListener {

    private ImageView selection;
    private static final Integer[] items = { R.drawable.ic_launcher,
            R.drawable.ic_launcher, R.drawable.ic_launcher,
            R.drawable.ic_launcher, R.drawable.ic_launcher,
            R.drawable.ic_launcher, R.drawable.ic_launcher,
            R.drawable.ic_launcher };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ImageView selection = findViewById(R.id.selection);
        GridView grid = findViewById(R.id.grid);
        // grid.setAdapter(new ArrayAdapter<Integer>(this, R.layout.cell,
        // items));
        grid.setAdapter(new CustomGridAdapter(this, items));
        grid.setOnItemClickListener(this);

    }

    // @Override
    // public boolean onCreateOptionsMenu(Menu menu) {
    // // Inflate the menu; this adds items to the action bar if it is present.
    // getMenuInflater().inflate(R.menu.grid, menu);
    // return true;
    // }

    @Override
    public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
        // TODO Auto-generated method stub
Toast.makeText(MainActivity.this, "Clicked position is" + arg2,
            Toast.LENGTH_LONG).show();
        //Selection.setImageResource(items[arg2]);
    }

    // Here is your custom Adapter

    public class CustomGridAdapter extends BaseAdapter {
        private Activity mContext;

        // Keep all Images in array
        public Integer[] mThumbIds;

        // Constructor
        public CustomGridAdapter(MainActivity mainActivity, Integer[] items) {
            this.mContext = mainActivity;
            this.mThumbIds = items;
        }

        @Override
        public int getCount() {
            return mThumbIds.length;
        }

        @Override
        public Object getItem(int position) {
            return mThumbIds[position];
        }

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

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            ImageView imageView = new ImageView(mContext);
            imageView.setImageResource(mThumbIds[position]);
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setLayoutParams(new GridView.LayoutParams(70, 70));
            return imageView;
        }

    }

}

Answer 2

The ArrayAdapter requires the resource ID to be a TextView XML exception means you don't supply what the ArrayAdapter expects.

When you use this constructor:

new ArrayAdapter<String>(this, R.layout.cell,items)

R.Layout.cell must be the id of a xml layout file containing only a TextView(the TextView can't be wrapped by another layout, like a LinearLayout, RelativeLayout,ImageView etc!), something like this:

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" 
    // other attributes of the TextView
/>

If you want your list row layout to be something a little different then a simple TextView widget use this constructor:

new ArrayAdapter<String>(this, R.layout.cell, 
   R.id.the_id_of_a_textview_from_the_layout, items)

where you supply the id of a layout that can contain various views, but also must contain a TextView with and id(the third parameter) that you pass to your ArrayAdapter so it can know where to put the Strings in the row layout.