[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3005
  • Last Modified:

How to handle onclick event of a large gridview

Hi,
I have multiple large gridview which contains approximately 400++ gridcells.
I would like to have a pop up dialog when the user click on a specific gridcells and return its location (for example 1A, 2B, 3C etc (no. of rows/cols )

I know the usual way to create the onClick event for an image so I would like to have the easier way to solve this problem since it is a large gridview.

I'm still a newbie on developing android apps so any suggestion on what I should use or tutorials are welcome.

Below is part of my code which i have created to display the seats in gridview.
Thanks in advance.
	private ArrayList<Integer> image, image2; 
	private ArrayList<String> no2, no22;
	
	String[] items = { "A", "B", "C", " ", "D", "E", "F", " ", "G", "H", "I"};
	String[] no1 = { "1", "2"};
	String[] no12 = { "1", "2"};

@Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) 
	{
        View view = inflater.inflate(R.layout.hka_booknow_seats, container, false);
        TextView txtView = (TextView) view.findViewById(R.id.txtDisplayedTab);  
        txtView.setText("Seat Selection"); 
        
        /************************************************************************************************/
        /*                		Grid View        			                        */
        /************************************************************************************************/
        
        prepareList1();
        
        GridView gv = (GridView) view.findViewById(R.id.gridView1);      
        ImageList adapter = new ImageList(getActivity());
        gv.setAdapter(adapter);
        
        ListView lv;
        lv = (ListView) view.findViewById(R.id.listno1);  
        // Alternative use ArrayList<String> list
        ArrayAdapter<String> files = new ArrayAdapter<String>(getActivity(), R.layout.seatno_listview, no1);
        lv.setAdapter(files);
        
        prepareList1();
        
        GridView gv2 = (GridView) view.findViewById(R.id.gridView2);      
        ImageList adapter2 = new ImageList(getActivity());
        gv2.setAdapter(adapter2);
        
        ListView lv2;
        lv2 = (ListView) view.findViewById(R.id.listno2);  
        ArrayAdapter<String> files2 = new ArrayAdapter<String>(getActivity(), R.layout.seatno_listview, no12);
        lv2.setAdapter(files2);
        
        prepareList1();
        
        GridView gv3 = (GridView) view.findViewById(R.id.gridView3);      
        ImageList adapter3 = new ImageList(getActivity());
        gv3.setAdapter(adapter3);
        
        GridView gv4 = (GridView) view.findViewById(R.id.gridView4);      
        ArrayAdapter<String> adapter4 = new ArrayAdapter<String>(getActivity(), R.layout.seatrow_gridview, items);
		gv4.setAdapter(adapter4);
        
        prepareList2();
        
        GridView gv5 = (GridView) view.findViewById(R.id.gridView5);      
        ImageList2 adapter5 = new ImageList2(getActivity());
        gv5.setAdapter(adapter5);
        
        no2 = new ArrayList<String>();
        for (int n = 3; n <= 45; n++)
        {
			no2.add(Integer.toString(n));	// 2nd column of numbers
        }
        
        ListView lv3;
        lv3 = (ListView) view.findViewById(R.id.listno3);  
        ArrayAdapter<String> files3 = new ArrayAdapter<String>(getActivity(), R.layout.seatno_listview, no2);
        lv3.setAdapter(files3);
        
        prepareList2();
        
        GridView gv6 = (GridView) view.findViewById(R.id.gridView6);      
        ImageList2 adapter6 = new ImageList2(getActivity());
        gv6.setAdapter(adapter6);
        
        no22 = new ArrayList<String>();
        for (int n = 3; n <= 45; n++)
        {
			no22.add(Integer.toString(n));	// 2nd column of numbers
        }
        
        ListView lv4;
        lv4 = (ListView) view.findViewById(R.id.listno4);  
        ArrayAdapter<String> files4 = new ArrayAdapter<String>(getActivity(), R.layout.seatno_listview, no22);
        lv4.setAdapter(files4);
        
        prepareList2();
        
        GridView gv7 = (GridView) view.findViewById(R.id.gridView7);      
        ImageList2 adapter7 = new ImageList2(getActivity());
        gv7.setAdapter(adapter7);
        
        /*********************************************************************************************/
        /*                  		     End of Grid View                                        */
        /*********************************************************************************************/
	    
        return view;
    }
	
    /*********************************************************************************************/
    /*                        		 Grid View Base Adapter                                  */
    /*********************************************************************************************/

	public class ImageList extends BaseAdapter 
	{
		Activity activity;

	    public ImageList(Activity a) 
	    {
	        activity = a;
	    }

	    @Override
	    public int getCount() 
	    {
	        return image.size();
	    }

	    @Override
	    public Object getItem(int position) 
	    {
	        return image.get(position);
	    }

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

	    @Override
	    public View getView(int position, View convertView, ViewGroup parent) 
	    {  
	        // TODO Auto-generated method stub  
            ImageView iv = new ImageView(activity);
            iv.setImageResource(image.get(position));
            
            return iv;
        }
	}
	
	public class ImageList2 extends BaseAdapter 
	{
		Activity activity;

	    public ImageList2(Activity a) 
	    {
	        activity = a;
	    }

	    @Override
	    public int getCount() 
	    {
	        return image2.size();
	    }

	    @Override
	    public Object getItem(int position) 
	    {
	        return image2.get(position);
	    }

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

	    @Override
	    public View getView(int position, View convertView, ViewGroup parent) 
	    {  
	        // TODO Auto-generated method stub  
            ImageView iv = new ImageView(activity);
            iv.setImageResource(image2.get(position));
            
            return iv;
        }
	}
	
    /*********************************************************************************************/
    /*                  	    End of Grid View Base Adapter                                */
    /*********************************************************************************************/
	
	public void prepareList1()  
	{ 
		image = new ArrayList<Integer>();
		
		for (int i = 1; i <= 2; i++)
		{
			for (int j = 1; j <= 2; j++)
			{
				image.add(R.drawable.seat_selection);
			}
		}
	}
	
	public void prepareList2()  
	{ 
		image2 = new ArrayList<Integer>();

		for (int k = 3; k <= 45; k++)
		{
			for (int m = 1; m <= 3; m++)
			{
				image2.add(R.drawable.seat_selection);
			}
		}
	}
}

Open in new window

0
crazy4s
Asked:
crazy4s
  • 3
  • 3
  • 2
4 Solutions
 
alexey_gusevCommented:
the natural choice would be to use setOnItemClickListener() and use http://developer.android.com/reference/android/widget/AdapterView.OnItemClickListener.html to get notified
0
 
SanthanaTechnical LeadCommented:
Hi crazy4s,

I know the usual way to create the onClick event for an image so I would like to have the easier way to solve this problem since it is a large gridview.

Basically GridView is a ListView. So if it have large no of items internally it will create views only for the visible item. So you no need to worry about the content of the GridView.

And in your code snippet you are creating multiple Grid & ListViews.. I don't understand your exact need...But what i feel is instead of creating multiple GridViews and ListView...just create a GridView and set GridViewItem as complex view...(Add spinner or any other things you want inside of the item). It may reduce the no of views...

Regards
Santhana
0
 
crazy4sAuthor Commented:
actually i want it to look something like below but after doing some research I still couldn't find anything about having multiple views in a gridview, that's why i ended up trying to use multiple gridviews and listviews (to display the numbers).
seatBut if you know, can you give me some example or tutorials on that?
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
alexey_gusevCommented:
Your UI example suggests that you could try TableLayout instead of GridView/ListView.

You could add rows to the tablelayout where each row is your custom 'sector' with seats (ie top or bottom areas in your sample).

Each 'sector' contains smaller parts, such as

[gridview (with seats) + numbers above them]

so 1 row would look like

[sector] [in-between area with numbers] [sector] [in-between area with numbers] [sector]

Each row can have different height, so it should suit your needs perfectly well
0
 
crazy4sAuthor Commented:
but i need to have a specific return value for each seat when i clicked on it(eg. 1A, 12E, 45F), is that possible to do it on a table layout too? since gridview has given the position.
0
 
alexey_gusevCommented:
since each row is a set of your custom 'sector' controls, you can easily track it, perhaps even extending TableLayout.

I guess gridviews in rows should be created dynamically, so between creating it and calling Tablelayout.addView() you can assign (min,max) limits for the seat numbers in this gridview etc etc. Android is highly customisable OS in terms of UI,  so if your seats layout is fixed, you can even build it in Designer in Eclipse, add your own custom attributes - the possibilities continue further and further ;)

But the bottom line of all I said is that you can have TableLayout (or your own class that extends TableLayout), add custom views to it (to be treated as rows), and within individual row you can continue drilling down and finally get to gridview portion to which you provide an adapter that knows its seats (you can pass it as a data and then use in getView()).

Hope this helps.
0
 
SanthanaTechnical LeadCommented:
Hi crazy4s,

I want to add little more with aforesaid idea.
In the table layout each tuple we can add a GridView and we can maintain space between GridView by not adding any thing inside the tuple. So we can use extend GridView and add our functionality inside the GridView to get the Exact Position of the GridView item.

Regards
Santhana
Untitled.png
0
 
crazy4sAuthor Commented:
thanks for all the suggestions, I've already figured out how to display dialog and get the seat no when is clicked but I'm still using my old multiple gridviews & listview to do that.
anyway will try out the method of using table layout with gridview and see which one is better.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 3
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now