Download - Recyclerview in action
![Page 1: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/1.jpg)
Recyclerview in ActionKulina - PT Jejaring Makanan Indonesia
@pratamawijaya
#TechTalk89
![Page 2: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/2.jpg)
./whoami
Pratama Nur Wijaya
Android Coder since 2012, usually active at GDG Jogjakarta event, Yogyakarta Android Community and ID-Android
Favorite Android Library : Square Library FTW!! and RxAndroid X RxJava
Recomendation Blog: YKode, blog.danlew.net, bignerdranch.com
![Page 3: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/3.jpg)
Join our force
![Page 4: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/4.jpg)
Send your cv and linkedin profile to [email protected] and may the force be with u
Kulina is Hiring Android Developer
![Page 5: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/5.jpg)
Recyclerview ?
![Page 6: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/6.jpg)
“Recyclerview is a view group that displays a list of scrollable items”
![Page 7: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/7.jpg)
Listview
![Page 8: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/8.jpg)
Why Google ?
![Page 9: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/9.jpg)
- Listview codebase so complex- Duplicate functionality
- Itemclicklistener vs onClickListener- Hard to create animation- And others (Google IO 2016)
https://www.youtube.com/watch?v=LqBlYJTfLP4
Why Google ?
![Page 10: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/10.jpg)
Setup Recyclerview
dependencies { compile 'com.android.support:appcompat-v7:23.4.0' compile 'com.android.support:design:23.4.0' // recyclerview-v7}
1. app/build.gradle
<android.support.v7.widget.RecyclerView android:layout_width="match_parent" android:layout_height="wrap_content" />
2. Layout
![Page 11: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/11.jpg)
RecyclerView Component
RecyclerView
Layout Manager Item AnimatorAdapter Item Decoration
Positioning View
Animating ViewDecorate
ItemProvide View
![Page 12: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/12.jpg)
Layout Manager
![Page 13: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/13.jpg)
LinearLayoutManager
layoutManagerVertical = new LinearLayoutManager(context);
recyclerView.setLayoutManager(layoutManagerVertical);
layoutManagerHorizontal = new LinearLayoutManager(context, LinearLayoutManager.HORIZONTAL, false);
recyclerView.setLayoutManager(layoutManagerHorizontal);
![Page 14: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/14.jpg)
GridlayoutManager
gridLayoutManager = new GridLayoutManager(context, SPAN_COUNT);recyclerView.setLayoutManager(gridLayoutManager);
![Page 15: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/15.jpg)
StaggeredLayoutManager
gridLayoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);recyclerView.setLayoutManager(gridLayoutManager);
![Page 16: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/16.jpg)
Multitype Item Layout
![Page 17: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/17.jpg)
Adapter
![Page 18: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/18.jpg)
- Create View and Viewholder- Bind item to ViewHolder- Notify Recyclerview about changes- Item Interaction handling (click, etc)- Multiple view types
Adapter Component
![Page 19: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/19.jpg)
public class LinearLayoutAdapter extends RecyclerView.Adapter<LinearLayoutAdapter.
LinearLayoutViewHolder>{
@Override public LinearLayoutViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
return null;
}
@Override public void onBindViewHolder(LinearLayoutViewHolder holder, int position) {}
@Override public int getItemCount() {return 0;}
public class LinearLayoutViewHolder extends RecyclerView.ViewHolder{
public LinearLayoutViewHolder(View itemView) { super(itemView); }
}
}
Sample Adapter Clas
![Page 20: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/20.jpg)
Viewholder Class
public class LinearHolder extends RecyclerView.ViewHolder {
@BindView(R.id.img) ImageView img; @BindView(R.id.name) TextView name; @BindView(R.id.location) TextView location;
public LinearHolder(View itemView) { super(itemView); ButterKnife.bind(this, itemView); }
public void bindItem(Mountain mountain) { name.setText(mountain.name); location.setText(mountain.location); ImageLoader.loadImage(context, img, mountain.img); }}
![Page 21: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/21.jpg)
Create View and Bind View
@Override public LinearHolder onCreateViewHolder(ViewGroup parent, int viewType) { return new LinearHolder( LayoutInflater.from(context).inflate(R.layout.item_linear_vertical, parent, false));}
@Override public void onBindViewHolder(LinearHolder holder, int position) { if (mountainList != null && mountainList.size() > 0) { holder.bindItem(mountainList.get(position)); }}
![Page 22: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/22.jpg)
Handle Click Listener
![Page 23: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/23.jpg)
Create interface
public interface ClickListener { void onItemClick(int pos);}
![Page 24: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/24.jpg)
Pass Listener into Adapter
public interface ClickListener { void onItemClick(int pos);}
private Context context;private List<String> strings;private ClickListener listener;
public TextAdapter(Context context, List<String> strings, ClickListener listener) { this.context = context; this.strings = strings; this.listener = listener;}
![Page 25: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/25.jpg)
Set Clicklistener at ViewHolder
public class MainHolder extends RecyclerView.ViewHolder {
@BindView(R.id.txt_title) TextView txtTitle; @BindView(R.id.container_text) LinearLayout container;
public MainHolder(View itemView) { super(itemView); ButterKnife.bind(this, itemView); }
public void bindData(String string, final int pos) { txtTitle.setText("" + string); container.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { listener.onItemClick(pos); } }); }}
![Page 26: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/26.jpg)
Implement Listener into Activity/Fragment
public class HomeFragment extends Fragment implements TextAdapter.ClickListener{// rest fragment class
@Override public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {super.onViewCreated(view, savedInstanceState);
ButterKnife.bind(this, view);adapter = new TextAdapter(getActivity(), listMenu, this);recyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));recyclerView.setAdapter(adapter);
}
@Override public void onItemClick(int pos) { // do something
}}
![Page 27: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/27.jpg)
Item Decoration
![Page 28: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/28.jpg)
Simple Item Decoration
public class SimpleDividerItemDecoration extends RecyclerView.ItemDecoration { private Drawable mDivider;
public SimpleDividerItemDecoration(Context context) { mDivider = ContextCompat.getDrawable(context, R.drawable.line_divider); }
@Override public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) { int left = parent.getPaddingLeft(); int right = parent.getWidth() - parent.getPaddingRight();
int childCount = parent.getChildCount(); for (int i = 0; i < childCount; i++) { View child = parent.getChildAt(i);
RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();
int top = child.getBottom() + params.bottomMargin; int bottom = top + mDivider.getIntrinsicHeight();
mDivider.setBounds(left, top, right, bottom); mDivider.draw(c); }}}
![Page 29: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/29.jpg)
Simple Item Decoration
recyclerView.addItemDecoration(new SimpleDividerItemDecoration(getActivity()));
![Page 30: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/30.jpg)
Item Animator
![Page 31: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/31.jpg)
Simple Item Animator
recyclerView.setItemAnimator(new DefaultItemAnimator());
![Page 32: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/32.jpg)
Other item animator ?
Take a look
https://github.com/wasabeef/recyclerview-animators ?;)
![Page 33: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/33.jpg)
Multitype Viewholder
![Page 34: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/34.jpg)
Multiviewtype Holder
@Override public int getItemViewType(int position) { if (position == 0) { return VIEW_TYPE_HEADER; } else { return VIEW_TYPE_ITEM; }}
@Override public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) { if (holder.getItemViewType() == VIEW_TYPE_HEADER) {
HeaderAdapterHolder headerHolder = (HeaderAdapterHolder) holder;
}else if (holder.getItemViewType() == VIEW_TYPE_ITEM) {
ItemAdapterHolder itemHolder = (ItemAdapterHolder) holder;
}}
![Page 35: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/35.jpg)
http://hannesdorfmann.com/android/adapter-delegates
https://github.com/sockeqwe/AdapterDelegates
Do you found adapter hell ?Take a look these awesome article
![Page 36: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/36.jpg)
Reference
- Dave Smith ~ Mastering Recyclerview http://www.slideshare.net/devunwired/mastering-recyclerview-layouts
- Google I/O 2016 ~ https://www.youtube.com/watch?v=LqBlYJTfLP4- BignerdRanch https://www.bignerdranch.com/blog/recyclerview-part-1-fundamentals-
for-listview-experts/- http://hannesdorfmann.com/android/adapter-delegates - May Google be with you
![Page 37: Recyclerview in action](https://reader034.vdocuments.us/reader034/viewer/2022051404/588a5a8d1a28ab7a768b5387/html5/thumbnails/37.jpg)
Thanks