Board index » Android Coding Problems » View, Layout & Resource Problems

Skip to content

Quirk with GridView?

Put problem concerning Views, Layouts and other XML-Resources (like AndroidManifest) here.
Post a reply

Quirk with GridView?

Postby tbennett » Wed Dec 10, 2008 8:40 am

I'm working on a simple "step" drum machine app and have a few questions, I'll start w/the GridView control.

First, here's an example of such an app for reference: http://www.themaninblue.com/experiment/JS-909/

So I created the layout using a GridView, bound to an ImageAdapter, which ties to an array of Boolean values (indicating if a particular switch is on or off). It creates the GridView correctly, but during debugging I noticed that the ID's of the Views get out of sync around 64, then for some reason start to change at random while the app is running ?????

I'm new to android/java, intermediate in c#/vb.net, so feel free to tear this code apart :) Most of this is taken from the Grid2 tutorial:

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.  
  2.  
  3.  
  4.   public class ImageAdapter extends BaseAdapter {
  5.  
  6.  
  7.  
  8.         private Context mContext;
  9.  
  10.  
  11.  
  12.         public ImageAdapter(Context c) {
  13.  
  14.             mContext = c;
  15.  
  16.         }
  17.  
  18.  
  19.  
  20.         public int getCount() {
  21.  
  22.             return FunkyDrummer.trackSwitches.length;
  23.  
  24.         }
  25.  
  26.  
  27.  
  28.         // Gets the value for the specified array index
  29.  
  30.         public Object getItem(int position) {
  31.  
  32.             return position;
  33.  
  34.         }
  35.  
  36.  
  37.  
  38.         public long getItemId(int position) {
  39.  
  40.             return position;
  41.  
  42.         }
  43.  
  44.  
  45.  
  46.         public View getView(int position, View convertView, ViewGroup parent) {
  47.  
  48.  
  49.  
  50.                 ImageView imageView;
  51.  
  52.  
  53.  
  54.                 if (convertView == null) {
  55.  
  56.  
  57.  
  58.                         imageView = new ImageView(mContext);
  59.  
  60.  
  61.  
  62.  
  63.  
  64.                         imageView.setLayoutParams(new GridView.LayoutParams(30, 40));
  65.  
  66.                 imageView.setAdjustViewBounds(false);
  67.  
  68.                 imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
  69.  
  70.                 imageView.setPadding(4, 8, 4, <img src="http://www.anddev.org/images/smilies/cool.png" alt="8)" title="Cool" />;
  71.  
  72.                
  73.  
  74.                 // Set the ImageView's ID, I want to use 0-15 for row1, 16-31 for row 2, etc.
  75.  
  76.                 imageView.setId((int)position);
  77.  
  78.  
  79.  
  80.  
  81.  
  82.                 imageView.setOnClickListener(switchListener);
  83.  
  84.                 }
  85.  
  86.                 else{
  87.  
  88.                 imageView = (ImageView) convertView;
  89.  
  90.                 }
  91.  
  92.                
  93.  
  94.             // Set the ImageView's image based on it's active state
  95.  
  96.             if(FunkyDrummer.trackSwitches[position]==true){
  97.  
  98.                 imageView.setImageResource(R.drawable.btn_on); 
  99.  
  100.             }
  101.  
  102.             else{
  103.  
  104.                 imageView.setImageResource(R.drawable.btn_off);
  105.  
  106.             }
  107.  
  108.  
  109.  
  110.             return imageView;
  111.  
  112.         }
  113.  
  114.  
  115.  
  116.  
Parsed in 0.037 seconds, using GeSHi 1.0.8.4


... and in the Activity constructor....

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.  
  2.  
  3.  
  4.     GridView g = (GridView) findViewById(R.id.grdMain);
  5.  
  6.         g.setNumColumns(16);
  7.  
  8.         g.setColumnWidth(30);
  9.  
  10.         g.setAdapter(new ImageAdapter(this));
  11.  
  12.  
  13.  
  14.  
Parsed in 0.030 seconds, using GeSHi 1.0.8.4


Honestly I'm kinda lost how it's determining how to bind to Boolean trackSwitches[] to begin with, but it seems to work. I have the OnClickHandler's to toggle the "button state" and a basic loop that triggers a SoundPool sound depending on the index at the time the timer loop hits, all in all it works fairly well, except for these random triggers who's View.getId() are out of order compared to the View to the left and right of it. Any ideas?
tbennett
Junior Developer
Junior Developer
 
Posts: 13
Joined: Sun Dec 07, 2008 7:58 am
Top
Top

Postby tbennett » Wed Dec 10, 2008 8:46 am

Nevermind :)

Reading the code just after I posted it, I thought to try modifying this:


Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.  
  2.  
  3.  
  4.  // Gets the ImageView for the specified array index
  5.  
  6.         public View getView(int position, View convertView, ViewGroup parent) {
  7.  
  8.  
  9.  
  10.                 ImageView imageView;
  11.  
  12.  
  13.  
  14.                 if (convertView == null) {
  15.  
  16.                         // Instantiate a new ImageView
  17.  
  18.                         imageView = new ImageView(mContext);
  19.  
  20.  
  21.  
  22.                         // Set the ImageView's layout properties
  23.  
  24.                         imageView.setLayoutParams(new GridView.LayoutParams(30, 40));
  25.  
  26.                 imageView.setAdjustViewBounds(false);
  27.  
  28.                 imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
  29.  
  30.                 imageView.setPadding(4, 8, 4, <img src="http://www.anddev.org/images/smilies/cool.png" alt="8)" title="Cool" />;
  31.  
  32.                
  33.  
  34.                 // Set the ImageView's ID
  35.  
  36.                 imageView.setId((int)position);
  37.  
  38.  
  39.  
  40.                 // Add the click handler for this ImageView
  41.  
  42.                 imageView.setOnClickListener(switchListener);
  43.  
  44.                 }
  45.  
  46.                 else{
  47.  
  48.                 imageView = (ImageView) convertView;
  49.  
  50.  
  51.  
  52.                 }
  53.  
  54.  
  55.  
  56.  
Parsed in 0.037 seconds, using GeSHi 1.0.8.4


... to this

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.  
  2.  
  3.  
  4.  // Gets the ImageView for the specified array index
  5.  
  6.         public View getView(int position, View convertView, ViewGroup parent) {
  7.  
  8.  
  9.  
  10.                 ImageView imageView;
  11.  
  12.  
  13.  
  14.                 if (convertView == null) {
  15.  
  16.                         // Instantiate a new ImageView
  17.  
  18.                         imageView = new ImageView(mContext);
  19.  
  20.  
  21.  
  22.                         // Set the ImageView's layout properties
  23.  
  24.                         imageView.setLayoutParams(new GridView.LayoutParams(30, 40));
  25.  
  26.                 imageView.setAdjustViewBounds(false);
  27.  
  28.                 imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
  29.  
  30.                 imageView.setPadding(4, 8, 4, <img src="http://www.anddev.org/images/smilies/cool.png" alt="8)" title="Cool" />;
  31.  
  32.                
  33.  
  34.                 // Set the ImageView's ID
  35.  
  36.                 imageView.setId((int)position);
  37.  
  38.  
  39.  
  40.                 // Add the click handler for this ImageView
  41.  
  42.                 imageView.setOnClickListener(switchListener);
  43.  
  44.                 }
  45.  
  46.                 else{
  47.  
  48.                 imageView = (ImageView) convertView;
  49.  
  50.  
  51.  
  52.                 // Set the ImageView's ID
  53.  
  54.                 imageView.setId((int)position);
  55.  
  56.  
  57.  
  58.                 }
  59.  
  60.  
  61.  
  62.  
Parsed in 0.039 seconds, using GeSHi 1.0.8.4


... and that seemed to do the trick (adding setId in the "else" statement).

I'll post the full code after I pretty it up a little.
tbennett
Junior Developer
Junior Developer
 
Posts: 13
Joined: Sun Dec 07, 2008 7:58 am
Top

Postby vihil » Thu Dec 11, 2008 2:46 am

i would love such an app :) looking forward to it...

to your solution: if i'm not mistaken the getView supplies you with a convertView which is recycled. i.e., it reuses the old (same) views whose contents you still have to adapt to the item at $position. but it saves you from recreating the view over and over, especially if your viewgroup is scrollable...

i'd be interested in the polished version :) needing something similar for my app, and i've been using a TableLayout as my first attempt.. will look into GridView maybe it's better suited (sounds like a table vs div layout issue to me. so GridView would actually be more what i wanted but we will see)
vihil
Freshman
Freshman
 
Posts: 3
Joined: Thu Dec 11, 2008 2:39 am
Top

Postby tbennett » Fri Dec 12, 2008 1:54 am

So is it that it calls the "creation" section for the first item in the grid, then every item after that re-uses that first view for each item after that? That would make sense.
tbennett
Junior Developer
Junior Developer
 
Posts: 13
Joined: Sun Dec 07, 2008 7:58 am
Top
Top
Post a reply

Return to View, Layout & Resource Problems

Who is online

Users browsing this forum: No registered users and 7 guests

Board index The team • Delete all board cookies • All times are UTC + 1 hour