How to realise a Grid of Views..?

Put your problem here if it does not fit any of the other categories.

How to realise a Grid of Views..?

Postby sommeralex » Sun Feb 03, 2008 3:02 am

Hello.. my DEAR forum ;-)

i am trying to realize a Grid which consists not of ImageView but Views of my own (View) Elements. I tryed to adapt the GridExamples, but it didnt work...

What it the easiest way to implement a GRID which consists of Views?

Just something like this:

my GridView gridView();

gridView.add(myOwnViewInstance)
gridView.add(myOwnViewInstnace2)

and so on..

i read about the adapterClass - but it is confusing..

...
thx..

ps -> i know that i could use TableLayout for this purpose, but i want my layout to be a) dynamically and b) scrolling - i am not sure if the tableLayout is scrolling if there are to many elements added.
sommeralex
Experienced Developer
Experienced Developer
 
Posts: 95
Joined: Sun Jan 20, 2008 3:12 am
Location: Vienna

Top

Postby plusminus » Sun Feb 03, 2008 11:03 am

Hello sommeralex,

as you perhaps know I'm currently working on AndNav!. There I used a customized Adapter to fill a GridView during Runtime with flag-images:
Image


This is the GridView-Part of my xml-file:
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.         <GridView
  2.                 id="@+id/grid_searchcountry_flags"
  3.                 android:orientation="vertical"
  4.                 android:layout_width="fill_parent"
  5.                 android:layout_height="fill_parent" />
Parsed in 0.001 seconds, using GeSHi 1.0.8.4

My custom View extends from ImageView and transports just one additional information out, it should work with any other more complex View(s) too. ( I needed to make that Wrapper, because Country associates the Image with a Name and a Abbreviation needed for the Yahoo GeoCode API. Example: ..., GERMANY("Germany", "DE", R.drawable.flag_germany_48),... )
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.         /** Wrapper class around ImageView transporting
  2.          * the Country-Information to the
  3.          * OnItemClickListener and the
  4.          * OnItemSelectedListener of the GridView.*/
  5.         protected class FlagView extends ImageView{
  6.                 Country itsCountry;
  7.                 public FlagView(Context context, Country c) {
  8.                         super(context);
  9.                         itsCountry = c;
  10.                 }
  11.         }
Parsed in 0.030 seconds, using GeSHi 1.0.8.4

Then I had to create a a customized Adapter, like this:
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.         /** A Adapter wrapping around the Country-Enum. */
  2.         protected class CountryAdapter extends BaseAdapter {
  3.                
  4.             public CountryAdapter(Context context) { }
  5.  
  6.             public View getView(int position, View convertView, ViewGroup parent) {
  7.                 FlagView fv = new FlagView(SDCountry.this, Country.values()[position]);
  8.  
  9.                 fv.setImageResource(Country.values()[position].itsResID);
  10.                 fv.setLayoutParams(new Gallery.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
  11.                 return fv;
  12.             }
  13.  
  14.             public final int getCount() { return Country.values().length; }
  15.  
  16.             public final Object getItem(int position) { return Country.values()[position]; }
  17.  
  18.             public final long getItemId(int position) { return position; }
  19.         }
Parsed in 0.033 seconds, using GeSHi 1.0.8.4


Hope I could help you.

Regards,
plusminus
Image
Image | Android Development Community / Tutorials
User avatar
plusminus
Site Admin
Site Admin
 
Posts: 2688
Joined: Wed Nov 14, 2007 8:37 pm
Location: Schriesheim, Germany

Postby sommeralex » Sun Feb 03, 2008 2:05 pm

thx again plus minus: but:

1) what is the base adapter meant for? (i know that the adapters are for storing the objects.)
2) but there is no "addObject" for example. even the adaperClass has no add methods..

hm..
sommeralex
Experienced Developer
Experienced Developer
 
Posts: 95
Joined: Sun Jan 20, 2008 3:12 am
Location: Vienna

Postby plusminus » Sun Feb 03, 2008 2:16 pm

Hello sommeralex,

1.) an Adapter associates any data you prepare with a View (like GridView or ListView) you can set an Adapter to.

2.) Simply adding your own method should work :)
You could use a ArrayList to add objects easily at runtime (instead of an array).

There are several functions (from BaseAdapter)that sound like they you will use them, to make the system aware it should update/refresh the view:
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.                 notifyChange(); // probably call this after adding a dataset
  2.  
  3.                 notifyDataSetChanged(); // or this one ?
  4.  
  5.                 notifyDataSetInvalidated(); // this one probably on changes
Parsed in 0.034 seconds, using GeSHi 1.0.8.4


Hope I could help you. :)

Regards,
plusminus
Image
Image | Android Development Community / Tutorials
User avatar
plusminus
Site Admin
Site Admin
 
Posts: 2688
Joined: Wed Nov 14, 2007 8:37 pm
Location: Schriesheim, Germany

IconTextMenu Challange - next Steps

Postby sommeralex » Sun Feb 03, 2008 2:42 pm

i still get a nullpointer - is it maybe related to the gridView Bug?
( http://groups.google.com/group/android- ... c01e854885 )

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.  
  2. package com.airwriting.android.tests;
  3.  
  4. import java.util.ArrayList;
  5.  
  6. import android.app.Activity;
  7. import android.content.Context;
  8. import android.content.Intent;
  9. import android.os.Bundle;
  10. import android.view.View;
  11. import android.view.ViewGroup;
  12. import android.widget.BaseAdapter;
  13. import android.widget.GridView;
  14.  
  15.  
  16. //Need the following import to get access to the app resources, since this
  17. //class is in a sub-package.
  18.  
  19.  
  20.  
  21. public class Grid3 extends Activity {
  22.  
  23.     GridView iconTextGrid;
  24.     IconTextMenuView sampleIconTextMenuView;
  25.  
  26.     @Override
  27.     protected void onCreate(Bundle icicle) {
  28.         super.onCreate(icicle);
  29.  
  30.         loadApps(); // do this in onresume?
  31.  
  32.         setContentView(R.layout.iconmenu);
  33.         iconTextGrid = (GridView) findViewById(R.id.myGrid);
  34.         iconTextGrid.setAdapter(new IconTextMenuAdapter(this));
  35.        
  36.        
  37.         sampleIconTextMenuView = new IconTextMenuView(this);
  38.        
  39.     }
  40.  
  41.     private ArrayList<IconTextMenuView> textIcons;
  42.  
  43.     private void loadApps() {
  44.         Intent mainIntent = new Intent(Intent.MAIN_ACTION, null);
  45.         mainIntent.addCategory(Intent.LAUNCHER_CATEGORY);
  46.  
  47.     }
  48.  
  49.     protected class IconTextMenuAdapter extends BaseAdapter {
  50.        
  51.         public IconTextMenuAdapter(Context context) {
  52.                
  53.                 //just some samples first
  54.  
  55.                 //textIcons = new ArrayList(); ?
  56.                 textIcons.add(sampleIconTextMenuView);
  57.                 textIcons.add(sampleIconTextMenuView);
  58.                 textIcons.add(sampleIconTextMenuView);         
  59.                
  60.         }
  61.  
  62.         public View getView(int position, View convertView, ViewGroup parent) {
  63.          
  64.         return (textIcons.get(position));            
  65.            
  66.         }
  67.  
  68.         public final int getCount() { return textIcons.size(); }
  69.  
  70.         public final Object getItem(int position) { return textIcons.get(position); }
  71.  
  72.         public final long getItemId(int position) { return position; }
  73.     }
  74.  
  75. }
  76.  
  77.  
Parsed in 0.043 seconds, using GeSHi 1.0.8.4


Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. package com.airwriting.android.tests;
  2.  
  3.  
  4. import java.util.Map;
  5.  
  6. import android.content.Context;
  7.  
  8. import android.graphics.Typeface;
  9. import android.util.AttributeSet;
  10. import android.util.Log;
  11. import android.view.MotionEvent;
  12. import android.view.View;
  13. import android.widget.ImageView;
  14. import android.widget.LinearLayout;
  15. import android.widget.TextView;
  16.  
  17.  
  18. /**
  19.  * adapted from plusminus by sommeralex <img src="http://www.anddev.org/images/smilies/wink.png" alt=";-)" title="Wink" />
  20.  */
  21. public class IconTextMenuView extends LinearLayout implements android.view.View.OnClickListener          {
  22.  
  23.         // ===========================================================
  24.         // Fields
  25.         // ===========================================================
  26.  
  27.        
  28.         ;
  29.         private ImageView menuIcon = null;
  30.         private TextView menuText = null;
  31.  
  32.         // ===========================================================
  33.         // Constructors
  34.         // ===========================================================
  35.  
  36.         public IconTextMenuView(Context context) {
  37.                 super(context);
  38.  
  39.         }
  40.        
  41.         @Override
  42.         public boolean onMotionEvent(MotionEvent event) {
  43.  
  44.                 performClick();        
  45.                 return super.onMotionEvent(event);
  46.         }
  47.  
  48.  
  49.  
  50.  
  51.  
  52.  
  53.         public IconTextMenuView(Context context, AttributeSet attrs,
  54.                         Map inflateParams) {
  55.                 super(context, attrs, inflateParams);
  56.                
  57.                
  58.                 Log.i("IconTextMenuClicked", "icon created");
  59.                
  60.                 this.setOnClickListener(this);
  61.                
  62.                 /* Setup the ImageView that will show weather-icon. */
  63.                 this.menuIcon = new ImageView(context);
  64.                 this.menuIcon.setImageDrawable(getResources().getDrawable(
  65.                                 R.drawable.dunno));
  66.  
  67.                 /* Setup the textView that will show the temperature. */
  68.                 this.menuText = new TextView(context);
  69.                 this.menuText.setText("blabla");
  70.                 this.menuText.setTextSize(8);
  71.                 //this.menuText.setTypeface(Typeface
  72.                         //      .create("Tahoma", Typeface.BOLD));
  73.  
  74.                 /* Add child views to this object. */
  75.                 this.addView(this.menuIcon, new LinearLayout.LayoutParams(
  76.                                 LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
  77.                
  78.                 this.addView(this.menuText, new LinearLayout.LayoutParams(
  79.                                 LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
  80.         }
  81.  
  82.  
  83.         public void onClick(View arg0) {
  84.                 // TODO Auto-generated method stub     
  85.                 Log.i("IconTextMenuClicked", "clicked");
  86.                
  87.         }
  88. }
  89.  
  90.  
  91.  
Parsed in 0.044 seconds, using GeSHi 1.0.8.4


the startingClass

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. package com.airwriting.android.tests;
  2.  
  3. import android.app.Activity;
  4. import android.os.Bundle;
  5. import android.util.Log;
  6. import android.view.View;
  7. import android.view.View.OnClickListener;
  8.  
  9.  
  10. public class Test extends Activity {
  11.     /** Called when the activity is first created. */
  12.     @Override
  13.     public void onCreate(Bundle icicle) {
  14.         super.onCreate(icicle);
  15.         setContentView(R.layout.main);
  16.        
  17.        
  18.        IconTextMenuView iconTextMenuView = (IconTextMenuView) findViewById(R.id.icontextmenu1);
  19.        
  20.        iconTextMenuView.setOnClickListener(clickListener);
  21.                
  22.     }
  23.    
  24.         OnClickListener clickListener = new OnClickListener() {
  25.                 public void onClick(View v) {
  26.                         Log.i("iconTextElement", "clicked");
  27.                        
  28.                        
  29.                 }
  30.                
  31.         };             
  32. }
  33.  
Parsed in 0.039 seconds, using GeSHi 1.0.8.4
sommeralex
Experienced Developer
Experienced Developer
 
Posts: 95
Joined: Sun Jan 20, 2008 3:12 am
Location: Vienna

Postby plusminus » Sun Feb 03, 2008 2:50 pm

Hello sommeralex,

yes, that is the (or one of the) GridView-Bugs.
I received the same ... it is said to be fixed :roll:

That was the only error left :?:

Regards,
plusminus
Image
Image | Android Development Community / Tutorials
User avatar
plusminus
Site Admin
Site Admin
 
Posts: 2688
Joined: Wed Nov 14, 2007 8:37 pm
Location: Schriesheim, Germany

Top

Postby sommeralex » Sun Feb 03, 2008 2:52 pm

but it seems that you are using GridView? so how did you solve this problem?
sommeralex
Experienced Developer
Experienced Developer
 
Posts: 95
Joined: Sun Jan 20, 2008 3:12 am
Location: Vienna

Postby plusminus » Sun Feb 03, 2008 2:59 pm

Hello sommeralex

I didn't :) I wait for Google.

The bug occurs when you have a component netx to the GridView and enter it for the first time using keys(real&emu ones), but not "click to the screen". (that is my personal description of the bug!)
Clicking it directly (via "click to the screen") makes the whole GridView disappear (the second bug) but then navigation within and in/out of the view works fine :!: Its annoying but during developing I can live with it. :?

I haven't seen a real workaround for any of the bugs :(

According to a GoogleGroups-Thread both will be fixed within the next SDK-Version. I hope it will be true :roll:

Regards,
plusminus
Image
Image | Android Development Community / Tutorials
User avatar
plusminus
Site Admin
Site Admin
 
Posts: 2688
Joined: Wed Nov 14, 2007 8:37 pm
Location: Schriesheim, Germany

Postby sommeralex » Sun Feb 03, 2008 3:05 pm

sorry, but i cant follow you: the gridView example works also in the ApiDemos. -> so what you tell me is, that i should for example first launch a view with a button, and this button starts the gridView to avoid the bug?!

haha i checked it. i can launch it the second time (so not from eclipse but directly from the android-menu)
sommeralex
Experienced Developer
Experienced Developer
 
Posts: 95
Joined: Sun Jan 20, 2008 3:12 am
Location: Vienna

Postby plusminus » Sun Feb 03, 2008 3:15 pm

Hello sommeralex,

no I described how the bug occurs/happens, not how to workaround it! ( I actually know no workaround! )

(I also described how the user can avoid it, by not entering the GridView using Keys but the Mouse on the first time. For a real application this would be 100% unacceptable, but just during development, knowing it will be fixed from Google soon, is ok for me.)
Sorry for the bad explanation. :oops:

Regards,
plusminus

[Edit] No Exception at all when you run directly from the emulator :?: [/Edit]
Image
Image | Android Development Community / Tutorials
User avatar
plusminus
Site Admin
Site Admin
 
Posts: 2688
Joined: Wed Nov 14, 2007 8:37 pm
Location: Schriesheim, Germany

Postby sommeralex » Sun Feb 03, 2008 4:17 pm

i could launch it from the android menu without a nullPointer Exception.. when i launched it directly from eclipse, there was always a nullPointer. Now, it doesnt work anymore - and i dont know why..
Attachments
IconTextMenu.zip
The Project File for Eclipse
(48.06 KiB) Downloaded 411 times
sommeralex
Experienced Developer
Experienced Developer
 
Posts: 95
Joined: Sun Jan 20, 2008 3:12 am
Location: Vienna

Postby cabernet1976 » Sun Feb 03, 2008 5:10 pm

Hi plusminus,

Please see the other thread about gridview, I work arround the second issue which make screen black.
But now I get the first issue in my program, I want a buttonbar below the gridview.
Could you explain clear how to avoid (I just want to avoid it before the new release) the first issue which throw a nullpointerexception?
Thank you.
Upload2Flickr's blog: http://upload2flickr.blogspot.com
cabernet1976
Senior Developer
Senior Developer
 
Posts: 154
Joined: Fri Nov 16, 2007 2:34 am
Location: China

Postby plusminus » Sun Feb 03, 2008 7:13 pm

Hello cabernet,

I had an idea the whole day in my mind and now I found time to testit. The workaround is so simple ^^
Just call make the GridView have the Focus as the first View.
Following works perfect with me:
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.         <GridView
  2.  
  3.                 id="@+id/grid_searchcountry_flags"
  4.  
  5.                 android:orientation="vertical"
  6.  
  7.                 android:layout_width="fill_parent"
  8.  
  9.                 android:layout_height="fill_parent">
  10.  
  11.                 <requestFocus/>
  12.  
  13.         </GridView>
Parsed in 0.001 seconds, using GeSHi 1.0.8.4

instead of:
Syntax: [ Download ] [ Hide ]
Using xml Syntax Highlighting
  1.         <GridView
  2.  
  3.                 id="@+id/grid_searchcountry_flags"
  4.  
  5.                 android:orientation="vertical"
  6.  
  7.                 android:layout_width="fill_parent"
  8.  
  9.                 android:layout_height="fill_parent"/>
Parsed in 0.001 seconds, using GeSHi 1.0.8.4


I'm sure it works with Java-Code too.

So we finally found workarounds for both bugs :roll:

Regards,
plusminus
Image
Image | Android Development Community / Tutorials
User avatar
plusminus
Site Admin
Site Admin
 
Posts: 2688
Joined: Wed Nov 14, 2007 8:37 pm
Location: Schriesheim, Germany

Postby plusminus » Sun Feb 03, 2008 8:22 pm

Hello sommeralex,

had a longer look at your code and fixed it.

Having some bad tries everything gets worse and worse, so do a complete restart on a problem from time to time!

1.) You had 2 layout files and were "finding" the wrong Id, what caused a NullPointerException.
2.) You used a constructor that is used for inflating from xml and left the other .
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.         /** This constructor is being used on Inflating form XML only !!! */
  2.  
  3.         public IconTextMenuView(Context context, AttributeSet attrs, Map inflateParams) {
  4.  
  5.                 super(context, attrs, inflateParams);
  6.  
  7.                 // code moved to other constructor
  8.  
  9.         }
Parsed in 0.036 seconds, using GeSHi 1.0.8.4


With me results now in the following (with 9 MenuItems): (see attachment)

Code also as atatchment.

Regards,
plusminus
Attachments
fixed.png
output of fixed code
fixed.png (23.84 KiB) Viewed 8979 times
AndroidTest_sommeralex.zip
Fixed
(47.35 KiB) Downloaded 511 times
Image
Image | Android Development Community / Tutorials
User avatar
plusminus
Site Admin
Site Admin
 
Posts: 2688
Joined: Wed Nov 14, 2007 8:37 pm
Location: Schriesheim, Germany

thx!!!!!!!!

Postby sommeralex » Sun Feb 03, 2008 10:24 pm

hello plusminus,

thank you very much for your help. i know i should read the doc more carefully, and i promise i will do ;-)

just one question is left for this iconTextMenuView:

why, if it is linear, is the text right to to icon and not under it?!
sommeralex
Experienced Developer
Experienced Developer
 
Posts: 95
Joined: Sun Jan 20, 2008 3:12 am
Location: Vienna

Top
Next

Return to Other Coding-Problems

Who is online

Users browsing this forum: No registered users and 11 guests