Android Infinite List with Load More Example

Objectives Outline for This Tutorial:

  1. We will be building a news feed, which will simulate JSON data loading from the internet and then populate the list items.
  2. Till the network data is being fetched, the list will show a loading view at the bottom.
  3. We will be loading the images from urls and setting it in the view display. For this purpose we will use a library Glide.
  4. The JSON data will be seeded in the application and this seed JSON file will be stored in the assets folder.
  5. The seed file will be parsed into InfiniteFeedInfo object using another library gson.
  6. This structure will also be compatible if we are pulling url json data from a live server.

This Tutorial is based on PlaceHolderView android library. This library has InfinitePlaceHolderView class which facilitates such implementations.

InfinitePlaceHolderView:

This class is build upon the PlaceHolderView . It defines the load more callback and the loading view. The detail about this class can be found here

The best approach to understand and appreciate its usage would be to go through the process described below.

Let’s start building:

Step 1:

Setup the project in android studio with default activity.

In app’s build.gradle add the dependencies.

Notes:

  1. Add an assets folder in the src/main directory and point to it in gradle assets.srcDirs
  2. CardView is used to display the images in the list

Add Internet permission in the app’s AndroidManifest.xml

Step 2:

Create src/layout/activity_main.xml

Step 3:

Create src/layout/load_more_item_view.xml

Note :

This xml defines the list item card view.

Step 4:

Create src/layout/load_more_view.xml

Note:

Progress shows the loading when the data is fetched from the server.

Step 5:

Place infinite_news.json file in the assets folder created in the above step 1.

Notes:

  1. This strategy is very useful in bundling app with seed files. Seed files contain data build in the app package and can be used to populate database or use to display default data to the user. Placing seed files in the form of json makes is extremely easy to parse into models.

Step 6:

Create Utils.java

Note:

  1. Utils contain methods required to parse seed json file and also populate the model InfiniteFeedInfo.java

Step 8:

Create model InfiniteFeedInfo

Notes:

  1. @SerializedName annotation belongs to gson class and used to read json file variable and bind it to the model variable.
  2. @Exposeis used to make the variable readable for the gson parsing

Step 9:

We will now create the class to bind the item views of the list and its operations.

Create ItemView.java for the item view of the list.

Notes:

  1. @layout is used to bind the xml layout with this class.
  2. @View is used to bind the views in a layout we want to refer to.
  3. @Resolvecalls a method when the view is in the memory so to populate it with the data.

For detailed explanations view PlaceHolderView at GitHub repository

Step 10:

We will now create the class to bind and define the load more view.

Create class LoadMoreView.java

Notes:

  1. @LoadMore This annotation is called when the list is scrolled to the last item. Any network call to fetch more data should be done in this annotated method.
  2. For the simulation of delayed loading of data from the internet, I have defined ForcedWaitedLoading class. This class creates a new thread and then after 2 sec, adds more data int view list, in the UI thread. The view should always be updated from UI thread.
  3. mLoadMoreView.loadingDone() method need to be called when all the data has been fetched and view has been populated with new data. It will remove the load more view.
  4. mLoadMoreView.noMoreToLoad() method should be called when all the data has been fetched. It will remove the load more functionality.

Step 11:

Create MainActivity.java

Notes:

  1. We obtain the instance of the InfinitePlaceHolderView and add views using the InfiniteFeedInfo data from the model list.
  2. setLoadMoreResolver method adds the LoadMoreView object to be used as the indicator for loading.

PlaceHolderView GitHub repository is here

The source code for this example is here

Coders Rock!!

Ali