14  January
54

StaggeredGridView

This is a modified version of Android’s experimental StaggeredGridView. The StaggeredGridView allows the user to create a GridView with uneven rows similar to how Pinterest looks. Includes own OnItemClickListener and OnItemLongClickListener, selector, and fixed position restore.

To use StaggeredGridView in your projects, simply add this project to your workspace then add it as a library project to your current project.

By Maurycy Wojtowicz

Demo link: https://github.com/maurycyw/StaggeredGridViewDemo

Download from GitHub

 

54 comments on “StaggeredGridView”

  1. Adi Reply

    Hi, Really interesting. But cannot found the “com.origamilabs.library.views.StaggeredGridView”.
    Any help?

    Thanks

  2. Waheed Reply

    Hello,

    I tried to use StaggeredGridView within a Fragment in an ActionBar , the MainActivity extends FragmentActivity and implements
    ActionBar.TabListener. And I have another class extends Fragment but I always get NullPointerException in the following line in my “Fragment” class:
    StaggeredGridView gridView = (StaggeredGridView) this.getView().findViewById(R.id.staggeredGridView1);

    Could you please help my in using StaggeredGridView within a Fragment instead in Activity?

    Thank you & Best Regards

  3. Waheed Reply

    I’ve solved the problem ,
    Yes it takes long long time but finally it now works , the problem is only that I have to define a view object in onCreaView method of the fragment, as this line:

    View view = inflater.inflate(R.layout.fragment_featured,container, false);

    then use this line:

    StaggeredGridView gridView = (StaggeredGridView)view.findViewById(R.id.staggeredGridView1);

    instead of :

    StaggeredGridView gridView = (StaggeredGridView) this.getView().findViewById(R.id.staggeredGridView1);

    Thank you,,,

    • Mitsus Reply

      Thanks a lot for your comment…and reply. You saved me

  4. saleeh Reply

    Any one have any how to add on setScrollListener
    i didn’t find a way to add that

  5. Tamilselvan Reply

    It seems really nice.,
    But. I cannot add this library to my code which i have coded using ActionBar sherlock and sliding menu lib.
    My code working fine with action bar and sliding menu., but when i tried to add this library to my project it gives error as “JAR MISMATCH- ANDROID SUPPORT LIB V4 IN STAGGERED GRID VIEW”
    can you please help. how can i use this library when i am using sherlock.?
    Thanks in advance:-)

    • Gates Reply

      Delete Support Lib V4 in folder libs from the procject. not from Staggeredgridview library

      • Alus

        There is a still conflict with sherlock actionbar lib v4.

  6. Gates Reply

    Hei, I did all configuration well with no error. But no Image shown, because I don’t know how to add the images to StaggeredGridView…

    Anyone can help?

    • daisy Reply

      I have the same problem with you, have you solved it?

      • Gates

        Still cannot :( , have tried with ArrayAdapter and ImageAdapter as normal GridView works. but still shown nothing.

    • daisy Reply

      Did you try SimpleAdapter? I have changed the StaggeredGirdAdapter into subclass of SimpleAdapter.

  7. Rami Reply

    Hi,

    I using this library and I’m getting some weird behavior.
    I’m using ResourceCursorAdapter in order to populate the grid,
    The problem I see is that the Item View (i.e. the ScaleImageView in your example) is stretched.
    My grid item is some relative layout with some TextViews and two ImageViews.
    Does anyone ran into this problem?

  8. techflag Reply

    hava any to pull to refreash?

    • pavan Reply

      hava u got any solution for pull refresh ? plz reply…

  9. Bin Reply

    I can’t find onscrollListener too, have any method to help me know the gridview have scroll to bottom ?

  10. rovak Reply

    How does one set an onClick listener to this? Any help is great.

  11. Tony Reply

    Can anyone tell me if it is possible to add animations to this view so that it works similar to Google Plus?
    I would like to have the app add additional views when you get to the bottom of the scroll and have them float up from the bottom as in Google Plus. I tried making some changes to my getView() function along the lines of several different listview animation examples I have seen, but all of them resulted in a null exception in the choreographer, so I am not sure if it just can’t be done there.

  12. Manish Reply

    I try to handle click event using below code:
    gridView.setOnItemClickListener(new OnItemClickListener() {

    @Override
    public void onItemClick(StaggeredGridView parent, View view, int position,
    long id) {
    // TODO Auto-generated method stub

    }
    });
    But it show me error that
    The method setOnItemClickListener(StaggeredGridView.OnItemClickListener) in the type StaggeredGridView is not applicable for the arguments (new AdapterView.OnItemClickListener(){})

    Please help me.

    • Manish Reply

      Hi
      I solve my own problem just write below code:
      gridView.setOnItemClickListener(new StaggeredGridView.OnItemClickListener() {

      @Override
      public void onItemClick(StaggeredGridView parent, View view, int position,
      long id) {
      // TODO Auto-generated method stub

      }
      });

      • Gagandeep

        hie manish,

        I am also trying to do the same but doesn’t getting the callbacks when views are clicked
        any suggestions on this

        I am using StaggeredGridView.OnItemClickListener

      • Adi

        Hi Manish, If you solve this problem please share with us, or anybody if open a full image please share the code.

  13. Gioan Doan Reply

    I not using List url ?
    I not can add item for my list
    Thanks

  14. Keyur Reply

    Hi this is awesome, but I am facing with below error

    android-apt-compiler: [StaggeredGridViewDemo] /Users/keyur/Android/StaggeredGridViewDemo/res/layout/activity_main.xml:9: error: No resource identifier found for attribute ‘numColumns’ in package ‘com.example.staggeredgridviewdemo’

    How to resolve this issue ?

    • Keyur Reply

      Finally was able to resolve this issue with below change in manifest file of demo.

      old value
      xmlns:staggered=”http://schemas.android.com/apk/res-auto”

      Replace to new value
      xmlns:staggered=”http://schemas.android.com/apk/lib/com.origamilabs.library”

  15. david Reply

    anyone do it success?

  16. Nimesh Reply

    I am getting the desired result but when I scroll down to load more data and come back to top of the page the UI gets disturbed, it seem that it takes TopPadding on scrolling back to top.
    Please provide me the solution if any one has faced this problem and resolved it.

    Thanks in advance.

    • seso Reply

      I have same problem on my 5 test devices. Did you solve this problem?

      • Nimesh

        No I have not found any solution to it.
        Let me know if you have got any.

    • Yashwanth Reply

      // reset list if position does not exist or id for position has changed
      if(mFirstPosition > mItemCount-1 || mAdapter.getItemId(mFirstPosition) != mFirstAdapterId){

      Log.i(TAG, “item resetting position of the grid layout”);

      mFirstPosition = 0;
      Arrays.fill(mItemTops, 0);
      Arrays.fill(mItemBottoms, 0);

      if(mRestoreOffsets!=null)
      Arrays.fill(mRestoreOffsets, 0);
      }

      Comment this code in StaggeredGridView.java in the library code , you can find it in onChanged() method of DataSetObserver().

      • Manish

        Hi,

        I comment on above code but it’s not working.

        Thanks

  17. donny Reply

    its look like windows phone, its greeeeeeat!!!

  18. Madhan Reply

    when I scroll down to load more data and give adapter.notifyDataSetChanged() on post execute,the staggered gridview gets reload again from top poisiton. . Anyone faced or solved this problem.

    thanks in advance

  19. Michael E Reply

    I’m also running into the same reload issue. On post execute, the list goes back to the top position. Any quick work arounds for this?

    • Pavan Reply

      hey friend you solved the problrm or not

  20. Jay Reply

    Hello I m a newbie…Can any body tell me how to arrange ImageButton randomly !!I was succesfull on adding a library!!
    And how to add Differernt Attributes inside a StaggeredGrid View??
    Thanx in Advance!

  21. Federico Reply

    Hi, I m a newbie,
    i need help, why when i run StaggerdGridViewDemo i got this error ?
    07-23 14:28:19.790: W/dalvikvm(2857): VFY: unable to resolve static field 870 (StaggeredGridView) in Lcom/origamilabs/library/R$styleable;
    07-23 14:28:20.110: W/dalvikvm(2857): threadid=1: thread exiting with uncaught exception (group=0x40dbe1f8)
    07-23 14:28:20.150: E/AndroidRuntime(2857): FATAL EXCEPTION: main
    07-23 14:28:20.150: E/AndroidRuntime(2857): java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.staggeredgridviewdemo/com.example.staggeredgridviewdemo.MainActivity}: android.view.InflateException: Binary XML file line #9: Error inflating class com.origamilabs.library.views.StaggeredGridView

    Thanks

  22. musert Reply

    anybody implement pull to refresh ?

  23. Dídac Reply

    Hi there. I would like to know if somebody has implemented some method for retrieving the total height of the contents. I have problems when layout_height is set to “wrap_content” since it fixes height to 0. May I know how to fix the height of the View to the height of its contents?

  24. Chris Reply

    After updating the adapter, how do you get the grid view to scroll back to the original position before update?

  25. yy Reply

    hi,
    i have a problem with displaying the staggered layout
    I keep getting an index out of bound error.
    May i know what might be causing the error?

    Thanks

  26. irarla Reply

    Nice, this is just i’m looking for,

    Great job, Thanks

  27. Sachidananda Patra Reply

    Hello,
    I need to show grouped StaggeredGridView. Section header TODAY shows all the staggered images updated/created TODAY then YESTERDAY section header is another Group section all the images of YESTERDAY.
    Secondly, All the User can Expand or Collapse these grouped images using click or tap on top of Section Header. Like if user clicks or swipes up say for TODAY section, TODAY section should be collapsed and next or YESTERDAY or focused section should be expanded showing the corresponding Images under that section.
    Please provide any Suggestion or Help !!.
    Thanks

  28. sriramtej Reply

    i want to add horizontal scrolling for staggered view project how to achieve it?

Leave a comment

Please wait...