Android Hello GridView Tutorial Will Not Display Images

Question

First time poster!

I am new to Android development and have been following Google's HelloView tutorials without problems... until the HelloGridView tutorial. For some reason I cannot get any images to display, only a black background. I originally followed this tutorial:

http://developer.android.com/resources/tutorials/views/hello-gridview.html

but moved on to this nearly identical one:

http://developer.android.com/guide/tutorials/views/hello-gridview.html

in order to eliminate some added complexity by removing the OnItemClickListener code and narrow my possible problem areas. My code is exactly the same as the provided code, literally copied and pasted. I even downloaded the original sample files from the tutorial and placed them in the res\drawable folder, and the R code appears to have recognized them successfully and updated it's generated code accordingly. I am using Android target 1.5 and have tried this program both on my Droid X and using the Android emulator. I have all of my imports and the code compiles and runs fine. However, my activity displays only a black screen; no images appear. When I click on the black background, orange squares appear where the images should be. I found one or two posts mentioning this problem, but it was always coupled with some larger, more obvious problem and never addressed. I will list my code and LogCat below for reference.

I noticed that my LogCat mentioned:

WARN/ImageView(364): Unable to find resource: 2130837507

which led me to this thread: Why setImageResource displays nothing? detailing a possible workaround using setImageDrawable instead of setImageResource. I implemented this using the following line of code:

imageView.setImageDrawable(mContext.getResources().getDrawable(mThumbIds[position]));

however, that just resulted in a Resources$NotFoundException that crashed my code (also documented below).

IN CONCLUSION
I figure that an Android tutorial shouldn't require a workaround, so I'm guessing that I have some sort of configuration issue. After a few hours of searching and trying things, I haven't found a solution yet so I figured it warrants some discussion. Also, with this being my first post, please let me know if you see any glaring faux pas. I apologize in advance for the oncoming wall-o-code, though I figure too little data may be worse than too much. :D

Thanks Guys!

MarnBeast

UPDATE
I tried using R.drawable.icon in my mThumbIds, alternating between that and one of my pictures. None of the pictures showed up, but the icons did. I then tried a .png version of my picture, but that didn't work either. I copied the icon.png image and edited it in paint (put a mustache on the android guy :D) and saved it as dummyicon.png. I alternated between that and the icon, but that didn't work either. Finally, I got rid of all of the icon references, and just used my png image, but oddly, when run, ALL of the images showed up as the icon, even though I am not referencing it in mThumbIds! This differs from the previous behavior, when nothing at all was displayed. I changed a couple to the dummyicon, and when run, those images just didn't show up / were just black. All of the other images (the one png converted image repeated in mThumbIds) still showed up as icons.

Finally, I replaced my converted png image references with icon again, alternating between icon and dummyicon, and now neither of them show up - just a black screen again. So it appears that dummyicon and icon both yield nothing when referenced, just a black space, but my converted png image - chloie1.png - yields the icon.png. I added another picture - chloie2.png - and alternated between chloie1 and chloie2, but only chloie1 shows the icon image. Thus, this is the state of my mThumbIds as of now:

private Integer[] mThumbIds = {
        R.drawable.chloie1, R.drawable.chloie2,
        R.drawable.chloie1, R.drawable.chloie2,
        R.drawable.chloie1, R.drawable.chloie2,
        R.drawable.chloie1, R.drawable.chloie2,
        R.drawable.chloie1, R.drawable.chloie2,
        R.drawable.chloie1, R.drawable.chloie2,
        R.drawable.chloie1, R.drawable.chloie2,
        R.drawable.chloie1, R.drawable.chloie2,
        R.drawable.chloie1, R.drawable.chloie2,
        R.drawable.chloie1, R.drawable.chloie2,
        R.drawable.chloie1, R.drawable.chloie2
};

and this is the output from the emulator:

SOLUTION!
As it turned out, for some reason this tutorial would not work for me with JPEG images. Furthermore, I made a dumb assumption and simply changed the extension from .jpg to .png, which still worked in image viewers but was still recognized as a jpg by android. Now that I have edited each picture in paint, then saved as a PNG type, everything seems to work fine.

HOWEVER I still feel that there is an issue here. I'm assuming that android should handle .jpg images considering that they provided jpegs as their sample pictures. If anyone has an idea as to why PNG works but JPG doesn't, please respond. In the mean time, this simple fix will do just fine.

Thanks for the help!

REFERENCES

main.xml:

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

HelloGridViewActivity.java

package com.marnbeast.android;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener;

public class HelloGridViewActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        GridView gridview = (GridView) findViewById(R.id.gridview);
        gridview.setAdapter(new ImageAdapter(this));

    }
}

ImageAdapter.java

package com.marnbeast.android;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;

public class ImageAdapter extends BaseAdapter {
    private Context mContext;

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

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

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

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

    // create a new ImageView for each item referenced by the Adapter
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView;
        if (convertView == null) {  // if it's not recycled, initialize some attributes
            imageView = new ImageView(mContext);
            imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setPadding(8, 8, 8, 8);
        } else {
            imageView = (ImageView) convertView;
        }

        imageView.setImageResource(mThumbIds[position]);
        return imageView;
    }

    // references to our images
    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
    };
}

LogCat Unable to Find Resource:

07-24 06:00:04.564: WARN/ResourceType(364): getEntry failing because entryIndex 3 is beyond type entryCount 1
07-24 06:00:04.564: WARN/ResourceType(364): Failure getting entry for 0x7f020003 (t=1 e=3) in package 0: 0x80000001
07-24 06:00:04.584: WARN/ImageView(364): Unable to find resource: 2130837507
07-24 06:00:04.584: WARN/ImageView(364): android.content.res.Resources$NotFoundException: Resource ID #0x7f020003
07-24 06:00:04.584: WARN/ImageView(364):     at android.content.res.Resources.getValue(Resources.java:891)
07-24 06:00:04.584: WARN/ImageView(364):     at android.content.res.Resources.getDrawable(Resources.java:579)
07-24 06:00:04.584: WARN/ImageView(364):     at android.widget.ImageView.resolveUri(ImageView.java:485)
07-24 06:00:04.584: WARN/ImageView(364):     at android.widget.ImageView.setImageResource(ImageView.java:270)
07-24 06:00:04.584: WARN/ImageView(364):     at com.marnbeast.android.ImageAdapter.getView(ImageAdapter.java:41)
07-24 06:00:04.584: WARN/ImageView(364):     at android.widget.AbsListView.obtainView(AbsListView.java:1274)
07-24 06:00:04.584: WARN/ImageView(364):     at android.widget.GridView.onMeasure(GridView.java:934)
07-24 06:00:04.584: WARN/ImageView(364):     at android.view.View.measure(View.java:7964)
07-24 06:00:04.584: WARN/ImageView(364):     at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:3023)
07-24 06:00:04.584: WARN/ImageView(364):     at android.widget.FrameLayout.onMeasure(FrameLayout.java:245)
07-24 06:00:04.584: WARN/ImageView(364):     at android.view.View.measure(View.java:7964)
07-24 06:00:04.584: WARN/ImageView(364):     at android.widget.LinearLayout.measureVertical(LinearLayout.java:464)
07-24 06:00:04.584: WARN/ImageView(364):     at android.widget.LinearLayout.onMeasure(LinearLayout.java:278)
07-24 06:00:04.584: WARN/ImageView(364):     at android.view.View.measure(View.java:7964)
07-24 06:00:04.584: WARN/ImageView(364):     at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:3023)
07-24 06:00:04.584: WARN/ImageView(364):     at android.widget.FrameLayout.onMeasure(FrameLayout.java:245)
07-24 06:00:04.584: WARN/ImageView(364):     at android.view.View.measure(View.java:7964)
07-24 06:00:04.584: WARN/ImageView(364):     at android.view.ViewRoot.performTraversals(ViewRoot.java:763)
07-24 06:00:04.584: WARN/ImageView(364):     at android.view.ViewRoot.handleMessage(ViewRoot.java:1633)
07-24 06:00:04.584: WARN/ImageView(364):     at android.os.Handler.dispatchMessage(Handler.java:99)
07-24 06:00:04.584: WARN/ImageView(364):     at android.os.Looper.loop(Looper.java:123)
07-24 06:00:04.584: WARN/ImageView(364):     at android.app.ActivityThread.main(ActivityThread.java:4363)
07-24 06:00:04.584: WARN/ImageView(364):     at java.lang.reflect.Method.invokeNative(Native Method)
07-24 06:00:04.584: WARN/ImageView(364):     at java.lang.reflect.Method.invoke(Method.java:521)
07-24 06:00:04.584: WARN/ImageView(364):     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:860)
07-24 06:00:04.584: WARN/ImageView(364):     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:618)
07-24 06:00:04.584: WARN/ImageView(364):     at dalvik.system.NativeStart.main(Native Method)

LogCat Resource Not Fount Exception After Workaround with .setImageDrawable:

    07-24 07:02:50.234: ERROR/AndroidRuntime(390): Uncaught handler: thread main exiting due to uncaught exception
07-24 07:02:50.245: ERROR/AndroidRuntime(390): android.content.res.Resources$NotFoundException: Resource ID #0x7f020003
07-24 07:02:50.245: ERROR/AndroidRuntime(390):     at android.content.res.Resources.getValue(Resources.java:891)
07-24 07:02:50.245: ERROR/AndroidRuntime(390):     at android.content.res.Resources.getDrawable(Resources.java:579)
07-24 07:02:50.245: ERROR/AndroidRuntime(390):     at com.marnbeast.android.ImageAdapter.getView(ImageAdapter.java:40)
07-24 07:02:50.245: ERROR/AndroidRuntime(390):     at android.widget.AbsListView.obtainView(AbsListView.java:1274)
07-24 07:02:50.245: ERROR/AndroidRuntime(390):     at android.widget.GridView.onMeasure(GridView.java:934)
07-24 07:02:50.245: ERROR/AndroidRuntime(390):     at android.view.View.measure(View.java:7964)
07-24 07:02:50.245: ERROR/AndroidRuntime(390):     at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:3023)
07-24 07:02:50.245: ERROR/AndroidRuntime(390):     at android.widget.FrameLayout.onMeasure(FrameLayout.java:245)
07-24 07:02:50.245: ERROR/AndroidRuntime(390):     at android.view.View.measure(View.java:7964)
07-24 07:02:50.245: ERROR/AndroidRuntime(390):     at android.widget.LinearLayout.measureVertical(LinearLayout.java:464)
07-24 07:02:50.245: ERROR/AndroidRuntime(390):     at android.widget.LinearLayout.onMeasure(LinearLayout.java:278)
07-24 07:02:50.245: ERROR/AndroidRuntime(390):     at android.view.View.measure(View.java:7964)
07-24 07:02:50.245: ERROR/AndroidRuntime(390):     at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:3023)
07-24 07:02:50.245: ERROR/AndroidRuntime(390):     at android.widget.FrameLayout.onMeasure(FrameLayout.java:245)
07-24 07:02:50.245: ERROR/AndroidRuntime(390):     at android.view.View.measure(View.java:7964)
07-24 07:02:50.245: ERROR/AndroidRuntime(390):     at android.view.ViewRoot.performTraversals(ViewRoot.java:763)
07-24 07:02:50.245: ERROR/AndroidRuntime(390):     at android.view.ViewRoot.handleMessage(ViewRoot.java:1633)
07-24 07:02:50.245: ERROR/AndroidRuntime(390):     at android.os.Handler.dispatchMessage(Handler.java:99)
07-24 07:02:50.245: ERROR/AndroidRuntime(390):     at android.os.Looper.loop(Looper.java:123)
07-24 07:02:50.245: ERROR/AndroidRuntime(390):     at android.app.ActivityThread.main(ActivityThread.java:4363)
07-24 07:02:50.245: ERROR/AndroidRuntime(390):     at java.lang.reflect.Method.invokeNative(Native Method)
07-24 07:02:50.245: ERROR/AndroidRuntime(390):     at java.lang.reflect.Method.invoke(Method.java:521)
07-24 07:02:50.245: ERROR/AndroidRuntime(390):     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:860)
07-24 07:02:50.245: ERROR/AndroidRuntime(390):     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:618)
07-24 07:02:50.245: ERROR/AndroidRuntime(390):     at dalvik.system.NativeStart.main(Native Method)

EDIT: I'm including the R file to verify that the images are correctly referenced.

/* AUTO-GENERATED FILE.  DO NOT MODIFY.
 *
 * This class was automatically generated by the
 * aapt tool from the resource data it found.  It
 * should not be modified by hand.
 */

package com.marnbeast.android;

public final class R {
    public static final class attr {
    }
    public static final class drawable {
        public static final int icon=0x7f020000;
        public static final int sample_0=0x7f020001;
        public static final int sample_1=0x7f020002;
        public static final int sample_2=0x7f020003;
        public static final int sample_3=0x7f020004;
        public static final int sample_4=0x7f020005;
        public static final int sample_5=0x7f020006;
        public static final int sample_6=0x7f020007;
        public static final int sample_7=0x7f020008;
    }
    public static final class id {
        public static final int gridview=0x7f050000;
    }
    public static final class layout {
        public static final int main=0x7f030000;
    }
    public static final class string {
        public static final int app_name=0x7f040001;
        public static final int hello=0x7f040000;
    }
}

Answer 1

we can use this code,

public class MyGridView extends Activity { 

@Override 
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.animalsgridview);
GridView gridview = (GridView) findViewById(R.id.gridviewid);
gridview.setAdapter(new ImageAdapter(this));
gridview.setOnItemClickListener(new OnItemClickListener() {
    public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
        int imageId = ((ImageAdapter)parent.getAdapter()).mygetItemId(position);

        Intent fullScreenIntent = new Intent(v.getContext(),Full.class);
        fullScreenIntent.putExtra(Full.class.getName(),imageId);
        AnimalsGridView.this.startActivity(fullScreenIntent);         
        }
    });
}
private class ImageAdapter extends BaseAdapter {
    private Context mContext;
    public ImageAdapter(Context c) {
    mContext = c;
    }
    public int getCount() {
        return imagearray.length;
    }
    public Object getItem(int position) {
        return null;
    }
    public long getItemId(int position) {
        return imagearray[position];
    }

    // create a new ImageView for each item referenced by the Adapter
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView;
        if (convertView == null) {  // if it's not recycled, initialize some attributes
            imageView = new ImageView(mContext);
            imageView.setLayoutParams(new GridView.LayoutParams(150, 150));
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);
            imageView.setPadding(1, 1, 1, 1);

        } else {
            imageView = (ImageView) convertView;
        }

        imageView.setImageResource(imagearray[position]);
        return imageView;
    }
    // references to our images                    
    private Integer[] imagearray = {                 

        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

        };
    public int mygetItemId(int position) {
                return imagearray[position];
    }                                
  }
}   

this is the xml code

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_weight="1"
  android:layout_height="fill_parent">
<GridView
    android:id="@+id/gridviewid"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
    android:numColumns="auto_fit"
    android:columnWidth="60dp"
    android:stretchMode="columnWidth"
    android:padding="5dp"
    android:verticalSpacing="5dp"
    android:horizontalSpacing="20dp"        
    android:gravity="center_horizontal"
    android:background="#ffffff"/>    

Answer 2

replace your adapter class by given code

package com.marnbeast.android; 

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;

public class ImageAdapter extends BaseAdapter {
    private Context mContext;

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

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

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

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

    // create a new ImageView for each item referenced by the Adapter
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView;
        if (convertView == null) {  // if it's not recycled, initialize some attributes
            imageView = new ImageView(mContext);
            imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setPadding(8, 8, 8, 8);
        } else {
            imageView = (ImageView) convertView;
        }

        imageView.setImageResource(mThumbIds[position]);
        return imageView;
    }

    // references to our images
    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
    };
}