Combining GridView and ListView in one screen in Android

GridView and ListView are 2 common and important widgets in Android. Some times, we can see both of them in one screen.

Warning:

Google has released RecyclerView, a new widget to create a list/grid layout (a good replacement for GridView and ListView) so solution in this article may be obsolete. Please read my newer post to learn about using RecyclerView instead!

How to make this layout style? Both of them are scroll-able! In this tip, I will present a simple way to make them "living together".

The best solution here is put GridView as a header (or footer) of our own ListView and make a "custom GridView" to expand it's height (not use default declaration).

Warning: never put ListView/GridView in a ScrollView!

1. Launch Eclipse and start a new Android Project (I use min-sdk is 14).

2. First, we make a custom GridView style which can expand it's height, I think you will find out that the following code is very familiar: :D

3. Now, make a layout which contains a custom GridView to put it as ListView header later (layout_grid.xml):
4. Create an activity:
- Declare activity layout contains a ListView like this:
- In the activity programmatically code, we need import ListView header from existing xml and set expand value is true for our GridView.
Source code (ListViewActivity.java):
5. Okey, put some features to complete project:
- A mutual Adapter for both of ListView and GridView:
- a GridView item/ListView row layout:
6. Our example after running: