- Splash Screen
- Loading Indication
- Complex TextViews
- Autoloading ListViews
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
Autoloading ListViews
Using a ListView is a great way to display an extensive data set. For instance, you might show a list of news articles. For this to load quickly, you only request the first 10 or 20 news articles to show in the list; however, the user may want to see more. Older user experiences would have a button at the end of the list that the user could tap that would begin loading the next set. That works, but you can do better.
Concept and Reasoning
To improve the user experience, it’s a good idea to anticipate the user’s actions. Scrolling through a list is a great example where you can easily make reasonable assumptions. If the user has scrolled to the bottom of the list, there is a good chance that the user wants to continue scrolling. Instead of waiting for the user to press a button, you can immediately begin loading more items. So, now you’ve managed to save the user a little bit of work, but you can go a step further.
When the user has scrolled to near the bottom of the list, you can start loading more. Say you display 20 items and the user has scrolled down to where the device is showing items 12 through 17. The user is very close to the bottom of the list, so you can begin loading more items ahead of time. If your data source and connection are fast, the next 10 or 20 items can be loaded by the time the user gets to the bottom of the list. Now the user can scroll without effort through a large data set, and you can still have the benefits of loading a smaller set of data to speed up the initial user experience.
Autoloading Near the Bottom of a List
Although you are going to start loading before getting to the bottom of a list, you will want to have a loading indicator at the bottom because the user can get there before the loading completes. So, to start, create a simple loading view called loading_view.xml like the one in Listing 10.13.
Listing 10.13. A Simple Loading Layout
<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:orientation="horizontal"><ProgressBarandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginRight="10dp"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="@string/loading"android:textAppearance="?android:attr/textAppearanceMedium"/></LinearLayout>
Next, create an Adapter that will provide fake data to test out this technique. Listing 10.14 shows an example. This sample Adapter just keeps a count representing the number of fake items to show. You can simulate adding more items with the addMoreItems(int) method. For the purposes of testing this autoloading technique, this is adequate.
Listing 10.14. An Adapter That Can Mimic Real Content
privatestatic classSimpleAdapterextendsBaseAdapter {privateintmCount= 20;privatefinalLayoutInflatermLayoutInflater;privatefinalStringmPositionString;privatefinal intmTextViewResourceId;/*package*/SimpleAdapter(Context context,inttextViewResourceId) {mLayoutInflater= LayoutInflater.from(context);mPositionString= context.getString(R.string.position) +" ";mTextViewResourceId= textViewResourceId; }publicvoidaddMoreItems(intcount) {mCount+= count; notifyDataSetChanged(); }@OverridepublicintgetCount() {returnmCount; }@OverridepublicString getItem(intposition) {returnmPositionString+ position; }@OverridepubliclonggetItemId(intposition) {returnposition; }@OverridepublicView getView(intposition, View convertView, ViewGroup parent) {finalTextView tv;if(convertView ==null) { tv = (TextView)mLayoutInflater.inflate (mTextViewResourceId,null); }else{ tv = (TextView) convertView; } tv.setText(getItem(position));returntv; } }
The last piece is the actual Fragment that does the hard work. It is a ListFragment that listens to the position of the ListView and loads more items if necessary. The AUTOLOAD_THRESHOLD value determines how close to the bottom of the list the user has to be before loading. The MAXIMUM_ITEMS value is an arbitrary limit to the size of our list, so you can see how to handle removing the loading View when all data has been loaded.
The mAddItemsRunnable object simulates adding additional items after a delay, similarly to how you would add more items after fetching them from a data source. In onActivityCreated(Bundle), a Handler is created (for posting the Runnable with a delay), the Adapter is created, a footer view is instantiated and added to the ListView, the Adapter is set, and the Fragment is added as the OnScrollListener. It’s important that you add the footer before setting your Adapter because the ListView is actually wrapping your Adapter with one that supports adding header and footer Views.
When the user scrolls, the Fragment checks if data is not currently loading and if there is more data to load. If that is the case, it checks if the Adapter has already added at least the maximum number of items (remember, this is arbitrary to simulate having a finite data set like you would in a real use). If there is no more data, the footer is removed. If there is more data, the Fragment checks to see if the user has scrolled far enough to load more data and triggers the load.
The onScrollStateChanged method has to be implemented as part of OnScrollListener, but it is not needed in this code, so it does nothing.
The onStart and onStop methods handle stopping and starting the loading of data, so the load does not continue when the app is no longer visible. This is not particularly necessary in the sample code, but it is useful in the real world when you might be loading or processing a large amount of data and don’t want it to be done if the user has changed apps.
For a complete implementation, see Listing 10.15.
Listing 10.15. A ListFragment That Automatically Loads More Content
publicclassAutoloadingListFragmentextendsListFragmentimplementsOnScrollListener {privatefinal intAUTOLOAD_THRESHOLD= 4;privatefinal intMAXIMUM_ITEMS= 52;privateSimpleAdaptermAdapter;privateViewmFooterView;privateHandlermHandler;privatebooleanmIsLoading=false;privatebooleanmMoreDataAvailable=true;privatebooleanmWasLoading=false;privateRunnablemAddItemsRunnable=newRunnable() {@Overridepublicvoidrun() {mAdapter.addMoreItems(10);mIsLoading=false; } };@OverridepublicvoidonActivityCreated(Bundle savedInstanceState) {super.onActivityCreated(savedInstanceState);finalContext context = getActivity();mHandler=newHandler();mAdapter=newSimpleAdapter(context, android.R.layout.simple_list_item_1);mFooterView= LayoutInflater.from(context).inflate(R.layout.loading_view,null); getListView().addFooterView(mFooterView,null,false); setListAdapter(mAdapter); getListView().setOnScrollListener(this); }@OverridepublicvoidonScroll(AbsListView view,intfirstVisibleItem,intvisibleItemCount,inttotalItemCount) {if(!mIsLoading&&mMoreDataAvailable) {if(totalItemCount >=MAXIMUM_ITEMS) {mMoreDataAvailable=false; getListView().removeFooterView(mFooterView); }elseif(totalItemCount -AUTOLOAD_THRESHOLD<= firstVisibleItem + visibleItemCount) {mIsLoading=true;mHandler.postDelayed(mAddItemsRunnable, 1000); } } }@OverridepublicvoidonScrollStateChanged(AbsListView view,intscrollState) {// Ignore}@OverridepublicvoidonStart() {super.onStart();if(mWasLoading) {mWasLoading=false;mIsLoading=true;mHandler.postDelayed(mAddItemsRunnable, 1000); } }@OverridepublicvoidonStop() {super.onStop();mHandler.removeCallbacks(mAddItemsRunnable);mWasLoading=mIsLoading;mIsLoading=false; } }
Now that you have it all finished, give it a try. Notice that when you are scrolling slowly, the content loads before you ever know that it was loading. If you fling to the bottom quickly, you’ll have the experience shown in Figure 10.4, where the list shows the loading footer just before the content loads in. Notice, too, that your position in the list is not changed when new content loads in. The user is not disturbed even if he or she was unaware that content was loading, and the loading view being replaced by content makes it clear that something new has loaded (without the loading view, the user might think he or she is at the bottom of the list, even after new content has been loaded).
)
Figure 10.4. Scrolling quickly from the top (left) to the bottom (middle) results in content loading in automatically (right).