Awesome features of RecyclerView

RecyclerView widget was a big improvement over ListView in terms of flexibility. In this talk, I share some experience that I had when developing UIs with RecyclerView. Learn some tricks like animations, efficient data updates and more.

Transcript

1. Awesome features of RecyclerView Tiago Almeida @talmeida99
2. RecyclerView vs ListView • Display arbitrary number of items • Listview was designed for simple items • No animation support • Internal code is too complex • Changing ListView API could break existing apps
3. ListView • It works fine for some cases • View recycling • ViewHolder pattern
4. RecyclerView Components
5. Layout Manager • Positions the items • Handles scrolling • General layout managers provided
6. LinearLayoutManager LinearLayoutManager manager = new LinearLayoutManager( this, LinearLayoutManager.VERTICAL, false);
7. GridLayoutManager GridLayoutManager manager = new GridLayoutManager( this, 2, /*Number of columns*/ LinearLayoutManager.VERTICAL, false);
8. GridLayoutManager GridLayoutManager manager = new GridLayoutManager( this, 2, /*Number of columns*/ LinearLayoutManager.VERTICAL, false); manager.setSpanSizeLookup( new GridLayoutManager.SpanSizeLookup() { @Override public int getSpanSize(int position) { return position % 3 == 0 ? 2 : 1; } });
9. StaggeredGridLayoutManager StaggeredGridLayoutManager manager = new StaggeredGridLayoutManager( 2, /*Number of columns*/ LinearLayoutManager.VERTICAL);
10. Adapter • Create the View and ViewHolder • Bind data to the view • Support different view types
11. Adapter • Item click interaction • Smart data updates ◦ notifyItemInserted, Removed, Changed
12. ItemAnimator • Provides animations when data changes ◦ Add, Remove, Move, Change • Default implementation works great
13. Use cases
15. Use case 1 - Different layout managers <?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width= "match_parent" android:layout_height= "match_parent" />
16. Use case 1 - Different layout managers boolean isTabletDevice = getResources().getBoolean(R.bool.isTabletDevice); if (isTabletDevice) { recyclerView.setLayoutManager(new GridLayoutManager(this, 3)); } else { recyclerView.setLayoutManager( new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false)); } recyclerView.setAdapter(new MyAdapter(itemList));
17. Use case 2 - Implement shuffle action with animation
18. Implementing a shuffle action private void shuffle(){ Collections. shuffle(itemList); recyclerView.getAdapter().notifyDataSetChanged() ; }
19. Implementing a shuffle action no animations :( private void shuffle(){ Collections. shuffle(itemList); recyclerView.getAdapter().notifyDataSetChanged() ; }
20. Animations?
21. StableIds to the rescue • Implement getItemId • setHasStableIds(true) • notifyDataSetChanged
22. Animation video bit.ly/2At9I8Y
23. StableIds • Knows what changed when notified • Animates changes • Reuses ViewHolders
24. DiffUtil • No necessary ID • Calculates “Diff” of old and new collection • Applies changes to RecyclerView with animations
25. DiffUtil DiffResult result = DiffUtil.calculateDiff( new MyCallback(oldList, newList)); adapter.setItems(newList); result.dispatchUpdatesTo(adapter);
26. DiffUtil Callback int getOldListSize () int getNewListSize () boolean areItemsTheSame (int oldItemPosition , int newItemPosition) boolean areContentsTheSame (int oldItemPosition , int newItemPosition)
27. More RecyclerView features
28. Adapter - Granular data updates • Specify exactly what changed • onBindViewHolder more efficient
29. Adapter - Granular data updates Adapter::notifyItemChanged(int position, Object payload) void onBindViewHolder(RecyclerView.ViewHolder holder, int position, List payloads) { if (payloads.isEmpty()) { onBindViewHolder(holder, position); } else if (payloads.contains(LIKE)) { holder.itemView.likes.setText(item.likes); } }
30. RecyclerView Automeasure • Supports wrap_content • Can be used with ScrollView
31. RecyclerView Automeasure ScrollView parent RecyclerView height -> wrap_content LayoutManager.setAutoMeasureEnabled(true) RecyclerView.setNestedScrollingEnabled(true)
32. Summary • RecyclerView is a flexible widget • Good performance • Nice animations • Easy to use API
33. Thank you @talmeida99 github.com/tiagoalmeida92/recyclerview-demo