Thursday, March 10, 2016

How to use RecyclerView in Android efficiently



In this tutorial I will not explain you how to use RecyclerView  and what is it. Infact I will share some important tips on when to use which overriden method of RecyclerView.

first of all let me add basic code for RecyclerView Adapter and then I will explain when to use which method of RecyclerView. I will explain it with the help of an example so you better understand what am trying to say :)

Because most of the time people use onBindViewHolder and ViewHolder for initializing and other implementation because in these methods we can easily get position of an item for getting data from model position wise. but we do not have position variable or getPosition() method in onCreateViewHolder so I have used global variable position  for this purpose :)

Hope it will help someone, you can also add your findings about RecycelerView in comments below :)

some thing more about recycelerView:

RecyclerView uses LayoutManager for positioning of an items in adapter.
LayoutManager has subclasses which are
Linear Layout Managaer (Similar to ListView, can be used for vertical scrolling or horizontal scrolling)
Grid Layout Manager (Similar to GridView)
StaggeredGridLayoutManager (shows items in a staggered grid)

RecyclerView and CardView are part of android support library so you need to add dependencies in your module build.gradle file. like below

    compile 'com.android.support:cardview-v7:21.0.+'
    compile 'com.android.support:recyclerview-v7:21.0.+'

Now come to point :)
public class UsageDetailsAdapter extends RecyclerView.Adapter<UsageDetailsAdapter.ViewHolder> {

Context mContext;
int position;
DecoView decoView;

public UsageDetailsAdapter(Context context) {
    this.mContext = context;
}

@Override public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.view_adapter_usage_details, parent, false);
    decoView = (DecoView) view.findViewById(R.id.dynamicArcView);
    decoView.configureAngles(357, 52);
    ArrayList<Integer> colorsList = new ArrayList<>();
    colorsList.add(mContext.getResources().getColor(R.color.DigitalService1));


 //   Toast.makeText(mContext,""+ position, Toast.LENGTH_SHORT).show();        
    SeriesItem seriesItem = new SeriesItem.Builder(Color.parseColor("#FFE2E2E2"))
            .setRange(0, 70, 50)
            .build();
    int backIndex = decoView.addSeries(seriesItem);
    /*        * seriesItem2, it's second value will be used for calculating percentage.        * */        int newPosition = (position % 7);

    SeriesItem seriesItem2 = null;
    seriesItem2 = new SeriesItem.Builder(colorsList.get(newPosition))
            .setRange(0, 70, 0).setCapRounded(true).setChartStyle(SeriesItem.ChartStyle.STYLE_DONUT)
            .setInterpolator(new AccelerateInterpolator()).setSpinClockwise(true)
            .build();
    SeriesItem seriesItemText = new SeriesItem.Builder(Color.argb(255, 64, 196, 0))
            .setSeriesLabel(new SeriesLabel.Builder("Percent %.0f%%")
                    .setColorBack(Color.argb(218, 0, 0, 0))
                    .setColorText(Color.argb(255, 255, 255, 255))
                    .build())
            .build();
    SeriesItem seriesItemTest = new SeriesItem.Builder(Color.argb(255, 64, 196, 0))
            .setRange(0, 25, 0)
            .addEdgeDetail(new EdgeDetail(EdgeDetail.EdgeType.EDGE_OUTER, Color.parseColor("#22000000"), 0.4f))
            .build();
    //int seriesIndexText =   decoView.addSeries(seriesItemText);        int series1Index = decoView.addSeries(seriesItem2);
    int series1Test = decoView.addSeries(seriesItemTest);
 decoView.addEvent(new    DecoEvent.Builder(25).setIndex(series1Index).setDelay(100).build());
   // decoView.addEvent(new DecoEvent.Builder(25).setIndex(seriesIndexText).setDelay(100).build());//        decoView.addEvent(new DecoEvent.Builder(25).setIndex(series1Test).setDelay(100).build());

    position++;
    return new ViewHolder(view);


}

@Override    public void onBindViewHolder(ViewHolder holder, int position) {

    /*        * onBindViewHolder will be called every time user scroll up or down        *        * */
}

@Override    public int getItemCount() {
    return 10;
}

public class ViewHolder extends RecyclerView.ViewHolder {

    public ViewHolder(View itemView) {
        super(itemView);
        decoView = (DecoView) itemView.findViewById(R.id.dynamicArcView);
        decoView.setBackgroundColor(mContext.getResources().getColor(R.color.textColorPrimary));
        /*            * View holder will be called once, but if user scroll before completing arc view            * animation will not be completed.            *            * */        }
}
}
ViewHolder
ViewHolder provides a reference to the views.

I am using DecoView library for making arc veiw animation in my app. the problem which I faced here is I added all my code for making animation in ViewHolder (constructor) of ViewHolder class.

but if you scroll down your RecyclerView (items in RecycelerView) before the completion of animation , animation will not be completed and it will be stoped where it was for those items which has been scrolled up.


onBindViewHolder
replace the content of a view

then I added my code for making animation in onBindViewHolder method of RecycelerView adapter.

problem which I faced here is every time user scroll items in RecyclerView onBindViewHolder is called and animation again starts from zero.


onCreateViewHolder
create a new view, you can set margins, and other parameters here.

then I moved code inside onCreateViewHolder method and it worked for me as I wanted. means onCreateViewHolder is called only once. and arc view animates only once and it animates completely as you want.



Kotlin Android MVP Dagger 2 Retrofit Tutorial

http://developine.com/building-android-mvp-app-in-kotlin-using-dagger-retrofit/