{"id":3256,"date":"2012-12-22T07:03:06","date_gmt":"2012-12-22T15:03:06","guid":{"rendered":"http:\/\/blog.xamarin.com\/?p=3256"},"modified":"2012-12-22T07:03:06","modified_gmt":"2012-12-22T15:03:06","slug":"mfa-tricks-2-2-fingers-expandable-layout","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/mfa-tricks-2-2-fingers-expandable-layout\/","title":{"rendered":"Android Tricks: Expandable ListView Items"},"content":{"rendered":"

\t\t\t\tThe Android notification subsystem was significantly revamped in Jelly Bean. Among the new features, notifications can now be presented in two modes—collapsed and expanded. The user can toggle between the two modes by using a 2-finger swipe gesture, dragging up or down on the item in the notification panel.\u00a0The GMail notification uses this new feature to present a summary of the new emails received in expanded mode while only giving a count of new mails in collapsed mode:<\/p>\n

\"GMail<\/a>
GMail in the Android notification panel\nImage Credit: The Verge<\/i><\/a><\/figcaption><\/figure><\/p>\n

I wanted to provide a similar effect in one of my own applications, allowing items in a particular ListView<\/code> to similarly expand and contract.\u00a0In my application, there is a list that displays a map image generated\u00a0with the\u00a0Google Static Map API<\/a>\u00a0in each row.\u00a0Downloading and instantiating the map image for each row turned out to be very costly and prevented fluid scrolling. That problem led me to the idea of having two modes for the list item—the map image is only instantiated when needed, after the item is expanded.<\/p>\n

The code to support the expanding item is not available as a public API in the framework, so I ported the underlying Java code over to C# and integrated it with ListView<\/code> to replicate the behavior.\u00a0I published the three-part code implementation in this Gist on GitHub: https:\/\/gist.github.com\/4333318<\/a><\/p>\n

ExpandableListView<\/code>\u00a0is the type that you use to incorporate the control into your own application.\u00a0You also need to download and put in your resource directory the following two<\/a> images<\/a> from the Android framework to provide the glow.<\/p>\n

I use a custom ActivityItem<\/code> view as my ListView<\/code> row, which is instantiated from an XML layout containing the following item. When used, the item can be collapsed and expanded. It will start in the collapsed state, as the\u00a0layout_height<\/em>\u00a0property indicates.<\/p>\n

\n<ImageView\n\u00a0 \u00a0 android:layout_width="fill_parent"\n\u00a0 \u00a0 android:layout_height="0px"\n\u00a0 \u00a0 android:id="@+id\/MapPicture"\n\u00a0 \u00a0 android:scaleType="centerCrop"\n\u00a0 \u00a0 android:layout_marginLeft="1px"\n\u00a0 \u00a0 android:layout_marginRight="1px" \/>\n<\/pre>\n
The map is only downloaded when the helper class marks that the row has been expanded for the first time, allowing us to reduce the overhead of using map images.\u00a0The following images show the result of a normal, downward 2-finger swipe:<\/p>\n
\"\"<\/p>\n
\"\"\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"
The Android notification subsystem was significantly revamped in Jelly Bean. Among the new features, notifications can now be presented in two modes—collapsed and expanded. The user can toggle between the two modes by using a 2-finger swipe gesture, dragging up or down on the item in the notification panel.\u00a0The GMail notification uses this new feature […]<\/p>\n","protected":false},"author":1925,"featured_media":39167,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[5,4],"class_list":["post-3256","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","tag-android","tag-xamarin-platform"],"acf":[],"blog_post_summary":"
The Android notification subsystem was significantly revamped in Jelly Bean. Among the new features, notifications can now be presented in two modes—collapsed and expanded. The user can toggle between the two modes by using a 2-finger swipe gesture, dragging up or down on the item in the notification panel.\u00a0The GMail notification uses this new feature […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/3256","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/1925"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=3256"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/3256\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media\/39167"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=3256"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=3256"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=3256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}