How to perform pagination with the Litho framework?

Question

I am implementing a Retrofit APi for getting data from the server and showing this in a RecyclerView using the Litho framework, and it's doing well. As all of us know when we have infinite data to show in recyclerview we have to implement the pagination pattern. And I know this, but I am confused how to implement this in the Litho framework. Litho the provides onScrollListener() method:

final Component component = Recycler.create(context)
    .binder(recyclerBinder)
    .onScrollListener(new RecyclerView.OnScrollListener() {
        @Override
        public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
            super.onScrollStateChanged(recyclerView, newState);
            //
        }

        @Override
        public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
            super.onScrolled(recyclerView, dx, dy);
            //
        })
    .build();

I don't know: how to use a customized EndlessRecyclerViewScrollListener for endless scrolling in Litho?

syllabix · Accepted Answer · 2017-06-04T19:57:11.963

I have had success implementing the "infinite" scroll pattern leveraging the recyclerBinder within the onScrolled method of a OnScrollListener. A trivial example would be the following:

//Initialize the RecyclerBinder
recyclerBinder = new RecyclerBinder(c, new LinearLayoutInfo(getContext(), OrientationHelper.VERTICAL, false));

//Initialize a recycler component
Component component = Recycler.create(c)
                .onScrollListener(new RecyclerView.OnScrollListener() {
                    @Override
                    public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                        super.onScrolled(recyclerView, dx, dy);

                        // use the recyclerBinder to determine what items at what position are visible - 
                        // (you could also use the findLastVisibleItemPosition() method depending on your implementation)
                        int firstVisibleItemPosition = recyclerBinder.findFirstVisibleItemPosition();

                        //check if it is within range relative to the current available items and is not loading (room to improve/modify logic pending use case)
                        if((recyclerBinder.getItemCount() - 5) <= firstVisibleItemPosition && !isLoading) {
                            //if so - use your service to get the next page
                            service.getNextPage();
                        }
                    }
                })
                .build();

Then in a call back method - you can insert your items starting at the item count

public void callback(List<T> results) {
    int position = recyclerBinder.getItemCount();
    for(T result: results) {
        Component component = //assemble your component(s) ...
        ComponentInfo.Builder info = ComponentInfo.create().component(component);
        recyclerBinder.insertItemAt(position, info.build());
        position++;
    }
}

thanks for answering, in `onScrolled(RecyclerView recyclerView, int dx, int dy)` method you call `service.getNextPage();` i didn't understand , Is `getNextPage()` is customized method ? — Hussain Sherwani, Jun 05 '17 at 07:18
@HussainKhan - yes - this is where you need to make a call to fetch the next page of data, perhaps a call to your retrofit service incrementing the page number your API should fetch from. — syllabix, Jun 05 '17 at 07:20

How to perform pagination with the Litho framework?

1 Answers1