How to make the height of a GridView wrap its content

The other day I wanted to group the items in my GridView and separate the groups with headers. Unfortunately, it turned out that GridView doesn’t support headers out-of-the-box.

Instead of rewriting the GridView or write a messy adapter for it, I tried out to group a TextView (the header) and a GridView (the group content) into a separate Fragment and then add multiple instances of that fragment to a ScrollView. It worked like a charm — almost…

The GridView didn’t like the wrap_content of its height when it was put in a vertically tight space; it only showed a single row of items (scrolling all content in that single row).

The short version of my fix includes sub classing the GridView and overriding the onMeasure method. The essence of the fix focuses on setting the measured height spec to a ridiculously large number.

The long version you’ll find below. In order to keep it simple, I have taken me the liberty of excluding the Fragment parts from the source files and layout XML. Other than that it’s all sweet, tender love:

Be warned, though! Just as mentioned by both Jared and AngraX in the comments, this is a hack. Using the ScrollView carelessly will most likely give you nasty memory issues, especially if you – God forbid – keep a lot of images in memory. This solution will load all content your GridView will ever show and resize the GridView to span it. The actual scrolling is then done by the ScrollView, panning the GridView around.

MyGridView.java

activity_main.xml

MainActivity.java

Screenshot with native GridView implementation



Screenshot with custom MyGridView implementation


This Post Has 27 Comments

  1. I thought you should never put a gridview inside a scrollview since the scrollview since both can be scrollable. I only briefly looked at your code. Did scrollview steal touch events?

    1. I’m using something similar into one of my apps, but be careful!!! GridViews (just as ListViews) are designed to be highly memory efficient. If you change the MeasureSpec as described, the grid view will traverse the whole Adapter and create all associated views. This could be a problem if you are displaying a large number of images in the grid view as you can run out of memory.

      I still haven’t found a bullet proof solution for this yet :(.

    2. I hit reply but didn’t actually answer your comment. Changing the MeasureSpec as described will make the grid view expand entirely, so the GridViews’s scrollbar is no longer in effect.

  2. I really thanks to you, you can my solve the problem.

  3. Yes, you’re both correct in your statements (@Jared and @AngraX): This is somewhat hackish and it definitely comes with complications which one needs to be aware of. Thanks for commenting!

  4. Thanks,

  5. Thankz

  6. Great solution !

    It does not seem to work properly if the height of individual items changes(bcoz dynamic content). I am running into problem when the textview has longer text and it wraps into next line. Any solution for the same?

  7. You can improve the onMeasure method:

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int heightSpec = heightMeasureSpec;
    if (getLayoutParams().height == LayoutParams.WRAP_CONTENT)
    heightSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE, MeasureSpec.AT_MOST);
    super.onMeasure(widthMeasureSpec, heightSpec);
    }

  8. Its really cool, work like a charm.
    but can you explain the meaning of “>>” operator?
    i can’t understand how it proceed .

  9. Its not working for samsung duos

  10. Thanks.. :)

  11. Thank you so much

  12. Thanks, the hack worked for me.

  13. Thanks alot. It worked likewise my requirement.

  14. Thanks it is working on 4.4+ devices perfectly, but on 4.2.2 it is covering whole screen.

  15. Following works on 4.2.2
    heightSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE, MeasureSpec.EXACTLY);

  16. Developing a Xamarin.Android app, and having multiple blocks of images to print in a scrollview. I adapted your code to C#, and it works perfectly ! Big thanks to you !

  17. Thank You László!
    Thanks to your code I can show multiple grid views inside linear view.
    You saved my day.

  18. Thank you man

  19. Awesome thanks

  20. Thnx man <3

  21. Thank you! Your article is very helpful

Leave a Reply

Close Menu