Looking for an Android horizontal gridview example? If so, you’ve landed in the right place because this tutorial demonstrates how to do just this by installing Jess Anders’ two-way-gridview library in Eclipse along with my test application that uses the library for a horizontally scrolling gridview and a vertically scrolling gridview. The horizontally scrolling GridView covers the top third of the screen with a vertically scrolling GridView covering the bottom two thirds of the screen (as shown in the images below). The number of columns and rows changes based on orientation in order to demonstrate the ease in which the two-way-GridView can change orientation. Also, notice that the vertically scrolling GridView looks exactly like a ListView but still uses the adapted GridView code.

Each GridView is populated with a very simple Custom Adapter that extends the BaseAdapter class. The list that is passed to the adapter consists of very simple objects which hold a string and an int; the string is the item’s name (Item i) and the int is a randomly generated color. These objects could hold images, but a different adapter class is required for better performance and intelligent memory usage.

Installing the library and test application

1. Download Jess Anders TwoWayGridView library from GitHub and unzip the download into its own folder.

2. Open Eclipse and select File->New->Other

3. Select “Android Project From Existing Code” and select “Next”

4. Select “Browse” and navigate to the extracted folder from step 1. Hit “OK”.

5. You should see the following screen showing that one library project and one sample project will we imported:

HorizontalVerticalGridview example

6. Select “Finish” and both projects will be imported. There may be errors at this point. The first error was in the folder “MainActivity”, but it went away after the project was completely built. The other problem could be a broken link in the “MainActivity” to the library. If so, right-click on the MainActivity folder, select Properties->Android->Scroll to bottom of the screen until “Library” is seen->Add the library->and point to the lib. Finally, one last issue could be that the entire folder was imported using File->Import. This will import one folder with two projects. If this was the case, remove that project and repeat the above steps.

7. With the library installed, download the Android Horizontal GridView Example code from GitHub.

8. Import the project using the method previously described.

9. When the project has been imported there will be an error because the library is missing. If so, right-click on the Example_horzAndVertGridViews folder, select Properties->Android->Scroll to bottom of the screen until “Library” is seen->Add the library->and point to the lib.

10. At this point the example activity should be installed and able to run.

Notes about the application and using the library

Let me start by saying I’m no Android expert and using Jess’s demo to achieve the proper item spacing and dimensions may be the best approach. Regardless, I was not able to use that example to easily set the number of columns and rows for the GridView while creating the desired spacing between items. This example will hopefully demonstrate that. The functionality to achieve this is explained by file below.

MainActivity.java

  • Sets the number of objects for each GridView.
  • Calls generateGridViewObjects() to instantiate a list of DataObjects.
  • Passes the list to the adapter-one list for each GV and its adapter.
  • Randomly selects a new color for each newly instantiated DataObject and sets its name to “Item i”, where i was it’s order of creation.

DataObject.java

  • A very simple object that holds the item name as a String and the item color as an int.

HorzGridViewAdapter.java

  • Custom adapter that extends BaseAdapter class
  • Uses ViewHolder class for storing view handles to reduce number of times findViewById() is called
  • Uses recycled convertView and doesn’t create new view for each object in the list
  • Gets row and column values from integer-array in integers.xml
  • Gets item padding from dimens.xml
  • Passes row value to setNumRows() and setRowHeight(); setNumColumns() and setColumnWidth() ignored when GV is horizontal, so no reason setting them
  • Padding around item is set in each child’s FrameLayout; see details below
  • Since item height and width are determined by the largest child’s values, this sets the child’s ImageView height and width using layout parameters
  • DO NOT set the child’s FrameLayout layout parameters or the converView’s layout parameters. Setting either will cause a new view to be created for each object in the list. While these views are eventually reduced down to the number on screen, the initial creation of so many views crashes a simple application. No clue why, it just does.
  • If the child’s TextView is larger than the ImageView, unpredictable spacing between items will occur. But, DO NOT set the layout parameters of the TextView because that too will force a new view to be created for every object in the list. Instead, either shorten the text, reduce text size, or have fewer number of columns to fit the larger text.

VertGridViewAdapter.java

  • Same as HorzGridViewAdapter.java except for the Vertical GridView and the following:
  • Passes column value to setNumColumns() and setColumnWidth(); setNumRows() and setRowHeight() ignored when GV is vertical, so no reason setting them

activity_main.xml

  • Jess’s example sets many more properties such as number of rows and height, etc. This example does not because I found it impossible to get the sizing and dimensioning to work correctly using properties in xml and so set all of them programatically in the adapter for each gridview.
  • cacheColorHint and bg should be set to a constant color for improving performance-recommended by Google.
  • Vertical spacing and horizontal spacing seem to be intended for padding, but made it difficult to get the layout to show correctly. Therefore, these are set to 0 and padding is set in the FrameLayout of the child view. The child’s padding is also used to determine the ImageView height in the adapter’s getView() function
  • Stretch mode is meant to “properly” space the items on the screen, but again, using any setting but “none” just made life difficult
  • app:scrollDirectionPortrait and app:scrollDirectionLandscape tell the GV what direction to scroll; while the scrolling direction can change based on orientation, I kept it the same direction regardless of orientation

horz_gridview_child_layout.xml

  • Child layout for horzGridView
  • FrameLayout has padding because it just made life easier than setting it elsewhere
  • ImageView controls height and width of every child and is set in adapter’s getView() which overrides the height and width from xml

vert_gridview_child_layout.xml

  • Child layout for vertGridView
  • FrameLayout has padding because it just made life easier than setting it elsewhere
  • ImageView controls height and width of every child and is set in adapter’s getView() which overrides the height and width from xml

values-xxx folders

  • The integers.xml file in each of these folders specify the number of rows and columns for each GridView. These values change based on orientation (using the -land folders) and screen size (using sw600dp for 7″ tabs and sw720dp for 10″ tabs).

In a future tutorial I will show how to apply drag and drop to these gridviews.

Leave a Reply

Your email address will not be published. Required fields are marked *