Simulating an Android window shade in a mobile Flex application

If you drag down from the top of an Android phone, you will get a pull down menu that exposes a set of buttons and options. This is sometimes referred to as a “window shade”, see this video for an example. This post demonstrates how to extend a spark SkinnableContainer to simulate this functionality in a mobile Flex application.

The WindowShade class is a simple subclass of SkinnableContainer which introduces a new required skin part, the thumb Button. When this button is dragged up or down on the screen the height of the contentGroup of the SkinnableContainer is changed to reveal or hide the contents. When the thumb button is released, an animation plays to change the height of the contentGroup to zero or the maximum available based on the parent of the WindowShade.

This implementation only supports dragging the thumb button. It could be extended to support swiping gestures like the native Android feature. The WindowShadeSkin and ThumbButtonSkin are written in MXML so it’s easy to customize. To get the best performance, these skins could be written in ActionScript. Also this example doesn’t implement any sort of “mouse event thinning” logic that would make the drag performance feel faster (see SDK-29334).

Here is a sample Flex Mobile Project that demonstrates how to do this:

Note: This sample requires Flash Builder “Burrito” and the latest Flex SDK “Hero”. You can download these builds from Adobe Labs.

One thought on “Simulating an Android window shade in a mobile Flex application”

Comments are closed.