Easy Swipe to Refresh in Android

Swipe to Refresh Android

Recently, Google released a new version of the Support Library, which has an interesting component. It’s called SwipeRefreshLayout. With that, it’s become a child’s play to implement a quick Swipe-to-Refresh control for your apps.

A few things first

  1. Available only with android-support-v13. Which means that only apps target SDK level 13 and above can use this.
  2. It can only contain one scrollable direct child such as a ListView or a ScrollView.
That’s all you need to know. Well.. A few things more, basically some xml and java code.
For this example, we use a ListView with some demo data. Once the list view is scrolled, we do some task, wait for sometime, and update the list view’s adapter. Finally, ask the SwipeRefreshLayout to stop the progress indicator, since we are done with refreshing.
The layout file

<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
    xmlns:tools=”http://schemas.android.com/tools”
    android:layout_width=”match_parent”
    android:layout_height=”match_parent”
    tools:context=”${packageName}.${activityClass}” >
    <android.support.v4.widget.SwipeRefreshLayout
        android:id=”@+id/swipeLayout”
        android:layout_width=”match_parent”
        android:layout_height=”match_parent” >
        <ListView
            android:id=”@+id/listView”
            android:layout_width=”match_parent”
            android:layout_height=”match_parent” >
        </ListView>
    </android.support.v4.widget.SwipeRefreshLayout>
</RelativeLayout>

The UI initialization

private void initializeViews() {
refreshLayout = (SwipeRefreshLayout) findViewById(R.id.swipeLayout);
refreshLayout.setOnRefreshListener(this);
                // The default colors for the progress bar are not so nice.
setColorSchemeForProgressBar();
ListView listView = (ListView) findViewById(R.id.listView);
adapter = new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1);
adapter.addAll(getDemoData(5));
listView.setAdapter(adapter);
  }

The Refresh Task

       @Override
public void onRefresh() {
Log.i(TAG, “Refresh Requested”);
doRefresh();
}
// Fetch data and update listview’s adapter
private void doRefresh() {
RefreshTask task = new RefreshTask();
task.execute((Void) null);

The Completion Work

private void postRefreshComplete() {
// Stop the refresh animation
refreshLayout.setRefreshing(false);
// Update adapter with new data
adapter.clear();
adapter.addAll(getDemoData(new Random().nextInt(20)));
adapter.notifyDataSetChanged();
   }

And there you go, a simple swipe to refresh usage for your Android apps. You can find the whole source code here

Google Maps API v2 on Android

The Splash Screen

I don’t even remember when was the last time I did something with MapView on Android. I was aware of the new version 2 of the Google Maps API, but never got a chance to work on it until today.

There were initial hitches to setup the project. But, once the first steps were done, it was quite easy to build up a simple app.

I want to list down the first steps of the process, and then move on to the sample application.

Step 1: Getting the API key.

  1. Go to Google API Console
  2. Go to Services link, and enable Google Maps Android API v2. (Don’t confuse this with Google Maps API v2. I got confused, and was wondering what was I doing wrong when the maps failed to load)
  3. After enabling the service, go to the API Access link.
  4. In the Simple API access section, click on “Create New Android Key”.
  5. Enter your keystore’s SHA1 fingerprint along with your application’s package name separated by a semi-colon in the dialog and click on “Save”.
  6. Your API should be visible now on the same page.
Step 2: Setting up the project.
  1. You need to find the library project for the Google Maps API v2. It should be available in your SDK directory. If not, open up the Android SDK manager and download the same by selecting Google Play Services in the Extras section.
  2. You would find the required library project in the following location of the SDK folder. (..android-sdksextrasgooglegoogle_play_serviceslibproject)
  3. My suggestion would be to make a copy of this project somewhere else, and then import the project into eclipse.
  4. Once imported into Eclipse, use this as a library project for your application.
Step 3: Setting up the manifest file.
  1. Your manifest file should look like this. AndroidManifest.xml
  2. You can change the package names for the permissions to use your own package name.
  3. Now, replace your API key with the place-holder API Key in the manifest.
Step 4: MapFragment and more code…
  1. To show a map, I used the MapFragment in the activity’s layout.
That’s it. These are the broad steps to configure the new version of Google Maps for your Android application.
Your Places
Add a new place
What this application does?
  1. On opening the application, you would see a splash screen, and it would try to get your current location.
  2. Once it gets your location, it would switch to the map view, and display your current location with a marker.
  3. Tapping on an unmarked area of the app, you would see a dialog, through which you can add a new place.
  4. After saving the new place by providing a name and a description, this place would be saved into the database and you would be able to see the newly added place on the map.
  5. Tapping on an already visible marker will show you the details of that place.
  6. The next time you open the application, all the previously stored places would appear on the map along with your current location.
Suggested optimizations
  1. While loading the points from the database, it would be nice if we can only load the places which are within the currently visible area of your app.
  2. When the map is re-sized or moved, we could re-query the database for the fresh list of places and update the markers based on the new visible area.
Problems:
  1. The VisibleRegion API, currently, doesn’t work. Need to think of a workaround for this.

You can find the full source-code here at the github respository: android-map101-v2