Changed demos to use unselected button images.

[SRUK] ()

[Issue#]   N/A
[Problem]  N/A
[Cause]    N/A
[Solution] N/A

Change-Id: If2cafffc9545e439994ee5442057004bc2653eab

52 files changed, 245 insertions, 190 deletions

diff --git a/examples/atlas/atlas-example.cpp b/examples/atlas/atlas-example.cpp
index 5cce8fb6..a4992429 100644
--- a/examples/atlas/atlas-example.cpp
+++ b/examples/atlas/atlas-example.cpp
@@ -31,6 +31,7 @@ namespace
 const char * const BACKGROUND_IMAGE( DALI_IMAGE_DIR "background-gradient.jpg" );
 const char * const TOOLBAR_IMAGE( DALI_IMAGE_DIR "top-bar.png" );
 const char * const LOSE_CONTEXT_IMAGE( DALI_IMAGE_DIR "icon-cluster-wobble.png" );
+const char * const LOSE_CONTEXT_IMAGE_SELECTED( DALI_IMAGE_DIR "icon-cluster-wobble-selected.png" );
 
 Application gApplication;
 AtlasController* gAtlasController(NULL);
@@ -71,7 +72,8 @@ public:
         "Atlas" );
 
     mLoseContextButton = Toolkit::PushButton::New();
-    mLoseContextButton.SetBackgroundImage( ResourceImage::New( LOSE_CONTEXT_IMAGE ) );
+    mLoseContextButton.SetButtonImage( ResourceImage::New( LOSE_CONTEXT_IMAGE ) );
+    mLoseContextButton.SetSelectedImage( ResourceImage::New( LOSE_CONTEXT_IMAGE_SELECTED ) );
     mLoseContextButton.ClickedSignal().Connect( this, &AtlasController::OnLoseContextButtonClicked );
     mToolBar.AddControl( mLoseContextButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalRight, DemoHelper::DEFAULT_MODE_SWITCH_PADDING );
 
diff --git a/examples/bubble-effect/bubble-effect-example.cpp b/examples/bubble-effect/bubble-effect-example.cpp
index 0ac4d76d..268e393d 100644
--- a/examples/bubble-effect/bubble-effect-example.cpp
+++ b/examples/bubble-effect/bubble-effect-example.cpp
@@ -27,7 +27,9 @@ namespace
 const char * const TOOLBAR_IMAGE( DALI_IMAGE_DIR "top-bar.png" );
 const char * const APPLICATION_TITLE( "Bubble Effect" );
 const char * const CHANGE_BACKGROUND_ICON( DALI_IMAGE_DIR "icon-change.png" );
+const char * const CHANGE_BACKGROUND_ICON_SELECTED( DALI_IMAGE_DIR "icon-change-selected.png" );
 const char * const CHANGE_BUBBLE_SHAPE_ICON( DALI_IMAGE_DIR "icon-replace.png" );
+const char * const CHANGE_BUBBLE_SHAPE_ICON_SELECTED( DALI_IMAGE_DIR "icon-replace-selected.png" );
 
 const char* BACKGROUND_IMAGES[]=
 {
@@ -109,7 +111,8 @@ private:
 
     // Add a button to change background. (right of toolbar)
     mChangeBackgroundButton = Toolkit::PushButton::New();
-    mChangeBackgroundButton.SetBackgroundImage( ResourceImage::New( CHANGE_BACKGROUND_ICON ) );
+    mChangeBackgroundButton.SetButtonImage( ResourceImage::New( CHANGE_BACKGROUND_ICON ) );
+    mChangeBackgroundButton.SetSelectedImage( ResourceImage::New( CHANGE_BACKGROUND_ICON_SELECTED ) );
     mChangeBackgroundButton.ClickedSignal().Connect( this, &BubbleEffectExample::OnChangeIconClicked );
     toolBar.AddControl( mChangeBackgroundButton,
                         DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage,
@@ -117,7 +120,8 @@ private:
                         DemoHelper::DEFAULT_MODE_SWITCH_PADDING  );
     // Add a button to change bubble shape. ( left of bar )
     mChangeBubbleShapeButton = Toolkit::PushButton::New();
-    mChangeBubbleShapeButton.SetBackgroundImage( ResourceImage::New( CHANGE_BUBBLE_SHAPE_ICON ) );
+    mChangeBubbleShapeButton.SetButtonImage( ResourceImage::New( CHANGE_BUBBLE_SHAPE_ICON ) );
+    mChangeBubbleShapeButton.SetSelectedImage( ResourceImage::New( CHANGE_BUBBLE_SHAPE_ICON_SELECTED ) );
     mChangeBubbleShapeButton.ClickedSignal().Connect( this, &BubbleEffectExample::OnChangeIconClicked );
     toolBar.AddControl( mChangeBubbleShapeButton,
                         DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage,
diff --git a/examples/builder/examples.cpp b/examples/builder/examples.cpp
index 79f50a17..4e835752 100644
--- a/examples/builder/examples.cpp
+++ b/examples/builder/examples.cpp
@@ -53,6 +53,7 @@ namespace
 const char* BACKGROUND_IMAGE( "" );
 const char* TOOLBAR_IMAGE( DALI_IMAGE_DIR "top-bar.png" );
 const char* EDIT_IMAGE( DALI_IMAGE_DIR "icon-change.png" );
+const char* EDIT_IMAGE_SELECTED( DALI_IMAGE_DIR "icon-change-selected.png" );
 
 std::string USER_DIRECTORY;
 
@@ -512,7 +513,8 @@ public:
 
     // Create an edit mode button. (left of toolbar)
     Toolkit::PushButton editButton = Toolkit::PushButton::New();
-    editButton.SetBackgroundImage( ResourceImage::New( EDIT_IMAGE ) );
+    editButton.SetButtonImage( ResourceImage::New( EDIT_IMAGE ) );
+    editButton.SetSelectedImage( ResourceImage::New( EDIT_IMAGE_SELECTED ) );
     editButton.ClickedSignal().Connect( this, &ExampleApp::OnToolSelectLayout);
     editButton.SetLeaveRequired( true );
     mToolBar.AddControl( editButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalLeft, DemoHelper::DEFAULT_MODE_SWITCH_PADDING  );
diff --git a/examples/buttons/buttons-example.cpp b/examples/buttons/buttons-example.cpp
index 1dea9c4a..c6cec93b 100644
--- a/examples/buttons/buttons-example.cpp
+++ b/examples/buttons/buttons-example.cpp
@@ -45,13 +45,6 @@ const char* const BIG_IMAGE_3 = DALI_IMAGE_DIR "gallery-large-13.jpg";
 
 const char* const ENABLED_IMAGE = DALI_IMAGE_DIR "item-select-check.png";
 
-const char* const PUSHBUTTON_PRESS_IMAGE = DALI_IMAGE_DIR "button-down.9.png";
-const char* const PUSHBUTTON_DISABLED_IMAGE = DALI_IMAGE_DIR "button-disabled.9.png";
-const char* const PUSHBUTTON_BUTTON_IMAGE = DALI_IMAGE_DIR "button-up.9.png";
-
-const char* const CHECKBOX_UNSELECTED_IMAGE = DALI_IMAGE_DIR "checkbox-unselected.png";
-const char* const CHECKBOX_SELECTED_IMAGE = DALI_IMAGE_DIR "checkbox-selected.png";
-
 const Vector4 BACKGROUND_COLOUR( 1.0f, 1.0f, 1.0f, 0.15f );
 
 // Layout sizes
@@ -198,10 +191,6 @@ class ButtonsController: public ConnectionTracker
     mUpdateButton.SetLabel( "Select" );
     mUpdateButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
 
-    mUpdateButton.SetSelectedImage( Dali::ResourceImage::New( PUSHBUTTON_PRESS_IMAGE ) );
-    mUpdateButton.SetDisabledImage( Dali::ResourceImage::New( PUSHBUTTON_DISABLED_IMAGE ) );
-    mUpdateButton.SetButtonImage( Dali::ResourceImage::New( PUSHBUTTON_BUTTON_IMAGE ) );
-
     mUpdateButton.ClickedSignal().Connect( this, &ButtonsController::OnButtonClicked );
 
     radioGroup2Background.AddChild( mUpdateButton, Toolkit::TableView::CellPosition( 1, 0 ) );
@@ -296,41 +285,32 @@ class ButtonsController: public ConnectionTracker
 
     contentTable.Add( checkBoxBackground );
 
-    Dali::Image unselected = Dali::ResourceImage::New( CHECKBOX_UNSELECTED_IMAGE );
-    Dali::Image selected = Dali::ResourceImage::New( CHECKBOX_SELECTED_IMAGE );
-
     {
-      Toolkit::CheckBoxButton checkBox = Toolkit::CheckBoxButton::New();
-      checkBox.SetName( "checkbox1" );
-      checkBox.SetBackgroundImage( unselected );
-      checkBox.SetSelectedImage( selected );
-      checkBox.SetLabel( "CheckBox1 is unselected" );
-      checkBox.StateChangedSignal().Connect( this, &ButtonsController::OnCheckBoxesSelected );
-
-      checkBoxBackground.Add( checkBox );
+      mCheckboxButton1 = Toolkit::CheckBoxButton::New();
+      mCheckboxButton1.SetName( "checkbox1" );
+      mCheckboxButton1.SetLabel( "CheckBox1 is unselected" );
+      mCheckboxButton1.StateChangedSignal().Connect( this, &ButtonsController::OnCheckBoxesSelected );
+
+      checkBoxBackground.Add( mCheckboxButton1 );
     }
 
     {
-      Toolkit::CheckBoxButton checkBox = Toolkit::CheckBoxButton::New();
-      checkBox.SetName( "checkbox2" );
-      checkBox.SetBackgroundImage( unselected );
-      checkBox.SetSelectedImage( selected );
-      checkBox.SetLabel( "CheckBox2 is selected" );
-      checkBox.SetSelected( true );
-      checkBox.StateChangedSignal().Connect( this, &ButtonsController::OnCheckBoxesSelected );
-
-      checkBoxBackground.Add( checkBox );
+      mCheckboxButton2 = Toolkit::CheckBoxButton::New();
+      mCheckboxButton2.SetName( "checkbox2" );
+      mCheckboxButton2.SetLabel( "CheckBox2 is selected" );
+      mCheckboxButton2.SetSelected( true );
+      mCheckboxButton2.StateChangedSignal().Connect( this, &ButtonsController::OnCheckBoxesSelected );
+
+      checkBoxBackground.Add( mCheckboxButton2 );
     }
 
     {
-      Toolkit::CheckBoxButton checkBox = Toolkit::CheckBoxButton::New();
-      checkBox.SetName( "checkbox3" );
-      checkBox.SetBackgroundImage( unselected );
-      checkBox.SetSelectedImage( selected );
-      checkBox.SetLabel( "CheckBox3 is unselected" );
-      checkBox.StateChangedSignal().Connect( this, &ButtonsController::OnCheckBoxesSelected );
-
-      checkBoxBackground.Add( checkBox );
+      mCheckboxButton3 = Toolkit::CheckBoxButton::New();
+      mCheckboxButton3.SetName( "checkbox3" );
+      mCheckboxButton3.SetLabel( "CheckBox3 is unselected" );
+      mCheckboxButton3.StateChangedSignal().Connect( this, &ButtonsController::OnCheckBoxesSelected );
+
+      checkBoxBackground.Add( mCheckboxButton3 );
     }
 
     // Create togglabe button
@@ -347,19 +327,14 @@ class ButtonsController: public ConnectionTracker
 
     contentTable.Add( toggleBackground );
 
-    Toolkit::PushButton toggleButton = Toolkit::PushButton::New();
-    toggleButton.SetTogglableButton( true );
-    toggleButton.SetLabel( "Unselected" );
-    toggleButton.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
-    toggleButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
-
-    toggleButton.SetSelectedImage( Dali::ResourceImage::New( PUSHBUTTON_PRESS_IMAGE ) );
-    toggleButton.SetDisabledImage( Dali::ResourceImage::New( PUSHBUTTON_DISABLED_IMAGE ) );
-    toggleButton.SetButtonImage( Dali::ResourceImage::New( PUSHBUTTON_BUTTON_IMAGE ) );
+    mToggleButton = Toolkit::PushButton::New();
+    mToggleButton.SetTogglableButton( true );
+    mToggleButton.SetLabel( "Unselected" );
+    mToggleButton.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+    mToggleButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
+    mToggleButton.StateChangedSignal().Connect( this, &ButtonsController::OnButtonSelected );
 
-    toggleButton.StateChangedSignal().Connect( this, &ButtonsController::OnButtonSelected );
-
-    toggleBackground.Add( toggleButton );
+    toggleBackground.Add( mToggleButton );
   }
 
   void OnKeyEvent( const KeyEvent& event )
@@ -397,10 +372,30 @@ class ButtonsController: public ConnectionTracker
     if( button.GetName() == "radio-select-enable" && button.IsSelected() == true )
     {
       mUpdateButton.SetDisabled( false );
+
+      mRadioButtonImage1.SetDisabled( false );
+      mRadioButtonImage2.SetDisabled( false );
+      mRadioButtonImage3.SetDisabled( false );
+
+      mCheckboxButton1.SetDisabled( false );
+      mCheckboxButton2.SetDisabled( false );
+      mCheckboxButton3.SetDisabled( false );
+
+      mToggleButton.SetDisabled( false );
     }
     else if( button.GetName() == "radio-select-disable" && button.IsSelected() == true )
     {
       mUpdateButton.SetDisabled( true );
+
+      mRadioButtonImage1.SetDisabled( true );
+      mRadioButtonImage2.SetDisabled( true );
+      mRadioButtonImage3.SetDisabled( true );
+
+      mCheckboxButton1.SetDisabled( true );
+      mCheckboxButton2.SetDisabled( true );
+      mCheckboxButton3.SetDisabled( true );
+
+      mToggleButton.SetDisabled( true );
     }
 
     return true;
@@ -504,6 +499,11 @@ class ButtonsController: public ConnectionTracker
   Toolkit::RadioButton mRadioButtonImage3;
 
   Toolkit::PushButton mUpdateButton;
+  Toolkit::PushButton mToggleButton;
+
+  Toolkit::CheckBoxButton mCheckboxButton1;
+  Toolkit::CheckBoxButton mCheckboxButton2;
+  Toolkit::CheckBoxButton mCheckboxButton3;
 
   Animation      mAnimation;
   float          mLastPoint;
diff --git a/examples/cluster/cluster-example.cpp b/examples/cluster/cluster-example.cpp
index 2642a2c5..72468787 100644
--- a/examples/cluster/cluster-example.cpp
+++ b/examples/cluster/cluster-example.cpp
@@ -41,9 +41,13 @@ const char * const BACKGROUND_IMAGE( DALI_IMAGE_DIR "background-default.png" );
 const char * const TOOLBAR_IMAGE( DALI_IMAGE_DIR "top-bar.png" );
 const char * const APPLICATION_TITLE( "Clusters" );
 const char * const LAYOUT_NONE_IMAGE( DALI_IMAGE_DIR "icon-cluster-none.png" );
+const char * const LAYOUT_NONE_IMAGE_SELECTED( DALI_IMAGE_DIR "icon-cluster-none-selected.png" );
 const char * const LAYOUT_MOTION_BLUR_IMAGE( DALI_IMAGE_DIR "icon-cluster-wobble.png" );
+const char * const LAYOUT_MOTION_BLUR_IMAGE_SELECTED( DALI_IMAGE_DIR "icon-cluster-wobble-selected.png" );
 const char * const LAYOUT_CAROUSEL_IMAGE( DALI_IMAGE_DIR "icon-cluster-carousel.png" );
+const char * const LAYOUT_CAROUSEL_IMAGE_SELECTED( DALI_IMAGE_DIR "icon-cluster-carousel-selected.png" );
 const char * const LAYOUT_SPHERE_IMAGE( DALI_IMAGE_DIR "icon-cluster-sphere.png" );
+const char * const LAYOUT_SPHERE_IMAGE_SELECTED( DALI_IMAGE_DIR "icon-cluster-sphere-selected.png" );
 
 enum ClusterType
 {
@@ -151,11 +155,11 @@ const float SPHERE_EFFECT_VERTICAL_DOMAIN = 0.15f;          ///< In Sphere Effec
  */
 enum ExampleEffectType
 {
-  NO_EFFECT,
+  NO_EFFECT = 0,
   MOTION_BLUR_EFFECT,
   CAROUSEL_EFFECT,
   SPHERE_EFFECT,
-  TOTAL_EFFECTS
+  TOTAL_EFFECTS,
 };
 
 /**
@@ -319,6 +323,13 @@ struct ShrinkConstraint
   }
 };
 
+struct ButtonImages
+{
+  Image mButtonImage;
+  Image mSelectedImage;
+};
+
+
 } // unnamed namespace
 
 /**
@@ -379,10 +390,14 @@ public:
     mContentLayer.SetProperty(Layer::Property::BEHAVIOR, "Dali::Layer::LAYER_3D");
 
     // Create a effect toggle button. (right of toolbar)
-    mLayoutButtonImages[ NO_EFFECT ] = ResourceImage::New( LAYOUT_NONE_IMAGE );
-    mLayoutButtonImages[ MOTION_BLUR_EFFECT ] = ResourceImage::New( LAYOUT_MOTION_BLUR_IMAGE );
-    mLayoutButtonImages[ CAROUSEL_EFFECT ] = ResourceImage::New( LAYOUT_CAROUSEL_IMAGE );
-    mLayoutButtonImages[ SPHERE_EFFECT ] = ResourceImage::New( LAYOUT_SPHERE_IMAGE );
+    mLayoutButtonImages[ NO_EFFECT ].mButtonImage = ResourceImage::New( LAYOUT_NONE_IMAGE );
+    mLayoutButtonImages[ NO_EFFECT ].mSelectedImage = ResourceImage::New( LAYOUT_NONE_IMAGE_SELECTED );
+    mLayoutButtonImages[ MOTION_BLUR_EFFECT ].mButtonImage = ResourceImage::New( LAYOUT_MOTION_BLUR_IMAGE );
+    mLayoutButtonImages[ MOTION_BLUR_EFFECT ].mSelectedImage = ResourceImage::New( LAYOUT_MOTION_BLUR_IMAGE_SELECTED );
+    mLayoutButtonImages[ CAROUSEL_EFFECT ].mButtonImage = ResourceImage::New( LAYOUT_CAROUSEL_IMAGE );
+    mLayoutButtonImages[ CAROUSEL_EFFECT ].mSelectedImage = ResourceImage::New( LAYOUT_CAROUSEL_IMAGE_SELECTED );
+    mLayoutButtonImages[ SPHERE_EFFECT ].mButtonImage = ResourceImage::New( LAYOUT_SPHERE_IMAGE );
+    mLayoutButtonImages[ SPHERE_EFFECT ].mSelectedImage = ResourceImage::New( LAYOUT_SPHERE_IMAGE_SELECTED );
 
     mLayoutButton = Toolkit::PushButton::New();
     mLayoutButton.ClickedSignal().Connect( this, &ClusterController::OnEffectTouched );
@@ -616,7 +631,8 @@ public:
     // Remove all shader-effects from mScrollView and it's children (the clusters)
     mScrollView.SetPosition(Vector3::ZERO);
 
-    mLayoutButton.SetBackgroundImage( mLayoutButtonImages[ type ] );
+    mLayoutButton.SetButtonImage( mLayoutButtonImages[ type ].mButtonImage );
+    mLayoutButton.SetSelectedImage( mLayoutButtonImages[ type ].mSelectedImage );
 
     for( std::vector<ClusterInfo>::iterator i = mClusterInfo.begin(); i != mClusterInfo.end(); ++i )
     {
@@ -768,23 +784,16 @@ private:
   ExampleEffectType          mExampleEffect;                     ///< Current example effect.
 
   Toolkit::PushButton        mLayoutButton;                      ///< The layout button
-  Image                      mLayoutButtonImages[TOTAL_EFFECTS]; ///< Image when no layout
+  ButtonImages               mLayoutButtonImages[TOTAL_EFFECTS]; ///< Image when no layout
 };
 
-void RunTest(Application& app)
-{
-  ClusterController test(app);
-
-  app.MainLoop();
-}
-
 // Entry point for Linux & Tizen applications
 //
 int main(int argc, char **argv)
 {
   Application app = Application::New(&argc, &argv, DALI_DEMO_THEME_PATH);
-
-  RunTest(app);
+  ClusterController test(app);
+  app.MainLoop();
 
   return 0;
 }
diff --git a/examples/cube-transition-effect/cube-transition-effect-example.cpp b/examples/cube-transition-effect/cube-transition-effect-example.cpp
index 73da8084..fcd3680b 100644
--- a/examples/cube-transition-effect/cube-transition-effect-example.cpp
+++ b/examples/cube-transition-effect/cube-transition-effect-example.cpp
@@ -42,10 +42,15 @@ const char * const APPLICATION_TITLE_WAVE( "Cube Transition: Wave" );
 const char * const APPLICATION_TITLE_CROSS( "Cube Transition: Cross" );
 const char * const APPLICATION_TITLE_FOLD( "Cube Transition: Fold" );
 const char * const EFFECT_WAVE_IMAGE( DALI_IMAGE_DIR "icon-effect-wave.png" );
+const char * const EFFECT_WAVE_IMAGE_SELECTED( DALI_IMAGE_DIR "icon-effect-wave-selected.png" );
 const char * const EFFECT_CROSS_IMAGE( DALI_IMAGE_DIR "icon-effect-cross.png" );
+const char * const EFFECT_CROSS_IMAGE_SELECTED( DALI_IMAGE_DIR "icon-effect-cross-selected.png" );
 const char * const EFFECT_FOLD_IMAGE( DALI_IMAGE_DIR "icon-effect-fold.png" );
+const char * const EFFECT_FOLD_IMAGE_SELECTED( DALI_IMAGE_DIR "icon-effect-fold-selected.png" );
 const char * const SLIDE_SHOW_START_ICON( DALI_IMAGE_DIR "icon-play.png" );
+const char * const SLIDE_SHOW_START_ICON_SELECTED( DALI_IMAGE_DIR "icon-play-selected.png" );
 const char * const SLIDE_SHOW_STOP_ICON( DALI_IMAGE_DIR "icon-stop.png" );
+const char * const SLIDE_SHOW_STOP_ICON_SELECTED( DALI_IMAGE_DIR "icon-stop-selected.png" );
 
 const char* IMAGES[] =
 {
@@ -197,14 +202,19 @@ private:
   Timer                           mViewTimer;
   Toolkit::PushButton             mSlideshowButton;
   Image                           mIconSlideshowStart;
+  Image                           mIconSlideshowStartSelected;
   Image                           mIconSlideshowStop;
+  Image                           mIconSlideshowStopSelected;
 
   Vector2                         mPanPosition;
   Vector2                         mPanDisplacement;
 
   Image                           mImageWave;
+  Image                           mImageWaveSelected;
   Image                           mImageCross;
+  Image                           mImageCrossSelected;
   Image                           mImageFold;
+  Image                           mImageFoldSelected;
   Toolkit::PushButton             mEffectChangeButton;
 };
 
@@ -231,10 +241,14 @@ void CubeTransitionApp::OnInit( Application& application )
 
   // Add an effect-changing button on the right of the tool bar.
   mImageWave = ResourceImage::New( EFFECT_WAVE_IMAGE );
+  mImageWaveSelected = ResourceImage::New( EFFECT_WAVE_IMAGE_SELECTED );
   mImageCross = ResourceImage::New( EFFECT_CROSS_IMAGE );
+  mImageCrossSelected = ResourceImage::New( EFFECT_CROSS_IMAGE_SELECTED );
   mImageFold = ResourceImage::New( EFFECT_FOLD_IMAGE );
+  mImageFoldSelected = ResourceImage::New( EFFECT_FOLD_IMAGE_SELECTED );
   mEffectChangeButton = Toolkit::PushButton::New();
-  mEffectChangeButton.SetBackgroundImage(mImageWave);
+  mEffectChangeButton.SetButtonImage( mImageWave );
+  mEffectChangeButton.SetSelectedImage( mImageWaveSelected );
   mEffectChangeButton.ClickedSignal().Connect( this, &CubeTransitionApp::OnEffectButtonClicked );
   mToolBar.AddControl( mEffectChangeButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalRight, DemoHelper::DEFAULT_MODE_SWITCH_PADDING );
 
@@ -244,9 +258,12 @@ void CubeTransitionApp::OnInit( Application& application )
 
   //Add an slideshow icon on the right of the title
   mIconSlideshowStart = ResourceImage::New( SLIDE_SHOW_START_ICON );
+  mIconSlideshowStartSelected = ResourceImage::New( SLIDE_SHOW_START_ICON_SELECTED );
   mIconSlideshowStop = ResourceImage::New( SLIDE_SHOW_STOP_ICON );
+  mIconSlideshowStopSelected = ResourceImage::New( SLIDE_SHOW_STOP_ICON_SELECTED );
   mSlideshowButton = Toolkit::PushButton::New();
-  mSlideshowButton.SetBackgroundImage( mIconSlideshowStart );
+  mSlideshowButton.SetButtonImage( mIconSlideshowStart );
+  mSlideshowButton.SetSelectedImage( mIconSlideshowStartSelected );
   mSlideshowButton.ClickedSignal().Connect( this, &CubeTransitionApp::OnSildeshowButtonClicked );
   mToolBar.AddControl( mSlideshowButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalCenter, DemoHelper::DEFAULT_PLAY_PADDING );
 
@@ -357,20 +374,23 @@ bool CubeTransitionApp::OnEffectButtonClicked( Toolkit::Button button )
   {
     mCurrentEffect = mCubeCrossEffect;
     mTitleActor.SetProperty( TextLabel::Property::TEXT, std::string(APPLICATION_TITLE_CROSS) );
-    mEffectChangeButton.SetBackgroundImage(mImageCross);
+    mEffectChangeButton.SetButtonImage( mImageCross );
+    mEffectChangeButton.SetSelectedImage( mImageCrossSelected );
 
   }
   else if(mCurrentEffect == mCubeCrossEffect)
   {
     mCurrentEffect = mCubeFoldEffect;
     mTitleActor.SetProperty( TextLabel::Property::TEXT, std::string(APPLICATION_TITLE_FOLD) );
-    mEffectChangeButton.SetBackgroundImage(mImageFold);
+    mEffectChangeButton.SetButtonImage( mImageFold );
+    mEffectChangeButton.SetSelectedImage( mImageFoldSelected );
   }
   else
   {
     mCurrentEffect = mCubeWaveEffect;
     mTitleActor.SetProperty( TextLabel::Property::TEXT, std::string(APPLICATION_TITLE_WAVE) );
-    mEffectChangeButton.SetBackgroundImage(mImageWave);
+    mEffectChangeButton.SetButtonImage( mImageWave );
+    mEffectChangeButton.SetSelectedImage( mImageWaveSelected );
   }
 
   // Set the current image to cube transition effect
@@ -385,7 +405,8 @@ bool CubeTransitionApp::OnSildeshowButtonClicked( Toolkit::Button button )
   if( mSlideshow )
   {
     mPanGestureDetector.Detach( mParent );
-    mSlideshowButton.SetBackgroundImage( mIconSlideshowStop );
+    mSlideshowButton.SetButtonImage( mIconSlideshowStop );
+    mSlideshowButton.SetSelectedImage( mIconSlideshowStopSelected );
     mPanPosition = Vector2( mViewSize.width, mViewSize.height*0.5f );
     mPanDisplacement = Vector2( -10.f, 0.f );
     mViewTimer.Start();
@@ -393,7 +414,8 @@ bool CubeTransitionApp::OnSildeshowButtonClicked( Toolkit::Button button )
   else
   {
     mPanGestureDetector.Attach( mParent );
-    mSlideshowButton.SetBackgroundImage( mIconSlideshowStart );
+    mSlideshowButton.SetButtonImage( mIconSlideshowStart );
+    mSlideshowButton.SetSelectedImage( mIconSlideshowStartSelected );
     mViewTimer.Stop();
   }
   return true;
diff --git a/examples/dissolve-effect/dissolve-effect-example.cpp b/examples/dissolve-effect/dissolve-effect-example.cpp
index 37e8d6b4..3a346fb3 100644
--- a/examples/dissolve-effect/dissolve-effect-example.cpp
+++ b/examples/dissolve-effect/dissolve-effect-example.cpp
@@ -37,9 +37,13 @@ const char * const TOOLBAR_IMAGE( DALI_IMAGE_DIR "top-bar.png" );
 const char * const APPLICATION_TITLE_HIGHP( "Dissolve Effect(highp)" );
 const char * const APPLICATION_TITLE_MEDIUMP( "Dissolve Effect(mediump)" );
 const char * const EFFECT_HIGHP_IMAGE( DALI_IMAGE_DIR "icon-highp.png" );
+const char * const EFFECT_HIGHP_IMAGE_SELECTED( DALI_IMAGE_DIR "icon-highp-selected.png" );
 const char * const EFFECT_MEDIUMP_IMAGE( DALI_IMAGE_DIR "icon-mediump.png" );
+const char * const EFFECT_MEDIUMP_IMAGE_SELECTED( DALI_IMAGE_DIR "icon-mediump-selected.png" );
 const char * const PLAY_ICON( DALI_IMAGE_DIR "icon-play.png" );
+const char * const PLAY_ICON_SELECTED( DALI_IMAGE_DIR "icon-play-selected.png" );
 const char * const STOP_ICON( DALI_IMAGE_DIR "icon-stop.png" );
+const char * const STOP_ICON_SELECTED( DALI_IMAGE_DIR "icon-stop-selected.png" );
 
 const char* IMAGES[] =
 {
@@ -177,11 +181,15 @@ private:
   unsigned int                    mCentralLineIndex;
 
   Image                           mIconPlay;
+  Image                           mIconPlaySelected;
   Image                           mIconStop;
+  Image                           mIconStopSelected;
   Toolkit::PushButton             mPlayStopButton;
 
   Image                           mIconHighP;
+  Image                           mIconHighPSelected;
   Image                           mIconMediumP;
+  Image                           mIconMediumPSelected;
   Toolkit::PushButton             mEffectChangeButton;
 };
 
@@ -211,9 +219,12 @@ void DissolveEffectApp::OnInit( Application& application )
 
   // Add an effect-changing button on the right of the tool bar.
   mIconHighP = ResourceImage::New( EFFECT_HIGHP_IMAGE );
+  mIconHighPSelected = ResourceImage::New( EFFECT_HIGHP_IMAGE_SELECTED );
   mIconMediumP = ResourceImage::New( EFFECT_MEDIUMP_IMAGE );
+  mIconMediumPSelected = ResourceImage::New( EFFECT_MEDIUMP_IMAGE_SELECTED );
   mEffectChangeButton = Toolkit::PushButton::New();
-  mEffectChangeButton.SetBackgroundImage(mIconHighP);
+  mEffectChangeButton.SetButtonImage( mIconHighP );
+  mEffectChangeButton.SetSelectedImage( mIconHighPSelected );
   mEffectChangeButton.ClickedSignal().Connect( this, &DissolveEffectApp::OnEffectButtonClicked );
   mToolBar.AddControl( mEffectChangeButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalRight, DemoHelper::DEFAULT_MODE_SWITCH_PADDING );
 
@@ -223,9 +234,12 @@ void DissolveEffectApp::OnInit( Application& application )
 
   // Add an slide-show button on the right of the title
   mIconPlay = ResourceImage::New( PLAY_ICON );
+  mIconPlaySelected = ResourceImage::New( PLAY_ICON_SELECTED );
   mIconStop = ResourceImage::New( STOP_ICON );
+  mIconStopSelected = ResourceImage::New( STOP_ICON_SELECTED );
   mPlayStopButton = Toolkit::PushButton::New();
-  mPlayStopButton.SetBackgroundImage( mIconPlay );
+  mPlayStopButton.SetButtonImage( mIconPlay );
+  mPlayStopButton.SetSelectedImage( mIconPlaySelected );
   mPlayStopButton.ClickedSignal().Connect( this, &DissolveEffectApp::OnSildeshowButtonClicked );
   mToolBar.AddControl( mPlayStopButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalCenter, DemoHelper::DEFAULT_PLAY_PADDING );
 
@@ -336,12 +350,14 @@ bool DissolveEffectApp::OnEffectButtonClicked( Toolkit::Button button )
   if(mUseHighPrecision)
   {
     mTitleActor.SetProperty( TextLabel::Property::TEXT, std::string(APPLICATION_TITLE_HIGHP) );
-    mEffectChangeButton.SetBackgroundImage(mIconHighP);
+    mEffectChangeButton.SetButtonImage( mIconHighP );
+    mEffectChangeButton.SetSelectedImage( mIconHighPSelected );
   }
   else
   {
     mTitleActor.SetProperty( TextLabel::Property::TEXT, std::string(APPLICATION_TITLE_MEDIUMP) );
-    mEffectChangeButton.SetBackgroundImage(mIconMediumP);
+    mEffectChangeButton.SetButtonImage( mIconMediumP );
+    mEffectChangeButton.SetSelectedImage( mIconMediumPSelected );
   }
 
   return true;
@@ -352,14 +368,16 @@ bool DissolveEffectApp::OnSildeshowButtonClicked( Toolkit::Button button )
   mSlideshow = !mSlideshow;
   if( mSlideshow )
   {
-    mPlayStopButton.SetBackgroundImage( mIconStop );
+    mPlayStopButton.SetButtonImage( mIconStop );
+    mPlayStopButton.SetSelectedImage( mIconStopSelected );
     mPanGestureDetector.Detach( mParent );
     mViewTimer.Start();
     mTimerReady = false;
   }
   else
   {
-    mPlayStopButton.SetBackgroundImage( mIconPlay );
+    mPlayStopButton.SetButtonImage( mIconPlay );
+    mPlayStopButton.SetSelectedImage( mIconPlaySelected );
     mTimerReady = true;
     mPanGestureDetector.Attach( mParent );
   }
diff --git a/examples/image-scaling-and-filtering/image-scaling-and-filtering-example.cpp b/examples/image-scaling-and-filtering/image-scaling-and-filtering-example.cpp
index bfab91e7..49ba4ed7 100644
--- a/examples/image-scaling-and-filtering/image-scaling-and-filtering-example.cpp
+++ b/examples/image-scaling-and-filtering/image-scaling-and-filtering-example.cpp
@@ -36,10 +36,6 @@ const char* const NEXT_BUTTON_ID = "NEXT_BUTTON";
 const char* const PREVIOUS_BUTTON_ID = "PREVIOUS_BUTTON";
 const char * const DALI_ICON_PLAY = DALI_IMAGE_DIR "icon-play.png";
 
-const char* const PUSHBUTTON_PRESS_IMAGE = DALI_IMAGE_DIR "button-down.9.png";
-const char* const PUSHBUTTON_BUTTON_IMAGE = DALI_IMAGE_DIR "button-up.9.png";
-const char* const PUSHBUTTON_DISABLED_IMAGE = DALI_IMAGE_DIR "button-disabled.9.png";
-
 const char* const FITTING_BUTTON_ID = "FITTING_BUTTON";
 const char* const SAMPLING_BUTTON_ID = "SAMPLING_BUTTON";
 const char* const FITTING_BUTTON_TEXT = "Fitting";
@@ -229,9 +225,6 @@ public:
     mGrabCorner = Toolkit::PushButton::New();
     mGrabCorner.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::WIDTH );
     mGrabCorner.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
-    mGrabCorner.SetSelectedImage( Dali::ResourceImage::New( PUSHBUTTON_PRESS_IMAGE ) );
-    mGrabCorner.SetButtonImage( Dali::ResourceImage::New( PUSHBUTTON_BUTTON_IMAGE ) );
-    mGrabCorner.SetDisabledImage( Dali::ResourceImage::New( PUSHBUTTON_DISABLED_IMAGE ) );
     mGrabCorner.SetName( "GrabCorner" );
     mGrabCorner.SetAnchorPoint( AnchorPoint::BOTTOM_RIGHT );
     mGrabCorner.SetParentOrigin( ParentOrigin::BOTTOM_RIGHT );
@@ -382,9 +375,6 @@ public:
     button.SetLabel( label );
     button.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
     button.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
-    button.SetSelectedImage( Dali::ResourceImage::New( PUSHBUTTON_PRESS_IMAGE ) );
-    button.SetButtonImage( Dali::ResourceImage::New( PUSHBUTTON_BUTTON_IMAGE ) );
-    button.SetDisabledImage( Dali::ResourceImage::New( PUSHBUTTON_DISABLED_IMAGE ) );
     button.ClickedSignal().Connect( this, &ImageScalingAndFilteringController::OnButtonClicked );
     return button;
   }
@@ -412,8 +402,6 @@ public:
     Toolkit::PushButton button = Toolkit::PushButton::New();
     button.SetName( id );
     button.SetLabel( id );
-    button.SetSelectedImage( Dali::ResourceImage::New( PUSHBUTTON_PRESS_IMAGE ) );
-    button.SetButtonImage( Dali::ResourceImage::New( PUSHBUTTON_BUTTON_IMAGE ) );
     Toolkit::TextLabel textLabel = Toolkit::TextLabel::DownCast( button.GetLabel() );
     textLabel.SetProperty( TextLabel::Property::POINT_SIZE, 12.0f );
 
diff --git a/examples/image-scaling-irregular-grid/image-scaling-irregular-grid-example.cpp b/examples/image-scaling-irregular-grid/image-scaling-irregular-grid-example.cpp
index 6d77a2ec..ffa597b1 100644
--- a/examples/image-scaling-irregular-grid/image-scaling-irregular-grid-example.cpp
+++ b/examples/image-scaling-irregular-grid/image-scaling-irregular-grid-example.cpp
@@ -65,6 +65,7 @@ const char* BACKGROUND_IMAGE( DALI_IMAGE_DIR "background-gradient.jpg" );
 const char* TOOLBAR_IMAGE( DALI_IMAGE_DIR "top-bar.png" );
 const char* APPLICATION_TITLE( "Image Scaling Modes" );
 const char* TOGGLE_SCALING_IMAGE( DALI_IMAGE_DIR "icon-change.png" );
+const char* TOGGLE_SCALING_IMAGE_SELECTED( DALI_IMAGE_DIR "icon-change-selected.png" );
 
 /** The width of the grid in whole grid cells. */
 const unsigned GRID_WIDTH = 9;
@@ -306,8 +307,10 @@ public:
 
     // Create an image scaling toggle button. (right of toolbar)
     Image toggleScalingImage = ResourceImage::New( TOGGLE_SCALING_IMAGE );
+    Image toggleScalingImageSelected = ResourceImage::New( TOGGLE_SCALING_IMAGE_SELECTED );
     Toolkit::PushButton toggleScalingButton = Toolkit::PushButton::New();
-    toggleScalingButton.SetBackgroundImage( toggleScalingImage );
+    toggleScalingButton.SetButtonImage( toggleScalingImage );
+    toggleScalingButton.SetSelectedImage( toggleScalingImageSelected );
     toggleScalingButton.ClickedSignal().Connect( this, &ImageScalingIrregularGridController::OnToggleScalingTouched );
     mToolBar.AddControl( toggleScalingButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalRight, DemoHelper::DEFAULT_MODE_SWITCH_PADDING  );
 
diff --git a/examples/item-view/item-view-example.cpp b/examples/item-view/item-view-example.cpp
index 5bbaa1f9..f9998834 100644
--- a/examples/item-view/item-view-example.cpp
+++ b/examples/item-view/item-view-example.cpp
@@ -107,12 +107,19 @@ const unsigned int NUM_IMAGE_PER_ROW_IN_ATLAS = 8;
 const char* BACKGROUND_IMAGE( "" );
 const char* TOOLBAR_IMAGE( DALI_IMAGE_DIR "top-bar.png" );
 const char* EDIT_IMAGE( DALI_IMAGE_DIR "icon-edit.png" );
+const char* EDIT_IMAGE_SELECTED( DALI_IMAGE_DIR "icon-edit-selected.png" );
 const char* SPIRAL_LAYOUT_IMAGE( DALI_IMAGE_DIR "icon-item-view-layout-spiral.png" );
+const char* SPIRAL_LAYOUT_IMAGE_SELECTED( DALI_IMAGE_DIR "icon-item-view-layout-spiral-selected.png" );
 const char* GRID_LAYOUT_IMAGE( DALI_IMAGE_DIR "icon-item-view-layout-grid.png" );
+const char* GRID_LAYOUT_IMAGE_SELECTED( DALI_IMAGE_DIR "icon-item-view-layout-grid-selected.png" );
 const char* DEPTH_LAYOUT_IMAGE( DALI_IMAGE_DIR "icon-item-view-layout-depth.png" );
+const char* DEPTH_LAYOUT_IMAGE_SELECTED( DALI_IMAGE_DIR "icon-item-view-layout-depth-selected.png" );
 const char* DELETE_IMAGE( DALI_IMAGE_DIR "icon-delete.png" );
+const char* DELETE_IMAGE_SELECTED( DALI_IMAGE_DIR "icon-delete-selected.png" );
 const char* REPLACE_IMAGE( DALI_IMAGE_DIR "icon-replace.png" );
+const char* REPLACE_IMAGE_SELECTED( DALI_IMAGE_DIR "icon-replace-selected.png" );
 const char* INSERT_IMAGE( DALI_IMAGE_DIR "icon-insert.png" );
+const char* INSERT_IMAGE_SELECTED( DALI_IMAGE_DIR "icon-insert-selected.png" );
 const char* SELECTED_IMAGE( DALI_IMAGE_DIR "item-select-check.png" );
 const char* APPLICATION_TITLE( "ItemView" );
 
@@ -224,14 +231,16 @@ public:
 
     // Create an edit mode button. (left of toolbar)
     Toolkit::PushButton editButton = Toolkit::PushButton::New();
-    editButton.SetBackgroundImage( ResourceImage::New( EDIT_IMAGE ) );
+    editButton.SetButtonImage( ResourceImage::New( EDIT_IMAGE ) );
+    editButton.SetSelectedImage( ResourceImage::New( EDIT_IMAGE_SELECTED ) );
     editButton.ClickedSignal().Connect( this, &ItemViewExample::OnModeButtonClicked);
     editButton.SetLeaveRequired( true );
     mToolBar.AddControl( editButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalLeft, DemoHelper::DEFAULT_MODE_SWITCH_PADDING  );
 
     // Create a layout toggle button. (right of toolbar)
     mLayoutButton = Toolkit::PushButton::New();
-    mLayoutButton.SetBackgroundImage( ResourceImage::New( SPIRAL_LAYOUT_IMAGE ) );
+    mLayoutButton.SetButtonImage( ResourceImage::New( SPIRAL_LAYOUT_IMAGE ) );
+    mLayoutButton.SetSelectedImage( ResourceImage::New( SPIRAL_LAYOUT_IMAGE_SELECTED ) );
     mLayoutButton.ClickedSignal().Connect( this, &ItemViewExample::OnLayoutButtonClicked);
     mLayoutButton.SetLeaveRequired( true );
     mToolBar.AddControl( mLayoutButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalRight, DemoHelper::DEFAULT_MODE_SWITCH_PADDING  );
@@ -243,6 +252,7 @@ public:
     mDeleteButton.SetPosition( BUTTON_BORDER, BUTTON_BORDER );
     mDeleteButton.SetDrawMode( DrawMode::OVERLAY );
     mDeleteButton.SetButtonImage( ResourceImage::New( DELETE_IMAGE ) );
+    mDeleteButton.SetSelectedImage( ResourceImage::New( DELETE_IMAGE_SELECTED ) );
     mDeleteButton.SetBackgroundImage( ResourceImage::New( TOOLBAR_IMAGE ) );
     mDeleteButton.SetSize( Vector2( stageSize.width * 0.15f, stageSize.width * 0.15f ) );
     mDeleteButton.ClickedSignal().Connect( this, &ItemViewExample::OnDeleteButtonClicked);
@@ -257,6 +267,7 @@ public:
     mInsertButton.SetPosition( BUTTON_BORDER, BUTTON_BORDER );
     mInsertButton.SetDrawMode( DrawMode::OVERLAY );
     mInsertButton.SetButtonImage( ResourceImage::New( INSERT_IMAGE ) );
+    mInsertButton.SetSelectedImage( ResourceImage::New( INSERT_IMAGE_SELECTED ) );
     mInsertButton.SetBackgroundImage( ResourceImage::New( TOOLBAR_IMAGE ) );
     mInsertButton.SetSize( stageSize.width * 0.15f, stageSize.width * 0.15f );
     mInsertButton.ClickedSignal().Connect( this, &ItemViewExample::OnInsertButtonClicked);
@@ -271,6 +282,7 @@ public:
     mReplaceButton.SetPosition( BUTTON_BORDER, BUTTON_BORDER );
     mReplaceButton.SetDrawMode( DrawMode::OVERLAY );
     mReplaceButton.SetButtonImage( ResourceImage::New( REPLACE_IMAGE ) );
+    mReplaceButton.SetSelectedImage( ResourceImage::New( REPLACE_IMAGE_SELECTED ) );
     mReplaceButton.SetBackgroundImage( ResourceImage::New( TOOLBAR_IMAGE ) );
     mReplaceButton.SetSize( stageSize.width * 0.15f, stageSize.width * 0.15f );
     mReplaceButton.ClickedSignal().Connect( this, &ItemViewExample::OnReplaceButtonClicked);
@@ -799,19 +811,22 @@ public:
       {
         case SPIRAL_LAYOUT:
         {
-          mLayoutButton.SetBackgroundImage( ResourceImage::New( SPIRAL_LAYOUT_IMAGE ) );
+          mLayoutButton.SetButtonImage( ResourceImage::New( SPIRAL_LAYOUT_IMAGE ) );
+          mLayoutButton.SetSelectedImage( ResourceImage::New( SPIRAL_LAYOUT_IMAGE_SELECTED ) );
           break;
         }
 
         case GRID_LAYOUT:
         {
-          mLayoutButton.SetBackgroundImage( ResourceImage::New( GRID_LAYOUT_IMAGE ) );
+          mLayoutButton.SetButtonImage( ResourceImage::New( GRID_LAYOUT_IMAGE ) );
+          mLayoutButton.SetSelectedImage( ResourceImage::New( GRID_LAYOUT_IMAGE_SELECTED ) );
           break;
         }
 
         case DEPTH_LAYOUT:
         {
-          mLayoutButton.SetBackgroundImage( ResourceImage::New( DEPTH_LAYOUT_IMAGE ) );
+          mLayoutButton.SetButtonImage( ResourceImage::New( DEPTH_LAYOUT_IMAGE ) );
+          mLayoutButton.SetSelectedImage( ResourceImage::New( DEPTH_LAYOUT_IMAGE_SELECTED ) );
           break;
         }
 
diff --git a/examples/logging/logging-example.cpp b/examples/logging/logging-example.cpp
index 51696297..96fc30ca 100644
--- a/examples/logging/logging-example.cpp
+++ b/examples/logging/logging-example.cpp
@@ -65,10 +65,6 @@ const int BUTTON_HEIGHT = LOGGER_GROUP_HEIGHT - MARGIN_SIZE * 2;
 
 const Vector4 BACKGROUND_COLOUR( 1.0f, 1.0f, 1.0f, 0.15f );
 
-const char* const PUSHBUTTON_PRESS_IMAGE = DALI_IMAGE_DIR "button-down.9.png";
-const char* const PUSHBUTTON_BUTTON_IMAGE = DALI_IMAGE_DIR "button-up.9.png";
-const char* const PUSHBUTTON_DISABLED_IMAGE = DALI_IMAGE_DIR "button-disabled.9.png";
-
 // Button IDs
 const char* const LOGGER_1_RADIO_ID = "LOGGER_1_RADIO";
 const char* const LOGGER_2_RADIO_ID = "LOGGER_2_RADIO";
@@ -292,11 +288,6 @@ class LoggingController: public ConnectionTracker
       button.SetLabel( CREATE_BUTTON_TEXT );
       button.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
       button.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
-
-      button.SetSelectedImage( Dali::ResourceImage::New( PUSHBUTTON_PRESS_IMAGE ) );
-      button.SetButtonImage( Dali::ResourceImage::New( PUSHBUTTON_BUTTON_IMAGE ) );
-      button.SetDisabledImage( Dali::ResourceImage::New( PUSHBUTTON_DISABLED_IMAGE ) );
-
       button.ClickedSignal().Connect( this, &LoggingController::OnButtonClicked );
 
       createGroupBackground.Add( button );
@@ -308,11 +299,6 @@ class LoggingController: public ConnectionTracker
       button.SetLabel( DELETE_BUTTON_TEXT );
       button.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
       button.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
-
-      button.SetSelectedImage( Dali::ResourceImage::New( PUSHBUTTON_PRESS_IMAGE ) );
-      button.SetButtonImage( Dali::ResourceImage::New( PUSHBUTTON_BUTTON_IMAGE ) );
-      button.SetDisabledImage( Dali::ResourceImage::New( PUSHBUTTON_DISABLED_IMAGE ) );
-
       button.ClickedSignal().Connect( this, &LoggingController::OnButtonClicked );
 
       createGroupBackground.Add( button );
@@ -335,11 +321,6 @@ class LoggingController: public ConnectionTracker
       button.SetLabel( START_BUTTON_TEXT );
       button.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
       button.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
-
-      button.SetSelectedImage( Dali::ResourceImage::New( PUSHBUTTON_PRESS_IMAGE ) );
-      button.SetButtonImage( Dali::ResourceImage::New( PUSHBUTTON_BUTTON_IMAGE ) );
-      button.SetDisabledImage( Dali::ResourceImage::New( PUSHBUTTON_DISABLED_IMAGE ) );
-
       button.ClickedSignal().Connect( this, &LoggingController::OnButtonClicked );
 
       timingGroupBackground.Add( button );
@@ -351,11 +332,6 @@ class LoggingController: public ConnectionTracker
       button.SetLabel( STOP_BUTTON_TEXT );
       button.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
       button.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
-
-      button.SetSelectedImage( Dali::ResourceImage::New( PUSHBUTTON_PRESS_IMAGE ) );
-      button.SetButtonImage( Dali::ResourceImage::New( PUSHBUTTON_BUTTON_IMAGE ) );
-      button.SetDisabledImage( Dali::ResourceImage::New( PUSHBUTTON_DISABLED_IMAGE ) );
-
       button.ClickedSignal().Connect( this, &LoggingController::OnButtonClicked );
 
       timingGroupBackground.Add( button );
@@ -377,11 +353,6 @@ class LoggingController: public ConnectionTracker
       button.SetLabel( ENABLE_BUTTON_TEXT );
       button.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
       button.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
-
-      button.SetSelectedImage( Dali::ResourceImage::New( PUSHBUTTON_PRESS_IMAGE ) );
-      button.SetButtonImage( Dali::ResourceImage::New( PUSHBUTTON_BUTTON_IMAGE ) );
-      button.SetDisabledImage( Dali::ResourceImage::New( PUSHBUTTON_DISABLED_IMAGE ) );
-
       button.ClickedSignal().Connect( this, &LoggingController::OnButtonClicked );
 
       enableGroupBackground.Add( button );
@@ -393,11 +364,6 @@ class LoggingController: public ConnectionTracker
       button.SetLabel( DISABLE_BUTTON_TEXT );
       button.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
       button.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
-
-      button.SetSelectedImage( Dali::ResourceImage::New( PUSHBUTTON_PRESS_IMAGE ) );
-      button.SetButtonImage( Dali::ResourceImage::New( PUSHBUTTON_BUTTON_IMAGE ) );
-      button.SetDisabledImage( Dali::ResourceImage::New( PUSHBUTTON_DISABLED_IMAGE ) );
-
       button.ClickedSignal().Connect( this, &LoggingController::OnButtonClicked );
 
       enableGroupBackground.Add( button );
@@ -481,11 +447,6 @@ class LoggingController: public ConnectionTracker
       button.SetLabel( VSYNC_BUTTON_TEXT );
       button.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
       button.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
-
-      button.SetSelectedImage( Dali::ResourceImage::New( PUSHBUTTON_PRESS_IMAGE ) );
-      button.SetButtonImage( Dali::ResourceImage::New( PUSHBUTTON_BUTTON_IMAGE ) );
-      button.SetDisabledImage( Dali::ResourceImage::New( PUSHBUTTON_DISABLED_IMAGE ) );
-
       button.ClickedSignal().Connect( this, &LoggingController::OnButtonClicked );
 
       vsyncGroupBackground.Add( button );
diff --git a/examples/motion-blur/motion-blur-example.cpp b/examples/motion-blur/motion-blur-example.cpp
index 0e9ae801..b2d14e9d 100644
--- a/examples/motion-blur/motion-blur-example.cpp
+++ b/examples/motion-blur/motion-blur-example.cpp
@@ -76,9 +76,12 @@ const char* BACKGROUND_IMAGE_PATH = DALI_IMAGE_DIR "background-default.png";
 
 const char* TOOLBAR_IMAGE( DALI_IMAGE_DIR "top-bar.png" );
 const char* LAYOUT_IMAGE( DALI_IMAGE_DIR "icon-change.png" );
+const char* LAYOUT_IMAGE_SELECTED( DALI_IMAGE_DIR "icon-change-selected.png" );
 const char* APPLICATION_TITLE( "Motion Blur" );
 const char* EFFECTS_OFF_ICON( DALI_IMAGE_DIR "icon-effects-off.png" );
+const char* EFFECTS_OFF_ICON_SELECTED( DALI_IMAGE_DIR "icon-effects-off-selected.png" );
 const char* EFFECTS_ON_ICON( DALI_IMAGE_DIR "icon-effects-on.png" );
+const char* EFFECTS_ON_ICON_SELECTED( DALI_IMAGE_DIR "icon-effects-on-selected.png" );
 
 const float UI_MARGIN = 4.0f;                              ///< Screen Margin for placement of UI buttons
 
@@ -164,17 +167,22 @@ public:
 
     //Add an effects icon on the right of the title
     mIconEffectsOff = ResourceImage::New( EFFECTS_OFF_ICON );
+    mIconEffectsOffSelected = ResourceImage::New( EFFECTS_OFF_ICON_SELECTED );
     mIconEffectsOn = ResourceImage::New( EFFECTS_ON_ICON );
+    mIconEffectsOnSelected = ResourceImage::New( EFFECTS_ON_ICON_SELECTED );
     mActorEffectsButton = Toolkit::PushButton::New();
-    mActorEffectsButton.SetBackgroundImage( mIconEffectsOff );
+    mActorEffectsButton.SetButtonImage( mIconEffectsOff );
+    mActorEffectsButton.SetSelectedImage( mIconEffectsOffSelected );
     mActorEffectsButton.ClickedSignal().Connect( this, &MotionBlurExampleApp::OnEffectButtonClicked );
     mToolBar.AddControl( mActorEffectsButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalCenter, DemoHelper::DEFAULT_PLAY_PADDING );
 
     // Creates a mode button.
     // Create a effect toggle button. (right of toolbar)
     Image imageLayout = ResourceImage::New( LAYOUT_IMAGE );
+    Image imageLayoutSelected = ResourceImage::New( LAYOUT_IMAGE_SELECTED );
     Toolkit::PushButton layoutButton = Toolkit::PushButton::New();
-    layoutButton.SetBackgroundImage(imageLayout);
+    layoutButton.SetButtonImage( imageLayout );
+    layoutButton.SetSelectedImage( imageLayoutSelected );
     layoutButton.ClickedSignal().Connect( this, &MotionBlurExampleApp::OnLayoutButtonClicked);
     layoutButton.SetLeaveRequired( true );
     mToolBar.AddControl( layoutButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalRight, DemoHelper::DEFAULT_MODE_SWITCH_PADDING );
@@ -447,12 +455,14 @@ public:
     if(!mActorEffectsEnabled)
     {
       mActorEffectsEnabled = true;
-      mActorEffectsButton.SetBackgroundImage( mIconEffectsOn );
+      mActorEffectsButton.SetButtonImage( mIconEffectsOn );
+      mActorEffectsButton.SetSelectedImage( mIconEffectsOnSelected );
     }
     else
     {
       mActorEffectsEnabled = false;
-      mActorEffectsButton.SetBackgroundImage( mIconEffectsOff );
+      mActorEffectsButton.SetButtonImage( mIconEffectsOff );
+      mActorEffectsButton.SetSelectedImage( mIconEffectsOffSelected );
     }
   }
 
@@ -513,7 +523,9 @@ private:
   Toolkit::Control           mView;
   Toolkit::ToolBar           mToolBar;
   Image                      mIconEffectsOff;
+  Image                      mIconEffectsOffSelected;
   Image                      mIconEffectsOn;
+  Image                      mIconEffectsOnSelected;
 
   Layer                      mContentLayer;           ///< Content layer (contains actor for this blur demo)
 
diff --git a/examples/motion-stretch/motion-stretch-example.cpp b/examples/motion-stretch/motion-stretch-example.cpp
index 0084cddc..9653df01 100644
--- a/examples/motion-stretch/motion-stretch-example.cpp
+++ b/examples/motion-stretch/motion-stretch-example.cpp
@@ -62,9 +62,12 @@ const char* BACKGROUND_IMAGE_PATH = DALI_IMAGE_DIR "background-default.png";
 
 const char* TOOLBAR_IMAGE( DALI_IMAGE_DIR "top-bar.png" );
 const char* LAYOUT_IMAGE( DALI_IMAGE_DIR "icon-change.png" );
+const char* LAYOUT_IMAGE_SELECTED( DALI_IMAGE_DIR "icon-change-selected.png" );
 const char* APPLICATION_TITLE( "Motion Stretch" );
 const char* EFFECTS_OFF_ICON( DALI_IMAGE_DIR "icon-effects-off.png" );
+const char* EFFECTS_OFF_ICON_SELECTED( DALI_IMAGE_DIR "icon-effects-off-selected.png" );
 const char* EFFECTS_ON_ICON( DALI_IMAGE_DIR "icon-effects-on.png" );
+const char* EFFECTS_ON_ICON_SELECTED( DALI_IMAGE_DIR "icon-effects-on-selected.png" );
 
 // These values depend on the button background image
 const Vector4 BUTTON_IMAGE_BORDER( Vector4::ONE * 3.0f );
@@ -138,17 +141,22 @@ public:
 
     //Add an slideshow icon on the right of the title
     mIconEffectsOff = ResourceImage::New( EFFECTS_OFF_ICON );
+    mIconEffectsOffSelected = ResourceImage::New( EFFECTS_OFF_ICON_SELECTED );
     mIconEffectsOn = ResourceImage::New( EFFECTS_ON_ICON );
+    mIconEffectsOnSelected = ResourceImage::New( EFFECTS_ON_ICON_SELECTED );
     mActorEffectsButton = Toolkit::PushButton::New();
-    mActorEffectsButton.SetBackgroundImage( mIconEffectsOff );
+    mActorEffectsButton.SetButtonImage( mIconEffectsOff );
+    mActorEffectsButton.SetSelectedImage( mIconEffectsOffSelected );
     mActorEffectsButton.ClickedSignal().Connect( this, &MotionStretchExampleApp::OnEffectButtonClicked );
     mToolBar.AddControl( mActorEffectsButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalCenter, DemoHelper::DEFAULT_PLAY_PADDING );
 
     // Creates a mode button.
     // Create a effect toggle button. (right of toolbar)
     Image imageLayout = ResourceImage::New( LAYOUT_IMAGE );
+    Image imageLayoutSelected = ResourceImage::New( LAYOUT_IMAGE_SELECTED );
     Toolkit::PushButton layoutButton = Toolkit::PushButton::New();
-    layoutButton.SetBackgroundImage(imageLayout);
+    layoutButton.SetButtonImage( imageLayout );
+    layoutButton.SetSelectedImage( imageLayoutSelected );
     layoutButton.ClickedSignal().Connect( this, &MotionStretchExampleApp::OnLayoutButtonClicked);
     layoutButton.SetLeaveRequired( true );
     mToolBar.AddControl( layoutButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalRight, DemoHelper::DEFAULT_MODE_SWITCH_PADDING );
@@ -341,12 +349,14 @@ public:
     if(!mActorEffectsEnabled)
     {
       mActorEffectsEnabled = true;
-      mActorEffectsButton.SetBackgroundImage( mIconEffectsOn );
+      mActorEffectsButton.SetButtonImage( mIconEffectsOn );
+      mActorEffectsButton.SetSelectedImage( mIconEffectsOnSelected );
     }
     else
     {
       mActorEffectsEnabled = false;
-      mActorEffectsButton.SetBackgroundImage( mIconEffectsOff );
+      mActorEffectsButton.SetButtonImage( mIconEffectsOff );
+      mActorEffectsButton.SetSelectedImage( mIconEffectsOffSelected );
     }
   }
 
@@ -407,7 +417,9 @@ private:
   Toolkit::Control           mView;
   Toolkit::ToolBar           mToolBar;
   Image                      mIconEffectsOff;
+  Image                      mIconEffectsOffSelected;
   Image                      mIconEffectsOn;
+  Image                      mIconEffectsOnSelected;
   Layer                      mContentLayer;           ///< Content layer (contains actor for this stretch demo)
 
   PushButton                 mActorEffectsButton;     ///< The actor effects toggling Button.
diff --git a/examples/new-window/new-window-example.cpp b/examples/new-window/new-window-example.cpp
index 78978d5e..889e038c 100644
--- a/examples/new-window/new-window-example.cpp
+++ b/examples/new-window/new-window-example.cpp
@@ -35,6 +35,7 @@ namespace
 const char * const BACKGROUND_IMAGE( DALI_IMAGE_DIR "background-2.jpg" );
 const char * const TOOLBAR_IMAGE( DALI_IMAGE_DIR "top-bar.png" );
 const char * const LOSE_CONTEXT_IMAGE( DALI_IMAGE_DIR "icon-cluster-wobble.png" );
+const char * const LOSE_CONTEXT_IMAGE_SELECTED( DALI_IMAGE_DIR "icon-cluster-wobble-selected.png" );
 const char * const BASE_IMAGE( DALI_IMAGE_DIR "gallery-large-14.jpg" );
 const char * const EFFECT_IMAGE( DALI_IMAGE_DIR "gallery-large-18.jpg" );
 const char * const LOGO_IMAGE(DALI_IMAGE_DIR "dali-logo.png");
@@ -198,7 +199,8 @@ void NewWindowController::Create( Application& app )
   }
 
   mLoseContextButton = Toolkit::PushButton::New();
-  mLoseContextButton.SetBackgroundImage( ResourceImage::New( LOSE_CONTEXT_IMAGE ) );
+  mLoseContextButton.SetButtonImage( ResourceImage::New( LOSE_CONTEXT_IMAGE ) );
+  mLoseContextButton.SetSelectedImage( ResourceImage::New( LOSE_CONTEXT_IMAGE_SELECTED ) );
   mLoseContextButton.ClickedSignal().Connect( this, &NewWindowController::OnLoseContextButtonClicked );
   mToolBar.AddControl( mLoseContextButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalRight, DemoHelper::DEFAULT_MODE_SWITCH_PADDING );
 
diff --git a/examples/radial-menu/radial-menu-example.cpp b/examples/radial-menu/radial-menu-example.cpp
index 7c964108..95f27e4e 100644
--- a/examples/radial-menu/radial-menu-example.cpp
+++ b/examples/radial-menu/radial-menu-example.cpp
@@ -33,7 +33,9 @@ const char* TEST_DIAL_FILENAME = DALI_IMAGE_DIR "layer4.png"; // Image to be mas
 const char* TOOLBAR_IMAGE( DALI_IMAGE_DIR "top-bar.png" ); // Background for toolbar
 const char* APPLICATION_TITLE( "Radial Menu" );
 const char * const PLAY_ICON( DALI_IMAGE_DIR "icon-play.png" );
+const char * const PLAY_ICON_SELECTED( DALI_IMAGE_DIR "icon-play-selected.png" );
 const char * const STOP_ICON( DALI_IMAGE_DIR "icon-stop.png" );
+const char * const STOP_ICON_SELECTED( DALI_IMAGE_DIR "icon-stop-selected.png" );
 }
 
 
@@ -107,7 +109,9 @@ private: // Member variables
   AnimState       mAnimationState;
 
   Image               mIconPlay;
+  Image               mIconPlaySelected;
   Image               mIconStop;
+  Image               mIconStopSelected;
   Toolkit::PushButton mPlayStopButton;
   ImageActor      mDialActor;
   RadialSweepView mRadialSweepView1;
@@ -145,9 +149,12 @@ void RadialMenuExample::OnInit(Application& app)
                                       APPLICATION_TITLE );
 
   mIconPlay = ResourceImage::New( PLAY_ICON );
+  mIconPlaySelected = ResourceImage::New( PLAY_ICON_SELECTED );
   mIconStop = ResourceImage::New( STOP_ICON );
+  mIconStopSelected = ResourceImage::New( STOP_ICON_SELECTED );
   mPlayStopButton = Toolkit::PushButton::New();
-  mPlayStopButton.SetBackgroundImage( mIconStop );
+  mPlayStopButton.SetButtonImage( mIconStop );
+  mPlayStopButton.SetSelectedImage( mIconStopSelected );
 
   mPlayStopButton.ClickedSignal().Connect( this, &RadialMenuExample::OnButtonClicked );
 
@@ -216,7 +223,8 @@ bool RadialMenuExample::OnButtonClicked( Toolkit::Button button )
     {
       mAnimation.Pause();
       mAnimationState = PAUSED;
-      mPlayStopButton.SetBackgroundImage( mIconPlay );
+      mPlayStopButton.SetButtonImage( mIconPlay );
+      mPlayStopButton.SetSelectedImage( mIconPlaySelected );
     }
     break;
 
@@ -224,13 +232,15 @@ bool RadialMenuExample::OnButtonClicked( Toolkit::Button button )
     {
       mAnimation.Play();
       mAnimationState = PLAYING;
-      mPlayStopButton.SetBackgroundImage( mIconStop );
+      mPlayStopButton.SetButtonImage( mIconStop );
+      mPlayStopButton.SetSelectedImage( mIconStopSelected );
     }
     break;
 
     case STOPPED:
     {
-      mPlayStopButton.SetBackgroundImage( mIconStop );
+      mPlayStopButton.SetButtonImage( mIconStop );
+      mPlayStopButton.SetSelectedImage( mIconStopSelected );
       mRadialSweepView1.Deactivate();
       mRadialSweepView2.Deactivate();
       mRadialSweepView3.Deactivate();
@@ -243,7 +253,8 @@ bool RadialMenuExample::OnButtonClicked( Toolkit::Button button )
 void RadialMenuExample::OnAnimationFinished( Animation& source )
 {
   mAnimationState = STOPPED;
-  mPlayStopButton.SetBackgroundImage( mIconPlay );
+  mPlayStopButton.SetButtonImage( mIconPlay );
+  mPlayStopButton.SetSelectedImage( mIconPlaySelected );
 }
 
 RadialSweepView RadialMenuExample::CreateSweepView( std::string imageName,
diff --git a/examples/refraction-effect/refraction-effect-example.cpp b/examples/refraction-effect/refraction-effect-example.cpp
index c192b52b..39feed35 100644
--- a/examples/refraction-effect/refraction-effect-example.cpp
+++ b/examples/refraction-effect/refraction-effect-example.cpp
@@ -34,7 +34,9 @@ namespace
 const char * const APPLICATION_TITLE( "Refraction Effect" );
 const char * const TOOLBAR_IMAGE( DALI_IMAGE_DIR "top-bar.png" );
 const char * const CHANGE_TEXTURE_ICON( DALI_IMAGE_DIR "icon-change.png" );
+const char * const CHANGE_TEXTURE_ICON_SELECTED( DALI_IMAGE_DIR "icon-change-selected.png" );
 const char * const CHANGE_MESH_ICON( DALI_IMAGE_DIR "icon-replace.png" );
+const char * const CHANGE_MESH_ICON_SELECTED( DALI_IMAGE_DIR "icon-replace-selected.png" );
 
 const char* MESH_FILES[] =
 {
@@ -255,7 +257,8 @@ private:
 
     // Add a button to change background. (right of toolbar)
     mChangeTextureButton = Toolkit::PushButton::New();
-    mChangeTextureButton.SetBackgroundImage( ResourceImage::New( CHANGE_TEXTURE_ICON ) );
+    mChangeTextureButton.SetButtonImage( ResourceImage::New( CHANGE_TEXTURE_ICON ) );
+    mChangeTextureButton.SetSelectedImage( ResourceImage::New( CHANGE_TEXTURE_ICON_SELECTED ) );
     mChangeTextureButton.ClickedSignal().Connect( this, &RefractionEffectExample::OnChangeTexture );
     toolBar.AddControl( mChangeTextureButton,
                         DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage,
@@ -263,7 +266,8 @@ private:
                         DemoHelper::DEFAULT_MODE_SWITCH_PADDING  );
     // Add a button to change mesh pattern. ( left of bar )
     mChangeMeshButton = Toolkit::PushButton::New();
-    mChangeMeshButton.SetBackgroundImage( ResourceImage::New( CHANGE_MESH_ICON ) );
+    mChangeMeshButton.SetButtonImage( ResourceImage::New( CHANGE_MESH_ICON ) );
+    mChangeMeshButton.SetSelectedImage( ResourceImage::New( CHANGE_MESH_ICON_SELECTED ) );
     mChangeMeshButton.ClickedSignal().Connect( this, &RefractionEffectExample::OnChangeMesh );
     toolBar.AddControl( mChangeMeshButton,
                         DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage,
diff --git a/examples/scroll-view/scroll-view-example.cpp b/examples/scroll-view/scroll-view-example.cpp
index 0485cadd..ce27bc4a 100644
--- a/examples/scroll-view/scroll-view-example.cpp
+++ b/examples/scroll-view/scroll-view-example.cpp
@@ -32,6 +32,7 @@ const char * const BACKGROUND_IMAGE( DALI_IMAGE_DIR "background-default.png" );
 const char * const TOOLBAR_IMAGE( DALI_IMAGE_DIR "top-bar.png" );
 const char * const APPLICATION_TITLE( "ScrollView" );
 const char * const EFFECT_CAROUSEL_IMAGE( DALI_IMAGE_DIR "icon-scroll-view-carousel.png" );
+const char * const EFFECT_CAROUSEL_IMAGE_SELECTED( DALI_IMAGE_DIR "icon-scroll-view-carousel-selected.png" );
 
 const Vector3 ICON_SIZE(100.0f, 100.0f, 0.0f);
 
@@ -173,9 +174,13 @@ public:
                                             "" );
 
     mEffectIcon[ PageCarouselEffect ] = ResourceImage::New( EFFECT_CAROUSEL_IMAGE );
+    mEffectIconSelected[ PageCarouselEffect ] = ResourceImage::New( EFFECT_CAROUSEL_IMAGE_SELECTED );
     mEffectIcon[ PageCubeEffect ]     = ResourceImage::New( EFFECT_CAROUSEL_IMAGE );
+    mEffectIconSelected[ PageCubeEffect ]     = ResourceImage::New( EFFECT_CAROUSEL_IMAGE_SELECTED );
     mEffectIcon[ PageSpiralEffect ]   = ResourceImage::New( EFFECT_CAROUSEL_IMAGE );
+    mEffectIconSelected[ PageSpiralEffect ]   = ResourceImage::New( EFFECT_CAROUSEL_IMAGE_SELECTED );
     mEffectIcon[ PageWaveEffect ]     = ResourceImage::New( EFFECT_CAROUSEL_IMAGE );
+    mEffectIconSelected[ PageWaveEffect ]     = ResourceImage::New( EFFECT_CAROUSEL_IMAGE_SELECTED );
 
     // Create a effect change button. (right of toolbar)
     mEffectChangeButton = Toolkit::PushButton::New();
@@ -239,7 +244,8 @@ private:
     ss << APPLICATION_TITLE << ": " << EFFECT_MODE_NAME[mEffectMode];
     SetTitle(ss.str());
 
-    mEffectChangeButton.SetBackgroundImage( mEffectIcon[ mEffectMode ] );
+    mEffectChangeButton.SetButtonImage( mEffectIcon[ mEffectMode ] );
+    mEffectChangeButton.SetSelectedImage( mEffectIconSelected[ mEffectMode ] );
 
     // remove old Effect if exists.
     if(mScrollViewEffect)
@@ -577,6 +583,7 @@ private:
   EffectMode mEffectMode;                               ///< Current Effect mode
 
   Image mEffectIcon[Total];                             ///< Icons for the effect button
+  Image mEffectIconSelected[Total];                     ///< Icons for the effect button when its selected
   Toolkit::PushButton mEffectChangeButton;              ///< Effect Change Button
 };
 
diff --git a/examples/shadow-bone-lighting/shadow-bone-lighting-example.cpp b/examples/shadow-bone-lighting/shadow-bone-lighting-example.cpp
index 7aad0c38..8e717a3d 100644
--- a/examples/shadow-bone-lighting/shadow-bone-lighting-example.cpp
+++ b/examples/shadow-bone-lighting/shadow-bone-lighting-example.cpp
@@ -39,7 +39,9 @@ const char* APPLICATION_TITLE_PAN_OBJECT( "Lighting: Rotate Object" );
 const char* APPLICATION_TITLE_PAN_SCENE( "Lighting: Pan Scene" );
 const char* APPLICATION_TITLE_ROTATE_SCENE( "Lighting: Rotate Scene" );
 const char* CHANGE_EFFECT_IMAGE( DALI_IMAGE_DIR "icon-change.png" );
+const char* CHANGE_EFFECT_IMAGE_SELECTED( DALI_IMAGE_DIR "icon-change-selected.png" );
 const char* RESET_ICON( DALI_IMAGE_DIR "icon-reset.png" );
+const char* RESET_ICON_SELECTED( DALI_IMAGE_DIR "icon-reset-selected.png" );
 
 const char* SCENE_IMAGE_1( DALI_IMAGE_DIR "gallery-small-10.jpg");
 const char* SCENE_IMAGE_2( DALI_IMAGE_DIR "gallery-small-42.jpg");
@@ -145,8 +147,10 @@ public:
 
     // Add an effect-changing button on the right of the tool bar.
     Image imageChangeEffect = ResourceImage::New( CHANGE_EFFECT_IMAGE );
+    Image imageChangeEffectSelected = ResourceImage::New( CHANGE_EFFECT_IMAGE_SELECTED );
     Toolkit::PushButton effectChangeButton = Toolkit::PushButton::New();
-    effectChangeButton.SetBackgroundImage(imageChangeEffect);
+    effectChangeButton.SetButtonImage( imageChangeEffect );
+    effectChangeButton.SetSelectedImage( imageChangeEffectSelected );
     effectChangeButton.ClickedSignal().Connect( this, &TestApp::OnEffectButtonClicked );
     toolBar.AddControl( effectChangeButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalRight, DemoHelper::DEFAULT_MODE_SWITCH_PADDING );
 
@@ -159,8 +163,10 @@ public:
 
     //Add a reset button
     Image resetImage = ResourceImage::New( RESET_ICON );
+    Image resetImageSelected = ResourceImage::New( RESET_ICON_SELECTED );
     Toolkit::PushButton resetButton = Toolkit::PushButton::New();
-    resetButton.SetBackgroundImage( resetImage );
+    resetButton.SetButtonImage( resetImage );
+    resetButton.SetSelectedImage( resetImageSelected );
     resetButton.ClickedSignal().Connect( this, &TestApp::OnResetPressed );
     toolBar.AddControl( resetButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalCenter, DemoHelper::DEFAULT_PLAY_PADDING );
 
diff --git a/examples/size-negotiation/size-negotiation-example.cpp b/examples/size-negotiation/size-negotiation-example.cpp
index d2a92b9c..f5b2b558 100644
--- a/examples/size-negotiation/size-negotiation-example.cpp
+++ b/examples/size-negotiation/size-negotiation-example.cpp
@@ -45,9 +45,7 @@ const char* const TOOLBAR_TITLE = "Negotiate Size";
 const int TOOLBAR_HEIGHT = 62;
 
 const char* MENU_ICON_IMAGE = DALI_IMAGE_DIR "icon-cluster-none.png";
-
-const char* const PUSHBUTTON_BUTTON_IMAGE = DALI_IMAGE_DIR "button-up.9.png";
-const char* const PUSHBUTTON_PRESS_IMAGE = DALI_IMAGE_DIR "button-down.9.png";
+const char* MENU_ICON_IMAGE_SELECTED = DALI_IMAGE_DIR "icon-cluster-none-selected.png";
 
 const char* const POPUPS_MENU_ID = "POPUPS_MENU";
 const char* const TABLEVIEW_MENU_ID = "TABLEVIEW_MENU";
@@ -178,7 +176,8 @@ public:
 
     // Create menu button
     Toolkit::PushButton viewButton = Toolkit::PushButton::New();
-    viewButton.SetBackgroundImage( ResourceImage::New( MENU_ICON_IMAGE ) );
+    viewButton.SetButtonImage( ResourceImage::New( MENU_ICON_IMAGE ) );
+    viewButton.SetSelectedImage( ResourceImage::New( MENU_ICON_IMAGE_SELECTED ) );
     viewButton.ClickedSignal().Connect( this, &SizeNegotiationController::OnMenu );
     mToolBar.AddControl( viewButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalLeft, DemoHelper::DEFAULT_MODE_SWITCH_PADDING  );
 
@@ -261,6 +260,8 @@ public:
       Toolkit::PushButton menuButton = Toolkit::PushButton::New();
       menuButton.SetName( MENU_ITEMS[ i ].name );
       menuButton.SetLabel( MENU_ITEMS[ i ].text );
+      menuButton.SetButtonImage( Actor() );
+      menuButton.SetSelectedImage( Actor() );
       menuButton.ClickedSignal().Connect( this, &SizeNegotiationController::OnMenuSelect );
 
       tableView.Add( menuButton );
@@ -354,8 +355,6 @@ public:
       Toolkit::PushButton okayButton = Toolkit::PushButton::New();
       okayButton.SetName( OKAY_BUTTON_ID );
       okayButton.SetLabel( "OK!" );
-      okayButton.SetSelectedImage( Dali::ResourceImage::New( PUSHBUTTON_PRESS_IMAGE ) );
-      okayButton.SetButtonImage( Dali::ResourceImage::New( PUSHBUTTON_BUTTON_IMAGE ) );
 
       okayButton.ClickedSignal().Connect( this, &SizeNegotiationController::OnButtonClicked );
 
@@ -370,8 +369,6 @@ public:
       Toolkit::PushButton cancelButton = Toolkit::PushButton::New();
       cancelButton.SetName( CANCEL_BUTTON_ID );
       cancelButton.SetLabel( "Cancel" );
-      cancelButton.SetSelectedImage( Dali::ResourceImage::New( PUSHBUTTON_PRESS_IMAGE ) );
-      cancelButton.SetButtonImage( Dali::ResourceImage::New( PUSHBUTTON_BUTTON_IMAGE ) );
 
       cancelButton.ClickedSignal().Connect( this, &SizeNegotiationController::OnButtonClicked );
 
@@ -380,8 +377,6 @@ public:
       Toolkit::PushButton okayButton = Toolkit::PushButton::New();
       okayButton.SetName( OKAY_BUTTON_ID );
       okayButton.SetLabel( "OK!" );
-      okayButton.SetSelectedImage( Dali::ResourceImage::New( PUSHBUTTON_PRESS_IMAGE ) );
-      okayButton.SetButtonImage( Dali::ResourceImage::New( PUSHBUTTON_BUTTON_IMAGE ) );
 
       okayButton.ClickedSignal().Connect( this, &SizeNegotiationController::OnButtonClicked );
 
@@ -397,8 +392,6 @@ public:
       Toolkit::PushButton cancelButton = Toolkit::PushButton::New();
       cancelButton.SetName( CANCEL_BUTTON_ID );
       cancelButton.SetLabel( "Cancel" );
-      cancelButton.SetSelectedImage( Dali::ResourceImage::New( PUSHBUTTON_PRESS_IMAGE ) );
-      cancelButton.SetButtonImage( Dali::ResourceImage::New( PUSHBUTTON_BUTTON_IMAGE ) );
 
       cancelButton.ClickedSignal().Connect( this, &SizeNegotiationController::OnButtonClicked );
 
@@ -407,8 +400,6 @@ public:
       Toolkit::PushButton okayButton = Toolkit::PushButton::New();
       okayButton.SetName( OKAY_BUTTON_ID );
       okayButton.SetLabel( "OK!" );
-      okayButton.SetSelectedImage( Dali::ResourceImage::New( PUSHBUTTON_PRESS_IMAGE ) );
-      okayButton.SetButtonImage( Dali::ResourceImage::New( PUSHBUTTON_BUTTON_IMAGE ) );
 
       okayButton.ClickedSignal().Connect( this, &SizeNegotiationController::OnButtonClicked );
 
@@ -523,8 +514,6 @@ public:
       Toolkit::PushButton cancelButton = Toolkit::PushButton::New();
       cancelButton.SetName( CANCEL_BUTTON_ID );
       cancelButton.SetLabel( "Cancel" );
-      cancelButton.SetSelectedImage( Dali::ResourceImage::New( PUSHBUTTON_PRESS_IMAGE ) );
-      cancelButton.SetButtonImage( Dali::ResourceImage::New( PUSHBUTTON_BUTTON_IMAGE ) );
 
       cancelButton.ClickedSignal().Connect( this, &SizeNegotiationController::OnButtonClicked );
 
@@ -533,8 +522,6 @@ public:
       Toolkit::PushButton okayButton = Toolkit::PushButton::New();
       okayButton.SetName( OKAY_BUTTON_ID );
       okayButton.SetLabel( "OK!" );
-      okayButton.SetSelectedImage( Dali::ResourceImage::New( PUSHBUTTON_PRESS_IMAGE ) );
-      okayButton.SetButtonImage( Dali::ResourceImage::New( PUSHBUTTON_BUTTON_IMAGE ) );
 
       okayButton.ClickedSignal().Connect( this, &SizeNegotiationController::OnButtonClicked );
 
@@ -585,11 +572,7 @@ public:
         root.SetFitWidth( 0 );
         root.SetPadding( Padding( 0.0f, 0.0f, 0.0f, 20.0f ) );
 
-        Dali::Image unchecked = Dali::ResourceImage::New( CHECKBOX_UNCHECKED_IMAGE );
-        Dali::Image checked = Dali::ResourceImage::New( CHECKBOX_CHECKED_IMAGE );
         Toolkit::CheckBoxButton checkBox = Toolkit::CheckBoxButton::New();
-        checkBox.SetBackgroundImage( unchecked );
-        checkBox.SetSelectedImage( checked );
         checkBox.SetSize( 48, 48 );
 
         root.AddChild( checkBox, Toolkit::TableView::CellPosition( 0, 0 ) );
@@ -609,8 +592,6 @@ public:
       Toolkit::PushButton cancelButton = Toolkit::PushButton::New();
       cancelButton.SetName( CANCEL_BUTTON_ID );
       cancelButton.SetLabel( "Cancel" );
-      cancelButton.SetSelectedImage( Dali::ResourceImage::New( PUSHBUTTON_PRESS_IMAGE ) );
-      cancelButton.SetButtonImage( Dali::ResourceImage::New( PUSHBUTTON_BUTTON_IMAGE ) );
 
       cancelButton.ClickedSignal().Connect( this, &SizeNegotiationController::OnButtonClicked );
 
@@ -619,8 +600,6 @@ public:
       Toolkit::PushButton okayButton = Toolkit::PushButton::New();
       okayButton.SetName( OKAY_BUTTON_ID );
       okayButton.SetLabel( "OK!" );
-      okayButton.SetSelectedImage( Dali::ResourceImage::New( PUSHBUTTON_PRESS_IMAGE ) );
-      okayButton.SetButtonImage( Dali::ResourceImage::New( PUSHBUTTON_BUTTON_IMAGE ) );
 
       okayButton.ClickedSignal().Connect( this, &SizeNegotiationController::OnButtonClicked );
 
@@ -1250,9 +1229,6 @@ public: // From ItemFactory
       popupButton.SetLabel( buttonDataArray[ itemId ].text );
       popupButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
 
-      popupButton.SetSelectedImage( Dali::ResourceImage::New( PUSHBUTTON_PRESS_IMAGE ) );
-      popupButton.SetButtonImage( Dali::ResourceImage::New( PUSHBUTTON_BUTTON_IMAGE ) );
-
       popupButton.ClickedSignal().Connect( this, &SizeNegotiationController::OnButtonClicked );
 
       return popupButton;
diff --git a/examples/text-field/text-field-example.cpp b/examples/text-field/text-field-example.cpp
index 3de4caf5..da5d43e7 100644
--- a/examples/text-field/text-field-example.cpp
+++ b/examples/text-field/text-field-example.cpp
@@ -86,6 +86,7 @@ public:
     ImageActor folderButton = ImageActor::New( image );
     folderButton.SetColor( Color::WHITE );
     button.SetButtonImage( folderButton );
+    button.SetSelectedImage( Actor() );
     button.SetAnchorPoint( AnchorPoint::TOP_LEFT );
     button.SetResizePolicy( ResizePolicy::FIXED, Dimension::ALL_DIMENSIONS );
     button.SetSize( image.GetWidth(), image.GetHeight() );
diff --git a/resources/images/button-disabled.9.png b/resources/images/button-disabled.9.png
deleted file mode 100644
index d9286e28..00000000
--- a/resources/images/button-disabled.9.png
+++ /dev/null
diff --git a/resources/images/button-down.9.png b/resources/images/button-down.9.png
deleted file mode 100644
index afff203a..00000000
--- a/resources/images/button-down.9.png
+++ /dev/null
diff --git a/resources/images/button-up.9.png b/resources/images/button-up.9.png
deleted file mode 100644
index 7a20d38f..00000000
--- a/resources/images/button-up.9.png
+++ /dev/null
diff --git a/resources/images/checkbox-selected.png b/resources/images/checkbox-selected.png
deleted file mode 100644
index e3a8c434..00000000
--- a/resources/images/checkbox-selected.png
+++ /dev/null
diff --git a/resources/images/checkbox-unselected.png b/resources/images/checkbox-unselected.png
deleted file mode 100644
index 58e93902..00000000
--- a/resources/images/checkbox-unselected.png
+++ /dev/null
diff --git a/resources/images/icon-change-selected.png b/resources/images/icon-change-selected.png
new file mode 100644
index 00000000..0f0bfd03
--- /dev/null
+++ b/resources/images/icon-change-selected.png
diff --git a/resources/images/icon-cluster-carousel-selected.png b/resources/images/icon-cluster-carousel-selected.png
new file mode 100644
index 00000000..a1577dc2
--- /dev/null
+++ b/resources/images/icon-cluster-carousel-selected.png
diff --git a/resources/images/icon-cluster-none-selected.png b/resources/images/icon-cluster-none-selected.png
new file mode 100644
index 00000000..1c09dff4
--- /dev/null
+++ b/resources/images/icon-cluster-none-selected.png
diff --git a/resources/images/icon-cluster-sphere-selected.png b/resources/images/icon-cluster-sphere-selected.png
new file mode 100644
index 00000000..5f512167
--- /dev/null
+++ b/resources/images/icon-cluster-sphere-selected.png
diff --git a/resources/images/icon-cluster-wobble-selected.png b/resources/images/icon-cluster-wobble-selected.png
new file mode 100644
index 00000000..9e2ef637
--- /dev/null
+++ b/resources/images/icon-cluster-wobble-selected.png
diff --git a/resources/images/icon-delete-selected.png b/resources/images/icon-delete-selected.png
new file mode 100644
index 00000000..fe74bd73
--- /dev/null
+++ b/resources/images/icon-delete-selected.png
diff --git a/resources/images/icon-edit-selected.png b/resources/images/icon-edit-selected.png
new file mode 100644
index 00000000..19a1854b
--- /dev/null
+++ b/resources/images/icon-edit-selected.png
diff --git a/resources/images/icon-effect-cross-selected.png b/resources/images/icon-effect-cross-selected.png
new file mode 100644
index 00000000..d648aa80
--- /dev/null
+++ b/resources/images/icon-effect-cross-selected.png
diff --git a/resources/images/icon-effect-fold-selected.png b/resources/images/icon-effect-fold-selected.png
new file mode 100644
index 00000000..8ef17ac9
--- /dev/null
+++ b/resources/images/icon-effect-fold-selected.png
diff --git a/resources/images/icon-effect-wave-selected.png b/resources/images/icon-effect-wave-selected.png
new file mode 100644
index 00000000..4073c510
--- /dev/null
+++ b/resources/images/icon-effect-wave-selected.png
diff --git a/resources/images/icon-effects-off-selected.png b/resources/images/icon-effects-off-selected.png
new file mode 100644
index 00000000..055c3618
--- /dev/null
+++ b/resources/images/icon-effects-off-selected.png
diff --git a/resources/images/icon-effects-on-selected.png b/resources/images/icon-effects-on-selected.png
new file mode 100644
index 00000000..88ad57fc
--- /dev/null
+++ b/resources/images/icon-effects-on-selected.png
diff --git a/resources/images/icon-highp-selected.png b/resources/images/icon-highp-selected.png
new file mode 100644
index 00000000..20d7f4c1
--- /dev/null
+++ b/resources/images/icon-highp-selected.png
diff --git a/resources/images/icon-insert-selected.png b/resources/images/icon-insert-selected.png
new file mode 100644
index 00000000..554597d4
--- /dev/null
+++ b/resources/images/icon-insert-selected.png
diff --git a/resources/images/icon-item-view-layout-depth-selected.png b/resources/images/icon-item-view-layout-depth-selected.png
new file mode 100644
index 00000000..d9190d6b
--- /dev/null
+++ b/resources/images/icon-item-view-layout-depth-selected.png
diff --git a/resources/images/icon-item-view-layout-grid-selected.png b/resources/images/icon-item-view-layout-grid-selected.png
new file mode 100644
index 00000000..3b7d52f4
--- /dev/null
+++ b/resources/images/icon-item-view-layout-grid-selected.png
diff --git a/resources/images/icon-item-view-layout-spiral-selected.png b/resources/images/icon-item-view-layout-spiral-selected.png
new file mode 100644
index 00000000..fc6bf302
--- /dev/null
+++ b/resources/images/icon-item-view-layout-spiral-selected.png
diff --git a/resources/images/icon-mediump-selected.png b/resources/images/icon-mediump-selected.png
new file mode 100644
index 00000000..de6d4126
--- /dev/null
+++ b/resources/images/icon-mediump-selected.png
diff --git a/resources/images/icon-play-selected.png b/resources/images/icon-play-selected.png
new file mode 100644
index 00000000..b3d557b7
--- /dev/null
+++ b/resources/images/icon-play-selected.png
diff --git a/resources/images/icon-replace-selected.png b/resources/images/icon-replace-selected.png
new file mode 100644
index 00000000..6fd8e0ff
--- /dev/null
+++ b/resources/images/icon-replace-selected.png
diff --git a/resources/images/icon-reset-selected.png b/resources/images/icon-reset-selected.png
new file mode 100644
index 00000000..f857e302
--- /dev/null
+++ b/resources/images/icon-reset-selected.png
diff --git a/resources/images/icon-scroll-view-carousel-selected.png b/resources/images/icon-scroll-view-carousel-selected.png
new file mode 100644
index 00000000..28eb53df
--- /dev/null
+++ b/resources/images/icon-scroll-view-carousel-selected.png
diff --git a/resources/images/icon-scroll-view-depth-selected.png b/resources/images/icon-scroll-view-depth-selected.png
new file mode 100644
index 00000000..2c127cb8
--- /dev/null
+++ b/resources/images/icon-scroll-view-depth-selected.png
diff --git a/resources/images/icon-scroll-view-inner-cube-selected.png b/resources/images/icon-scroll-view-inner-cube-selected.png
new file mode 100644
index 00000000..b98ab37a
--- /dev/null
+++ b/resources/images/icon-scroll-view-inner-cube-selected.png
diff --git a/resources/images/icon-scroll-view-outer-cube-selected.png b/resources/images/icon-scroll-view-outer-cube-selected.png
new file mode 100644
index 00000000..8777471d
--- /dev/null
+++ b/resources/images/icon-scroll-view-outer-cube-selected.png
diff --git a/resources/images/icon-scroll-view-spiral-selected.png b/resources/images/icon-scroll-view-spiral-selected.png
new file mode 100644
index 00000000..1485de8f
--- /dev/null
+++ b/resources/images/icon-scroll-view-spiral-selected.png
diff --git a/resources/images/icon-stop-selected.png b/resources/images/icon-stop-selected.png
new file mode 100644
index 00000000..3ee475b1
--- /dev/null
+++ b/resources/images/icon-stop-selected.png