Pinterest like custom GridView

Question

I am new to android, and I am searching for a logic for grid view like pinterest(homescreen) app that has been build for i-phone. A large no. of images are coming from the serve

Answer 1

This is old question, but for those that have similar problem:

Easiest way to accomplish this layout style is to use RecyclerView with StaggeredGridLayoutManager, like this:

 protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.my_activity);

    View recyclerView = findViewById(R.id.recycle_view);
    assert recyclerView != null;
    StaggeredGridLayoutManager gaggeredGridLayoutManager = new      
    StaggeredGridLayoutManager(2, 1);
        recyclerView.setLayoutManager(gaggeredGridLayoutManager);
}

For the other part of question (pagging) it's best to receive your images in chunks (for example 50 images per request) and when user scrolls down (comes to the end) load more.

Answer 2

Check: Staggered GridView

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.

Answer 3

Create layout like as follow

<ScrollView...>
<LinearLayout....
   android:id="@+id/linear1"
   orientation="horizontal">

   <LinearLayout....
     android:id="@+id/linear2"
     android:layout_weight="0.33"
     orientation="vertical">

   <LinearLayout....
     android:id="@+id/linear3"
     android:layout_weight="0.33"
     orientation="vertical">

   <LinearLayout....
     android:layout_weight="0.33"
     orientation="vertical">

</LinearLayout>
</ScrollView>

Now add your ImageView dynamically in layouts

linear1 = (LinearLayout) findViewById(R.id.linear1);
linear2 = (LinearLayout) findViewById(R.id.linear2);
linear3 = (LinearLayout) findViewById(R.id.linear3);

for(int i=0;i<n;i++)
{
   ImageView iv = new ImageView(this);
   iv.setImageResource(R.id.icon);

   int j = count % 3;  <---- 
   if(j==0)
       linear1.addView(iv);
   else if(j==1)
       linear2.addView(iv);
   else
       linear3.addView(iv); 
}

Answer 4

If you want to perform loading of image on scroll then it will similar to List View.First save all data from WS URL then load on demand Now

Commonsware Endless Adapter For Listview,you can integrate it with GridView too

EndLessAdapter

Another way is to put your grid views in a ViewFlipper and then flip with an animation.

Use setInAnimation() and setOutAnimation() to set the animations and flip the pages with showNext() and showPrevious()