Yet Another [à compléter]

MfA Tricks #2 - 2-fingers Expandable Layout

With Jelly Bean, the Android notification subsystem got significantly revamped. Among the new feature, notification can be presented in two modes, collapsed/expanded.

The GMail notification uses that to present a summary of the new emails received in expanded mode while only giving a count of new mails in collapsed mode:

The mode is controlled by using a 2-fingers swipe upward or downward on the item.

I used that effect in one of my application that have a ListView where each item is supposed to sports a map image generated with Google Static Map API.

Having this map being downloaded/instantiated for each row turned out to be very costly and prevented fluid scrolling hence the idea to have two modes for a list item and lazy instantiate the map when needed after the item is expanded.

The problem is the code to do this is not publicly available in the framework, so I ported the Java code over to C# and integrated it with ListView to replicate the behavior.

The three-parts code is given in that gist: https://gist.github.com/4333318 with ExpandableListView being the type you use directly.

You also need to download and put in your resource directory the following two images from the Android framework to provide the glow.

I use a custom ActivityItem view as my ListView row which is instantiated from an XML layout containing the following item that is collapsed/expanded (originally collapsed as the layout_height property indicates):

<ImageView
    android:layout_width="fill_parent"
    android:layout_height="0px"
    android:id="@+id/MapPicture"
    android:scaleType="centerCrop"
    android:layout_marginLeft="1px"
    android:layout_marginRight="1px" />

When that row is marked as expanded by the helper for the first time, only then I trigger the download of my map to avoid any cost.

Result from normal to downward 2-finger swipe: