How to realise a Grid of Views..?

sommeralex · by **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.

plusminus · by **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:

This is the GridView-Part of my xml-file:

Syntax: [ Download ] [ Hide ]

Using xml Syntax Highlighting

        <GridView
                id="@+id/grid_searchcountry_flags"
                android:orientation="vertical"
                android:layout_width="fill_parent"
                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

        /** Wrapper class around ImageView transporting 
         * the Country-Information to the 
         * OnItemClickListener and the 
         * OnItemSelectedListener of the GridView.*/
        protected class FlagView extends ImageView{
                Country itsCountry;
                public FlagView(Context context, Country c) {
                        super(context);
                        itsCountry = c;
                }
        }
Parsed in 0.031 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

        /** A Adapter wrapping around the Country-Enum. */
        protected class CountryAdapter extends BaseAdapter {
                
            public CountryAdapter(Context context) { }
 
            public View getView(int position, View convertView, ViewGroup parent) {
                FlagView fv = new FlagView(SDCountry.this, Country.values()[position]);
 
                fv.setImageResource(Country.values()[position].itsResID);
                fv.setLayoutParams(new Gallery.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
                return fv;
            }
 
            public final int getCount() { return Country.values().length; }
 
            public final Object getItem(int position) { return Country.values()[position]; }
 
            public final long getItemId(int position) { return position; }
        }
Parsed in 0.034 seconds,  using GeSHi 1.0.8.4

Hope I could help you.

Regards,
plusminus

sommeralex · by **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..

plusminus · by **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

                notifyChange(); // probably call this after adding a dataset
 
                notifyDataSetChanged(); // or this one ?
 
                notifyDataSetInvalidated(); // this one probably on changes 
Parsed in 0.034 seconds,  using GeSHi 1.0.8.4

Hope I could help you.

Regards,
plusminus

sommeralex · by **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

 
package com.airwriting.android.tests;
 
import java.util.ArrayList;
 
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
 
//Need the following import to get access to the app resources, since this
//class is in a sub-package.
 
public class Grid3 extends Activity {
 
    GridView iconTextGrid;
    IconTextMenuView sampleIconTextMenuView;
 
    @Override
    protected void onCreate(Bundle icicle) {
        super.onCreate(icicle);
 
        loadApps(); // do this in onresume?
 
        setContentView(R.layout.iconmenu);
        iconTextGrid = (GridView) findViewById(R.id.myGrid);
        iconTextGrid.setAdapter(new IconTextMenuAdapter(this));
        
        sampleIconTextMenuView = new IconTextMenuView(this);
        
    }
 
    private ArrayList<IconTextMenuView> textIcons;
 
    private void loadApps() {
        Intent mainIntent = new Intent(Intent.MAIN_ACTION, null);
        mainIntent.addCategory(Intent.LAUNCHER_CATEGORY);
 
    }
 
    protected class IconTextMenuAdapter extends BaseAdapter {
        
        public IconTextMenuAdapter(Context context) { 
                
                //just some samples first
 
                //textIcons = new ArrayList(); ?
                textIcons.add(sampleIconTextMenuView);
                textIcons.add(sampleIconTextMenuView);
                textIcons.add(sampleIconTextMenuView);          
                
        }
 
        public View getView(int position, View convertView, ViewGroup parent) {
         
        return (textIcons.get(position));            
            
        }
 
        public final int getCount() { return textIcons.size(); }
 
        public final Object getItem(int position) { return textIcons.get(position); }
 
        public final long getItemId(int position) { return position; }
    }
 
}
 
Parsed in 0.043 seconds,  using GeSHi 1.0.8.4

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

package com.airwriting.android.tests;
 
 
import java.util.Map;
 
import android.content.Context;
 
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
 
 
/**
 * adapted from plusminus by sommeralex <img src="http://www.anddev.org/images/smilies/wink.png" alt=";-)" title="Wink" />
 */
public class IconTextMenuView extends LinearLayout implements android.view.View.OnClickListener          {
 
        // ===========================================================
        // Fields
        // ===========================================================
 
        
        ;
        private ImageView menuIcon = null;
        private TextView menuText = null;
 
        // ===========================================================
        // Constructors
        // ===========================================================
 
        public IconTextMenuView(Context context) {
                super(context);
 
        }
        
        @Override
        public boolean onMotionEvent(MotionEvent event) {
 
                performClick();         
                return super.onMotionEvent(event);
        }
 
 
 
 
 
 
        public IconTextMenuView(Context context, AttributeSet attrs,
                        Map inflateParams) {
                super(context, attrs, inflateParams);
                
                
                Log.i("IconTextMenuClicked", "icon created");
                
                this.setOnClickListener(this);
                
                /* Setup the ImageView that will show weather-icon. */
                this.menuIcon = new ImageView(context);
                this.menuIcon.setImageDrawable(getResources().getDrawable(
                                R.drawable.dunno));
 
                /* Setup the textView that will show the temperature. */
                this.menuText = new TextView(context);
                this.menuText.setText("blabla");
                this.menuText.setTextSize(8);
                //this.menuText.setTypeface(Typeface
                        //      .create("Tahoma", Typeface.BOLD));
 
                /* Add child views to this object. */
                this.addView(this.menuIcon, new LinearLayout.LayoutParams(
                                LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
                
                this.addView(this.menuText, new LinearLayout.LayoutParams(
                                LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
        }
 
 
        public void onClick(View arg0) {
                // TODO Auto-generated method stub      
                Log.i("IconTextMenuClicked", "clicked");
                
        }
}
 
 
 
Parsed in 0.044 seconds,  using GeSHi 1.0.8.4

the startingClass

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

package com.airwriting.android.tests;
 
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
 
 
public class Test extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle icicle) {
        super.onCreate(icicle);
        setContentView(R.layout.main);
       
        
       IconTextMenuView iconTextMenuView = (IconTextMenuView) findViewById(R.id.icontextmenu1);
       
       iconTextMenuView.setOnClickListener(clickListener);
                
    }
    
        OnClickListener clickListener = new OnClickListener() {
                public void onClick(View v) {
                        Log.i("iconTextElement", "clicked");
                        
                        
                }
                
        };              
}
 
Parsed in 0.039 seconds,  using GeSHi 1.0.8.4

plusminus · by **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

sommeralex · by **sommeralex** » Sun Feb 03, 2008 2:52 pm

but it seems that you are using GridView? so how did you solve this problem?

plusminus · by **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

sommeralex · by **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)

plusminus · by **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]

sommeralex · by **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..

cabernet1976 · by **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.

plusminus · by **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

        <GridView
 
                id="@+id/grid_searchcountry_flags"
 
                android:orientation="vertical"
 
                android:layout_width="fill_parent"
 
                android:layout_height="fill_parent">
 
                <requestFocus/> 
 
        </GridView>
Parsed in 0.001 seconds,  using GeSHi 1.0.8.4

instead of:

Syntax: [ Download ] [ Hide ]

Using xml Syntax Highlighting

        <GridView
 
                id="@+id/grid_searchcountry_flags"
 
                android:orientation="vertical"
 
                android:layout_width="fill_parent"
 
                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

plusminus · by **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

        /** This constructor is being used on Inflating form XML only !!! */
 
        public IconTextMenuView(Context context, AttributeSet attrs, Map inflateParams) {
 
                super(context, attrs, inflateParams);
 
                // code moved to other constructor
 
        }
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

sommeralex · by **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?!

How to realise a Grid of Views..?

How to realise a Grid of Views..?

IconTextMenu Challange - next Steps

thx!!!!!!!!

Who is online