[dali_1.2.23] Merge branch 'devel/master'

Change-Id: I6233ca82bea0a578796c5f493539816ed793d2a5

[dali_1.2.23] Merge branch 'devel/master'
Change-Id: I6233ca82bea0a578796c5f493539816ed793d2a5
Richard Huang
2 parents e93c7dc0 b4373fbb
Showing 28 changed files with 1780 additions and 545 deletions
build/tizen/.gitignore
examples/animated-images/animated-images-example.cpp
examples/clipping/clipping-example.cpp
examples/clipping/item-view-orientation-constraint.h
examples/styling/image-channel-control-impl.cpp
examples/styling/styling-application.cpp
examples/transitions/beat-control-impl.cpp
examples/transitions/shadow-button-impl.cpp
examples/transitions/beat-control-impl.h → examples/transitions/shadow-button-impl.h
examples/transitions/beat-control.cpp → examples/transitions/shadow-button.cpp
examples/transitions/beat-control.h → examples/transitions/shadow-button.h
examples/transitions/transition-application.cpp
examples/transitions/transition-application.h
examples/transitions/transition-example.cpp
packaging/com.samsung.dali-demo.spec
resources/images/preMultAlpha.png
resources/style/images/CheckBg.png
resources/style/images/Tick.png
resources/style/images/shadowButtonBg.9.png
resources/style/mobile/images/CheckBg.png
@@ -11,3 +11,4 @@ install_manifest.txt
 /builder/dali-builder
 /examples/*.demo
 /mo
+compile_commands.json
@@ -34,6 +34,9 @@ const char* const ANIMATE_GIF_DOG( DEMO_IMAGE_DIR &quot;dog-anim.gif&quot; );
 const char* const STATIC_GIF_LOGO( DEMO_IMAGE_DIR "dali-logo-static.gif" );
 const char* const ANIMATE_GIF_LOGO( DEMO_IMAGE_DIR "dali-logo-anim.gif" );
+const char* const ANIMATE_PIXEL_AREA( "Animate PixelArea" );
+const char* const ANIMATE_PIXEL_AREA_AND_SCALE( "Animate PixelArea & Scale" );
+
 const Vector4 DIM_COLOR( 0.85f, 0.85f, 0.85f, 0.85f );
 }
@@ -67,21 +70,24 @@ public:
     // Tie-in input event handlers:
     stage.KeyEventSignal().Connect( this, &AnimatedImageController::OnKeyEvent );
-    mActorDog = CreateGifViewWithOverlayButton( STATIC_GIF_DOG );
+    mActorDog = CreateGifViewWithOverlayPlayButton( STATIC_GIF_DOG );
     mActorDog.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
     mActorDog.SetY( -100.f );
     stage.Add( mActorDog );
-    mActorLogo = CreateGifViewWithOverlayButton( STATIC_GIF_LOGO );
+    mActorLogo = CreateGifViewWithOverlayPlayButton( STATIC_GIF_LOGO );
     mActorLogo.SetAnchorPoint( AnchorPoint::TOP_CENTER );
     mActorLogo.SetY( 100.f );
     stage.Add( mActorLogo );
+
+    mTapDetector = TapGestureDetector::New();
+    mTapDetector.DetectedSignal().Connect( this, &AnimatedImageController::OnTap );
   }
   /**
    * Create the gif image view with an overlay play button.
    */
-  Toolkit::ImageView CreateGifViewWithOverlayButton( const std::string& gifUrl  )
+  Toolkit::ImageView CreateGifViewWithOverlayPlayButton( const std::string& gifUrl  )
   {
     Toolkit::ImageView imageView = Toolkit::ImageView::New( gifUrl );
     imageView.SetParentOrigin( ParentOrigin::CENTER );
@@ -101,6 +107,32 @@ public:
     return imageView;
   }
+  Toolkit::ImageView CreateGifViewWithAnimatePixelAreaButton( const std::string& gifUrl, WrapMode::Type wrapModeU, WrapMode::Type wrapModeV, const std::string& buttonLabel )
+  {
+    Toolkit::ImageView imageView = Toolkit::ImageView::New();
+    imageView.SetProperty( Toolkit::ImageView::Property::IMAGE,
+                           Property::Map().Add( Toolkit::ImageVisual::Property::URL, gifUrl )
+                                          .Add( Toolkit::ImageVisual::Property::WRAP_MODE_U, wrapModeU )
+                                          .Add( Toolkit::ImageVisual::Property::WRAP_MODE_V, wrapModeV ));
+    imageView.SetParentOrigin( ParentOrigin::CENTER );
+
+    // Create a push button, and add it as child of the image view
+    Toolkit::PushButton animateButton = Toolkit::PushButton::New();
+    animateButton.SetProperty( Toolkit::Button::Property::LABEL, buttonLabel );
+    animateButton.SetParentOrigin( ParentOrigin::BOTTOM_CENTER );
+    animateButton.SetAnchorPoint( AnchorPoint::TOP_CENTER );
+    animateButton.SetY( 20.f );
+
+    animateButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
+    animateButton.SetProperty( Actor::Property::INHERIT_SCALE, false );
+    imageView.Add( animateButton );
+
+    mTapDetector.Attach( animateButton );
+    mTapDetector.Attach( imageView );
+
+    return imageView;
+  }
+
   bool OnPlayButtonClicked( Toolkit::Button button )
   {
     Stage stage = Stage::GetCurrent();
@@ -111,8 +143,7 @@ public:
       // remove the static gif view, the play button is also removed as its child.
       stage.Remove( mActorDog );
-      mActorDog = Toolkit::ImageView::New( ANIMATE_GIF_DOG );
-      mActorDog.SetParentOrigin( ParentOrigin::CENTER );
+      mActorDog = CreateGifViewWithAnimatePixelAreaButton( ANIMATE_GIF_DOG, WrapMode::REPEAT, WrapMode::DEFAULT, ANIMATE_PIXEL_AREA_AND_SCALE );
       mActorDog.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
       mActorDog.SetY( -100.f );
       stage.Add( mActorDog );
@@ -122,8 +153,7 @@ public:
       // remove the static gif view, the play button is also removed as its child.
       stage.Remove( mActorLogo );
-      mActorLogo = Toolkit::ImageView::New( ANIMATE_GIF_LOGO );
-      mActorLogo.SetParentOrigin( ParentOrigin::CENTER );
+      mActorLogo = CreateGifViewWithAnimatePixelAreaButton( ANIMATE_GIF_LOGO, WrapMode::DEFAULT, WrapMode::MIRRORED_REPEAT, ANIMATE_PIXEL_AREA );
       mActorLogo.SetAnchorPoint( AnchorPoint::TOP_CENTER );
       mActorLogo.SetY( 100.f );
       stage.Add( mActorLogo );
@@ -131,6 +161,42 @@ public:
     return true;
   }
+  void OnTap(Dali::Actor actor, const Dali::TapGesture& tap)
+  {
+    if( actor.GetParent() ==  mActorDog ) // "Animate Pixel Area" button is clicked
+    {
+      Animation animation = Animation::New( 3.f );
+      animation.AnimateTo( Property( mActorDog, ImageView::Property::PIXEL_AREA ), Vector4( -1.0, 0.0, 3.f, 1.f ), AlphaFunction::SIN );
+      animation.AnimateTo( Property( mActorDog, Actor::Property::SCALE_X ), 3.f, AlphaFunction::SIN );
+      animation.Play();
+    }
+    else if( actor.GetParent() ==  mActorLogo ) // "Animate Pixel Area" button is clicked
+    {
+      Animation animation = Animation::New( 3.f );
+      animation.AnimateTo( Property( mActorLogo, ImageView::Property::PIXEL_AREA ), Vector4( 0.0, 1.0, 1.f, 1.f ), AlphaFunction::SIN );
+      animation.Play();
+    }
+    else if( actor == mActorDog ) // stop the animated gif, switch to static view
+    {
+      Stage stage = Stage::GetCurrent();
+      stage.Remove( mActorDog );
+
+      mActorDog = CreateGifViewWithOverlayPlayButton( STATIC_GIF_DOG );
+      mActorDog.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
+      mActorDog.SetY( -100.f );
+      stage.Add( mActorDog );
+    }
+    else if( actor == mActorLogo ) // stop the animated gif, switch to static view
+    {
+      Stage stage = Stage::GetCurrent();
+      stage.Remove( mActorLogo );
+
+      mActorLogo = CreateGifViewWithOverlayPlayButton( STATIC_GIF_LOGO );
+      mActorLogo.SetAnchorPoint( AnchorPoint::TOP_CENTER );
+      mActorLogo.SetY( 100.f );
+      stage.Add( mActorLogo );
+    }
+  }
   void OnKeyEvent(const KeyEvent& event)
   {
@@ -147,6 +213,7 @@ private:
   Application&  mApplication;
   Toolkit::ImageView mActorDog;
   Toolkit::ImageView mActorLogo;
+  TapGestureDetector mTapDetector;
 };
 // Entry point for Linux & Tizen applications
@@ -24,6 +24,7 @@
 // INTERNAL INCLUDES
 #include "clipping-item-factory.h"
+#include "item-view-orientation-constraint.h"
 using namespace Dali;
 using namespace Dali::Toolkit;
@@ -32,8 +33,13 @@ namespace
 {
 const char * const APPLICATION_TITLE( "Clipping Controls" );
 const Vector3 APPLICATION_TITLE_PARENT_ORIGIN( 0.5f, 0.03f, 0.5f ); // Set the parent origin to a small percentage below the top (so the demo will scale for different resolutions).
+
 const Vector3 ITEM_VIEW_LAYOUT_SIZE_SCALE( 0.75f, 0.5f, 0.75f );
 const float ITEM_VIEW_BORDER_SIZE = 2.0f;
+const float ITEM_VIEW_MAXIMUM_ROTATION_IN_DEGREES = 20.0f;
+const float ITEM_VIEW_LAYOUT_POSITION_CHANGE_MULTIPLIER = 3.0f;
+const float ITEM_VIEW_ROTATION_ANIMATION_TIME = 0.2f;
+
 const char * const BUTTON_LABEL( "Toggle Clipping Mode" );
 } // unnamed namespace
@@ -44,6 +50,8 @@ const char * const BUTTON_LABEL( &quot;Toggle Clipping Mode&quot; );
  * need to clip to. UI Controls automate the creation of the renderers/visuals when they are set to clip their children.
  *
  * This example displays an item-view whose clipping mode is toggled without the need for adding any renderers to it.
+ *
+ * Additionally, a constraint is used to modify the item-view's orientation.
  */
 class ClippingExample : public ConnectionTracker
 {
@@ -100,6 +108,14 @@ private:
     const Vector3 itemViewLayoutSize( ITEM_VIEW_LAYOUT_SIZE_SCALE.x * stageSize.x, ITEM_VIEW_LAYOUT_SIZE_SCALE.y * stageSize.y, ITEM_VIEW_LAYOUT_SIZE_SCALE.z * stageSize.x );
     mItemView.ActivateLayout( 0, itemViewLayoutSize, 0.0f );
+    // Connect to the scroll started and completed signals to apply orientation constraints & animations.
+    mItemView.ScrollStartedSignal().Connect( this, &ClippingExample::ScrollStarted );
+    mItemView.ScrollCompletedSignal().Connect( this, &ClippingExample::ScrollCompleted );
+
+    // Create a constraint for the item-view which we apply when we start scrolling and remove when we stop.
+    mItemViewOrientationConstraint = Constraint::New< Quaternion >( mItemView, Actor::Property::ORIENTATION, ItemViewOrientationConstraint( ITEM_VIEW_MAXIMUM_ROTATION_IN_DEGREES, ITEM_VIEW_LAYOUT_POSITION_CHANGE_MULTIPLIER ) );
+    mItemViewOrientationConstraint.AddSource( LocalSource( ItemView::Property::LAYOUT_POSITION ) );
+
     // Create a border around item-view (as item-view is clipping its children, we should NOT add this as a child of item-view).
     Control border = Control::New();
     border.SetParentOrigin( ParentOrigin::CENTER );
@@ -107,10 +123,16 @@ private:
     border.SetProperty( Control::Property::BACKGROUND,
                         Property::Map().Add( Visual::Property::TYPE, Visual::BORDER )
                                        .Add( BorderVisual::Property::COLOR, Color::WHITE )
-                                       .Add( BorderVisual::Property::SIZE, 2.0f ) );
+                                       .Add( BorderVisual::Property::SIZE, 2.0f )
+                                       .Add( BorderVisual::Property::ANTI_ALIASING, true ) );
     border.SetSize( Vector3( itemViewLayoutSize.x + ITEM_VIEW_BORDER_SIZE * 2.0f, itemViewLayoutSize.y + ITEM_VIEW_BORDER_SIZE * 2.0f, itemViewLayoutSize.z + ITEM_VIEW_BORDER_SIZE * 2.0f ) );
     stage.Add( border );
+    // Constrain the border's orientation to the orientation of item-view.
+    Constraint constraint = Constraint::New< Quaternion >( border, Actor::Property::ORIENTATION, EqualToConstraint() );
+    constraint.AddSource( Source( mItemView, Actor::Property::ORIENTATION ) );
+    constraint.Apply();
+
     // Create a button to toggle the clipping mode
     PushButton button = Toolkit::PushButton::New();
     button.SetParentOrigin( ParentOrigin::BOTTOM_CENTER );
@@ -118,14 +140,36 @@ private:
     button.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
     button.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
     button.SetProperty( Actor::Property::DRAW_MODE, DrawMode::OVERLAY_2D );
-    button.SetProperty( Button::Property::LABEL,
-                        Property::Map().Add( Toolkit::Visual::Property::TYPE, Toolkit::DevelVisual::TEXT )
-                                       .Add( Toolkit::TextVisual::Property::TEXT, BUTTON_LABEL ) );
+    button.SetProperty( Button::Property::LABEL, BUTTON_LABEL );
     button.ClickedSignal().Connect( this, &ClippingExample::OnButtonClicked );
     stage.Add( button );
   }
   /**
+   * @brief Called when the item-view starts to scroll.
+   *
+   * Here we want to apply the item-view constraint.
+   */
+  void ScrollStarted( const Vector2& /* currentScrollPosition */ )
+  {
+    mItemViewOrientationConstraint.Apply();
+  }
+
+  /**
+   * @brief Called when the item-view scrolling completes.
+   *
+   * Here we remove the item-view orientation constraint and perform an animation to return the item-view back to base-rotation.
+   */
+  void ScrollCompleted( const Vector2& /* currentScrollPosition */ )
+  {
+    Animation animation = Animation::New( ITEM_VIEW_ROTATION_ANIMATION_TIME );
+    animation.AnimateTo( Property( mItemView, Actor::Property::ORIENTATION ), Quaternion( Degree( 0.0f ), Vector3::XAXIS ), AlphaFunction::EASE_IN_SINE );
+    animation.Play();
+
+    mItemViewOrientationConstraint.Remove();
+  }
+
+  /**
    * @brief Called when any key event is received
    *
    * Will use this to quit the application if Back or the Escape key is received
@@ -163,6 +207,7 @@ private:
   Application& mApplication; ///< Reference to the application class.
   ItemView mItemView; ///< The item view which whose children we would like to clip.
   ClippingItemFactory mClippingItemFactory; ///< The ItemFactory used to create our items.
+  Constraint mItemViewOrientationConstraint; ///< The constraint used to control the orientation of item-view.
 };
 int DALI_EXPORT_API main( int argc, char **argv )
+#ifndef ITEM_VIEW_ORIENTATION_CONSTRAINT_H
+#define ITEM_VIEW_ORIENTATION_CONSTRAINT_H
+
+/*
+ * Copyright (c) 2017 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+// EXTERNAL INCLUDES
+#include <dali/public-api/animation/constraint.h>
+#include <dali/public-api/math/degree.h>
+#include <dali/public-api/math/math-utils.h>
+#include <dali/public-api/math/quaternion.h>
+#include <dali/public-api/math/radian.h>
+#include <dali/public-api/math/vector3.h>
+
+/**
+ * @brief Constraint used to constrain the orientation of the item-view depending on the position within the layout.
+ */
+class ItemViewOrientationConstraint
+{
+public:
+
+  /**
+   * @brief Constructor.
+   * @param[in] maximumRotationInDegrees       The maximum rotation (in degrees) that we should rotate the item-view by.
+   * @param[in] layoutPositionChangeMultiplier This value is used to multiply the change in layout position
+   *                                           (in order to exaggerate the amount moved so it's more visible).
+   */
+  ItemViewOrientationConstraint( float maximumRotationInDegrees, float layoutPositionChangeMultiplier )
+  : mMaximumRotationInDegrees( maximumRotationInDegrees ),
+    mLayoutPositionChangeMultiplier( layoutPositionChangeMultiplier ),
+    mStartingLayoutPosition( 0.0f ),
+    mStartingAngle( 0.0f ),
+    mFirstCall( true )
+  {
+  }
+
+  /**
+   * @brief Will be called by the Constraint.
+   *
+   * The first time this operator is called, it uses the values as it's base reference.
+   * Thereafter, the position in the layout is used to determine the rotation around the X-Axis.
+   *
+   * @param[in] rotation The rotation of the item-view.
+   * @param[in] inputs   The constraint inputs:
+   *                     [0] ItemView::Property::LAYOUT_POSITION, float
+   */
+  void operator()( Dali::Quaternion& rotation, const Dali::PropertyInputContainer& inputs )
+  {
+    const float& layoutPosition = inputs[ 0 ]->GetFloat();
+
+    // Store values for base reference when called the first call.
+    if( mFirstCall )
+    {
+      mStartingLayoutPosition = layoutPosition;
+
+      Dali::Vector3 axis;
+      Dali::Radian angleInRadians;
+      rotation.ToAxisAngle( axis, angleInRadians );
+      Dali::Degree angleInDegrees( angleInRadians ); // Convert to Degrees
+
+      mStartingAngle = angleInDegrees.degree;
+      if( axis.x < 0.0f ) // We only rotate round the X-Axis. So if the X-Axis is negative, then the angle is also a negative angle.
+      {
+        mStartingAngle = -mStartingAngle;
+      }
+
+      mFirstCall = false;
+    }
+    else
+    {
+      // All subsequent calls should tilt the orientation of the item-view around the X-Axis depending on how much our position has changed in the layout.
+
+      Dali::Degree angle( mStartingAngle + mLayoutPositionChangeMultiplier * ( mStartingLayoutPosition - layoutPosition ) );
+      Dali::ClampInPlace( angle.degree, -mMaximumRotationInDegrees, mMaximumRotationInDegrees ); // Ensure the angle does not exceed maximum specified (in both directions).
+      rotation = Dali::Quaternion( angle, Dali::Vector3::XAXIS );
+    }
+  }
+
+private:
+
+  const float mMaximumRotationInDegrees; ///< The maximum allowable rotation of the item-view.
+  const float mLayoutPositionChangeMultiplier; ///< This value is used to multiply the change in layout position.
+  float mStartingLayoutPosition; ///< The starting layout position.
+  float mStartingAngle; ///< The starting angle (in degrees) of the item-view.
+  bool mFirstCall; ///< A boolean to state whether this is the first time the operator() is called. Allows us to set the starting values.
+};
+
+#endif // ITEM_VIEW_ORIENTATION_CONSTRAINT_H
@@ -37,11 +37,12 @@ const char* FRAGMENT_SHADER = DALI_COMPOSE_SHADER(
   varying mediump vec2 vTexCoord;\n
   uniform sampler2D sTexture;\n
   uniform mediump vec4 uColor;\n
+  uniform mediump vec4 mixColor;\n
   uniform mediump vec3 uChannels;\n
   \n
   void main()\n
   {\n
-    gl_FragColor = texture2D( sTexture, vTexCoord ) * uColor * vec4(uChannels, 1.0) ;\n
+    gl_FragColor = texture2D( sTexture, vTexCoord ) * mixColor * uColor * vec4(uChannels, 1.0) ;\n
   }\n
 );
@@ -24,8 +24,9 @@
 // External includes
 #include <dali-toolkit/dali-toolkit.h>
-//#include <dali-toolkit/devel-api/controls/slider/slider.h>
 #include <dali-toolkit/devel-api/controls/popup/popup.h>
+#include <dali-toolkit/devel-api/visuals/visual-properties-devel.h>
+#include <dali-toolkit/devel-api/visuals/text-visual-properties.h>
 #include "image-channel-control.h"
 #include <cstdio>
 #include <sstream>
@@ -212,7 +213,7 @@ void StylingApplication::Create( Application&amp; application )
   mIcc1.SetSizeScalePolicy( SizeScalePolicy::FIT_WITH_ASPECT_RATIO );
   mIcc1.SetParentOrigin( ParentOrigin::CENTER );
   mIcc1.SetVisibility( true );
-  
+
   mImagePlacement.Add( mIcc1 );
   mIcc2 = ImageChannelControl::New( BIG_IMAGE_2 );
@@ -484,20 +485,20 @@ bool StylingApplication::OnButtonStateChange( Button button )
 // Todo: save / restore slider states per image
-  if( button.GetProperty( Toolkit::Button::Property::SELECTED ).Get<bool>() )
+  if( button.GetProperty<bool>(Button::Property::SELECTED) )
   {
     ImageChannelControl prevIcc = mImageChannelControl;
-    if( mRadioButtons[0].GetProperty( Toolkit::Button::Property::SELECTED ).Get<bool>() )
+    if( mRadioButtons[0].GetProperty<bool>(Button::Property::SELECTED) )
     {
       mImageChannelControl = mIcc1;
     }
-    else if( mRadioButtons[1].GetProperty( Toolkit::Button::Property::SELECTED ).Get<bool>() )
+    else if( mRadioButtons[1].GetProperty<bool>(Button::Property::SELECTED) )
     {
       mImageChannelControl = mIcc2;
     }
-    else if( mRadioButtons[2].GetProperty( Toolkit::Button::Property::SELECTED ).Get<bool>() )
+    else if( mRadioButtons[2].GetProperty<bool>(Button::Property::SELECTED) )
     {
       mImageChannelControl = mIcc3;
     }
@@ -523,7 +524,7 @@ bool StylingApplication::OnCheckButtonChange( Button button )
   {
     int channel = button.GetProperty<int>( index );
     float value = mChannelSliders[channel].GetProperty<float>( Slider::Property::VALUE );
-    if( !button.IsSelected() )
+    if( !button.GetProperty<bool>(Button::Property::SELECTED) )
     {
       // "Turn off" the channel's contribution
       value = 0.0f;
@@ -600,7 +601,7 @@ bool StylingApplication::OnSliderChanged( Slider slider, float value )
   if( index != Property::INVALID_INDEX )
   {
     int channel = slider.GetProperty<int>( index );
-    if( mCheckButtons[channel].IsSelected() )
+    if( mCheckButtons[channel].GetProperty<bool>(Button::Property::SELECTED) )
     {
       Property::Index channelIndex = GetChannelProperty( channel );
       mImageChannelControl.SetProperty(channelIndex, value/100.0f);
-/*
- * Copyright (c) 2016 Samsung Electronics Co., Ltd.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-#include "beat-control-impl.h"
-#include <dali-toolkit/dali-toolkit.h>
-#include <dali/public-api/object/type-registry-helper.h>
-#include <dali-toolkit/devel-api/align-enums.h>
-#include <dali-toolkit/devel-api/visual-factory/visual-factory.h>
-#include <dali-toolkit/devel-api/visuals/visual-properties-devel.h>
-
-#include <cstdio>
-
-using namespace Dali; // Needed for macros
-using namespace Dali::Toolkit;
-
-namespace Demo
-{
-namespace Internal
-{
-
-namespace
-{
-
-
-Dali::BaseHandle Create()
-{
-  return Demo::BeatControl::New();
-}
-
-DALI_TYPE_REGISTRATION_BEGIN( BeatControl, Dali::Toolkit::Control, Create );
-
-DALI_PROPERTY_REGISTRATION( Demo, BeatControl, "bounceTransition", STRING, BOUNCE_TRANSITION );
-DALI_PROPERTY_REGISTRATION( Demo, BeatControl, "leftTransition", STRING, LEFT_TRANSITION );
-DALI_PROPERTY_REGISTRATION( Demo, BeatControl, "upTransition", STRING, UP_TRANSITION );
-DALI_PROPERTY_REGISTRATION( Demo, BeatControl, "beatVisual", MAP, BEAT_VISUAL );
-DALI_TYPE_REGISTRATION_END();
-
-
-Toolkit::TransitionData ConvertPropertyToTransition( const Property::Value& value )
-{
-  Toolkit::TransitionData transitionData;
-
-  if( value.GetType() == Property::ARRAY )
-  {
-    transitionData = Toolkit::TransitionData::New( *value.GetArray());
-  }
-  else if( value.GetType() == Property::MAP )
-  {
-    transitionData = Toolkit::TransitionData::New( *value.GetMap() );
-  }
-  return transitionData;
-}
-
-} // anonymous namespace
-
-
-Internal::BeatControl::BeatControl()
-: Control( ControlBehaviour( REQUIRES_STYLE_CHANGE_SIGNALS ) )
-{
-}
-
-Internal::BeatControl::~BeatControl()
-{
-}
-
-Demo::BeatControl Internal::BeatControl::New()
-{
-  IntrusivePtr<Internal::BeatControl> impl = new Internal::BeatControl();
-  Demo::BeatControl handle = Demo::BeatControl( *impl );
-  impl->Initialize();
-  return handle;
-}
-
-
-void BeatControl::StartBounceAnimation()
-{
-  if( mAnimation )
-  {
-    mAnimation.Stop();
-    mAnimation.FinishedSignal().Disconnect( this, &BeatControl::OnBounceAnimationFinished );
-    OnBounceAnimationFinished(mAnimation);
-  }
-
-  mAnimation = CreateTransition( mBounceTransition );
-  mAnimation.FinishedSignal().Connect( this, &BeatControl::OnBounceAnimationFinished );
-  mAnimation.Play();
-}
-
-
-void BeatControl::StartXAnimation()
-{
-  if( mXAnimation )
-  {
-    mXAnimation.Stop();
-    mXAnimation.FinishedSignal().Disconnect( this, &BeatControl::OnXAnimationFinished );
-    OnXAnimationFinished(mXAnimation);
-  }
-
-  mXAnimation = CreateTransition( mLeftTransition );
-  mXAnimation.FinishedSignal().Connect( this, &BeatControl::OnXAnimationFinished );
-  mXAnimation.Play();
-}
-
-void BeatControl::StartYAnimation()
-{
-  if( mYAnimation )
-  {
-    mYAnimation.Stop();
-    mYAnimation.FinishedSignal().Disconnect( this, &BeatControl::OnYAnimationFinished );
-    OnYAnimationFinished(mYAnimation);
-  }
-
-  mYAnimation = CreateTransition( mUpTransition );
-  mYAnimation.FinishedSignal().Connect( this, &BeatControl::OnYAnimationFinished );
-  mYAnimation.Play();
-}
-
-
-void BeatControl::OnBounceAnimationFinished( Animation& src )
-{
-  // Do stuff
-}
-void BeatControl::OnXAnimationFinished( Animation& src )
-{
-  // Do stuff
-}
-void BeatControl::OnYAnimationFinished( Animation& src )
-{
-  // Do stuff
-}
-
-void BeatControl::OnInitialize()
-{
-  Actor self = Self();
-}
-
-void BeatControl::OnStageConnection( int depth )
-{
-  Control::OnStageConnection( depth );
-}
-
-void BeatControl::OnStageDisconnection()
-{
-  Control::OnStageDisconnection();
-}
-
-void BeatControl::OnSizeSet( const Vector3& targetSize )
-{
-  Control::OnSizeSet( targetSize );
-  RelayoutVisuals( Vector2( targetSize ) );
-}
-
-void BeatControl::OnRelayout( const Vector2& targetSize, RelayoutContainer& container )
-{
-  RelayoutVisuals( targetSize );
-}
-
-void BeatControl::RelayoutVisuals( const Vector2& targetSize )
-{
-  if( mVisual )
-  {
-    Vector2 size( targetSize );
-    Property::Map transformMap;
-    // Make the visual half the size of the control, but leave
-    // origin and anchor point at center, position is relative, but Zer0
-    transformMap[ DevelVisual::Transform::Property::SIZE ] = Vector2(0.5, 0.5);
-    mVisual.SetTransformAndSize( transformMap, size );
-
-    // @todo We must stop this clashing with a transform animation
-  }
-}
-
-Vector3 BeatControl::GetNaturalSize()
-{
-  if( mVisual )
-  {
-    Vector2 naturalSize;
-    mVisual.GetNaturalSize(naturalSize);
-    return Vector3(naturalSize);
-  }
-  return Vector3::ZERO;
-}
-
-void BeatControl::OnStyleChange( Toolkit::StyleManager styleManager, StyleChange::Type change )
-{
-  // Chain up.
-  Control::OnStyleChange( styleManager, change );
-}
-
-
-///////////////////////////////////////////////////////////
-//
-// Properties
-//
-
-void BeatControl::SetProperty( BaseObject* object, Property::Index index, const Property::Value& value )
-{
-  Demo::BeatControl beatControl = Demo::BeatControl::DownCast( Dali::BaseHandle( object ) );
-
-  if( beatControl )
-  {
-    BeatControl& impl = GetImpl( beatControl );
-    Actor self = impl.Self();
-    switch ( index )
-    {
-      case Demo::BeatControl::Property::BEAT_VISUAL:
-      {
-        Property::Map* map = value.GetMap();
-        if( map )
-        {
-          impl.mVisual = Toolkit::VisualFactory::Get().CreateVisual( *map );
-          impl.RegisterVisual( Demo::BeatControl::Property::BEAT_VISUAL, impl.mVisual );
-        }
-        break;
-      }
-      case Demo::BeatControl::Property::BOUNCE_TRANSITION:
-      {
-        impl.mBounceTransition = ConvertPropertyToTransition( value );
-        break;
-      }
-      case Demo::BeatControl::Property::LEFT_TRANSITION:
-      {
-        impl.mLeftTransition = ConvertPropertyToTransition( value );
-        break;
-      }
-      case Demo::BeatControl::Property::UP_TRANSITION:
-      {
-        impl.mUpTransition = ConvertPropertyToTransition( value );
-        break;
-      }
-    }
-  }
-}
-
-Property::Value BeatControl::GetProperty( BaseObject* object, Property::Index propertyIndex )
-{
-  Property::Value value;
-
-  Demo::BeatControl beatControl = Demo::BeatControl::DownCast( Dali::BaseHandle( object ) );
-
-  if ( beatControl )
-  {
-    BeatControl& impl = GetImpl( beatControl );
-    switch ( propertyIndex )
-    {
-      case Demo::BeatControl::Property::BEAT_VISUAL:
-      {
-        if( impl.mVisual )
-        {
-          Property::Map map;
-          impl.mVisual.CreatePropertyMap(map);
-          value = map;
-        }
-        break;
-      }
-      case Demo::BeatControl::Property::BOUNCE_TRANSITION:
-      default:
-        break;
-    }
-  }
-
-  return value;
-}
-
-
-} // Internal
-} // Demo
+/*
+ * Copyright (c) 2017 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#include "shadow-button-impl.h"
+#include <dali-toolkit/dali-toolkit.h>
+#include <dali/public-api/object/type-registry-helper.h>
+#include <dali/devel-api/scripting/enum-helper.h>
+#include <dali-toolkit/devel-api/align-enums.h>
+#include <dali-toolkit/devel-api/visual-factory/visual-factory.h>
+#include <dali-toolkit/devel-api/visuals/visual-properties-devel.h>
+
+#include <cstdio>
+
+using namespace Dali; // Needed for macros
+using namespace Dali::Toolkit;
+
+namespace Demo
+{
+namespace Internal
+{
+
+namespace
+{
+
+
+Dali::BaseHandle Create()
+{
+  return Demo::ShadowButton::New();
+}
+
+DALI_TYPE_REGISTRATION_BEGIN( ShadowButton, Dali::Toolkit::Button, Create );
+
+DALI_PROPERTY_REGISTRATION( Demo, ShadowButton, "activeTransition", ARRAY, ACTIVE_TRANSITION );
+DALI_PROPERTY_REGISTRATION( Demo, ShadowButton, "inactiveTransition", ARRAY, INACTIVE_TRANSITION );
+DALI_PROPERTY_REGISTRATION( Demo, ShadowButton, "checkTransition", ARRAY, CHECK_TRANSITION );
+DALI_PROPERTY_REGISTRATION( Demo, ShadowButton, "uncheckTransition", ARRAY, UNCHECK_TRANSITION );
+DALI_PROPERTY_REGISTRATION( Demo, ShadowButton, "backgroundVisual", MAP, BACKGROUND_VISUAL );
+DALI_PROPERTY_REGISTRATION( Demo, ShadowButton, "checkboxBgVisual", MAP, CHECKBOX_BG_VISUAL );
+DALI_PROPERTY_REGISTRATION( Demo, ShadowButton, "checkboxFgVisual", MAP, CHECKBOX_FG_VISUAL );
+DALI_PROPERTY_REGISTRATION( Demo, ShadowButton, "labelVisual", MAP, LABEL_VISUAL );
+DALI_PROPERTY_REGISTRATION( Demo, ShadowButton, "checkState", BOOLEAN, ACTIVE_STATE );
+DALI_PROPERTY_REGISTRATION( Demo, ShadowButton, "checkState", BOOLEAN, CHECK_STATE );
+
+DALI_TYPE_REGISTRATION_END();
+
+DALI_ENUM_TO_STRING_TABLE_BEGIN( VISUAL_PROPERTIES )
+{ "backgroundVisual", Demo::ShadowButton::Property::BACKGROUND_VISUAL },
+{ "checkboxBgVisual", Demo::ShadowButton::Property::CHECKBOX_BG_VISUAL},
+{ "checkboxFgVisual", Demo::ShadowButton::Property::CHECKBOX_FG_VISUAL},
+{ "labelVisual",      Demo::ShadowButton::Property::LABEL_VISUAL}
+DALI_ENUM_TO_STRING_TABLE_END( VISUAL_PROPERTIES )
+
+Toolkit::TransitionData ConvertPropertyToTransition( const Property::Value& value )
+{
+  Toolkit::TransitionData transitionData;
+
+  if( value.GetType() == Property::ARRAY )
+  {
+    transitionData = Toolkit::TransitionData::New( *value.GetArray());
+  }
+  else if( value.GetType() == Property::MAP )
+  {
+    transitionData = Toolkit::TransitionData::New( *value.GetMap() );
+  }
+  return transitionData;
+}
+
+} // anonymous namespace
+
+
+Internal::ShadowButton::ShadowButton()
+: Control( ControlBehaviour( REQUIRES_STYLE_CHANGE_SIGNALS ) ),
+  mCheckState(false),
+  mActiveState(false)
+{
+}
+
+Internal::ShadowButton::~ShadowButton()
+{
+}
+
+Demo::ShadowButton Internal::ShadowButton::New()
+{
+  IntrusivePtr<Internal::ShadowButton> impl = new Internal::ShadowButton();
+  Demo::ShadowButton handle = Demo::ShadowButton( *impl );
+  impl->Initialize();
+  return handle;
+}
+
+void ShadowButton::SetActiveState( bool active )
+{
+  if( active != mActiveState )
+  {
+    mActiveState = active;
+    if( active )
+    {
+      StartTransition( Demo::ShadowButton::Property::ACTIVE_TRANSITION );
+    }
+    else
+    {
+      StartTransition( Demo::ShadowButton::Property::INACTIVE_TRANSITION );
+    }
+  }
+}
+
+bool ShadowButton::GetActiveState()
+{
+  return mActiveState;
+}
+
+void ShadowButton::SetCheckState( bool checkState )
+{
+  mCheckState = checkState;
+  EnableVisual( Demo::ShadowButton::Property::CHECKBOX_FG_VISUAL, true );
+  if( Self().OnStage() )
+  {
+    if( checkState )
+    {
+      StartTransition( Demo::ShadowButton::Property::CHECK_TRANSITION );
+    }
+    else
+    {
+      StartTransition( Demo::ShadowButton::Property::UNCHECK_TRANSITION );
+    }
+  }
+  RelayoutRequest();
+}
+
+bool ShadowButton::GetCheckState()
+{
+  return mCheckState;
+}
+
+void ShadowButton::StartTransition( Property::Index transitionId )
+{
+  Transitions::iterator iter = FindTransition( transitionId );
+  if( iter != mTransitions.end() )
+  {
+    if( iter->mAnimation )
+    {
+      iter->mAnimation.Stop();
+      iter->mPlaying = false;
+
+      iter->mAnimation.FinishedSignal().Disconnect( this, &ShadowButton::OnTransitionFinished );
+    }
+
+    iter->mAnimation = CreateTransition( iter->mTransitionData );
+    StoreTargetLayouts( iter->mTransitionData );
+
+    iter->mAnimation.FinishedSignal().Connect( this, &ShadowButton::OnTransitionFinished );
+    iter->mAnimation.Play();
+    iter->mPlaying = true;
+  }
+}
+
+void ShadowButton::OnTransitionFinished( Animation& src )
+{
+  ShadowButton::Transitions::iterator iter = mTransitions.begin();
+  for( ; iter != mTransitions.end(); ++iter )
+  {
+    if( iter->mAnimation == src )
+    {
+      iter->mPlaying = false;
+      iter->mAnimation.Reset(); // Remove the animation when it's finished.
+      switch( iter->mTransitionId )
+      {
+        case Demo::ShadowButton::Property::ACTIVE_TRANSITION:
+        {
+          // Consider relayouting the text.
+          break;
+        }
+        case Demo::ShadowButton::Property::INACTIVE_TRANSITION:
+        {
+          // Consider relayouting the text.
+          break;
+        }
+        case Demo::ShadowButton::Property::UNCHECK_TRANSITION:
+        {
+          EnableVisual( Demo::ShadowButton::Property::CHECKBOX_FG_VISUAL, false );
+          break;
+        }
+      }
+      break;
+    }
+  }
+}
+
+void ShadowButton::OnInitialize()
+{
+  Actor self = Self();
+}
+
+void ShadowButton::OnStageConnection( int depth )
+{
+  Control::OnStageConnection( depth );
+}
+
+void ShadowButton::OnStageDisconnection()
+{
+  Control::OnStageDisconnection();
+}
+
+void ShadowButton::OnSizeSet( const Vector3& targetSize )
+{
+  Control::OnSizeSet( targetSize );
+  RelayoutVisuals( Vector2( targetSize ) );
+}
+
+void ShadowButton::OnRelayout( const Vector2& targetSize, RelayoutContainer& container )
+{
+  RelayoutVisuals( targetSize );
+}
+
+void ShadowButton::RelayoutVisuals( const Vector2& targetSize )
+{
+  bool transitioning = false;
+  ShadowButton::Transitions::iterator iter = mTransitions.begin();
+  for( ; iter != mTransitions.end(); ++iter )
+  {
+    if( iter->mPlaying == true )
+    {
+      transitioning = true;
+      break;
+    }
+  }
+
+  if( ! transitioning )
+  {
+    for( ShadowButton::Transforms::iterator iter = mTransforms.begin();
+         iter != mTransforms.end(); ++iter )
+    {
+      switch( iter->mTransformId )
+      {
+        case Demo::ShadowButton::Property::BACKGROUND_VISUAL:
+        {
+          mBackgroundVisual.SetTransformAndSize( iter->mTransform, targetSize );
+          break;
+        }
+        case Demo::ShadowButton::Property::CHECKBOX_BG_VISUAL:
+        {
+          mCheckboxBgVisual.SetTransformAndSize( iter->mTransform, targetSize );
+          break;
+        }
+        case Demo::ShadowButton::Property::CHECKBOX_FG_VISUAL:
+        {
+          mCheckboxFgVisual.SetTransformAndSize( iter->mTransform, targetSize );
+          break;
+        }
+        case Demo::ShadowButton::Property::LABEL_VISUAL:
+        {
+          mLabelVisual.SetTransformAndSize( iter->mTransform, targetSize );
+          break;
+        }
+      }
+    }
+  }
+}
+
+Vector3 ShadowButton::GetNaturalSize()
+{
+  int width;
+  int height;
+
+  Vector2 checkboxBgSize;
+  Vector2 checkboxFgSize;
+  Vector2 labelSize;
+  mCheckboxBgVisual.GetNaturalSize( checkboxBgSize );
+  mCheckboxFgVisual.GetNaturalSize( checkboxFgSize );
+  mLabelVisual.GetNaturalSize( labelSize );
+
+  width = std::max( checkboxBgSize.x, checkboxFgSize.x ) + labelSize.x;
+  height = std::max( std::max( checkboxFgSize.y, checkboxBgSize.y ), labelSize.y );
+
+  return Vector3( width, height, height );
+}
+
+void ShadowButton::OnStyleChange( Toolkit::StyleManager styleManager, StyleChange::Type change )
+{
+  // Chain up.
+  Control::OnStyleChange( styleManager, change );
+}
+
+ShadowButton::Transitions::iterator ShadowButton::FindTransition( Property::Index index )
+{
+  bool found = false;
+  ShadowButton::Transitions::iterator iter = mTransitions.begin();
+  for( ; iter != mTransitions.end(); ++iter )
+  {
+    if( iter->mTransitionId == index )
+    {
+      found = true;
+      break;
+    }
+  }
+  if( ! found )
+  {
+    iter = mTransitions.end();
+  }
+  return iter;
+}
+
+ShadowButton::Transforms::iterator ShadowButton::FindTransform( Property::Index index )
+{
+  bool found = false;
+  ShadowButton::Transforms::iterator iter = mTransforms.begin();
+  for( ; iter != mTransforms.end(); ++iter )
+  {
+    if( iter->mTransformId == index )
+    {
+      found = true;
+      break;
+    }
+  }
+  if( ! found )
+  {
+    iter = mTransforms.end();
+  }
+  return iter;
+}
+
+void ShadowButton::ResetVisual(
+  Property::Index        index,
+  Visual::Base&          visual,
+  const Property::Value& value )
+{
+  if( visual )
+  {
+    // we are replacing an existing visual, so force relayout
+    RelayoutRequest();
+  }
+  Property::Map* map = value.GetMap();
+  if( map )
+  {
+    visual = Toolkit::VisualFactory::Get().CreateVisual( *map );
+
+    // Set the appropriate depth index.
+    // @todo Should be able to set this from the style sheet
+    switch( index )
+    {
+      case Demo::ShadowButton::Property::BACKGROUND_VISUAL:
+      {
+        RegisterVisual( index, visual );
+        visual.SetDepthIndex(0.0f);
+        break;
+      }
+      case Demo::ShadowButton::Property::CHECKBOX_BG_VISUAL:
+      {
+        RegisterVisual( index, visual );
+        visual.SetDepthIndex(1.0f);
+        break;
+      }
+      case Demo::ShadowButton::Property::CHECKBOX_FG_VISUAL:
+      {
+        RegisterVisual( index, visual, mCheckState );
+        visual.SetDepthIndex(2.0f);
+        break;
+      }
+      case Demo::ShadowButton::Property::LABEL_VISUAL:
+      {
+        RegisterVisual( index, visual );
+        visual.SetDepthIndex(1.0f);
+        break;
+      }
+    }
+
+    // Extract transform maps out of the visual definition and store them
+    Property::Value* value = map->Find( DevelVisual::Property::TRANSFORM, "transform");
+    if( value )
+    {
+      Property::Map* transformMap = value->GetMap();
+      if( transformMap )
+      {
+        ShadowButton::Transforms::iterator iter = FindTransform( index );
+        if( iter != mTransforms.end() )
+        {
+          iter->mTransform = *transformMap;
+        }
+        else
+        {
+          mTransforms.push_back( Transform( index, *transformMap ) );
+        }
+      }
+    }
+  }
+}
+
+bool IsTransformProperty( const std::string& property )
+{
+  const char* transformProperties[]= { "size", "offset", "origin", "anchorPoint", "offsetSizeMode" };
+  const int NUM_TRANSFORM_PROPERTIES = sizeof( transformProperties ) / sizeof( const char * );
+
+  bool found=false;
+  for( int i=0; i<NUM_TRANSFORM_PROPERTIES; ++i )
+  {
+    if( property == transformProperties[i] )
+    {
+      found = true;
+      break;
+    }
+  }
+  return found;
+}
+
+void ShadowButton::StoreTargetLayouts( TransitionData transitionData )
+{
+  // Pseudo code
+  // foreach animator in transitionData
+  //   if animator{"property"} in [ "size", "offset", "origin", "anchorPoint", "offsetSizeMode" ]
+  //     transforms{ animator{"target"} }->{animator{"property"}} = animator{"targetValue"}
+
+
+  for( unsigned int i=0; i < transitionData.Count(); ++i )
+  {
+    Property::Map animator = transitionData.GetAnimatorAt(i);
+    Property::Value* target = animator.Find( "target" );
+    if( target )
+    {
+      // Convert to index
+      Property::Index index;
+      if( Scripting::GetEnumerationProperty( *target, VISUAL_PROPERTIES_TABLE, VISUAL_PROPERTIES_TABLE_COUNT, index ) )
+      {
+        ShadowButton::Transforms::iterator iter = FindTransform( index );
+        if( iter != mTransforms.end() )
+        {
+          Property::Value* property = animator.Find( "property" );
+          if( property )
+          {
+            std::string propertyString;
+            property->Get(propertyString);
+            if( IsTransformProperty( propertyString ) )
+            {
+              Property::Value* targetValue = animator.Find( "targetValue" );
+              if( targetValue )
+              {
+                iter->mTransform[ propertyString ] = *targetValue;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+void ShadowButton::ResetTransition(
+  Property::Index        index,
+  const Property::Value& value)
+{
+  ShadowButton::Transitions::iterator iter = FindTransition( index );
+  if( iter != mTransitions.end() )
+  {
+    // Already exists
+    iter->mTransitionData = ConvertPropertyToTransition( value );
+    iter->mAnimation.Stop();
+    iter->mAnimation.Clear();
+  }
+  else
+  {
+    mTransitions.push_back( Transition( index, ConvertPropertyToTransition( value ) ) );
+  }
+}
+
+
+void ShadowButton::SetProperty( BaseObject* object, Property::Index index, const Property::Value& value )
+{
+  Demo::ShadowButton shadowButton = Demo::ShadowButton::DownCast( Dali::BaseHandle( object ) );
+
+  if( shadowButton )
+  {
+    ShadowButton& impl = GetImpl( shadowButton );
+    switch ( index )
+    {
+      case Demo::ShadowButton::Property::BACKGROUND_VISUAL:
+      {
+        impl.ResetVisual( index, impl.mBackgroundVisual, value );
+        break;
+      }
+      case Demo::ShadowButton::Property::CHECKBOX_BG_VISUAL:
+      {
+        impl.ResetVisual( index, impl.mCheckboxBgVisual, value );
+        break;
+      }
+      case Demo::ShadowButton::Property::CHECKBOX_FG_VISUAL:
+      {
+        impl.ResetVisual( index, impl.mCheckboxFgVisual, value );
+        impl.EnableVisual( Demo::ShadowButton::Property::CHECKBOX_FG_VISUAL, impl.mCheckState );
+        break;
+      }
+      case Demo::ShadowButton::Property::LABEL_VISUAL:
+      {
+        impl.ResetVisual( index, impl.mLabelVisual, value );
+        break;
+      }
+      case Demo::ShadowButton::Property::ACTIVE_TRANSITION:
+      case Demo::ShadowButton::Property::INACTIVE_TRANSITION:
+      case Demo::ShadowButton::Property::CHECK_TRANSITION:
+      case Demo::ShadowButton::Property::UNCHECK_TRANSITION:
+      {
+        impl.ResetTransition( index, value );
+        break;
+      }
+    }
+  }
+}
+
+Property::Value ShadowButton::GetProperty( BaseObject* object, Property::Index propertyIndex )
+{
+  Property::Value value;
+
+  Demo::ShadowButton shadowButton = Demo::ShadowButton::DownCast( Dali::BaseHandle( object ) );
+
+  if ( shadowButton )
+  {
+    ShadowButton& impl = GetImpl( shadowButton );
+    switch ( propertyIndex )
+    {
+      case Demo::ShadowButton::Property::BACKGROUND_VISUAL:
+      {
+        Property::Map map;
+        impl.mBackgroundVisual.CreatePropertyMap(map);
+        value = map;
+        break;
+      }
+      case Demo::ShadowButton::Property::CHECKBOX_BG_VISUAL:
+      {
+        Property::Map map;
+        impl.mCheckboxBgVisual.CreatePropertyMap(map);
+        value = map;
+        break;
+      }
+      case Demo::ShadowButton::Property::CHECKBOX_FG_VISUAL:
+      {
+        Property::Map map;
+        impl.mCheckboxFgVisual.CreatePropertyMap(map);
+        value = map;
+        break;
+      }
+      case Demo::ShadowButton::Property::LABEL_VISUAL:
+      {
+        Property::Map map;
+        impl.mLabelVisual.CreatePropertyMap(map);
+        value = map;
+        break;
+      }
+
+      default:
+        break;
+    }
+  }
+
+  return value;
+}
+
+
+} // Internal
+} // Demo
-#ifndef DALI_DEMO_INTERNAL_BEAT_CONTROL_IMPL_H
-#define DALI_DEMO_INTERNAL_BEAT_CONTROL_IMPL_H
+#ifndef DALI_DEMO_INTERNAL_SHADOW_BUTTON_IMPL_H
+#define DALI_DEMO_INTERNAL_SHADOW_BUTTON_IMPL_H
 /*
- * Copyright (c) 2016 Samsung Electronics Co., Ltd.
+ * Copyright (c) 2017 Samsung Electronics Co., Ltd.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -17,7 +17,7 @@
  * limitations under the License.
  */
-#include "beat-control.h"
+#include "shadow-button.h"
 #include <dali/public-api/animation/animation.h>
 #include <dali-toolkit/public-api/controls/control-impl.h>
 #include <dali-toolkit/devel-api/visual-factory/visual-base.h>
@@ -29,22 +29,42 @@ namespace Demo
 namespace Internal // To use TypeRegistry, handle and body classes need the same name
 {
-class BeatControl : public Dali::Toolkit::Internal::Control
+class ShadowButton : public Dali::Toolkit::Internal::Control
 {
 public:
   /**
-   * Instantiate a new BeatControl object
+   * Instantiate a new ShadowButton object
    */
-  static Demo::BeatControl New();
-  BeatControl();
-  ~BeatControl();
+  static Demo::ShadowButton New();
+  ShadowButton();
+  ~ShadowButton();
 public: // API
-  void StartBounceAnimation();
+  /**
+   * @brief Set the button to be active or inactive.
+   *
+   * The button will perform a transition if there is a state change.
+   * @param[in] active The active state
+   */
+  void SetActiveState( bool active );
+
+  /**
+   * Get the active state
+   * @return the active state
+   */
+  bool GetActiveState();
-  void StartXAnimation();
+  /**
+   * Set the check state
+   * @param[in] checkState The state of the checkbox
+   */
+  void SetCheckState( bool checkState );
-  void StartYAnimation();
+  /**
+   * Get the check state
+   * @return the check state
+   */
+  bool GetCheckState();
 public:  // Properties
   /**
@@ -65,81 +85,136 @@ public:  // Properties
 private: // From Control
   /**
-   * @copydoc Toolkit::Control::OnInitialize()
+   * @copydoc Toolkit::Button::OnInitialize()
    */
   virtual void OnInitialize();
   /**
-   * @copydoc Toolkit::Control::OnStageConnect()
+   * @copydoc Toolkit::Button::OnStageConnect()
    */
   virtual void OnStageConnection( int depth );
   /**
-   * @copydoc Toolkit::Control::OnStageDisconnection()
+   * @copydoc Toolkit::Button::OnStageDisconnection()
    */
   virtual void OnStageDisconnection();
   /**
-   * @copydoc Toolkit::Control::OnSizeSet()
+   * @copydoc Toolkit::Button::OnSizeSet()
    */
   virtual void OnSizeSet( const Dali::Vector3& targetSize );
   /**
-   * @copydoc Toolkit::Control::OnRelayout()
+   * @copydoc Toolkit::Button::OnRelayout()
    */
   virtual void OnRelayout( const Dali::Vector2& targetSize, Dali::RelayoutContainer& container );
   /**
-   * @copydoc Toolkit::Control::GetNaturalSize
+   * @copydoc Toolkit::Button::GetNaturalSize
    */
   virtual Dali::Vector3 GetNaturalSize();
   /**
-   * @copydoc Toolkit::Control::OnStyleChange
+   * @copydoc Toolkit::Button::OnStyleChange
    */
   virtual void OnStyleChange( Dali::Toolkit::StyleManager styleManager, Dali::StyleChange::Type change );
 private:
-  void OnBounceAnimationFinished( Dali::Animation& handle );
-  void OnXAnimationFinished( Dali::Animation& src );
-  void OnYAnimationFinished( Dali::Animation& src );
+  struct Transition
+  {
+    Dali::Property::Index mTransitionId;
+    Dali::Toolkit::TransitionData mTransitionData;
+    Dali::Animation mAnimation;
+    bool mPlaying;
+
+    Transition( Dali::Property::Index index, Dali::Toolkit::TransitionData transitionData )
+    : mTransitionId( index ),
+      mTransitionData( transitionData ),
+      mPlaying(false)
+    {
+    }
+  private:
+    Transition();
+  };
+
+  typedef std::vector<Transition> Transitions;
+
+  struct Transform
+  {
+    Dali::Property::Index mTransformId;
+    Dali::Property::Map   mTransform;
+
+    Transform( Dali::Property::Index index, Dali::Property::Map& map )
+    : mTransformId(index),
+      mTransform( map )
+    {
+    }
+  };
+  typedef std::vector<Transform> Transforms;
+
+private:
+  void StartTransition( Dali::Property::Index transitionId );
+
+  void OnTransitionFinished( Dali::Animation& handle );
+
+  Transitions::iterator FindTransition( Dali::Property::Index index );
+
+  Transforms::iterator FindTransform( Dali::Property::Index index );
   /**
-   * Relayout the visuals as a result of size negotiation
+   * Relayout the visuals as a result of size negotiation using
+   * the transforms provided in the stylesheet
    */
   void RelayoutVisuals( const Dali::Vector2& targetSize );
+  /**
+   * Relayout the visuals as a result of size negotiation using
+   * programmatically generated transforms
+   */
+  void RelayoutVisualsManually( const Dali::Vector2& targetSize );
+
+  void ResetVisual( Dali::Property::Index        index,
+                    Dali::Toolkit::Visual::Base& visual,
+                    const Dali::Property::Value& value );
+
+  void ResetTransition( Dali::Property::Index        index,
+                        const Dali::Property::Value& value );
+
+  void StoreTargetLayouts( Dali::Toolkit::TransitionData transitionData );
+
 private:
-  //undefined
-  BeatControl( const BeatControl& );
-  BeatControl& operator=( const BeatControl& );
+  // undefined
+  ShadowButton( const ShadowButton& );
+  ShadowButton& operator=( const ShadowButton& );
 private:
-  // Implementation details
-  Dali::Toolkit::Visual::Base mVisual;
-  Dali::Toolkit::TransitionData mBounceTransition;
-  Dali::Toolkit::TransitionData mLeftTransition;
-  Dali::Toolkit::TransitionData mUpTransition;
-  Dali::Animation mAnimation;
-  Dali::Animation mXAnimation;
-  Dali::Animation mYAnimation;
+  // Data
+  Dali::Toolkit::Visual::Base mBackgroundVisual;
+  Dali::Toolkit::Visual::Base mCheckboxBgVisual;
+  Dali::Toolkit::Visual::Base mCheckboxFgVisual;
+  Dali::Toolkit::Visual::Base mLabelVisual;
+
+  Transitions mTransitions;
+  Transforms  mTransforms;
+  bool        mCheckState;
+  bool        mActiveState;
 };
 } // Internal
-inline Internal::BeatControl& GetImpl( Demo::BeatControl& handle )
+inline Internal::ShadowButton& GetImpl( Demo::ShadowButton& handle )
 {
   DALI_ASSERT_ALWAYS( handle );
   Dali::RefObject& object = handle.GetImplementation();
-  return static_cast<Internal::BeatControl&>(object);
+  return static_cast<Internal::ShadowButton&>(object);
 }
-inline const Internal::BeatControl& GetImpl( const Demo::BeatControl& handle )
+inline const Internal::ShadowButton& GetImpl( const Demo::ShadowButton& handle )
 {
   DALI_ASSERT_ALWAYS( handle );
   const Dali::RefObject& object = handle.GetImplementation();
-  return static_cast<const Internal::BeatControl&>(object);
+  return static_cast<const Internal::ShadowButton&>(object);
 }
 } // Demo
-#endif //  DALI_DEMO_BEAT_CONTROL_IMPL_H
+#endif //  DALI_DEMO_SHADOW_BUTTON_IMPL_H
 /*
- * Copyright (c) 2016 Samsung Electronics Co., Ltd.
+ * Copyright (c) 2017 Samsung Electronics Co., Ltd.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -14,22 +14,22 @@
  * limitations under the License.
  */
-#include "beat-control.h"
-#include "beat-control-impl.h"
+#include "shadow-button.h"
+#include "shadow-button-impl.h"
 namespace Demo
 {
-BeatControl::BeatControl()
+ShadowButton::ShadowButton()
 {
 }
-BeatControl::BeatControl( const BeatControl& beatControl )
-: Control( beatControl )
+ShadowButton::ShadowButton( const ShadowButton& control )
+: Control( control )
 {
 }
-BeatControl& BeatControl::operator= ( const BeatControl& rhs )
+ShadowButton& ShadowButton::operator= ( const ShadowButton& rhs )
 {
   if( &rhs != this )
   {
@@ -38,51 +38,56 @@ BeatControl&amp; BeatControl::operator= ( const BeatControl&amp; rhs )
   return *this;
 }
-BeatControl::~BeatControl()
+ShadowButton::~ShadowButton()
 {
 }
-BeatControl BeatControl::New()
+ShadowButton ShadowButton::New()
 {
-  BeatControl beatControl = Internal::BeatControl::New();
-  return beatControl;
+  ShadowButton control = Internal::ShadowButton::New();
+  return control;
 }
-BeatControl BeatControl::New( const std::string& url )
+ShadowButton ShadowButton::New( const std::string& url )
 {
-  BeatControl beatControl = Internal::BeatControl::New();
-  return beatControl;
+  ShadowButton control = Internal::ShadowButton::New();
+  return control;
 }
-BeatControl BeatControl::DownCast( BaseHandle handle )
+ShadowButton ShadowButton::DownCast( BaseHandle handle )
 {
-  return Control::DownCast< BeatControl, Internal::BeatControl > ( handle );
+  return Control::DownCast< ShadowButton, Internal::ShadowButton > ( handle );
 }
-void BeatControl::StartBounceAnimation()
+void ShadowButton::SetActiveState( bool active )
 {
-  GetImpl(*this).StartBounceAnimation();
+  GetImpl(*this).SetActiveState( active );
 }
-void BeatControl::StartXAnimation()
+bool ShadowButton::GetActiveState()
 {
-  GetImpl(*this).StartXAnimation();
+  return GetImpl(*this).GetActiveState();
 }
-void BeatControl::StartYAnimation()
+
+void ShadowButton::SetCheckState( bool checkState )
 {
-  GetImpl(*this).StartYAnimation();
+  GetImpl(*this).SetCheckState( checkState );
 }
+bool ShadowButton::GetCheckState()
+{
+  return GetImpl(*this).GetCheckState();
+}
-BeatControl::BeatControl( Internal::BeatControl& implementation )
+ShadowButton::ShadowButton( Internal::ShadowButton& implementation )
 : Control( implementation )
 {
 }
-BeatControl::BeatControl( Dali::Internal::CustomActor* internal )
+ShadowButton::ShadowButton( Dali::Internal::CustomActor* internal )
 : Control( internal )
 {
-  VerifyCustomActorPointer< Internal::BeatControl >( internal ) ;
+  VerifyCustomActorPointer< Internal::ShadowButton >( internal ) ;
 }
-#ifndef DALI_DEMO_BEAT_CONTROL_H
-#define DALI_DEMO_BEAT_CONTROL_H
+#ifndef DALI_DEMO_SHADOW_BUTTON_H
+#define DALI_DEMO_SHADOW_BUTTON_H
 /*
- * Copyright (c) 2016 Samsung Electronics Co., Ltd.
+ * Copyright (c) 2017 Samsung Electronics Co., Ltd.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -23,20 +23,21 @@
 namespace Demo
 {
+// All type registered controls need to have the same name for the body
+// and the handle
 namespace Internal
 {
-// All type registered types need to have the same name for the body and the handle
-class BeatControl;
+class ShadowButton;
 }
 /**
- * Control that allows the RGB channels of an image to be altered.
+ * Button that allows the RGB channels of an image to be altered.
  */
-class BeatControl : public Dali::Toolkit::Control
+class ShadowButton : public Dali::Toolkit::Control
 {
 public:
   /**
-   * The start and end property ranges for this control
+   * The start and end property ranges for this Control
    */
   enum PropertyRange
   {
@@ -50,10 +51,16 @@ public:
   {
     enum
     {
-      BOUNCE_TRANSITION = PROPERTY_START_INDEX,
-      LEFT_TRANSITION,
-      UP_TRANSITION,
-      BEAT_VISUAL
+      ACTIVE_TRANSITION = PROPERTY_START_INDEX,
+      INACTIVE_TRANSITION,
+      CHECK_TRANSITION,
+      UNCHECK_TRANSITION,
+      BACKGROUND_VISUAL,
+      CHECKBOX_BG_VISUAL,
+      CHECKBOX_FG_VISUAL,
+      LABEL_VISUAL,
+      ACTIVE_STATE,
+      CHECK_STATE,
     };
   };
@@ -62,60 +69,81 @@ public: // Construction / destruction
   /**
    * Create an uninitialized handle
    */
-  BeatControl();
+  ShadowButton();
   /**
-   * Create a new image channel control without an image. Use
-   * SetImage to give this control an image
+   * Create a new image channel button without an image. Use
+   * SetImage to give this button an image
    */
-  static BeatControl New();
+  static ShadowButton New();
   /**
-   * Create a new image channel control from a given URL
+   * Create a new image channel button from a given URL
    */
-  static BeatControl New( const std::string& url );
+  static ShadowButton New( const std::string& url );
   /**
    * Destructor. This is non-virtual since derived Handle types must not
    * contain data or virtual methods
    */
-  ~BeatControl();
+  ~ShadowButton();
   /**
    * Copy Constructor
    */
-  BeatControl( const BeatControl& beatControl );
+  ShadowButton( const ShadowButton& shadowButton );
   /**
    * Assignment Operator
    */
-  BeatControl& operator=( const BeatControl& beatControl );
+  ShadowButton& operator=( const ShadowButton& shadowButton );
   /**
    * Downcast
    */
-  static BeatControl DownCast( BaseHandle handle );
+  static ShadowButton DownCast( BaseHandle handle );
 public: // API
-  void StartBounceAnimation();
+  /**
+   * @brief Set the button to be active or inactive.
+   *
+   * The button will perform a transition if there is a state change.
+   * @param[in] active The active state
+   */
+  void SetActiveState( bool active );
-  void StartXAnimation();
+  /**
+   * @brief Get the button's active state
+   *
+   * @return The active state
+   */
+  bool GetActiveState();
-  void StartYAnimation();
+  /**
+   * Set the check state
+   * @param[in] checkState The state of the checkbox
+   */
+  void SetCheckState( bool checkState );
+
+  /**
+   * Get the check state
+   * @return the check state
+   */
+  bool GetCheckState();
 public: // Not for public use
   /**
    * Create a handle from an implementation
    */
-  BeatControl( Internal::BeatControl& implementation );
+  ShadowButton( Internal::ShadowButton& implementation );
   /**
-   * Allow the creation of an BeatControl handle from an internal CustomActor pointer
+   * Allow the creation of an ShadowButton handle from an internal CustomActor pointer
    */
-  BeatControl( Dali::Internal::CustomActor* internal );
+  ShadowButton( Dali::Internal::CustomActor* internal );
 };
 } // namespace Demo
-#endif // DALI_DEMO_BEAT_CONTROL_H
+#endif // DALI_DEMO_SHADOW_BUTTON_H
 /*
- * Copyright (c) 2016 Samsung Electronics Co., Ltd.
+ * Copyright (c) 2017 Samsung Electronics Co., Ltd.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -24,7 +24,9 @@
 // External includes
 #include <dali-toolkit/dali-toolkit.h>
-#include "beat-control.h"
+#include <dali-toolkit/devel-api/visuals/visual-properties-devel.h>
+#include <dali-toolkit/devel-api/visuals/text-visual-properties.h>
+#include "shadow-button.h"
 #include <cstdio>
 #include <sstream>
@@ -33,16 +35,27 @@
 using namespace Dali;
 using namespace Dali::Toolkit;
+namespace
+{
+
+void SetLabelText( Button button, const char* label )
+{
+  button.SetProperty( Toolkit::Button::Property::LABEL, label );
+}
+
+}
+
 namespace Demo
 {
 const char* TransitionApplication::DEMO_THEME_ONE_PATH( DEMO_STYLE_DIR "style-example-theme-one.json" );
+const char* TransitionApplication::DEMO_THEME_TWO_PATH( DEMO_STYLE_DIR "style-example-theme-two.json" );
 TransitionApplication::TransitionApplication( Application& application )
 : mApplication( application ),
   mTitle(),
-  mBeatControl(),
+  mShadowButton(),
   mActionButtons(),
   mActionIndex( Property::INVALID_INDEX )
 {
@@ -68,8 +81,8 @@ void TransitionApplication::Create( Application&amp; application )
   contentLayout.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
   contentLayout.SetAnchorPoint( AnchorPoint::TOP_LEFT );
   contentLayout.SetParentOrigin( ParentOrigin::TOP_LEFT );
-  contentLayout.SetCellPadding( Size( 10, 10 ) );
-
+  contentLayout.SetCellPadding( Vector2( 0.0f, 5.0f ) );
+  contentLayout.SetBackgroundColor( Vector4(0.949, 0.949, 0.949, 1.0) );
   // Assign all rows the size negotiation property of fitting to children
   stage.Add( contentLayout );
@@ -77,63 +90,58 @@ void TransitionApplication::Create( Application&amp; application )
   mTitle = TextLabel::New( "Custom Control Transition Example" );
   mTitle.SetName( "Title" );
   mTitle.SetStyleName("Title");
-  mTitle.SetAnchorPoint( AnchorPoint::TOP_CENTER );
-  mTitle.SetParentOrigin( ParentOrigin::TOP_CENTER );
   mTitle.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
   mTitle.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
   mTitle.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" );
   contentLayout.Add( mTitle );
-  contentLayout.SetFitHeight(0);
-
-  mBeatControl = BeatControl::New();
-  mBeatControl.SetName("BeatControl");
-  mBeatControl.SetAnchorPoint( AnchorPoint::CENTER );
-  mBeatControl.SetParentOrigin( ParentOrigin::CENTER );
-  mBeatControl.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
-  contentLayout.Add( mBeatControl );
-  // beat control should fill the tableview cell, so no change to default parameters
-
-  TableView actionButtonLayout = TableView::New( 1, 4 );
+  contentLayout.SetFitHeight(0); // Fill width
+
+  // Provide some padding around the center cell
+  TableView buttonLayout = TableView::New( 3, 3 );
+  buttonLayout.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
+  buttonLayout.SetFixedHeight(1, 100 );
+  buttonLayout.SetFixedWidth(1, 350 );
+  contentLayout.Add( buttonLayout );
+
+  mShadowButton = ShadowButton::New();
+  mShadowButton.SetName("ShadowButton");
+  mShadowButton.SetActiveState( false );
+  mShadowButton.SetAnchorPoint( AnchorPoint::CENTER );
+  mShadowButton.SetParentOrigin( ParentOrigin::CENTER );
+  mShadowButton.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
+  buttonLayout.AddChild( mShadowButton, TableView::CellPosition(1, 1) );
+
+  TableView actionButtonLayout = TableView::New( 1, NUMBER_OF_ACTION_BUTTONS+1 );
   actionButtonLayout.SetName("ThemeButtonsLayout");
-  actionButtonLayout.SetCellPadding( Vector2( 6.0f, 0.0f ) );
-
-  actionButtonLayout.SetAnchorPoint( AnchorPoint::CENTER );
-  actionButtonLayout.SetParentOrigin( ParentOrigin::CENTER );
   actionButtonLayout.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
   actionButtonLayout.SetResizePolicy( ResizePolicy::FIT_TO_CHILDREN, Dimension::HEIGHT );
-  actionButtonLayout.SetCellPadding( Size( 10, 10 ) );
   actionButtonLayout.SetFitHeight( 0 );
   TextLabel label = TextLabel::New( "Action: ");
   label.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
   label.SetStyleName("ActionLabel");
-  label.SetAnchorPoint( AnchorPoint::TOP_CENTER );
-  label.SetParentOrigin( ParentOrigin::TOP_CENTER );
   actionButtonLayout.AddChild( label, TableView::CellPosition( 0, 0 ) );
   actionButtonLayout.SetCellAlignment( TableView::CellPosition( 0, 0 ), HorizontalAlignment::LEFT, VerticalAlignment::CENTER );
-  for( int i=0; i<3; ++i )
+  for( int i=0; i<NUMBER_OF_ACTION_BUTTONS; ++i )
   {
     mActionButtons[i] = PushButton::New();
     mActionButtons[i].SetName("ActionButton");
     mActionButtons[i].SetStyleName("ActionButton");
-    mActionButtons[i].SetParentOrigin( ParentOrigin::CENTER );
-    mActionButtons[i].SetAnchorPoint( ParentOrigin::CENTER );
     mActionButtons[i].SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
     mActionButtons[i].SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
     mActionIndex = mActionButtons[i].RegisterProperty( "actionId", i, Property::READ_WRITE );
     mActionButtons[i].ClickedSignal().Connect( this, &TransitionApplication::OnActionButtonClicked );
     actionButtonLayout.AddChild( mActionButtons[i], TableView::CellPosition( 0, 1+i ) );
   }
-  mActionButtons[0].SetProperty( Toolkit::Button::Property::LABEL, "Bounce" );
-  mActionButtons[1].SetProperty( Toolkit::Button::Property::LABEL, "X" );
-  mActionButtons[2].SetProperty( Toolkit::Button::Property::LABEL, "Y" );
+  SetLabelText( mActionButtons[0], "Activate" );
+  SetLabelText( mActionButtons[1], "Check" );
+  mActionButtons[1].SetProperty( Button::Property::DISABLED, true );
   contentLayout.Add( actionButtonLayout );
   contentLayout.SetFitHeight(2);
 }
-
 bool TransitionApplication::OnActionButtonClicked( Button button )
 {
   int action = button.GetProperty<int>( mActionIndex );
@@ -141,17 +149,39 @@ bool TransitionApplication::OnActionButtonClicked( Button button )
   {
     case 0:
     {
-      mBeatControl.StartBounceAnimation();
+      bool activeState = mShadowButton.GetActiveState();
+      mShadowButton.SetActiveState( ! activeState );
+      if( activeState )
+      {
+        SetLabelText( button, "Activate" );
+      }
+      else
+      {
+        SetLabelText( button, "Deactivate" );
+      }
+      mActionButtons[1].SetProperty( Button::Property::DISABLED, activeState );
       break;
     }
     case 1:
     {
-      mBeatControl.StartXAnimation();
+      bool checkState = mShadowButton.GetCheckState();
+      mShadowButton.SetCheckState( ! checkState );
+      if( checkState )
+      {
+        SetLabelText( button, "Check" );
+      }
+      else
+      {
+        SetLabelText( button, "Uncheck" );
+      }
       break;
     }
     case 2:
     {
-      mBeatControl.StartYAnimation();
+      break;
+    }
+    case 3:
+    {
       break;
     }
   }
@@ -2,7 +2,7 @@
 #define DALI_DEMO_TRANSITION_APPLICATION_H
 /*
- * Copyright (c) 2016 Samsung Electronics Co., Ltd.
+ * Copyright (c) 2017 Samsung Electronics Co., Ltd.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,9 +19,7 @@
 // External includes
 #include <dali-toolkit/dali-toolkit.h>
-//#include <dali-toolkit/devel-api/controls/slider/slider.h>
-#include <dali-toolkit/devel-api/controls/popup/popup.h>
-#include "beat-control.h"
+#include "shadow-button.h"
 #include <cstdio>
 #include <sstream>
@@ -36,6 +34,9 @@ namespace Demo
 class TransitionApplication : public ConnectionTracker
 {
 public:
+  static const int NUMBER_OF_ACTION_BUTTONS=2;
+
+public:
   // Constructor
   TransitionApplication( Application& application );
@@ -52,15 +53,24 @@ public:
   // Key event handler
   void OnKeyEvent( const KeyEvent& event );
-  bool OnActionButtonClicked(Button button);
+  bool OnActionButtonClicked( Button button );
   static const char* DEMO_THEME_ONE_PATH;
+  static const char* DEMO_THEME_TWO_PATH;
 private:
+
+  /** Create a visual map
+   *
+   * @param[in] index The index of the visual to create
+   * @param[out] map The map to generate
+   */
+
   Application& mApplication;
   TextLabel mTitle;
-  BeatControl mBeatControl;
-  PushButton mActionButtons[3];
+  ShadowButton mShadowButton;
+  PushButton mActionButtons[NUMBER_OF_ACTION_BUTTONS];
+  Property::Index mVisualIndex;
   Property::Index mActionIndex;
 };
 /*
- * Copyright (c) 2016 Samsung Electronics Co., Ltd.
+ * Copyright (c) 2017 Samsung Electronics Co., Ltd.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -2,7 +2,7 @@
 Name:       com.samsung.dali-demo
 Summary:    The OpenGLES Canvas Core Demo
-Version:    1.2.22
+Version:    1.2.23
 Release:    1
 Group:      System/Libraries
 License:    Apache-2.0
 {
+  "constants":
+  {
+    "STYLE_DIR":"{APPLICATION_RESOURCE_PATH}/style"
+  },
   "styles":
   {
     "Title":{
@@ -69,9 +73,9 @@
       [
         {
           "target":"imageVisual",
-          "property":"colorAlpha",
-          "initialValue":0,
-          "targetValue":1,
+          "property":"mixColor",
+          "initialValue":[1,1,1,0],
+          "targetValue":[1,1,1,1],
           "animator":
           {
             "alphaFunction":"EASE_IN_OUT",
@@ -84,16 +88,16 @@
         },
         {
           "target":"imageVisual",
-          "property":"scale",
-          "targetValue":[1,1,1]
+          "property":"size",
+          "targetValue":[1,1]
         }
       ],
       "disableVisibilityTransition":
       [
         {
           "target":"imageVisual",
-          "property":"colorAlpha",
-          "targetValue":0,
+          "property":"mixColor",
+          "targetValue":[1,1,1,0],
           "animator":
           {
             "alphaFunction":"EASE_IN_OUT",
@@ -106,69 +110,269 @@
         },
         {
           "target":"imageVisual",
-          "property":"scale",
+          "property":"size",
           "targetValue":[1,1,1]
         }
       ]
     },
-    "BeatControl":
+    "ShadowButton":
     {
-      "beatVisual":{
+      "backgroundVisual":{
         "visualType":"IMAGE",
-        "url":"{APPLICATION_RESOURCE_PATH}/images/Logo-for-demo.png"
+        "url":"{STYLE_DIR}/images/shadowButtonBg.9.png",
+        "mixColor":[1,1,1,0]
       },
-
-      "bounceTransition":
+      "checkboxBgVisual":{
+        "visualType":"IMAGE",
+        "url":"{STYLE_DIR}/images/CheckBg.png",
+        "transform":{
+          "size":[0.09, 0.28],
+          "offset":[30,0],
+          "offsetSizeMode":[1,1,0,0],
+          "origin":"CENTER_BEGIN",
+          "anchorPoint":"CENTER_BEGIN"
+        }
+      },
+      "checkboxFgVisual":{
+        "visualType":"IMAGE",
+        "url":"{STYLE_DIR}/images/Tick.png",
+        "transform":{
+          "size":[0.09, 0.28],
+          "offset":[30,0],
+          "offsetSizeMode":[1,1,0,0],
+          "origin":"CENTER_BEGIN",
+          "anchorPoint":"CENTER_BEGIN"
+        }
+      },
+      "labelVisual":{
+        "visualType":"TEXT",
+        "text":"Don't show again",
+        "pointSize":8,
+        "horizontalAlignment":"END",
+        "verticalAlignment":"CENTER",
+        "textColor":[1,1,1,1],
+        "mixColor":[0.3, 0.3, 0.3, 1],
+        "transform":{
+          "size":[0.9, 0.9],
+          "offset":[-30,0],
+          "offsetSizeMode":[1,1,0,0],
+          "origin":"CENTER_END",
+          "anchorPoint":"CENTER_END"
+        }
+      },
+      "activeTransition":
+      [
+        {
+          "target":"checkboxBgVisual",
+          "property":"size",
+          "initialValue":[0.09, 0.28],
+          "targetValue":[0.12, 0.37],
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT_BACK",
+            "timePeriod":
+            {
+              "duration":0.8,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"backgroundVisual",
+          "property":"mixColor",
+          "initialValue":[1,1,1,0],
+          "targetValue":[1,1,1,1],
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT_BACK",
+            "timePeriod":
+            {
+              "duration":0.8,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"backgroundVisual",
+          "property":"size",
+          "initialValue":[0.9, 0.9],
+          "targetValue":[1, 1],
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT_BACK",
+            "timePeriod":
+            {
+              "duration":0.8,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"checkboxFgVisual",
+          "property":"size",
+          "initialValue":[0.09, 0.28],
+          "targetValue":[0.12, 0.37],
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT_BACK",
+            "timePeriod":
+            {
+              "duration":0.8,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"labelVisual",
+          "property":"mixColor",
+          "initialValue":[0.2, 0.2, 0.2, 1.0],
+          "targetValue":[0, 0, 0, 1],
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT_BACK",
+            "timePeriod":
+            {
+              "duration":0.8,
+              "delay":0
+            }
+          }
+        }
+      ],
+      "inactiveTransition":
       [
         {
-          "target":"beatVisual",
+          "target":"checkboxBgVisual",
+          "property":"size",
+          "initialValue":[0.12, 0.37],
+          "targetValue":[0.09, 0.28],
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT_BACK",
+            "timePeriod":
+            {
+              "duration":0.8,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"backgroundVisual",
+          "property":"mixColor",
+          "targetValue":[1,1,1,0],
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT_BACK",
+            "timePeriod":
+            {
+              "duration":0.8,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"checkboxFgVisual",
+          "property":"size",
+          "initialValue":[0.12, 0.37],
+          "targetValue":[0.09, 0.28],
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT_BACK",
+            "timePeriod":
+            {
+              "duration":0.8,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"labelVisual",
+          "property":"mixColor",
+          "targetValue":[0.4, 0.4, 0.4, 1.0],
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT_BACK",
+            "timePeriod":
+            {
+              "duration":0.8,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"backgroundVisual",
           "property":"size",
-          "initialValue":[0.5, 0.5],
-          "targetValue":[0.75, 0.75],
+          "targetValue":[0.9, 0.9],
           "animator":
           {
-            "alphaFunction":"BOUNCE",
+            "alphaFunction":"EASE_OUT_BACK",
             "timePeriod":
             {
-              "duration":0.5,
+              "duration":0.8,
               "delay":0
             }
           }
         }
       ],
-
-      "leftTransition":
+      "checkTransition":
       [
         {
-          "target":"beatVisual",
-          "property":"offset",
-          "initialValue":[0, 0],
-          "targetValue":[0.25, 0],
+          "target":"checkboxFgVisual",
+          "property":"pixelArea",
+          "initialValue":[0.0, 0.0, 0.0, 1.0],
+          "targetValue":[0.0, 0.0, 1.0, 1.0],
+          "animator":
+          {
+            "alphaFunction":"EASE_IN",
+            "timePeriod":
+            {
+              "duration":0.4,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"checkboxFgVisual",
+          "property":"size",
+          "initialValue":[0.0, 0.37],
+          "targetValue":[0.12, 0.37],
           "animator":
           {
-            "alphaFunction":"BOUNCE",
+            "alphaFunction":"EASE_IN",
             "timePeriod":
             {
-              "duration":0.5,
+              "duration":0.4,
               "delay":0
             }
           }
         }
       ],
-
-      "upTransition":
+      "uncheckTransition":
       [
         {
-          "target":"beatVisual",
-          "property":"offset",
-          "initialValue":[0, 0],
-          "targetValue":[0, 0.25],
+          "target":"checkboxFgVisual",
+          "property":"pixelArea",
+          "initialValue":[0.0, 0.0, 1.0, 1.0],
+          "targetValue":[0.0, 0.0, 0.0, 1.0],
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT",
+            "timePeriod":
+            {
+              "duration":0.4,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"checkboxFgVisual",
+          "property":"size",
+          "targetValue":[0.0, 0.37],
           "animator":
           {
-            "alphaFunction":"BOUNCE",
+            "alphaFunction":"EASE_OUT",
             "timePeriod":
             {
-              "duration":0.5,
+              "duration":0.4,
               "delay":0
             }
           }
@@ -53,9 +53,9 @@
       [
         {
           "target":"imageVisual",
-          "property":"scale",
-          "initialValue":[0.1,0.1,0.1],
-          "targetValue":[1,1,1],
+          "property":"size",
+          "initialValue":[0.1,0.1],
+          "targetValue":[1,1],
           "animator":
           {
             "alphaFunction":"EASE_IN",
@@ -68,17 +68,17 @@
         },
         {
           "target":"imageVisual",
-          "property":"colorAlpha",
-          "targetValue":1
+          "property":"mixColor",
+          "targetValue":[1,1,1,1]
         }
       ],
       "disableVisibilityTransition":
       [
         {
           "target":"imageVisual",
-          "property":"scale",
-          "initialValue":[1,1,1],
-          "targetValue":[0.1,0.1,0.1],
+          "property":"size",
+          "initialValue":[1,1],
+          "targetValue":[0.1,0.1],
           "animator":
           {
             "alphaFunction":"EASE_OUT",
@@ -91,8 +91,8 @@
         },
         {
           "target":"imageVisual",
-          "property":"colorAlpha",
-          "targetValue":0,
+          "property":"mixColor",
+          "targetValue":[1,1,1,0],
           "animator":
           {
             "alphaFunction":"EASE_OUT",
@@ -25,10 +25,16 @@
     // Change an icon size, see if it gets properly re-sized
     "RadioButton":{
-      "unselectedStateImage":"{STYLE_DIR}/images/radio-button-unselected.png",
-      "selectedStateImage":"{STYLE_DIR}/images/radio-button-selected.png",
-      "disabledStateImage":"{STYLE_DIR}/images/radio-button-unselected-disabled.png",
-      "imageLabelGap":10,
+     "unselectedVisual":
+      {
+        "visualType": "IMAGE",
+        "url": "{STYLE_DIR}/images/radio-button-unselected.png"
+      },
+      "selectedVisual":
+      {
+        "visualType": "IMAGE",
+        "url": "{STYLE_DIR}/images/radio-button-selected.png"
+      },
       "label":{
         "textColor": [0.1,1,1,1]
       }
@@ -99,9 +105,9 @@
       [
         {
           "target":"imageVisual",
-          "property":"colorAlpha",
-          "initialValue":0,
-          "targetValue":1,
+          "property":"mixColor",
+          "initialValue":[1,1,1,0],
+          "targetValue":[1,1,1,1],
           "animator":
           {
             "alphaFunction":"EASE_IN_OUT",
@@ -111,14 +117,19 @@
               "delay":0
             }
           }
+        },
+        {
+          "target":"imageVisual",
+          "property":"size",
+          "targetValue":[1,1]
         }
       ],
       "disableVisibilityTransition":
       [
         {
           "target":"imageVisual",
-          "property":"colorAlpha",
-          "targetValue":0,
+          "property":"mixColor",
+          "targetValue":[1,1,1,0],
           "animator":
           {
             "alphaFunction":"EASE_IN_OUT",
@@ -131,8 +142,89 @@
         },
         {
           "target":"imageVisual",
-          "property":"scale",
-          "targetValue":[1,1,1]
+          "property":"size",
+          "targetValue":[1,1]
+        }
+      ]
+    },
+    "ShadowButton":
+    {
+      "backgroundVisual":{
+        "visualType":"IMAGE",
+        "url":"{STYLE_DIR}/images/shadowButtonBg.9.png"
+      },
+      "checkboxBgVisual":{
+        "visualType":"IMAGE",
+        "url":"{STYLE_DIR}/images/CheckBg.png",
+        "transform":{
+          "size":[0.09, 0.28],
+          "offset":[30,0],
+          "offsetSizeMode":[1,1,0,0],
+          "origin":"CENTER_BEGIN",
+          "anchorPoint":"CENTER_BEGIN"
+        }
+      },
+      "checkboxFgVisual":{
+        "visualType":"IMAGE",
+        "url":"{STYLE_DIR}/images/Tick.png",
+        "transform":{
+          "size":[0.09, 0.28],
+          "offset":[30,0],
+          "offsetSizeMode":[1,1,0,0],
+          "origin":"CENTER_BEGIN",
+          "anchorPoint":"CENTER_BEGIN"
+        }
+      },
+      "labelVisual":{
+        "visualType":"TEXT",
+        "text":"Don't show again",
+        "pointSize":8,
+        "horizontalAlignment":"END",
+        "verticalAlignment":"CENTER",
+        "textColor":[1,1,1,1],
+        "mixColor":[0.3, 0.3, 0.3, 1],
+        "transform":{
+          "size":[0.9, 0.9],
+          "offset":[-30,0],
+          "offsetSizeMode":[1,1,0,0],
+          "origin":"CENTER_END",
+          "anchorPoint":"CENTER_END"
+        }
+      },
+      "activeTransition":
+      [
+        {
+          "target":"checkboxBgVisual",
+          "property":"size",
+          "initialValue":[0.09, 0.28],
+          "targetValue":[0.12, 0.37],
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT_BACK",
+            "timePeriod":
+            {
+              "duration":0.8,
+              "delay":0
+            }
+          }
+        }
+      ],
+      "inactiveTransition":
+      [
+        {
+          "target":"checkboxBgVisual",
+          "property":"size",
+          "initialValue":[0.12, 0.37],
+          "targetValue":[0.09, 0.28],
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT_BACK",
+            "timePeriod":
+            {
+              "duration":0.8,
+              "delay":0
+            }
+          }
         }
       ]
     }
 {
+  "constants":
+  {
+    "STYLE_DIR":"{APPLICATION_RESOURCE_PATH}/style"
+  },
   "styles":
   {
     "Title":{
@@ -69,9 +73,9 @@
       [
         {
           "target":"imageVisual",
-          "property":"colorAlpha",
-          "initialValue":0,
-          "targetValue":1,
+          "property":"mixColor",
+          "initialValue":[1,1,1,0],
+          "targetValue":[1,1,1,1],
           "animator":
           {
             "alphaFunction":"EASE_IN_OUT",
@@ -84,16 +88,16 @@
         },
         {
           "target":"imageVisual",
-          "property":"scale",
-          "targetValue":[1,1,1]
+          "property":"size",
+          "targetValue":[1,1]
         }
       ],
       "disableVisibilityTransition":
       [
         {
           "target":"imageVisual",
-          "property":"colorAlpha",
-          "targetValue":0,
+          "property":"mixColor",
+          "targetValue":[1,1,1,0],
           "animator":
           {
             "alphaFunction":"EASE_IN_OUT",
@@ -106,69 +110,269 @@
         },
         {
           "target":"imageVisual",
-          "property":"scale",
+          "property":"size",
           "targetValue":[1,1,1]
         }
       ]
     },
-    "BeatControl":
+    "ShadowButton":
     {
-      "beatVisual":{
+      "backgroundVisual":{
         "visualType":"IMAGE",
-        "url":"{APPLICATION_RESOURCE_PATH}/images/Logo-for-demo.png"
+        "url":"{STYLE_DIR}/images/shadowButtonBg.9.png",
+        "mixColor":[1,1,1,0]
       },
-
-      "bounceTransition":
+      "checkboxBgVisual":{
+        "visualType":"IMAGE",
+        "url":"{STYLE_DIR}/images/CheckBg.png",
+        "transform":{
+          "size":[0.09, 0.28],
+          "offset":[30,0],
+          "offsetSizeMode":[1,1,0,0],
+          "origin":"CENTER_BEGIN",
+          "anchorPoint":"CENTER_BEGIN"
+        }
+      },
+      "checkboxFgVisual":{
+        "visualType":"IMAGE",
+        "url":"{STYLE_DIR}/images/Tick.png",
+        "transform":{
+          "size":[0.09, 0.28],
+          "offset":[30,0],
+          "offsetSizeMode":[1,1,0,0],
+          "origin":"CENTER_BEGIN",
+          "anchorPoint":"CENTER_BEGIN"
+        }
+      },
+      "labelVisual":{
+        "visualType":"TEXT",
+        "text":"Don't show again",
+        "pointSize":20,
+        "horizontalAlignment":"END",
+        "verticalAlignment":"CENTER",
+        "textColor":[1,1,1,1],
+        "mixColor":[0.3, 0.3, 0.3, 1],
+        "transform":{
+          "size":[0.9, 0.9],
+          "offset":[-30,0],
+          "offsetSizeMode":[1,1,0,0],
+          "origin":"CENTER_END",
+          "anchorPoint":"CENTER_END"
+        }
+      },
+      "activeTransition":
+      [
+        {
+          "target":"checkboxBgVisual",
+          "property":"size",
+          "initialValue":[0.09, 0.28],
+          "targetValue":[0.12, 0.37],
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT_BACK",
+            "timePeriod":
+            {
+              "duration":0.8,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"backgroundVisual",
+          "property":"mixColor",
+          "initialValue":[1,1,1,0],
+          "targetValue":[1,1,1,1],
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT_BACK",
+            "timePeriod":
+            {
+              "duration":0.8,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"backgroundVisual",
+          "property":"size",
+          "initialValue":[0.9, 0.9],
+          "targetValue":[1, 1],
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT_BACK",
+            "timePeriod":
+            {
+              "duration":0.8,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"checkboxFgVisual",
+          "property":"size",
+          "initialValue":[0.09, 0.28],
+          "targetValue":[0.12, 0.37],
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT_BACK",
+            "timePeriod":
+            {
+              "duration":0.8,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"labelVisual",
+          "property":"mixColor",
+          "initialValue":[0.2, 0.2, 0.2, 1.0],
+          "targetValue":[0, 0, 0, 1],
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT_BACK",
+            "timePeriod":
+            {
+              "duration":0.8,
+              "delay":0
+            }
+          }
+        }
+      ],
+      "inactiveTransition":
       [
         {
-          "target":"beatVisual",
+          "target":"checkboxBgVisual",
+          "property":"size",
+          "initialValue":[0.12, 0.37],
+          "targetValue":[0.09, 0.28],
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT_BACK",
+            "timePeriod":
+            {
+              "duration":0.8,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"backgroundVisual",
+          "property":"mixColor",
+          "targetValue":[1,1,1,0],
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT_BACK",
+            "timePeriod":
+            {
+              "duration":0.8,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"checkboxFgVisual",
+          "property":"size",
+          "initialValue":[0.12, 0.37],
+          "targetValue":[0.09, 0.28],
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT_BACK",
+            "timePeriod":
+            {
+              "duration":0.8,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"labelVisual",
+          "property":"mixColor",
+          "targetValue":[0.4, 0.4, 0.4, 1.0],
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT_BACK",
+            "timePeriod":
+            {
+              "duration":0.8,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"backgroundVisual",
           "property":"size",
-          "initialValue":[0.5, 0.5],
-          "targetValue":[0.75, 0.75],
+          "targetValue":[0.9, 0.9],
           "animator":
           {
-            "alphaFunction":"BOUNCE",
+            "alphaFunction":"EASE_OUT_BACK",
             "timePeriod":
             {
-              "duration":0.5,
+              "duration":0.8,
               "delay":0
             }
           }
         }
       ],
-
-      "leftTransition":
+      "checkTransition":
       [
         {
-          "target":"beatVisual",
-          "property":"offset",
-          "initialValue":[0, 0],
-          "targetValue":[0.25, 0],
+          "target":"checkboxFgVisual",
+          "property":"pixelArea",
+          "initialValue":[0.0, 0.0, 0.0, 1.0],
+          "targetValue":[0.0, 0.0, 1.0, 1.0],
+          "animator":
+          {
+            "alphaFunction":"EASE_IN",
+            "timePeriod":
+            {
+              "duration":0.4,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"checkboxFgVisual",
+          "property":"size",
+          "initialValue":[0.0, 0.37],
+          "targetValue":[0.12, 0.37],
           "animator":
           {
-            "alphaFunction":"BOUNCE",
+            "alphaFunction":"EASE_IN",
             "timePeriod":
             {
-              "duration":0.5,
+              "duration":0.4,
               "delay":0
             }
           }
         }
       ],
-
-      "upTransition":
+      "uncheckTransition":
       [
         {
-          "target":"beatVisual",
-          "property":"offset",
-          "initialValue":[0, 0],
-          "targetValue":[0, 0.25],
+          "target":"checkboxFgVisual",
+          "property":"pixelArea",
+          "initialValue":[0.0, 0.0, 1.0, 1.0],
+          "targetValue":[0.0, 0.0, 0.0, 1.0],
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT",
+            "timePeriod":
+            {
+              "duration":0.4,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"checkboxFgVisual",
+          "property":"size",
+          "targetValue":[0.0, 0.37],
           "animator":
           {
-            "alphaFunction":"BOUNCE",
+            "alphaFunction":"EASE_OUT",
             "timePeriod":
             {
-              "duration":0.5,
+              "duration":0.4,
               "delay":0
             }
           }
@@ -53,9 +53,9 @@
       [
         {
           "target":"imageVisual",
-          "property":"scale",
-          "initialValue":[0.1,0.1,0.1],
-          "targetValue":[1,1,1],
+          "property":"size",
+          "initialValue":[0.1,0.1],
+          "targetValue":[1,1],
           "animator":
           {
             "alphaFunction":"EASE_IN",
@@ -68,17 +68,17 @@
         },
         {
           "target":"imageVisual",
-          "property":"colorAlpha",
-          "targetValue":1
+          "property":"mixColor",
+          "targetValue":[1,1,1,1]
         }
       ],
       "disableVisibilityTransition":
       [
         {
           "target":"imageVisual",
-          "property":"scale",
-          "initialValue":[1,1,1],
-          "targetValue":[0.1,0.1,0.1],
+          "property":"size",
+          "initialValue":[1,1],
+          "targetValue":[0.1,0.1],
           "animator":
           {
             "alphaFunction":"EASE_OUT",
@@ -91,8 +91,8 @@
         },
         {
           "target":"imageVisual",
-          "property":"colorAlpha",
-          "targetValue":0,
+          "property":"mixColor",
+          "targetValue":[1,1,1,0],
           "animator":
           {
             "alphaFunction":"EASE_OUT",
@@ -105,9 +105,9 @@
       [
         {
           "target":"imageVisual",
-          "property":"colorAlpha",
-          "initialValue":0,
-          "targetValue":1,
+          "property":"mixColor",
+          "initialValue":[1,1,1,0],
+          "targetValue":[1,1,1,1],
           "animator":
           {
             "alphaFunction":"EASE_IN_OUT",
@@ -120,16 +120,16 @@
         },
         {
           "target":"imageVisual",
-          "property":"scale",
-          "targetValue":[1,1,1]
+          "property":"size",
+          "targetValue":[1,1]
         }
       ],
       "disableVisibilityTransition":
       [
         {
           "target":"imageVisual",
-          "property":"colorAlpha",
-          "targetValue":0,
+          "property":"mixColor",
+          "targetValue":[1,1,1,0],
           "animator":
           {
             "alphaFunction":"EASE_IN_OUT",
@@ -142,8 +142,89 @@
         },
         {
           "target":"imageVisual",
-          "property":"scale",
-          "targetValue":[1,1,1]
+          "property":"size",
+          "targetValue":[1,1]
+        }
+      ]
+    },
+    "ShadowButton":
+    {
+      "backgroundVisual":{
+        "visualType":"IMAGE",
+        "url":"{STYLE_DIR}/images/shadowButtonBg.9.png"
+      },
+      "checkboxBgVisual":{
+        "visualType":"IMAGE",
+        "url":"{STYLE_DIR}/images/CheckBg.png",
+        "transform":{
+          "size":[0.09, 0.28],
+          "offset":[30,0],
+          "offsetSizeMode":[1,1,0,0],
+          "origin":"CENTER_BEGIN",
+          "anchorPoint":"CENTER_BEGIN"
+        }
+      },
+      "checkboxFgVisual":{
+        "visualType":"IMAGE",
+        "url":"{STYLE_DIR}/images/Tick.png",
+        "transform":{
+          "size":[0.09, 0.28],
+          "offset":[30,0],
+          "offsetSizeMode":[1,1,0,0],
+          "origin":"CENTER_BEGIN",
+          "anchorPoint":"CENTER_BEGIN"
+        }
+      },
+      "labelVisual":{
+        "visualType":"TEXT",
+        "text":"Don't show again",
+        "pointSize":20,
+        "horizontalAlignment":"END",
+        "verticalAlignment":"CENTER",
+        "textColor":[1,1,1,1],
+        "mixColor":[0.3, 0.3, 0.3, 1],
+        "transform":{
+          "size":[0.9, 0.9],
+          "offset":[-30,0],
+          "offsetSizeMode":[1,1,0,0],
+          "origin":"CENTER_END",
+          "anchorPoint":"CENTER_END"
+        }
+      },
+      "activeTransition":
+      [
+        {
+          "target":"checkboxBgVisual",
+          "property":"size",
+          "initialValue":[0.09, 0.28],
+          "targetValue":[0.12, 0.37],
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT_BACK",
+            "timePeriod":
+            {
+              "duration":0.8,
+              "delay":0
+            }
+          }
+        }
+      ],
+      "inactiveTransition":
+      [
+        {
+          "target":"checkboxBgVisual",
+          "property":"size",
+          "initialValue":[0.12, 0.37],
+          "targetValue":[0.09, 0.28],
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT_BACK",
+            "timePeriod":
+            {
+              "duration":0.8,
+              "delay":0
+            }
+          }
         }
       ]
     }