Our Blog

One of the components that is very common in a mobile app is the Switcher component. The on/off switch is usually available on IOS and Android devices. This component is like a toggle button but with a skin that makes it look as a Switcher.



This is just a simple test and we have all the styles hardcoded on it.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

      @namespace s "library://ns.adobe.com/flex/spark";
         skin-class: ClassReference("skins.SwitcherSkin");
         background: Embed(source='/images/switcher_bg.png');
         thumb: Embed(source='/images/switcher_thumb.png');
   <s:ToggleButton x="50" y="50" width="94" height="27"/>

I have a special skin, SwitcherSkin, for the toggle button that transforms the normal toggle to a switcher.


We are extending from MobileSkin to make our skin lightweight for a mobile project. And we only have 2 elements on it: the background that has the on/off background and the thumb that moves to cover the on/off labels.

package skins
   import caurina.transitions.Tweener;
   import flash.display.DisplayObject;
   import spark.skins.mobile.supportClasses.MobileSkin;
   public class SwitcherSkin extends MobileSkin
      protected var background:DisplayObject;
      protected var thumb:DisplayObject;
      override protected function commitCurrentState():void
      override protected function createChildren():void
         background = addElement( "background" );
         thumb = addElement( "thumb" );
      protected function addElement( style:String ):DisplayObject
         var elementAsset:Class = getStyle( style );
         var element:DisplayObject;
         if( elementAsset )
            element = new elementAsset();
            addChild( element );
         return element;
      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
         if( currentState == "up" )
            Tweener.removeTweens( thumb );
            Tweener.addTween( thumb, { time:0.4, x:0 } );
         if( currentState == "upAndSelected" )
            Tweener.removeTweens( thumb );
            Tweener.addTween( thumb, { time:0.4, x:unscaledWidth - thumb.width } );

To make it more interesting, I added a little tween using the Tweener library . I hope you like it. You can improve on it making the labels dynamic and the dimensions too.

The source is available for download.

Nahuel Foronda

Nahuel Foronda


  1. Raymond Camden
    It would be kind of cool if there was a site where these skins could be shared. From you and others I mean.
  2. Florian


    I'm curious to know why you chose to use a custom tween engine instead of the one provided with Flex?
  3. Nahuel Foronda
    @Camden, that's good idea, now we need to see who wants to volunteer to such task :)

    @Florian, I used it because of my old habits. In Flex 3x the default Flex engine was not good. I think that now Flex 4 do fine. You can use that if you prefer.
  4. James Harvey
    I agree with my comrade Ray, and I would gladly volunteer to contribute to such a task, as well as (if neccessary) assist and manage.
  5. Arnaud Thorel

    Arnaud Thorel

    Flex developpers need to find great component look to promote Flex Applications.

    I see in Conqu a DateTime Picker, can you explain how do you this one ?

  6. Nahuel Foronda
    Arnaud, The Date Picker it is not that simple and I monkey patched the framework to use the Scroller the way that I want. I think that Adobe is working on its own version so maybe you should wait for them.
  7. Arnaud Thorel

    Arnaud Thorel

    Thx Nahuel,

    I tried to do it by myself using list and layout (like a vertical carrousel). I also have some trouble with the Scroller, but i succeed to get the selectedIndex at the center of the picker. Skin was more easier to do (gradient on the top and on the bottom).

    Monkey Patch is a way of life. When the Flex SDK 4.0 I had to develop a messenger application in AIR using Gesture (looks like conqu - great job). But I patched list states to remove hovered state and add deleted state.
  8. Yonas Kolb
    Nice one. I also wrote a similar skin in MXML for use in desktop apps as well. It supports custom labels and has a draggable thumb. If anyone's interested check it out <a href="http://yonaskolb.com/blog/2012/1/18/flex-toggle-switch-spark-skin.html">here</a>
  9. Yonas Kolb
    That link didn't post correctly...