ListView Row Highlight

Basically the idea behind this post is to show unobtrusive way of informing the user that something has changed in the data. When using ListView in Android and the backing data has changed, most of the time, I just call notifyDatasetChanged() and voila, ListView will automatically refresh the UI for me. But I noticed that this isn’t particularly good for the user as most of the time he has no idea that something has changed.

Then I remember back when I was still working as a J2EE/web developer, one way to notify the user is to show a highlight that fades out. This really looks nice when being presented in a tabular view. When an item has been updated, the whole row where that item is located will be highlighted for a few seconds then back to the normal background. I thought this might be good for our ListView as well so I searched around and found out that you can just use TransitionDrawable to implement this.

First we need to define the normal background and the highlight background.

This is for the normal background:


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#000000"/>
</shape>

and this is for the highlight:


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#FF8C00"/>
</shape>

and for the transitiondrawable:


<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/highlight"/>
    <item android:drawable="@drawable/normal"/>
</transition>

With all that, we can now set a background resource to our layout and call startTransition to animate it.



if(position == updateRow){
     view.setBackgroundResource(R.drawable.bg);
     ((TransitionDrawable)view.getBackground()).startTransition(1000);
}

then whenever we changed something in the backing data, we just need to call notifyDataSetChanged() to refresh our UI and show our awesome notification :)


((BaseAdapter)list.getAdapter()).notifyDataSetChanged();
comments powered by Disqus