I couldn't find any better example for using RecyclerView with StaggeredGridLayoutManager. Not even in Android Docs.
Q1. I need some examples which can give proper explanation about how to use RecyclerView with StaggeredGridLayoutManager.
Q2. Can anyone tell me if it is possible to create following layout using RecyclerView with StaggeredGridLayoutManager
So far i have found this link which is not at all useful.
I also found this link for cardslib but it is too much complex in implementation and has too much dependencies which will increase my app size unnecessarily.
For those who are still landing up on this question.
You could modify the following code as per your needs:
First add dependency libraries for Android RecyclerView and CardView
compile 'com.android.support:appcompat-v7:23.4.0' compile 'com.android.support:cardview-v7:23.4.0' compile 'com.android.support:recyclerview-v7:23.4.0'
Your main activity layout activity_main.xml will simply be like
Define layout of a card in a layout file named book_list_item.xml
Define this layout as a class ItemObject.java
public class ItemObject { private String _name; private String _author; public ItemObject(String name, String auth) { this._name = name; this._author = auth; } public String getName() { return _name; } public void setName(String name) { this._name = name; } public String getAuthor() { return _author; } public void setAuthor(String auth) { this._author = auth; } }
Define a custom adapter SampleRecyclerViewAdapter to populate the cards
public class SampleRecyclerViewAdapter extends RecyclerView.Adapter { private List itemList; private Context context; public SampleRecyclerViewAdapter(Context context, List itemList) { this.itemList = itemList; this.context = context; } @Override public SampleViewHolders onCreateViewHolder(ViewGroup parent, int viewType) { View layoutView = LayoutInflater.from(parent.getContext()).inflate( R.layout.book_list_item, null); SampleViewHolders rcv = new SampleViewHolders(layoutView); return rcv; } @Override public void onBindViewHolder(SampleViewHolders holder, int position) { holder.bookName.setText(itemList.get(position).getName()); holder.authorName.setText(itemList.get(position).getAuthor()); } @Override public int getItemCount() { return this.itemList.size(); } }
We would also need a viewholder for each ItemObject. So define a class SampleViewHolders
public class SampleViewHolders extends RecyclerView.ViewHolder implements View.OnClickListener { public TextView bookName; public TextView authorName; public SampleViewHolders(View itemView) { super(itemView); itemView.setOnClickListener(this); bookName = (TextView) itemView.findViewById(R.id.BookName); authorName = (TextView) itemView.findViewById(R.id.AuthorName); } @Override public void onClick(View view) { Toast.makeText(view.getContext(), "Clicked Position = " + getPosition(), Toast.LENGTH_SHORT) .show(); } }
Now in MainActivity, assign an instance of StaggeredGridLayoutManager to recycler_view to define how the components will appear.
Also populate the cards using instance of SampleRecyclerViewAdapter, as follows
public class MainActivity extends AppCompatActivity { private StaggeredGridLayoutManager _sGridLayoutManager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view); recyclerView.setHasFixedSize(true); _sGridLayoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL); recyclerView.setLayoutManager(_sGridLayoutManager); List sList = getListItemData(); SampleRecyclerViewAdapter rcAdapter = new SampleRecyclerViewAdapter( MainActivity.this, sList); recyclerView.setAdapter(rcAdapter); } private List getListItemData() { List listViewItems = new ArrayList(); listViewItems.add(new ItemObject("1984", "George Orwell")); listViewItems.add(new ItemObject("Pride and Prejudice", "Jane Austen")); listViewItems.add(new ItemObject("One Hundred Years of Solitude", "Gabriel Garcia Marquez")); listViewItems.add(new ItemObject("The Book Thief", "Markus Zusak")); listViewItems.add(new ItemObject("The Hunger Games", "Suzanne Collins")); listViewItems.add(new ItemObject("The Hitchhiker's Guide to the Galaxy", "Douglas Adams")); listViewItems.add(new ItemObject("The Theory Of Everything", "Dr Stephen Hawking")); return listViewItems; } }
Output will look something like this
For your requirement, you can incorporate an ImageView in book_list_item.xml and populate it accordingly in SampleViewHolders
Also note, to change number of columns from 2 to 3.
You could change declaration in MainActivity as
_sGridLayoutManager = new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL); recyclerView.setLayoutManager(_sGridLayoutManager);
Which will give an output like this
Here's another simple tutorial
Assuming that you've already created an adapter and initialized the RecyclerView, the following code should do what you're looking for.
StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL); recyclerView.setLayoutManager(staggeredGridLayoutManager);
For further reference and documentation please check the following link: https://developer.android.com/reference/android/support/v7/widget/StaggeredGridLayoutManager.html
Our friends "Henry" have a good and simple explain here.
And I think below constructor is suitable for most uses :
StaggeredGridLayoutManager(num , LinearLayoutManager.VERTICAL) // where 'num' is your columns count // LinearLayoutManager.VERTICAL = 1
I came across this nice sample project on GitHub, it demonstrates the use of Picasso + RecyclerView + StaggeredGridLayoutManager .
Check it out at https://github.com/yuvaraj119/Picasso-RecyclerView-StaggeredGridLayoutManager
