How to populate a GridView inside a viewpager in Android

Question

I am somewhat new to android development and development in general. I have a custom layout that has a view pager with two pages that can be flipped through horizontally (They work just fine). In the first page, I have a grid view that fills the page. However, I have tried countless different ways to get it to work, but the grid view will not populate with the images and I receive a null pointer exception.

I have a layout file that holds the view pager, and the view pager's id is fontsviewpager. Then, I have the two separate layouts for the two pages, and the first one has the gridview. The id for the gridview is italiclcgrid.

Here is the Activity:

public class CalligraphyFontsActivity extends Activity implements
    View.OnClickListener {
public Typeface calligraphyfont;
public TextView italiclowercase;

@Override
public void onCreate(Bundle savedInstanceState) {
    SharedPreferences getPrefs = PreferenceManager
            .getDefaultSharedPreferences(getBaseContext());
    boolean fullscreen = getPrefs.getBoolean("fullscreen", true);
    if (fullscreen) {
        setTheme(android.R.style.Theme_NoTitleBar_Fullscreen);
    } else {
        setTheme(android.R.style.Theme_NoTitleBar);
    }
    super.onCreate(savedInstanceState);
    setContentView(R.layout.calligraphyfonts2);
    MyPagerAdapter adapter = new MyPagerAdapter();
    ViewPager myPager = (ViewPager) findViewById(R.id.fontsviewpager);
    myPager.setAdapter(adapter);
    myPager.setCurrentItem(0);
    ImageView backhomebutton = (ImageView) findViewById(R.id.backhomebutton);
    ImageView settingspic = (ImageView) findViewById(R.id.settingspic);
    calligraphyfont = Typeface.createFromAsset(getAssets(),
            "fonts/MTCORSVA.TTF");
    settingspic.setOnClickListener(this);
    backhomebutton.setOnClickListener(this);
    GridView gridview = (GridView) findViewById(R.id.italiclcgrid);
    gridview.setAdapter(new ImageAdapter(this));

}

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.capitalagray,
            R.drawable.capitalbgray, R.drawable.capitalcgray };

}

public void onClick(View v) {
    Intent launchsettings = new Intent(CalligraphyFontsActivity.this,
            Settings.class);
    switch (v.getId()) {
    case R.id.backhomebutton:
        finish();
        break;
    case R.id.settingspic:
        startActivity(launchsettings);
        break;

    }
}

public class MyPagerAdapter extends PagerAdapter {

    public int getCount() {
        return 2;
    }

    public Object instantiateItem(View collection, int position) {
        LayoutInflater inflater = (LayoutInflater) collection.getContext()
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        int resId = 0;
        switch (position) {
        case 0:
            resId = R.layout.italiclc;

            break;
        case 1:
            resId = R.layout.italicuc;
            break;
        }

        View view = inflater.inflate(resId, null);
        if (resId == R.layout.italiclc) {
            TextView italiclowercase = (TextView) view
                    .findViewById(R.id.italiclowercase);
            italiclowercase.setTypeface(calligraphyfont);
        }
        if (resId == R.layout.italicuc) {
            TextView italicuppercase = (TextView) view
                    .findViewById(R.id.italicuppercase);
            italicuppercase.setTypeface(calligraphyfont);

        }
        ((ViewPager) collection).addView(view, 0);

        return view;
    }

    @Override
    public void destroyItem(View arg0, int arg1, Object arg2) {
        ((ViewPager) arg0).removeView((View) arg2);

    }

    @Override
    public void finishUpdate(View arg0) {
        // TODO Auto-generated method stub

    }

    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        return arg0 == ((View) arg1);

    }

    @Override
    public void restoreState(Parcelable arg0, ClassLoader arg1) {
        // TODO Auto-generated method stub

    }

    @Override
    public Parcelable saveState() {
        // TODO Auto-generated method stub
        return null;
    }

    @Override
    public void startUpdate(View arg0) {
        // TODO Auto-generated method stub

    }

    public void onClick(View v) {
        // TODO Auto-generated method stub

    }

}

}

As I said before, I tried many different ways to get it to work to no avail. The exception is coming from the line that sets the image adapter to the grid view (line 29). Any help that could be provided would be greatly appreciated.

Answer 1

I have the two separate layouts for the two pages, and the first one has the gridview.

So you have problem in following statement:

GridView gridview = (GridView) findViewById(R.id.italiclcgrid);

Here you are trying to reference GridView from main.xml. Rather you should reference it from layout file where you have defined it.

Your code is like this:

setContentView(R.layout.calligraphyfonts2);
GridView gridview = (GridView) findViewById(R.id.italiclcgrid);

So you make sure your GridView is defined in calligraphyfonts2 layout or try to refernce it from another layout using inflator.

If you have defined GridView in italiclc layout then add following changes in code:

settingspic.setOnClickListener(this);
backhomebutton.setOnClickListener(this);
GridView gridview = (GridView) findViewById(R.id.italiclcgrid); // <- Remove this
gridview.setAdapter(new ImageAdapter(this)); // <-- Remove this

And add it here:

if (resId == R.layout.italiclc) {
  GridView gridview = (GridView) view.findViewById(R.id.italiclcgrid);
  gridview.setAdapter(new ImageAdapter(mContext));

  TextView italiclowercase = (TextView) view.findViewById(R.id.italiclowercase);
  italiclowercase.setTypeface(calligraphyfont);
}