Merge branch 'devel/master' into tizensubmit/tizen/20161115.111846accepted/tizen/wearable/20161115.234623accepted/tizen/tv/20161115.234548accepted/tizen/mobile/20161115.234506accepted/tizen/ivi/20161115.234657accepted/tizen/common/20161115.201044

Change-Id: Ia5d2cb474d0295d39dfd797a7d90886facb23d35

114 files changed, 6613 insertions, 1985 deletions

diff --git a/.gitignore b/.gitignore
index 4f0ee135..c714b70d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -38,3 +38,8 @@ dali-builder
 *.mo
 demo-theme.json
 simple-image-wall.js
+/shared/resources-location.cpp
+/build/tizen/documentation.list
+/debugfiles.list
+/debuglinks.list
+/debugsources.list
diff --git a/README b/README
deleted file mode 100644
index 05417af8..00000000
--- a/README
+++ /dev/null
@@ -1,90 +0,0 @@
-T.O.C.
-======
-
- 1.   GBS Builds
- 1.1. NON-SMACK Targets
- 1.2. SMACK enabled Targets
- 1.3. DEBUG Builds
- 2.   Building for Ubuntu desktop
- 2.1. Minimum Requirements
- 2.2. Building the Repository
- 2.3. DEBUG Builds
- 3.   Creating an example
- 4.   Installing Emscripten examples
-
-
-1. GBS Builds
-=============
-
-1.1. NON-SMACK Targets
-----------------------
-
- gbs build -A [TARGET_ARCH]
-
-1.2. SMACK enabled Targets
---------------------------
-
- gbs build -A [TARGET_ARCH] --define "%enable_dali_smack_rules 1"
-
-1.3. DEBUG Builds
------------------
-
- gbs build -A [TARGET_ARCH] --define "%enable_debug 1"
-
-
-
-2. Building for Ubuntu desktop
-==============================
-
-2.1. Minimum Requirements
-------------------------
-
- - Ubuntu 14.04
- - Environment created using dali_env script in dali-core repository
-
-2.2. Building the Repository
-----------------------------
-
-To build the repository enter the 'build/tizen' folder:
-
- cd dali-demo/build/tizen
-
-Then run the following commands:
-
- cmake -DCMAKE_INSTALL_PREFIX=$DESKTOP_PREFIX .
- make install -j8
-
-2.3. DEBUG Builds
------------------
-
-Specify a debug build when building for desktop by passing the following parameter to cmake:
-
- cmake -DCMAKE_INSTALL_PREFIX=$DESKTOP_PREFIX -DCMAKE_BUILD_TYPE=Debug .
-
-Before running make install as normal:
-
- make install -j8
-
-
-3. Creating an example
-======================
-
- - Make a directory in the "examples" directory. Only one example will be created per directory.
- - The executable installed will have a ".example" appended to it, e.g. a "blocks" directory produces "blocks.example".
- - Add all source files for the required example in this directory.
- - Modify "com.samsung.dali-demo.xml" to include your example so that it can be launched on target.
- - No changes are required to the make system as long as the above is followed, your example will be automatically built & installed.
-
-
-4. Installing Emscripten Examples
-=================================
-
-Some Emscripten Javascript examples are included in dali-demo.
-
-They do not require building, to install them run the provided install script.
-Note: Your dali-env must be setup as it will install to your dali-env/opt/share/emscripten directory.
-
-# cd ./emscripten-examples
-# ./install.sh
-
-Run the examples by either opening them in a browser, or, running the browser from the command line with an example as a parameter.
diff --git a/README.md b/README.md
new file mode 100644
index 00000000..3de790b2
--- /dev/null
+++ b/README.md
@@ -0,0 +1,79 @@
+<img src="https://dalihub.github.io/images/DaliLogo320x200.png">
+
+# Table of Contents
+
+   * [Build Instructions](#build-instructions)
+      * [1. Building for Ubuntu desktop](#1-building-for-ubuntu-desktop)
+         * [Minimum Requirements](#minimum-requirements)
+         * [Building the Repository](#building-the-repository)
+         * [DEBUG Builds](#debug-builds)
+      * [2. GBS Builds](#2-gbs-builds)
+         * [NON-SMACK Targets](#non-smack-targets)
+         * [SMACK enabled Targets](#smack-enabled-targets)
+         * [DEBUG Builds](#debug-builds-1)
+   * [Creating an example](#creating-an-example)
+   * [Installing Emscripten Examples](#installing-emscripten-examples)
+
+# Build Instructions
+
+## 1. Building for Ubuntu desktop
+
+### Minimum Requirements
+
+ - Ubuntu 14.04 or later
+ - Environment created using dali_env script in dali-core repository
+
+### Building the Repository
+
+To build the repository enter the 'build/tizen' folder:
+
+         $ cd dali-demo/build/tizen
+
+Then run the following commands:
+
+         $ cmake -DCMAKE_INSTALL_PREFIX=$DESKTOP_PREFIX .
+         $ make install -j8
+
+### DEBUG Builds
+
+Specify a debug build when building for desktop by passing the following parameter to cmake:
+
+         $ cmake -DCMAKE_INSTALL_PREFIX=$DESKTOP_PREFIX -DCMAKE_BUILD_TYPE=Debug .
+
+Before running make install as normal:
+
+         $ make install -j8
+
+## 2. GBS Builds
+
+### NON-SMACK Targets
+
+         $ gbs build -A [TARGET_ARCH]
+
+### SMACK enabled Targets
+
+         $ gbs build -A [TARGET_ARCH] --define "%enable_dali_smack_rules 1"
+
+### DEBUG Builds
+
+         $ gbs build -A [TARGET_ARCH] --define "%enable_debug 1"
+
+# Creating an example
+
+ - Make a directory in the "examples" directory. Only one example will be created per directory.
+ - The executable installed will have a ".example" appended to it, e.g. a "blocks" directory produces "blocks.example".
+ - Add all source files for the required example in this directory.
+ - Modify "com.samsung.dali-demo.xml" to include your example so that it can be launched on target.
+ - No changes are required to the make system as long as the above is followed, your example will be automatically built & installed.
+
+# Installing Emscripten Examples
+
+Some Emscripten Javascript examples are included in dali-demo.
+
+They do not require building, to install them run the provided install script.
+Note: Your dali-env must be setup as it will install to your dali-env/opt/share/emscripten directory.
+
+         $ cd ./emscripten-examples
+         $ ./install.sh
+
+Run the examples by either opening them in a browser, or, running the browser from the command line with an example as a parameter.
diff --git a/build/tizen/CMakeLists.txt b/build/tizen/CMakeLists.txt
index 75b8a55e..1f119ad9 100644
--- a/build/tizen/CMakeLists.txt
+++ b/build/tizen/CMakeLists.txt
@@ -5,17 +5,22 @@ SET(dali-demo_VERSION_MAJOR 1)
 SET(dali-demo_VERSION_MINOR 0)
 
 SET(ROOT_SRC_DIR ${CMAKE_SOURCE_DIR}/../..)
+SET(DEMO_SHARED ${CMAKE_SOURCE_DIR}/../../shared)
 
 SET(PREFIX ${CMAKE_INSTALL_PREFIX})
 
 IF(DEFINED DALI_APP_DIR)
-        SET(APP_DATA_DIR ${DALI_APP_DIR})
-        SET(BINDIR ${APP_DATA_DIR}/bin)
+        SET(BINDIR ${DALI_APP_DIR}/bin)
 ELSE()
-        SET(APP_DATA_DIR ${PREFIX}/share/com.samsung.dali-demo)
         SET(BINDIR ${PREFIX}/bin)
 ENDIF()
 
+IF(DEFINED DALI_APP_RES_DIR)
+        SET(APP_DATA_RES_DIR ${DALI_APP_RES_DIR})
+ELSE()
+        SET(APP_DATA_RES_DIR ${PREFIX}/share/com.samsung.dali-demo/res)
+ENDIF()
+
 MESSAGE( STATUS "CMAKE_BUILD_TYPE: " ${CMAKE_BUILD_TYPE} )
 if(CMAKE_BUILD_TYPE MATCHES Debug)
     MESSAGE("Setting variable: DEBUG_ENABLED")
@@ -31,11 +36,11 @@ IF(NOT DEFINED LOCAL_STYLE_DIR)
         SET(LOCAL_STYLE_DIR ${RESOURCE_DIR}/style)
 ENDIF()
 
-SET(IMAGES_DIR ${APP_DATA_DIR}/images/)
-SET(VIDEOS_DIR ${APP_DATA_DIR}/videos/)
-SET(MODELS_DIR ${APP_DATA_DIR}/models/)
-SET(SCRIPTS_DIR ${APP_DATA_DIR}/scripts/)
-SET(STYLE_DIR ${APP_DATA_DIR}/style/)
+SET(IMAGES_DIR ${APP_DATA_RES_DIR}/images/)
+SET(VIDEOS_DIR ${APP_DATA_RES_DIR}/videos/)
+SET(MODELS_DIR ${APP_DATA_RES_DIR}/models/)
+SET(SCRIPTS_DIR ${APP_DATA_RES_DIR}/scripts/)
+SET(STYLE_DIR ${APP_DATA_RES_DIR}/style/)
 
 IF(NOT DEFINED LOCALE_DIR)
         SET(LOCALE_DIR ${PREFIX}/share/locale)
@@ -46,11 +51,13 @@ SET(DEMO_VIDEO_DIR \\"${VIDEOS_DIR}\\")
 SET(DEMO_MODEL_DIR \\"${MODELS_DIR}\\")
 SET(DEMO_SCRIPT_DIR \\"${SCRIPTS_DIR}\\")
 SET(DEMO_STYLE_DIR \\"${STYLE_DIR}\\")
-SET(DEMO_THEME_PATH \\"${STYLE_DIR}/demo-theme.json\\")
+SET(DEMO_THEME_PATH \\"${STYLE_DIR}demo-theme.json\\")
 SET(DEMO_EXAMPLE_BIN \\"${BINDIR}/\\")
 SET(DEMO_LOCALE_DIR \\"${LOCALE_DIR}\\")
 SET(DEMO_LANG \\"${LANG}\\")
 
+SET(DEMO_STYLE_IMAGE_DIR ${STYLE_DIR}/images)
+
 FILE(GLOB LOCAL_IMAGES_PNG RELATIVE  "${LOCAL_IMAGES_DIR}" "${LOCAL_IMAGES_DIR}/*.png")
 FILE(GLOB LOCAL_IMAGES_JPG RELATIVE  "${LOCAL_IMAGES_DIR}" "${LOCAL_IMAGES_DIR}/*.jpg")
 FILE(GLOB LOCAL_IMAGES_GIF RELATIVE  "${LOCAL_IMAGES_DIR}" "${LOCAL_IMAGES_DIR}/*.gif")
@@ -81,12 +88,28 @@ FOREACH(flag ${LOCAL_SCRIPTS_LIST})
         INSTALL(FILES ${LOCAL_SCRIPTS_DIR}/${flag} DESTINATION ${SCRIPTS_DIR})
 ENDFOREACH(flag)
 
+#Create resources location file
+CONFIGURE_FILE( resources-location.in ${DEMO_SHARED}/resources-location.cpp )
+
 #Replace @DEMO_STYLE_IMAGE_DIR@ in following files
-SET(DEMO_STYLE_IMAGE_DIR ${IMAGES_DIR})
 CONFIGURE_FILE( ${LOCAL_STYLE_DIR}/demo-theme.json.in ${LOCAL_STYLE_DIR}/demo-theme.json )
-INSTALL(FILES ${LOCAL_STYLE_DIR}/demo-theme.json DESTINATION ${STYLE_DIR})
-CONFIGURE_FILE( ${LOCAL_SCRIPTS_DIR}/simple-image-wall.js.in ${LOCAL_SCRIPTS_DIR}/simple-image-wall.js )
-INSTALL(FILES ${LOCAL_SCRIPTS_DIR}/simple-image-wall.js DESTINATION ${SCRIPTS_DIR})
+CONFIGURE_FILE( ${LOCAL_STYLE_DIR}/contact-cards-example-theme.json.in ${LOCAL_STYLE_DIR}/contact-cards-example-theme.json )
+CONFIGURE_FILE( ${LOCAL_STYLE_DIR}/style-example-theme-one.json.in ${LOCAL_STYLE_DIR}/style-example-theme-one.json )
+CONFIGURE_FILE( ${LOCAL_STYLE_DIR}/style-example-theme-two.json.in ${LOCAL_STYLE_DIR}/style-example-theme-two.json )
+CONFIGURE_FILE( ${LOCAL_STYLE_DIR}/style-example-theme-three.json.in ${LOCAL_STYLE_DIR}/style-example-theme-three.json )
+MESSAGE("Configured ${LOCAL_STYLE_DIR}/style-example-theme<>.json files")
+
+FILE(GLOB LOCAL_STYLES_LIST "${LOCAL_STYLE_DIR}/*.json")
+FOREACH(flag ${LOCAL_STYLES_LIST})
+  INSTALL(FILES ${flag} DESTINATION ${STYLE_DIR})
+ENDFOREACH(flag)
+MESSAGE("Installed ${LOCAL_STYLES_LIST} to ${STYLE_DIR}")
+
+FILE(GLOB LOCAL_STYLE_IMAGES_LIST "${LOCAL_STYLE_DIR}/images/*.png")
+FOREACH(flag ${LOCAL_STYLE_IMAGES_LIST})
+  INSTALL(FILES ${flag} DESTINATION ${STYLE_DIR}/images)
+ENDFOREACH(flag)
+MESSAGE("Installed style resources ${LOCAL_STYLE_IMAGES_LIST} to ${STYLE_DIR}/images")
 
 SET(PKG_LIST dali-core
              dali-adaptor
@@ -99,7 +122,7 @@ FOREACH(flag ${REQUIRED_PKGS_CFLAGS})
         SET(REQUIRED_CFLAGS "${REQUIRED_CFLAGS} ${flag}")
 ENDFOREACH(flag)
 
-SET(DALI_DEMO_CFLAGS "-DDEMO_IMAGE_DIR=${DEMO_IMAGE_DIR} -DDEMO_VIDEO_DIR=${DEMO_VIDEO_DIR} -DDEMO_MODEL_DIR=${DEMO_MODEL_DIR} -DDEMO_SCRIPT_DIR=${DEMO_SCRIPT_DIR} -DDEMO_THEME_PATH=${DEMO_THEME_PATH} -DDEMO_EXAMPLE_BIN=${DEMO_EXAMPLE_BIN} -DDEMO_LOCALE_DIR=${DEMO_LOCALE_DIR} -fvisibility=hidden -DHIDE_DALI_INTERNALS -DDEMO_LANG=${DEMO_LANG}")
+SET(DALI_DEMO_CFLAGS "-DDEMO_IMAGE_DIR=${DEMO_IMAGE_DIR} -DDEMO_VIDEO_DIR=${DEMO_VIDEO_DIR} -DDEMO_MODEL_DIR=${DEMO_MODEL_DIR} -DDEMO_SCRIPT_DIR=${DEMO_SCRIPT_DIR} -DDEMO_STYLE_DIR=${DEMO_STYLE_DIR} -DDEMO_THEME_PATH=${DEMO_THEME_PATH} -DDEMO_EXAMPLE_BIN=${DEMO_EXAMPLE_BIN} -DDEMO_LOCALE_DIR=${DEMO_LOCALE_DIR} -fvisibility=hidden -DHIDE_DALI_INTERNALS -DDEMO_LANG=${DEMO_LANG}")
 
 ###########################################################################
 # Internationalization
diff --git a/build/tizen/demo/CMakeLists.txt b/build/tizen/demo/CMakeLists.txt
index affd6209..6aaf0325 100644
--- a/build/tizen/demo/CMakeLists.txt
+++ b/build/tizen/demo/CMakeLists.txt
@@ -2,6 +2,12 @@ SET(DEMO_SRC_DIR ${ROOT_SRC_DIR}/demo)
 
 AUX_SOURCE_DIRECTORY(${DEMO_SRC_DIR} DEMO_SRCS)
 
+
+IF(NOT DEFINED DALI_APP_RES_DIR)
+  message([STATUS] "Setting application resource path from resource-location file")
+  SET( DEMO_SRCS ${DEMO_SRCS} "${ROOT_SRC_DIR}/shared/resources-location.cpp")
+ENDIF()
+
 ADD_EXECUTABLE(${PROJECT_NAME} ${DEMO_SRCS})
 TARGET_LINK_LIBRARIES(${PROJECT_NAME} ${REQUIRED_PKGS_LDFLAGS} -pie)
 
diff --git a/build/tizen/examples/CMakeLists.txt b/build/tizen/examples/CMakeLists.txt
index 7fa03fe0..d83f4270 100644
--- a/build/tizen/examples/CMakeLists.txt
+++ b/build/tizen/examples/CMakeLists.txt
@@ -15,6 +15,10 @@ SUBDIRLIST(SUBDIRS ${EXAMPLES_SRC_DIR})
 
 FOREACH(EXAMPLE ${SUBDIRS})
   FILE(GLOB SRCS "${EXAMPLES_SRC_DIR}/${EXAMPLE}/*.cpp")
+  IF(NOT DEFINED DALI_APP_RES_DIR)
+    SET( SRCS ${SRCS} "${ROOT_SRC_DIR}/shared/resources-location.cpp")
+
+  ENDIF()
   ADD_EXECUTABLE(${EXAMPLE}.example ${SRCS})
   TARGET_LINK_LIBRARIES(${EXAMPLE}.example ${REQUIRED_PKGS_LDFLAGS} -pie)
   INSTALL(TARGETS ${EXAMPLE}.example DESTINATION ${BINDIR})
diff --git a/build/tizen/resources-location.in b/build/tizen/resources-location.in
new file mode 100644
index 00000000..89b0b870
--- /dev/null
+++ b/build/tizen/resources-location.in
@@ -0,0 +1,8 @@
+/**
+ * This file defines the location dali-demo resources
+   It is used exclusively for Ubuntu builds where an application resource directory is explicity defined.
+ */
+
+#include <cstdlib>
+
+int dali_demo_RESOURCE_DIR = setenv("DALI_APPLICATION_PACKAGE",  "@APP_DATA_RES_DIR@" , 1);
diff --git a/com.samsung.dali-demo.xml b/com.samsung.dali-demo.xml
index 6c856c36..14e92da6 100644
--- a/com.samsung.dali-demo.xml
+++ b/com.samsung.dali-demo.xml
@@ -55,9 +55,6 @@
 	<ui-application appid="motion-stretch.example" exec="/usr/apps/com.samsung.dali-demo/bin/motion-stretch.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
 		<label>Motion Stretch</label>
 	</ui-application>
-	<ui-application appid="radial-menu.example" exec="/usr/apps/com.samsung.dali-demo/bin/radial-menu.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
-		<label>Radial Menu</label>
-	</ui-application>
 	<ui-application appid="refraction-effect.example" exec="/usr/apps/com.samsung.dali-demo/bin/refraction-effect.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
 		<label>Refraction effect</label>
 	</ui-application>
@@ -67,7 +64,7 @@
 	<ui-application appid="scroll-view.example" exec="/usr/apps/com.samsung.dali-demo/bin/scroll-view.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
 		<label>Scroll View</label>
 	</ui-application>
-	<ui-application appid="shadow-bone-lighting.example" exec="/usr/apps/com.samsung.dali-demo/bin/shadow-bone-lighting.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
+	<ui-application appid="shadows-and-lights.example" exec="/usr/apps/com.samsung.dali-demo/bin/shadows-and-lights.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
 		<label>Shadows and Lights</label>
 	</ui-application>
 	<ui-application appid="dali-builder" exec="/usr/apps/com.samsung.dali-demo/bin/dali-builder" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
@@ -109,9 +106,6 @@
 	<ui-application appid="animated-shapes.example" exec="/usr/apps/com.samsung.dali-demo/bin/animated-shapes.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
 		<label>Animated shapes</label>
 	</ui-application>
-	<ui-application appid="path-animation.example" exec="/usr/apps/com.samsung.dali-demo/bin/path-animation.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
-		<label>Path Animation</label>
-	</ui-application>
 	<ui-application appid="atlas.example" exec="/usr/apps/com.samsung.dali-demo/bin/atlas.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
 		<label>Atlas</label>
 	</ui-application>
@@ -169,4 +163,13 @@
 	<ui-application appid="primitive-shapes.example" exec="/usr/apps/com.samsung.dali-demo/bin/primitive-shapes.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
 		<label>Primitive Shapes</label>
 	</ui-application>
+	<ui-application appid="styling.example" exec="/usr/apps/com.samsung.dali-demo/bin/styling.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
+		<label>Styling</label>
+	</ui-application>
+	<ui-application appid="progress-bar.example" exec="/usr/apps/com.samsung.dali-demo/bin/progress-bar.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
+		<label>Progress Bar</label>
+	</ui-application>
+	<ui-application appid="contact-cards.example" exec="/usr/apps/com.samsung.dali-demo/bin/contact-cards.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
+		<label>Contact Cards</label>
+	</ui-application>
 </manifest>
diff --git a/demo/dali-demo.cpp b/demo/dali-demo.cpp
index d9444a52..8c8142aa 100644
--- a/demo/dali-demo.cpp
+++ b/demo/dali-demo.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2014 Samsung Electronics Co., Ltd.
+ * 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.
@@ -36,6 +36,7 @@ int DALI_EXPORT_API main(int argc, char **argv)
   // Create the demo launcher
   DaliTableView demo(app);
 
+  demo.AddExample(Example("animated-shapes.example", DALI_DEMO_STR_TITLE_ANIMATED_SHAPES));
   demo.AddExample(Example("bubble-effect.example", DALI_DEMO_STR_TITLE_BUBBLES));
   demo.AddExample(Example("blocks.example", DALI_DEMO_STR_TITLE_BLOCKS));
   demo.AddExample(Example("cube-transition-effect.example", DALI_DEMO_STR_TITLE_CUBE_TRANSITION));
@@ -46,10 +47,9 @@ int DALI_EXPORT_API main(int argc, char **argv)
   demo.AddExample(Example("motion-blur.example", DALI_DEMO_STR_TITLE_MOTION_BLUR));
   demo.AddExample(Example("motion-stretch.example", DALI_DEMO_STR_TITLE_MOTION_STRETCH));
   demo.AddExample(Example("page-turn-view.example", DALI_DEMO_STR_TITLE_PAGE_TURN_VIEW));
-  demo.AddExample(Example("radial-menu.example", DALI_DEMO_STR_TITLE_RADIAL_MENU));
   demo.AddExample(Example("refraction-effect.example", DALI_DEMO_STR_TITLE_REFRACTION));
   demo.AddExample(Example("scroll-view.example", DALI_DEMO_STR_TITLE_SCROLL_VIEW));
-  demo.AddExample(Example("shadow-bone-lighting.example", DALI_DEMO_STR_TITLE_LIGHTS_AND_SHADOWS));
+  demo.AddExample(Example("shadows-and-lights.example", DALI_DEMO_STR_TITLE_LIGHTS_AND_SHADOWS));
   demo.AddExample(Example("builder.example", DALI_DEMO_STR_TITLE_SCRIPT_BASED_UI));
   demo.AddExample(Example("image-scaling-and-filtering.example", DALI_DEMO_STR_TITLE_IMAGE_FITTING_SAMPLING));
   demo.AddExample(Example("image-scaling-irregular-grid.example", DALI_DEMO_STR_TITLE_IMAGE_SCALING));
@@ -80,6 +80,10 @@ int DALI_EXPORT_API main(int argc, char **argv)
   demo.AddExample(Example("native-image-source.example", DALI_DEMO_STR_TITLE_NATIVE_IMAGE_SOURCE));
   demo.AddExample(Example("mesh-visual.example", DALI_DEMO_STR_TITLE_MESH_VISUAL));
   demo.AddExample(Example("primitive-shapes.example", DALI_DEMO_STR_TITLE_PRIMITIVE_SHAPES));
+  demo.AddExample(Example("styling.example", DALI_DEMO_STR_TITLE_STYLING));
+  demo.AddExample(Example("sparkle.example", DALI_DEMO_STR_TITLE_SPARKLE));
+  demo.AddExample(Example("progress-bar.example", DALI_DEMO_STR_TITLE_PROGRESS_BAR));
+  demo.AddExample(Example("contact-cards.example", DALI_DEMO_STR_TITLE_CONTACT_CARDS));
 
   demo.SortAlphabetically( true );
 
diff --git a/demo/dali-table-view.cpp b/demo/dali-table-view.cpp
index daebe612..1de6db94 100644
--- a/demo/dali-table-view.cpp
+++ b/demo/dali-table-view.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2015 Samsung Electronics Co., Ltd.
+ * 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.
@@ -25,9 +25,12 @@
 #include <dali/devel-api/images/distance-field.h>
 #include <dali-toolkit/devel-api/shader-effects/alpha-discard-effect.h>
 #include <dali-toolkit/devel-api/shader-effects/distance-field-effect.h>
+#include <dali-toolkit/dali-toolkit.h>
+#include <dali-toolkit/devel-api/visual-factory/visual-factory.h>
 
 // INTERNAL INCLUDES
 #include "shared/view.h"
+#include "shared/utility.h"
 
 using namespace Dali;
 using namespace Dali::Toolkit;
@@ -38,13 +41,22 @@ namespace
 {
 
 const std::string LOGO_PATH( DEMO_IMAGE_DIR "Logo-for-demo.png" );
-const std::string DEFAULT_TOOLBAR_IMAGE_PATH( DEMO_IMAGE_DIR "top-bar.png" );
 const std::string TILE_BACKGROUND(DEMO_IMAGE_DIR "item-background.9.png");
-const std::string TILE_BACKGROUND_ALPHA(DEMO_IMAGE_DIR "item-background-alpha.9.png");
-
-const char * const DEFAULT_TOOLBAR_TEXT( "TOUCH TO LAUNCH EXAMPLE" );
-
-const float BUTTON_PRESS_ANIMATION_TIME = 0.25f;                ///< Time to perform button scale effect.
+const std::string TILE_BACKGROUND_ALPHA( DEMO_IMAGE_DIR "demo-tile-texture.9.png" );
+const std::string TILE_FOCUS( DEMO_IMAGE_DIR "tile-focus.9.png" );
+
+// Keyboard focus effect constants.
+const float KEYBOARD_FOCUS_ANIMATION_DURATION = 1.0f;           ///< The total duration of the keyboard focus animation
+const float KEYBOARD_FOCUS_START_SCALE = 1.05f;                 ///< The starting scale of the focus highlight
+const float KEYBOARD_FOCUS_END_SCALE = 1.18f;                   ///< The end scale of the focus highlight
+const float KEYBOARD_FOCUS_END_ALPHA = 0.7f;                    ///< The end alpha of the focus highlight
+const float KEYBOARD_FOCUS_INITIAL_FADE_PERCENTAGE = 0.16f;     ///< The duration of the initial fade (from translucent to the end-alpha) as a percentage of the overal animation duration.
+const Vector3 startScale( KEYBOARD_FOCUS_START_SCALE, KEYBOARD_FOCUS_START_SCALE, KEYBOARD_FOCUS_START_SCALE ); ///< @see KEYBOARD_FOCUS_START_SCALE
+const Vector3 endScale( KEYBOARD_FOCUS_END_SCALE, KEYBOARD_FOCUS_END_SCALE, KEYBOARD_FOCUS_END_SCALE );         ///< @see KEYBOARD_FOCUS_END_SCALE
+const float initialFadeDuration = KEYBOARD_FOCUS_ANIMATION_DURATION * KEYBOARD_FOCUS_INITIAL_FADE_PERCENTAGE;   ///< @see KEYBOARD_FOCUS_INITIAL_FADE_PERCENTAGE
+
+const float TILE_LABEL_PADDING = 8.0f;                          ///< Border between edge of tile and the example text
+const float BUTTON_PRESS_ANIMATION_TIME = 0.35f;                ///< Time to perform button scale effect.
 const float ROTATE_ANIMATION_TIME = 0.5f;                       ///< Time to perform rotate effect.
 const int MAX_PAGES = 256;                                      ///< Maximum pages (arbitrary safety limit)
 const int EXAMPLES_PER_ROW = 3;
@@ -52,20 +64,21 @@ const int ROWS_PER_PAGE = 3;
 const int EXAMPLES_PER_PAGE = EXAMPLES_PER_ROW * ROWS_PER_PAGE;
 const float LOGO_MARGIN_RATIO = 0.1f / 0.3f;
 const float BOTTOM_PADDING_RATIO = 0.4f / 0.9f;
-const Vector3 SCROLLVIEW_RELATIVE_SIZE(0.9f, 1.0f, 0.8f );     ///< ScrollView's relative size to its parent
+const Vector3 SCROLLVIEW_RELATIVE_SIZE(0.9f, 1.0f, 0.8f );      ///< ScrollView's relative size to its parent
 const Vector3 TABLE_RELATIVE_SIZE(0.95f, 0.9f, 0.8f );          ///< TableView's relative size to the entire stage. The Y value means sum of the logo and table relative heights.
 const float STENCIL_RELATIVE_SIZE = 1.0f;
 
 const float EFFECT_SNAP_DURATION = 0.66f;                       ///< Scroll Snap Duration for Effects
 const float EFFECT_FLICK_DURATION = 0.5f;                       ///< Scroll Flick Duration for Effects
 const Vector3 ANGLE_CUBE_PAGE_ROTATE(Math::PI * 0.5f, Math::PI * 0.5f, 0.0f);
+const Vector4 TILE_COLOR( 0.4f, 0.6f, 0.9f, 0.6f );
 
 const Vector4 BUBBLE_COLOR[] =
 {
-  Vector4( 0.3255f, 0.3412f, 0.6353f, 0.38f ),
-  Vector4( 0.3647f, 0.7569f, 0.8157f, 0.38f ),
-  Vector4( 0.3804f, 0.7412f, 0.6510f, 0.38f ),
-  Vector4( 1.f, 1.f, 1.f, 0.2f )
+  Vector4( 0.3255f, 0.3412f, 0.6353f, 0.32f ),
+  Vector4( 0.3647f, 0.7569f, 0.8157f, 0.32f ),
+  Vector4( 0.3804f, 0.7412f, 0.6510f, 0.32f ),
+  Vector4( 1.f, 1.f, 1.f, 0.13f )
 };
 const int NUMBER_OF_BUBBLE_COLOR( sizeof(BUBBLE_COLOR) / sizeof(BUBBLE_COLOR[0]) );
 
@@ -83,6 +96,31 @@ const Vector4 BACKGROUND_COLOR( 0.3569f, 0.5451f, 0.7294f, 1.0f );
 const float BUBBLE_MIN_Z = -1.0;
 const float BUBBLE_MAX_Z = 0.0f;
 
+// This shader takes a texture.
+// An alpha discard is performed.
+// The shader uses the tiles position within the scroll-view page and the scroll-views rotation position to create a parallax effect.
+const char* FRAGMENT_SHADER_TEXTURED = DALI_COMPOSE_SHADER(
+  varying mediump vec2  vTexCoord;
+  varying mediump vec3  vIllumination;
+  uniform lowp    vec4  uColor;
+  uniform sampler2D     sTexture;
+  uniform mediump vec3  uCustomPosition;
+
+  void main()
+  {
+    if( texture2D( sTexture, vTexCoord ).a <= 0.0001 )
+    {
+      discard;
+    }
+
+    mediump vec2 wrapTexCoord = vec2( ( vTexCoord.x / 4.0 ) + ( uCustomPosition.x / 4.0 ) + ( uCustomPosition.z / 2.0 ), vTexCoord.y / 4.0 );
+    mediump vec4 color = texture2D( sTexture, wrapTexCoord );
+    mediump float positionWeight = ( uCustomPosition.y + 0.3 ) * color.r * 2.0;
+
+    gl_FragColor = vec4( positionWeight, positionWeight, positionWeight, 0.9 ) * uColor + vec4( uColor.xyz, 0.0 );
+  }
+);
+
 /**
  * Creates the background image
  */
@@ -90,12 +128,11 @@ Control CreateBackground( std::string stylename )
 {
   Control background = Control::New();
   Stage::GetCurrent().Add( background );
-  background.SetProperty( Control::Property::STYLE_NAME,stylename);
+  background.SetStyleName( stylename );
   background.SetName( "BACKGROUND" );
   background.SetAnchorPoint( AnchorPoint::CENTER );
   background.SetParentOrigin( ParentOrigin::CENTER );
   background.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
-
   return background;
 }
 
@@ -131,6 +168,41 @@ private:
   float mScale;
 };
 
+/**
+ * Constraint to precalculate values from the scroll-view
+ * and tile positions to pass to the tile shader.
+ */
+struct TileShaderPositionConstraint
+{
+  TileShaderPositionConstraint( float pageWidth, float tileXOffset )
+  : mPageWidth( pageWidth ),
+    mTileXOffset( tileXOffset )
+  {
+  }
+
+  void operator()( Vector3& position, const PropertyInputContainer& inputs )
+  {
+    // Set up position.x as the tiles X offset (0.0 -> 1.0).
+    position.x = mTileXOffset;
+    // Set up position.z as the linear scroll-view X offset (0.0 -> 1.0).
+    position.z = 1.0f * ( -fmod( inputs[0]->GetVector2().x, mPageWidth ) / mPageWidth );
+    // Set up position.y as a rectified version of the scroll-views X offset.
+    // IE. instead of 0.0 -> 1.0, it moves between 0.0 -> 0.5 -> 0.0 within the same span.
+    if( position.z > 0.5f )
+    {
+      position.y = 1.0f - position.z;
+    }
+    else
+    {
+      position.y = position.z;
+    }
+  }
+
+private:
+  float mPageWidth;
+  float mTileXOffset;
+};
+
 bool CompareByTitle( const Example& lhs, const Example& rhs )
 {
   return lhs.title < rhs.title;
@@ -140,11 +212,9 @@ bool CompareByTitle( const Example& lhs, const Example& rhs )
 
 DaliTableView::DaliTableView( Application& application )
 : mApplication( application ),
-  mBackgroundLayer(),
   mRootActor(),
   mRotateAnimation(),
   mPressedAnimation(),
-  mScrollViewLayer(),
   mScrollView(),
   mScrollViewEffect(),
   mScrollRulerX(),
@@ -181,60 +251,35 @@ void DaliTableView::SortAlphabetically( bool sortAlphabetically )
 void DaliTableView::Initialize( Application& application )
 {
   Stage::GetCurrent().KeyEventSignal().Connect( this, &DaliTableView::OnKeyEvent );
-
   const Vector2 stageSize = Stage::GetCurrent().GetSize();
 
   // Background
-  Control background = CreateBackground( "launcherbackground" );
-  Stage::GetCurrent().Add( background );
-
-  // Add root actor
-  mRootActor = TableView::New( 4, 1 );
-  mRootActor.SetAnchorPoint( AnchorPoint::CENTER );
-  mRootActor.SetParentOrigin( ParentOrigin::CENTER );
-  mRootActor.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
+  mRootActor = CreateBackground( "LauncherBackground" );
   Stage::GetCurrent().Add( mRootActor );
 
-  // Toolbar at top
-  Dali::Toolkit::ToolBar toolbar;
-  Dali::Layer toolBarLayer = DemoHelper::CreateToolbar(toolbar,
-                                                       DEFAULT_TOOLBAR_IMAGE_PATH,
-                                                       DEFAULT_TOOLBAR_TEXT,
-                                                       DemoHelper::DEFAULT_VIEW_STYLE);
-
-  mRootActor.AddChild( toolBarLayer, TableView::CellPosition( 0, 0 ) );
-  mRootActor.SetFitHeight( 0 );
-
   // Add logo
   ImageView logo = CreateLogo( LOGO_PATH );
   logo.SetName( "LOGO_IMAGE" );
+  logo.SetAnchorPoint( AnchorPoint::TOP_CENTER );
+  logo.SetParentOrigin( Vector3( 0.5f, 0.1f, 0.5f ) );
   logo.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
-  const float paddingHeight = ( ( 1.f-TABLE_RELATIVE_SIZE.y ) * stageSize.y );
-  const float logoMargin = paddingHeight * LOGO_MARGIN_RATIO;
+  // The logo should appear on top of everything.
+  logo.SetDrawMode( DrawMode::OVERLAY_2D );
+  mRootActor.Add( logo );
 
   // Show version in a popup when log is tapped
   mLogoTapDetector = TapGestureDetector::New();
   mLogoTapDetector.Attach( logo );
   mLogoTapDetector.DetectedSignal().Connect( this, &DaliTableView::OnLogoTapped );
 
-  const float bottomMargin = paddingHeight * BOTTOM_PADDING_RATIO;
-
-  Alignment alignment = Alignment::New();
-  alignment.SetName( "LOGO_ALIGNMENT" );
-  alignment.Add( logo );
-  alignment.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
-  alignment.SetResizePolicy( ResizePolicy::FIT_TO_CHILDREN, Dimension::HEIGHT );
-  Actor alignmentActor = alignment;
-  alignmentActor.SetPadding( Padding( 0.0f, 0.0f, logoMargin, logoMargin ));
-  mRootActor.AddChild( alignment, TableView::CellPosition( 1, 0 ) );
-  mRootActor.SetFitHeight( 1 );
-
-  // scrollview occupying the majority of the screen
+  // Scrollview occupying the majority of the screen
   mScrollView = ScrollView::New();
+  mScrollView.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
+  mScrollView.SetParentOrigin( Vector3( 0.5f, 1.0f - 0.05f, 0.5f ) );
+  mScrollView.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+  mScrollView.SetResizePolicy( ResizePolicy::SIZE_RELATIVE_TO_PARENT, Dimension::HEIGHT );
+  mScrollView.SetSizeModeFactor( Vector3( 0.0f, 0.6f, 0.0f ) );
 
-  mScrollView.SetAnchorPoint( AnchorPoint::CENTER );
-  mScrollView.SetParentOrigin( ParentOrigin::CENTER );
-  mScrollView.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
   const float buttonsPageMargin = ( 1.0f - TABLE_RELATIVE_SIZE.x ) * 0.5f * stageSize.width;
   mScrollView.SetPadding( Padding( buttonsPageMargin, buttonsPageMargin, 0.0f, 0.0f ) );
 
@@ -243,42 +288,17 @@ void DaliTableView::Initialize( Application& application )
   mScrollView.ScrollStartedSignal().Connect( this, &DaliTableView::OnScrollStart );
   mScrollView.TouchSignal().Connect( this, &DaliTableView::OnScrollTouched );
 
-  mScrollViewLayer = Layer::New();
-
-  // Disable the depth test for performance
-  mScrollViewLayer.SetDepthTestDisabled( true );
-  mScrollViewLayer.SetAnchorPoint( AnchorPoint::CENTER );
-  mScrollViewLayer.SetParentOrigin( ParentOrigin::CENTER );
-  mScrollViewLayer.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
-
-  // Create solid background colour.
-  Control backgroundColourActor = Control::New();
-  backgroundColourActor.SetBackgroundColor( BACKGROUND_COLOR );
-  backgroundColourActor.SetAnchorPoint( AnchorPoint::CENTER );
-  backgroundColourActor.SetParentOrigin( ParentOrigin::CENTER );
-  backgroundColourActor.SetResizePolicy( ResizePolicy::SIZE_RELATIVE_TO_PARENT, Dimension::ALL_DIMENSIONS );
-  backgroundColourActor.SetSizeModeFactor( Vector3( 1.0f, 1.5f, 1.0f ) );
-
-  mScrollViewLayer.Add( backgroundColourActor );
+  mPageWidth = stageSize.width * TABLE_RELATIVE_SIZE.x * 0.5f;
 
   // Populate background and bubbles - needs to be scrollViewLayer so scroll ends show
   Actor bubbleContainer = Actor::New();
   bubbleContainer.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
   bubbleContainer.SetAnchorPoint( AnchorPoint::CENTER );
   bubbleContainer.SetParentOrigin( ParentOrigin::CENTER );
-  backgroundColourActor.Add( bubbleContainer );
-
   SetupBackground( bubbleContainer );
 
-  Alignment buttonsAlignment = Alignment::New();
-  buttonsAlignment.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
-  buttonsAlignment.Add( mScrollViewLayer );
-
-  mScrollViewLayer.Add( mScrollView );
-
-  mRootActor.AddChild( buttonsAlignment, TableView::CellPosition( 2, 0 ) );
-
-  mRootActor.SetFixedHeight( 3, bottomMargin );
+  mRootActor.Add( bubbleContainer );
+  mRootActor.Add( mScrollView );
 
   // Add scroll view effect and setup constraints on pages
   ApplyScrollViewEffect();
@@ -307,9 +327,50 @@ void DaliTableView::Initialize( Application& application )
   mAnimationTimer.Start();
   mBackgroundAnimsPlaying = true;
 
+  CreateFocusEffect();
+}
+
+void DaliTableView::CreateFocusEffect()
+{
+  // Hook the required signals to manage the focus.
   KeyboardFocusManager::Get().PreFocusChangeSignal().Connect( this, &DaliTableView::OnKeyboardPreFocusChange );
   KeyboardFocusManager::Get().FocusedActorEnterKeySignal().Connect( this, &DaliTableView::OnFocusedActorActivated );
   AccessibilityManager::Get().FocusedActorActivatedSignal().Connect( this, &DaliTableView::OnFocusedActorActivated );
+
+  // Loop to create both actors for the focus highlight effect.
+  for( unsigned int i = 0; i < FOCUS_ANIMATION_ACTOR_NUMBER; ++i )
+  {
+    mFocusEffect[i].actor = ImageView::New( TILE_FOCUS );
+    mFocusEffect[i].actor.SetParentOrigin( ParentOrigin::CENTER );
+    mFocusEffect[i].actor.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
+    mFocusEffect[i].actor.SetInheritScale( false );
+    mFocusEffect[i].actor.SetColorMode( USE_OWN_COLOR );
+
+    // Setup initial values pre-animation.
+    mFocusEffect[i].actor.SetScale( startScale );
+    mFocusEffect[i].actor.SetOpacity( 0.0f );
+
+    // Create and setup the animation to do the following:
+    //   1) Initial fade in over short period of time
+    //   2) Zoom in (larger) and fade out simultaneously over longer period of time.
+    mFocusEffect[i].animation = Animation::New( KEYBOARD_FOCUS_ANIMATION_DURATION );
+
+    mFocusEffect[i].animation.AnimateTo( Property( mFocusEffect[i].actor, Actor::Property::COLOR_ALPHA ), KEYBOARD_FOCUS_END_ALPHA, AlphaFunction::LINEAR, TimePeriod( 0.0f, initialFadeDuration ) );
+    mFocusEffect[i].animation.AnimateTo( Property( mFocusEffect[i].actor, Actor::Property::SCALE ), endScale, AlphaFunction::LINEAR, TimePeriod( initialFadeDuration, KEYBOARD_FOCUS_ANIMATION_DURATION - initialFadeDuration ) );
+    mFocusEffect[i].animation.AnimateTo( Property( mFocusEffect[i].actor, Actor::Property::COLOR_ALPHA ), 0.0f, AlphaFunction::LINEAR, TimePeriod( initialFadeDuration, KEYBOARD_FOCUS_ANIMATION_DURATION - initialFadeDuration ) );
+
+    mFocusEffect[i].animation.SetLooping( true );
+  }
+
+  // Parent the secondary effect from the primary.
+  mFocusEffect[0].actor.Add( mFocusEffect[1].actor );
+
+  // Play the animation on the 1st glow object.
+  mFocusEffect[0].animation.Play();
+  // Stagger the animation on the 2st glow object half way through.
+  mFocusEffect[1].animation.PlayFrom( KEYBOARD_FOCUS_ANIMATION_DURATION / 2.0f );
+
+  KeyboardFocusManager::Get().SetFocusIndicatorActor( mFocusEffect[0].actor );
 }
 
 void DaliTableView::ApplyCubeEffectToPages()
@@ -325,7 +386,6 @@ void DaliTableView::ApplyCubeEffectToPages()
 
 void DaliTableView::OnButtonsPageRelayout( const Dali::Actor& actor )
 {
-
 }
 
 void DaliTableView::Populate()
@@ -364,7 +424,9 @@ void DaliTableView::Populate()
         {
           const Example& example = ( *iter );
 
-          Actor tile = CreateTile( example.name, example.title, Vector3( tileParentMultiplier, tileParentMultiplier, 1.0f ), true );
+          // Calculate the tiles relative position on the page (between 0 & 1 in each dimension).
+          Vector2 position( static_cast<float>( column ) / ( EXAMPLES_PER_ROW - 1.0f ), static_cast<float>( row ) / ( EXAMPLES_PER_ROW - 1.0f ) );
+          Actor tile = CreateTile( example.name, example.title, Vector3( tileParentMultiplier, tileParentMultiplier, 1.0f ), position );
           AccessibilityManager accessibilityManager = AccessibilityManager::Get();
           accessibilityManager.SetFocusOrder( tile, ++exampleCount );
           accessibilityManager.SetAccessibilityAttribute( tile, Dali::Toolkit::AccessibilityManager::ACCESSIBILITY_LABEL,
@@ -374,7 +436,6 @@ void DaliTableView::Populate()
                                                   "You can run this example" );
 
           tile.SetPadding( Padding( margin, margin, margin, margin ) );
-
           page.AddChild( tile, TableView::CellPosition( row, column ) );
 
           iter++;
@@ -405,7 +466,7 @@ void DaliTableView::Populate()
   }
 
   // Update Ruler info.
-  mScrollRulerX = new FixedRuler( stageSize.width * TABLE_RELATIVE_SIZE.x * 0.5f );
+  mScrollRulerX = new FixedRuler( mPageWidth );
   mScrollRulerY = new DefaultRuler();
   mScrollRulerX->SetDomain( RulerDomain( 0.0f, (mTotalPages+1) * stageSize.width * TABLE_RELATIVE_SIZE.x * 0.5f, true ) );
   mScrollRulerY->Disable();
@@ -436,63 +497,71 @@ void DaliTableView::Rotate( unsigned int degrees )
   mRotateAnimation.Play();
 }
 
-Actor DaliTableView::CreateTile( const std::string& name, const std::string& title, const Dali::Vector3& sizeMultiplier, bool addBackground )
+Actor DaliTableView::CreateTile( const std::string& name, const std::string& title, const Dali::Vector3& sizeMultiplier, Vector2& position )
 {
-  Actor content = Actor::New();
-  content.SetName( name );
-  content.SetAnchorPoint( AnchorPoint::CENTER );
-  content.SetParentOrigin( ParentOrigin::CENTER );
-  content.SetResizePolicy( ResizePolicy::SIZE_RELATIVE_TO_PARENT, Dimension::ALL_DIMENSIONS );
-  content.SetSizeModeFactor( sizeMultiplier );
+  Actor focusableTile = Actor::New();
+  focusableTile.SetParentOrigin( ParentOrigin::CENTER );
+  focusableTile.SetResizePolicy( ResizePolicy::SIZE_RELATIVE_TO_PARENT, Dimension::ALL_DIMENSIONS );
+  focusableTile.SetSizeModeFactor( sizeMultiplier );
+  focusableTile.SetName( name );
 
-  // create background image
-  if( addBackground )
-  {
-    ImageView image = ImageView::New( TILE_BACKGROUND );
-    image.SetAnchorPoint( AnchorPoint::CENTER );
-    image.SetParentOrigin( ParentOrigin::CENTER );
-    // make the image 100% of tile
-    image.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
-
-    content.Add( image );
-
-    // Add stencil
-    Toolkit::ImageView stencil = NewStencilImage();
-    stencil.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
-    image.Add( stencil );
-  }
+  // Set the tile to be keyboard focusable
+  focusableTile.SetKeyboardFocusable( true );
+
+  Toolkit::ImageView tileContent = ImageView::New();
+  tileContent.SetParentOrigin( ParentOrigin::CENTER );
+  tileContent.SetAnchorPoint( AnchorPoint::CENTER );
+  tileContent.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
+
+  // Add the image via the property first.
+  tileContent.SetProperty( Toolkit::ImageView::Property::IMAGE, TILE_BACKGROUND_ALPHA );
+  // Register a property with the ImageView. This allows us to inject the scroll-view position into the shader.
+  Property::Value value = Vector3( 0.0f, 0.0f, 0.0f );
+  Property::Index propertyIndex = tileContent.RegisterProperty( "uCustomPosition", value );
+
+  // Add a shader to the image (details in shader source).
+  Property::Map map;
+  Property::Map customShader;
+  customShader[ Visual::Shader::Property::FRAGMENT_SHADER ] = FRAGMENT_SHADER_TEXTURED;
+  map[ Visual::Property::SHADER ] = customShader;
+  tileContent.SetProperty( Toolkit::ImageView::Property::IMAGE, map );
+  tileContent.SetColor( TILE_COLOR );
+
+  // We create a constraint to perform a precalculation on the scroll-view X offset
+  // and pass it to the shader uniform, along with the tile's position.
+  Constraint shaderPosition = Constraint::New < Vector3 > ( tileContent, propertyIndex, TileShaderPositionConstraint( mPageWidth, position.x ) );
+  shaderPosition.AddSource( Source( mScrollView, ScrollView::Property::SCROLL_POSITION ) );
+  shaderPosition.SetRemoveAction( Constraint::Discard );
+  shaderPosition.Apply();
+  focusableTile.Add( tileContent );
+
+  // Create an ImageView for the 9-patch border around the tile.
+  ImageView borderImage = ImageView::New( TILE_BACKGROUND );
+  borderImage.SetAnchorPoint( AnchorPoint::CENTER );
+  borderImage.SetParentOrigin( ParentOrigin::CENTER );
+  borderImage.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
+  borderImage.SetOpacity( 0.8f );
+  tileContent.Add( borderImage );
 
   TextLabel label = TextLabel::New();
-  label.SetAnchorPoint( AnchorPoint::TOP_LEFT );
-  label.SetProperty( Control::Property::STYLE_NAME, "launcherlabel" );
+  label.SetAnchorPoint( AnchorPoint::CENTER );
+  label.SetParentOrigin( ParentOrigin::CENTER );
+  label.SetStyleName( "LauncherLabel" );
   label.SetProperty( TextLabel::Property::MULTI_LINE, true );
   label.SetProperty( TextLabel::Property::TEXT, title );
   label.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" );
   label.SetProperty( TextLabel::Property::VERTICAL_ALIGNMENT, "CENTER" );
   label.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::HEIGHT );
-  content.Add( label );
-
-  // Set the tile to be keyboard focusable
-  content.SetKeyboardFocusable(true);
-
-  // connect to the touch events
-  content.TouchSignal().Connect( this, &DaliTableView::OnTilePressed );
-  content.HoveredSignal().Connect( this, &DaliTableView::OnTileHovered );
-
-  return content;
-}
 
-Toolkit::ImageView DaliTableView::NewStencilImage()
-{
-  Toolkit::ImageView stencil = ImageView::New( TILE_BACKGROUND_ALPHA );
-  stencil.SetParentOrigin( ParentOrigin::CENTER );
-  stencil.SetAnchorPoint( AnchorPoint::CENTER );
-  stencil.SetDrawMode( DrawMode::STENCIL );
+  // Pad around the label as its size is the same as the 9-patch border. It will overlap it without padding.
+  label.SetPadding( Padding( TILE_LABEL_PADDING, TILE_LABEL_PADDING, TILE_LABEL_PADDING, TILE_LABEL_PADDING ) );
+  focusableTile.Add( label );
 
-  Property::Map shaderEffect = CreateAlphaDiscardEffect();
-  stencil.SetProperty( Toolkit::ImageView::Property::IMAGE, shaderEffect );
+  // Connect to the touch events
+  focusableTile.TouchSignal().Connect( this, &DaliTableView::OnTilePressed );
+  focusableTile.HoveredSignal().Connect( this, &DaliTableView::OnTileHovered );
 
-  return stencil;
+  return focusableTile;
 }
 
 bool DaliTableView::OnTilePressed( Actor actor, const TouchData& event )
@@ -538,10 +607,14 @@ bool DaliTableView::DoTilePress( Actor actor, PointState::Type pointState )
 
       // scale the content actor within the Tile, as to not affect the placement within the Table.
       Actor content = actor.GetChildAt(0);
-      mPressedAnimation.AnimateTo( Property( content, Actor::Property::SCALE ), Vector3( 0.9f, 0.9f, 1.0f ), AlphaFunction::EASE_IN_OUT,
+      mPressedAnimation.AnimateTo( Property( content, Actor::Property::SCALE ), Vector3( 0.7f, 0.7f, 1.0f ), AlphaFunction::EASE_IN_OUT,
                                  TimePeriod( 0.0f, BUTTON_PRESS_ANIMATION_TIME * 0.5f ) );
       mPressedAnimation.AnimateTo( Property( content, Actor::Property::SCALE ), Vector3::ONE, AlphaFunction::EASE_IN_OUT,
                                  TimePeriod( BUTTON_PRESS_ANIMATION_TIME * 0.5f, BUTTON_PRESS_ANIMATION_TIME * 0.5f ) );
+
+      // Rotate button on the Y axis when pressed.
+      mPressedAnimation.AnimateBy( Property( content, Actor::Property::ORIENTATION ), Quaternion( Degree( 0.0f ), Degree( 180.0f ), Degree( 0.0f ) ) );
+
       mPressedAnimation.Play();
       mPressedAnimation.FinishedSignal().Connect( this, &DaliTableView::OnPressedAnimationFinished );
     }
@@ -658,14 +731,16 @@ void DaliTableView::OnKeyEvent( const KeyEvent& event )
 
 void DaliTableView::SetupBackground( Actor bubbleContainer )
 {
-  // Create distance field shape.
-  BufferImage distanceField;
+  // Create distance field shapes.
+  BufferImage distanceFields[2];
   Size imageSize( 512, 512 );
-  CreateShapeImage( CIRCLE, imageSize, distanceField );
+
+  CreateShapeImage( CIRCLE, imageSize, distanceFields[0] );
+  CreateShapeImage( BUBBLE, imageSize, distanceFields[1] );
 
   // Add bubbles to the bubbleContainer.
   // Note: The bubbleContainer is parented externally to this function.
-  AddBackgroundActors( bubbleContainer, NUM_BACKGROUND_IMAGES, distanceField );
+  AddBackgroundActors( bubbleContainer, NUM_BACKGROUND_IMAGES, distanceFields );
 }
 
 void DaliTableView::InitialiseBackgroundActors( Actor actor )
@@ -681,7 +756,7 @@ void DaliTableView::InitialiseBackgroundActors( Actor actor )
     Actor child = actor.GetChildAt( i );
 
     // Calculate a random position
-    Vector3 childPos( Random::Range( -size.x * 0.5f * BACKGROUND_SPREAD_SCALE, size.x * 0.5f * BACKGROUND_SPREAD_SCALE ),
+    Vector3 childPos( Random::Range( -size.x * 0.5f * BACKGROUND_SPREAD_SCALE, size.x * 0.85f * BACKGROUND_SPREAD_SCALE ),
                       Random::Range( -size.y, size.y ),
                       Random::Range( BUBBLE_MIN_Z, BUBBLE_MAX_Z ) );
 
@@ -704,12 +779,13 @@ void DaliTableView::InitialiseBackgroundActors( Actor actor )
   }
 }
 
-void DaliTableView::AddBackgroundActors( Actor layer, int count, BufferImage distanceField )
+void DaliTableView::AddBackgroundActors( Actor layer, int count, BufferImage* distanceField )
 {
   for( int i = 0; i < count; ++i )
   {
     float randSize = Random::Range( 10.0f, 400.0f );
-    ImageView dfActor = ImageView::New( distanceField );
+    int distanceFieldType = static_cast<int>( Random::Range( 0.0f, 1.0f ) + 0.5f );
+    ImageView dfActor = ImageView::New( distanceField[ distanceFieldType ] );
     dfActor.SetSize( Vector2( randSize, randSize ) );
     dfActor.SetParentOrigin( ParentOrigin::CENTER );
 
@@ -738,8 +814,8 @@ void DaliTableView::CreateShapeImage( ShapeType shapeType, const Size& size, Buf
     case CIRCLE:
       GenerateCircle( size, imageDataA8 );
       break;
-    case SQUARE:
-      GenerateSquare( size, imageDataA8 );
+    case BUBBLE:
+      GenerateCircle( size, imageDataA8, true );
       break;
     default:
       break;
@@ -753,18 +829,7 @@ void DaliTableView::CreateShapeImage( ShapeType shapeType, const Size& size, Buf
   }
 }
 
-void DaliTableView::GenerateSquare( const Size& size, std::vector< unsigned char >& distanceFieldOut )
-{
-  for( int h = 0; h < size.height; ++h )
-  {
-    for( int w = 0; w < size.width; ++w )
-    {
-      distanceFieldOut.push_back( 0xFF );
-    }
-  }
-}
-
-void DaliTableView::GenerateCircle( const Size& size, std::vector< unsigned char >& distanceFieldOut )
+void DaliTableView::GenerateCircle( const Size& size, std::vector< unsigned char >& distanceFieldOut, bool hollow )
 {
   const float radius = size.width * 0.5f * size.width * 0.5f;
   Vector2 center( size.width / 2, size.height / 2 );
@@ -776,14 +841,12 @@ void DaliTableView::GenerateCircle( const Size& size, std::vector< unsigned char
       Vector2 pos( w, h );
       Vector2 dist = pos - center;
 
-      if( dist.x * dist.x + dist.y * dist.y > radius )
-      {
-        distanceFieldOut.push_back( 0x00 );
-      }
-      else
-      {
-        distanceFieldOut.push_back( 0xFF );
-      }
+      float distance = ( dist.x * dist.x ) + ( dist.y * dist.y );
+
+      // If hollow, check the distance against a min & max value, otherwise just use the max value.
+      unsigned char fillByte = ( hollow ? ( ( distance <= radius ) && ( distance > ( radius * 0.7f ) ) ) : ( distance <= radius ) ) ? 0xFF : 0x00;
+
+      distanceFieldOut.push_back( fillByte );
     }
   }
 }
@@ -841,12 +904,12 @@ Dali::Actor DaliTableView::OnKeyboardPreFocusChange( Dali::Actor current, Dali::
 {
   Actor nextFocusActor = proposed;
 
-  if ( !current && !proposed  )
+  if( !current && !proposed  )
   {
     // Set the initial focus to the first tile in the current page should be focused.
     nextFocusActor = mPages[mScrollView.GetCurrentPage()].GetChildAt(0);
   }
-  else if( !proposed || (proposed && proposed == mScrollViewLayer) )
+  else if( !proposed )
   {
     // ScrollView is being focused but nothing in the current page can be focused further
     // in the given direction. We should work out which page to scroll to next.
diff --git a/demo/dali-table-view.h b/demo/dali-table-view.h
index 749000bf..c91f2fca 100644
--- a/demo/dali-table-view.h
+++ b/demo/dali-table-view.h
@@ -1,8 +1,8 @@
-#ifndef __DALI_DEMO_H__
-#define __DALI_DEMO_H__
+#ifndef DALI_DEMO_H
+#define DALI_DEMO_H
 
 /*
- * Copyright (c) 2015 Samsung Electronics Co., Ltd.
+ * 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.
@@ -32,7 +32,6 @@ typedef std::vector<Dali::Animation> AnimationList;
 typedef AnimationList::iterator AnimationListIter;
 typedef AnimationList::const_iterator AnimationListConstIter;
 
-
 /**
  * Example information
  *
@@ -97,13 +96,15 @@ public:
 
 private: // Application callbacks & implementation
 
+  static const unsigned int FOCUS_ANIMATION_ACTOR_NUMBER = 2; ///< The number of elements used to form the custom focus effect
+
   /**
    * Shape enum for create function
    */
   enum ShapeType
   {
     CIRCLE,
-    SQUARE
+    BUBBLE
   };
 
   /**
@@ -135,23 +136,16 @@ private: // Application callbacks & implementation
   void Rotate( unsigned int degrees );
 
   /**
-   * Creates a tile for the main menu and toolbar.
+   * Creates a tile for the main menu.
    *
    * @param[in] name The unique name for this Tile
    * @param[in] title The text caption that appears on the Tile
    * @param[in] parentSize Tile's parent size.
-   * @param[in] addBackground Whether to add a background graphic to the tile or not
+   * @param[in] position The tiles relative position within a page
    *
    * @return The Actor for the created tile.
    */
-  Dali::Actor CreateTile( const std::string& name, const std::string& title, const Dali::Vector3& sizeMultiplier, bool addBackground );
-
-  /**
-   * Create a stencil image
-   *
-   * @return The stencil image
-   */
-  Dali::Toolkit::ImageView NewStencilImage();
+  Dali::Actor CreateTile( const std::string& name, const std::string& title, const Dali::Vector3& sizeMultiplier, Dali::Vector2& position );
 
   // Signal handlers
 
@@ -268,9 +262,9 @@ private: // Application callbacks & implementation
    *
    * @param[in] layer The layer to add the actors to
    * @param[in] count The number of actors to generate
-   * @param[in] distanceField The distance field bitmap to use
+   * @param[in] distanceField A array (pointer) to 2 distance field types to use
    */
-  void AddBackgroundActors( Dali::Actor layer, int count, Dali::BufferImage distanceField );
+  void AddBackgroundActors( Dali::Actor layer, int count, Dali::BufferImage* distanceField );
 
   /**
    * Create a bitmap with the specified shape and also output a distance field
@@ -296,8 +290,9 @@ private: // Application callbacks & implementation
    * @param[in] size The size of the bitmap to create
    * @param[out] imageOut The return bitmap
    * @param[out] distanceFieldOut The return depth field alpha map
+   * @param[in] hollow Optional - Set to true for a thick circle outline without fill
    */
-  void GenerateCircle( const Dali::Size& size, std::vector<unsigned char>& distanceFieldOut );
+  void GenerateCircle( const Dali::Size& size, std::vector<unsigned char>& distanceFieldOut, bool hollow = false );
 
   /**
    * Creates the logo.
@@ -326,6 +321,11 @@ private: // Application callbacks & implementation
   void PlayAnimation();
 
   /**
+   * @brief Creates and sets up the custom effect used for the keyboard (and mouse) focus.
+   */
+  void CreateFocusEffect();
+
+  /**
    * Callback when the keyboard focus is going to be changed.
    *
    * @param[in] current The current focused actor
@@ -363,6 +363,12 @@ private: // Application callbacks & implementation
  void OnButtonsPageRelayout( const Dali::Actor& actor );
 
  /**
+  * @brief The is connected to the keyboard focus highlight actor, and called when it is placed on stage.
+  * @param[in] actor The actor that has been placed on stage.
+  */
+ void OnStageConnect( Dali::Actor actor );
+
+ /**
   * @brief Callback called to set up background actors
   *
   * @param[in] actor The actor raising the callback
@@ -372,11 +378,9 @@ private: // Application callbacks & implementation
 private:
 
   Dali::Application&              mApplication;              ///< Application instance.
-  Dali::Layer                     mBackgroundLayer;          ///< Background resides on a separate layer.
-  Dali::Toolkit::TableView        mRootActor;                ///< All content (excluding background is anchored to this Actor)
+  Dali::Toolkit::Control          mRootActor;                ///< All content (excluding background is anchored to this Actor)
   Dali::Animation                 mRotateAnimation;          ///< Animation to rotate and resize mRootActor.
   Dali::Animation                 mPressedAnimation;         ///< Button press scaling animation.
-  Dali::Layer                     mScrollViewLayer;          ///< ScrollView resides on a separate layer.
   Dali::Toolkit::ScrollView       mScrollView;               ///< ScrollView container (for all Examples)
   Dali::Toolkit::ScrollViewEffect mScrollViewEffect;         ///< Effect to be applied to the scroll view
   Dali::Toolkit::RulerPtr         mScrollRulerX;             ///< ScrollView X (horizontal) ruler
@@ -386,10 +390,21 @@ private:
   Dali::TapGestureDetector        mLogoTapDetector;          ///< To detect taps on the logo
   Dali::Toolkit::Popup            mVersionPopup;             ///< Displays DALi library version information
 
+  /**
+   * This struct encapsulates all data relevant to each of the elements used within the custom keyboard focus effect.
+   */
+  struct FocusEffect
+  {
+    Dali::Toolkit::ImageView        actor;                   ///< The parent keyboard focus highlight actor
+    Dali::Animation                 animation;               ///< The animation for the parent keyboard focus highlight actor
+  };
+  FocusEffect mFocusEffect[FOCUS_ANIMATION_ACTOR_NUMBER];    ///< The elements used to create the custom focus effect
+
   std::vector< Dali::Actor >      mPages;                    ///< List of pages.
   AnimationList                   mBackgroundAnimations;     ///< List of background bubble animations
   ExampleList                     mExampleList;              ///< List of examples.
 
+  float                           mPageWidth;                ///< The width of a page within the scroll-view, used to calculate the domain
   int                             mTotalPages;               ///< Total pages within scrollview.
 
   bool                            mScrolling:1;              ///< Flag indicating whether view is currently being scrolled
@@ -398,4 +413,4 @@ private:
 
 };
 
-#endif // __DALI_DEMO_H__
+#endif // DALI_DEMO_H
diff --git a/examples/animated-shapes/animated-shapes-example.cpp b/examples/animated-shapes/animated-shapes-example.cpp
new file mode 100644
index 00000000..dd79982a
--- /dev/null
+++ b/examples/animated-shapes/animated-shapes-example.cpp
@@ -0,0 +1,475 @@
+/*
+ * 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 <dali/dali.h>
+#include <dali-toolkit/dali-toolkit.h>
+#include "shared/view.h"
+
+#include <sstream>
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+namespace
+{
+
+const char* APPLICATION_TITLE("Animated Shapes");
+
+const char* VERTEX_SHADER = DALI_COMPOSE_SHADER
+(
+  attribute mediump vec3 aCoefficient;
+  uniform mediump mat4 uMvpMatrix;
+  uniform mediump vec3 uPosition[MAX_POINT_COUNT];
+  varying lowp vec2 vCoefficient;
+  void main()
+  {
+    int vertexId = int(aCoefficient.z);
+    gl_Position = uMvpMatrix * vec4(uPosition[vertexId], 1.0);
+
+    vCoefficient = aCoefficient.xy;
+  }
+);
+
+// Fragment shader.
+const char* FRAGMENT_SHADER = DALI_COMPOSE_SHADER
+(
+  uniform lowp vec4 uColor;
+  varying lowp vec2 vCoefficient;
+  void main()
+  {
+    lowp float C = (vCoefficient.x*vCoefficient.x-vCoefficient.y);
+    lowp float Cdx = dFdx(C);
+    lowp float Cdy = dFdy(C);
+
+    lowp float distance = float(C / sqrt(Cdx*Cdx + Cdy*Cdy));
+    lowp float alpha = 0.5 - distance;
+    gl_FragColor = vec4( uColor.rgb, uColor.a * alpha );
+  }
+);
+
+Shader CreateShader( unsigned int pointCount )
+{
+  std::ostringstream vertexShader;
+  vertexShader << "#define MAX_POINT_COUNT "<< pointCount << "\n"<<VERTEX_SHADER;
+
+  std::ostringstream fragmentShader;
+  fragmentShader << "#extension GL_OES_standard_derivatives : enable "<< "\n"<<FRAGMENT_SHADER;
+
+  Shader shader = Shader::New( vertexShader.str(), fragmentShader.str() );
+  for( unsigned int i(0); i<pointCount; ++i )
+  {
+    std::ostringstream propertyName;
+    propertyName << "uPosition["<<i<<"]";
+    shader.RegisterProperty(propertyName.str(),Vector3(0.0f,0.0f,0.0f) );
+  }
+
+  return shader;
+}
+
+} //unnamed namespace
+
+// This example shows resolution independent rendering and animation of curves using the gpu.
+//
+class AnimatedShapesExample : public ConnectionTracker
+{
+public:
+
+  AnimatedShapesExample( Application& application )
+: mApplication( application )
+{
+    // Connect to the Application's Init signal
+    mApplication.InitSignal().Connect( this, &AnimatedShapesExample::Create );
+}
+
+  ~AnimatedShapesExample()
+  {
+    // Nothing to do here;
+  }
+
+  // The Init signal is received once (only) during the Application lifetime
+  void Create( Application& application )
+  {
+    // Hide the indicator bar
+    application.GetWindow().ShowIndicator( Dali::Window::INVISIBLE );
+
+    Stage stage = Stage::GetCurrent();
+
+    // Creates the background gradient
+    Toolkit::Control background = Dali::Toolkit::Control::New();
+    background.SetAnchorPoint( Dali::AnchorPoint::CENTER );
+    background.SetParentOrigin( Dali::ParentOrigin::CENTER );
+    background.SetResizePolicy( Dali::ResizePolicy::FILL_TO_PARENT, Dali::Dimension::ALL_DIMENSIONS );
+    Dali::Property::Map map;
+    map.Insert( Visual::Property::TYPE,  Visual::GRADIENT );
+    Property::Array stopOffsets;
+    stopOffsets.PushBack( 0.0f );
+    stopOffsets.PushBack( 1.0f );
+    map.Insert( GradientVisual::Property::STOP_OFFSET, stopOffsets );
+    Property::Array stopColors;
+    stopColors.PushBack( Vector4( 0.0f,0.0f,1.0f,1.0f ) );
+    stopColors.PushBack( Vector4( 1.0f,1.0f,1.0f,1.0f ) );
+    map.Insert( GradientVisual::Property::STOP_COLOR, stopColors );
+    Vector2 halfStageSize = Stage::GetCurrent().GetSize()*0.5f;
+    map.Insert( GradientVisual::Property::START_POSITION,  Vector2(0.0f,-halfStageSize.y) );
+    map.Insert( GradientVisual::Property::END_POSITION,  Vector2(0.0f,halfStageSize.y)  );
+    map.Insert( GradientVisual::Property::UNITS, GradientVisual::Units::USER_SPACE );
+    background.SetProperty( Dali::Toolkit::Control::Property::BACKGROUND, map );
+    stage.Add( background );
+
+    // Create a TextLabel for the application title.
+    Toolkit::TextLabel label = Toolkit::TextLabel::New( APPLICATION_TITLE );
+    label.SetAnchorPoint( AnchorPoint::TOP_CENTER );
+    label.SetParentOrigin( Vector3( 0.5f, 0.0f, 0.5f ) );
+    label.SetProperty( Toolkit::TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" );
+    label.SetProperty( Toolkit::TextLabel::Property::VERTICAL_ALIGNMENT, "CENTER" );
+    label.SetProperty( Toolkit::TextLabel::Property::TEXT_COLOR, Vector4( 1.0f, 1.0f, 1.0f, 1.0f ) );
+    stage.Add( label );
+
+    CreateTriangleMorph(Vector3( stage.GetSize().x*0.5f, stage.GetSize().y*0.15f, 0.0f), 100.0f );
+    CreateCircleMorph( Vector3( stage.GetSize().x*0.5f, stage.GetSize().y*0.5f, 0.0f), 55.0f );
+    CreateQuadMorph( Vector3( stage.GetSize().x*0.5f, stage.GetSize().y*0.85f, 0.0f), 60.0f );
+
+    stage.KeyEventSignal().Connect( this, &AnimatedShapesExample::OnKeyEvent );
+  }
+
+  void CreateTriangleMorph( Vector3 center, float side )
+  {
+    float h = ( side *0.5f ) / 0.866f;
+
+    Vector3 v0 = Vector3( -h, h, 0.0f );
+    Vector3 v1 = Vector3( 0.0f, -side * 0.366f, 0.0f );
+    Vector3 v2 = Vector3( h, h, 0.0f );
+
+    Vector3 v3 = v0 + ( ( v1 - v0 ) * 0.5f );
+    Vector3 v4 = v1 + ( ( v2 - v1 ) * 0.5f );
+    Vector3 v5 = v2 + ( ( v0 - v2 ) * 0.5f );
+
+    Shader shader = CreateShader( 12 );
+    shader.SetProperty( shader.GetPropertyIndex( "uPosition[0]"), v0 );
+    shader.SetProperty( shader.GetPropertyIndex( "uPosition[1]"), v3 );
+    shader.SetProperty( shader.GetPropertyIndex( "uPosition[2]"), v1 );
+
+    shader.SetProperty( shader.GetPropertyIndex( "uPosition[3]"), v1 );
+    shader.SetProperty( shader.GetPropertyIndex( "uPosition[4]"), v4 );
+    shader.SetProperty( shader.GetPropertyIndex( "uPosition[5]"), v2 );
+
+    shader.SetProperty( shader.GetPropertyIndex( "uPosition[6]"), v2 );
+    shader.SetProperty( shader.GetPropertyIndex( "uPosition[7]"), v5 );
+    shader.SetProperty( shader.GetPropertyIndex( "uPosition[8]"), v0 );
+
+    shader.SetProperty( shader.GetPropertyIndex( "uPosition[9]"),  v0 );
+    shader.SetProperty( shader.GetPropertyIndex( "uPosition[10]"), v1 );
+    shader.SetProperty( shader.GetPropertyIndex( "uPosition[11]"), v2 );
+
+
+    //Create geometry
+    static const Vector3 vertexData[] = { Dali::Vector3( 0.0f, 0.0f, 0.0f ),
+                                          Dali::Vector3( 0.5f, 0.0f, 1.0f ),
+                                          Dali::Vector3( 1.0f, 1.0f, 2.0f ),
+
+                                          Dali::Vector3( 0.0f, 0.0f, 3.0f ),
+                                          Dali::Vector3( 0.5f, 0.0f, 4.0f ),
+                                          Dali::Vector3( 1.0f, 1.0f, 5.0f ),
+
+                                          Dali::Vector3( 0.0f, 0.0f, 6.0f ),
+                                          Dali::Vector3( 0.5f, 0.0f, 7.0f ),
+                                          Dali::Vector3( 1.0f, 1.0f, 8.0f ),
+
+                                          Dali::Vector3( 0.0f, 1.0f, 9.0f ),
+                                          Dali::Vector3( 0.0f, 1.0f, 10.0f ),
+                                          Dali::Vector3( 0.0f, 1.0f, 11.0f )
+    };
+
+    unsigned short indexData[] = { 0, 2, 1, 3, 5, 4, 6, 8, 7, 9, 11, 10 };
+
+    //Create a vertex buffer for vertex positions and texture coordinates
+    Dali::Property::Map vertexFormat;
+    vertexFormat["aCoefficient"] = Dali::Property::VECTOR3;
+    Dali::PropertyBuffer vertexBuffer = Dali::PropertyBuffer::New( vertexFormat );
+    vertexBuffer.SetData( vertexData, sizeof(vertexData)/sizeof(vertexData[0]));
+
+    //Create the geometry
+    Dali::Geometry geometry = Dali::Geometry::New();
+    geometry.AddVertexBuffer( vertexBuffer );
+    geometry.SetIndexBuffer( indexData, sizeof(indexData)/sizeof(indexData[0]) );
+
+    Renderer renderer = Renderer::New( geometry, shader );
+    renderer.SetProperty( Renderer::Property::BLEND_MODE, BlendMode::ON );
+
+    Actor actor = Actor::New();
+    actor.SetSize( 400.0f, 400.0f );
+    actor.SetPosition( center );
+    actor.SetAnchorPoint( AnchorPoint::CENTER );
+    actor.SetColor(Vector4(1.0f,1.0f,0.0f,1.0f) );
+    actor.AddRenderer( renderer );
+
+    Stage stage = Stage::GetCurrent();
+    stage.Add( actor );
+
+    //Animation
+    Animation animation = Animation::New(5.0f);
+    KeyFrames k0 = KeyFrames::New();
+    k0.Add( 0.0f,v3  );
+    k0.Add( 0.5f, v3 + Vector3(-150.0f,-150.0f,0.0f));
+    k0.Add( 1.0f, v3 );
+    animation.AnimateBetween( Property(shader, "uPosition[1]"),k0, AlphaFunction::EASE_IN_OUT_SINE );
+
+    k0 = KeyFrames::New();
+    k0.Add( 0.0f,v4  );
+    k0.Add( 0.5f, v4 + Vector3(150.0f,-150.0f,0.0f));
+    k0.Add( 1.0f, v4 );
+    animation.AnimateBetween( Property(shader,"uPosition[4]"),k0, AlphaFunction::EASE_IN_OUT_SINE );
+
+    k0 = KeyFrames::New();
+    k0.Add( 0.0f,v5  );
+    k0.Add( 0.5f, v5 + Vector3(0.0,150.0f,0.0f));
+    k0.Add( 1.0f, v5 );
+    animation.AnimateBetween( Property(shader, "uPosition[7]"),k0, AlphaFunction::EASE_IN_OUT_SINE );
+    animation.SetLooping( true );
+    animation.Play();
+  }
+
+  void CreateCircleMorph( Vector3 center, float radius )
+  {
+    Shader shader = CreateShader( 16 );
+    shader.SetProperty( shader.GetPropertyIndex("uPosition[0]"), Vector3( -radius, -radius, 0.0f ) );
+    shader.SetProperty( shader.GetPropertyIndex("uPosition[1]"), Vector3( 0.0f, -radius, 0.0f ) );
+    shader.SetProperty( shader.GetPropertyIndex("uPosition[2]"), Vector3( radius, -radius, 0.0f ) );
+
+    shader.SetProperty( shader.GetPropertyIndex("uPosition[3]"), Vector3( radius, -radius, 0.0f ) );
+    shader.SetProperty( shader.GetPropertyIndex("uPosition[4]"), Vector3( radius, 0.0f, 0.0f ) );
+    shader.SetProperty( shader.GetPropertyIndex("uPosition[5]"), Vector3( radius, radius, 0.0f ) );
+
+    shader.SetProperty( shader.GetPropertyIndex("uPosition[6]"), Vector3( radius, radius, 0.0f ) );
+    shader.SetProperty( shader.GetPropertyIndex("uPosition[7]"), Vector3( 0.0f, radius, 0.0f ) );
+    shader.SetProperty( shader.GetPropertyIndex("uPosition[8]"), Vector3( -radius, radius, 0.0f ) );
+
+    shader.SetProperty( shader.GetPropertyIndex("uPosition[9]"),  Vector3( -radius, radius, 0.0f ) );
+    shader.SetProperty( shader.GetPropertyIndex("uPosition[10]"), Vector3( -radius, 0.0f, 0.0f ) );
+    shader.SetProperty( shader.GetPropertyIndex("uPosition[11]"), Vector3( -radius, -radius, 0.0f ) );
+
+    shader.SetProperty( shader.GetPropertyIndex("uPosition[12]"), Vector3( -radius, -radius, 0.0f ) );
+    shader.SetProperty( shader.GetPropertyIndex("uPosition[13]"),  Vector3( radius, -radius, 0.0f ) );
+    shader.SetProperty( shader.GetPropertyIndex("uPosition[14]"), Vector3( radius, radius, 0.0f ) );
+    shader.SetProperty( shader.GetPropertyIndex("uPosition[15]"), Vector3( -radius, radius, 0.0f ) );
+
+    //shader.SetProperty( shader.GetPropertyIndex("uLineWidth"), 2.0f );
+
+    static const Vector3 vertexData[] = { Vector3( 0.0f, 0.0f, 0.0f ),
+                                          Vector3( 0.5f, 0.0f, 1.0f ),
+                                          Vector3( 1.0f, 1.0f, 2.0f ),
+                                          Vector3( 0.0f, 0.0f, 3.0f ),
+                                          Vector3( 0.5f, 0.0f, 4.0f ),
+                                          Vector3( 1.0f, 1.0f, 5.0f ),
+                                          Vector3( 0.0f, 0.0f, 6.0f ),
+                                          Vector3( 0.5f, 0.0f, 7.0f ),
+                                          Vector3( 1.0f, 1.0f, 8.0f ),
+                                          Vector3( 0.0f, 0.0f, 9.0f ),
+                                          Vector3( 0.5f, 0.0f, 10.0f ),
+                                          Vector3( 1.0f, 1.0f, 11.0f ),
+                                          Vector3( 0.0f, 1.0f, 12.0f ),
+                                          Vector3( 0.0f, 1.0f, 13.0f ),
+                                          Vector3( 0.0f, 1.0f, 14.0f ),
+                                          Vector3( 0.0f, 1.0f, 15.0f )};
+
+    short unsigned int indexData[] = { 0, 2, 1, 3, 5, 4, 6, 8, 7, 9, 11, 10, 12, 13, 14, 12, 14, 15 };
+
+    //Create a vertex buffer for vertex positions and texture coordinates
+    Dali::Property::Map vertexFormat;
+    vertexFormat["aCoefficient"] = Dali::Property::VECTOR3;
+    Dali::PropertyBuffer vertexBuffer = Dali::PropertyBuffer::New( vertexFormat );
+    vertexBuffer.SetData( vertexData, sizeof(vertexData)/sizeof(vertexData[0]));
+
+    //Create the geometry
+    Dali::Geometry geometry = Dali::Geometry::New();
+    geometry.AddVertexBuffer( vertexBuffer );
+    geometry.SetIndexBuffer( indexData, sizeof(indexData)/sizeof(indexData[0]) );
+
+    Renderer renderer = Renderer::New( geometry, shader );
+    renderer.SetProperty( Renderer::Property::BLEND_MODE, BlendMode::ON );
+
+    Actor actor = Actor::New();
+    actor.SetSize( 400.0f, 400.0f );
+    actor.SetPosition( center );
+    actor.SetAnchorPoint( AnchorPoint::CENTER );
+    actor.AddRenderer( renderer );
+
+    Stage stage = Stage::GetCurrent();
+    stage.Add( actor );
+
+    //Animation
+    Animation animation = Animation::New(5.0f);
+    KeyFrames k0 = KeyFrames::New();
+    k0.Add( 0.0f, Vector3( 0.0f,-radius*1.85, 0.0f ) );
+    k0.Add( 0.5f, Vector3( -radius*1.85, -radius*3.0f, 0.0f ) );
+    k0.Add( 1.0f, Vector3( 0.0f,-radius*1.85, 0.0f ) );
+    animation.AnimateBetween( Property( shader, shader.GetPropertyIndex("uPosition[1]") ),k0, AlphaFunction::EASE_IN_OUT_SINE );
+
+    k0 = KeyFrames::New();
+    k0.Add( 0.0f, Vector3( radius*1.85, 0.0f, 0.0f ) );
+    k0.Add( 0.5f, Vector3( radius*3.0f,-radius*1.85, 0.0f ) );
+    k0.Add( 1.0f, Vector3( radius*1.85,0.0f, 0.0f ) );
+    animation.AnimateBetween( Property(shader, shader.GetPropertyIndex("uPosition[4]")),k0, AlphaFunction::EASE_IN_OUT_SINE );
+
+    k0 = KeyFrames::New();
+    k0.Add( 0.0f, Vector3( 0.0f, radius*1.85, 0.0f ) );
+    k0.Add( 0.5f, Vector3( radius*1.85, radius*3.0f, 0.0f) );
+    k0.Add( 1.0f, Vector3( 0.0f, radius*1.85, 0.0f) );
+    animation.AnimateBetween( Property( shader, shader.GetPropertyIndex("uPosition[7]") ),k0, AlphaFunction::EASE_IN_OUT_SINE );
+
+    k0 = KeyFrames::New();
+    k0.Add( 0.0f, Vector3( -radius*1.85, 0.0f, 0.0f) );
+    k0.Add( 0.5f, Vector3(-radius*3.0f, radius*1.85, 0.0f) );
+    k0.Add( 1.0f, Vector3( -radius*1.85, 0.0f, 0.0f) );
+    animation.AnimateBetween( Property( shader, shader.GetPropertyIndex("uPosition[10]") ),k0, AlphaFunction::EASE_IN_OUT_SINE );
+
+    animation.AnimateBy( Property( actor, Actor::Property::ORIENTATION ), Quaternion( Radian( Degree(-90.0f) ), Vector3::ZAXIS ) );
+    animation.SetLooping( true );
+    animation.Play();
+  }
+
+  void CreateQuadMorph( Vector3 center, float radius )
+  {
+    Shader shader = CreateShader( 16 );
+    shader.SetProperty( shader.GetPropertyIndex("uPosition[0]"), Vector3( -radius, -radius, 0.0f ) );
+    shader.SetProperty( shader.GetPropertyIndex("uPosition[1]"), Vector3( 0.0f, -radius, 0.0f ) );
+    shader.SetProperty( shader.GetPropertyIndex("uPosition[2]"), Vector3( radius, -radius, 0.0f ) );
+
+    shader.SetProperty( shader.GetPropertyIndex("uPosition[3]"), Vector3( radius, -radius, 0.0f ) );
+    shader.SetProperty( shader.GetPropertyIndex("uPosition[4]"), Vector3( radius, 0.0f, 0.0f ) );
+    shader.SetProperty( shader.GetPropertyIndex("uPosition[5]"), Vector3( radius, radius, 0.0f ) );
+
+    shader.SetProperty( shader.GetPropertyIndex("uPosition[6]"), Vector3( radius, radius, 0.0f ) );
+    shader.SetProperty( shader.GetPropertyIndex("uPosition[7]"), Vector3( 0.0f, radius, 0.0f ) );
+    shader.SetProperty( shader.GetPropertyIndex("uPosition[8]"), Vector3( -radius, radius, 0.0f ) );
+
+    shader.SetProperty( shader.GetPropertyIndex("uPosition[9]"), Vector3( -radius, radius, 0.0f ) );
+    shader.SetProperty( shader.GetPropertyIndex("uPosition[10]"), Vector3( -radius, 0.0f, 0.0f ) );
+    shader.SetProperty( shader.GetPropertyIndex("uPosition[11]"), Vector3( -radius, -radius, 0.0f ) );
+
+    shader.SetProperty( shader.GetPropertyIndex("uPosition[12]"), Vector3( -radius, -radius, 0.0f ) );
+    shader.SetProperty( shader.GetPropertyIndex("uPosition[13]"), Vector3( radius, -radius, 0.0f ) );
+    shader.SetProperty( shader.GetPropertyIndex("uPosition[14]"), Vector3( radius, radius, 0.0f ) );
+    shader.SetProperty( shader.GetPropertyIndex("uPosition[15]"), Vector3( -radius, radius, 0.0f ) );
+
+    static const Vector3 vertexData[] = { Dali::Vector3( 0.0f, 0.0f, 0.0f ),
+                                          Dali::Vector3( 0.5f, 0.0f, 1.0f ),
+                                          Dali::Vector3( 1.0f, 1.0f, 2.0f ),
+
+                                          Dali::Vector3( 0.0f, 0.0f, 3.0f ),
+                                          Dali::Vector3( 0.5f, 0.0f, 4.0f ),
+                                          Dali::Vector3( 1.0f, 1.0f, 5.0f ),
+
+                                          Dali::Vector3( 0.0f, 0.0f, 6.0f ),
+                                          Dali::Vector3( 0.5f, 0.0f, 7.0f ),
+                                          Dali::Vector3( 1.0f, 1.0f, 8.0f ),
+
+                                          Dali::Vector3( 0.0f, 0.0f, 9.0f ),
+                                          Dali::Vector3( 0.5f, 0.0f, 10.0f ),
+                                          Dali::Vector3( 1.0f, 1.0f, 11.0f ),
+
+                                          Dali::Vector3( 0.0f, 1.0f, 12.0f ),
+                                          Dali::Vector3( 0.0f, 1.0f, 13.0f ),
+                                          Dali::Vector3( 0.0f, 1.0f, 14.0f ),
+                                          Dali::Vector3( 0.0f, 1.0f, 15.0f ) };
+
+    short unsigned int indexData[] = { 0, 2, 1, 3, 5, 4, 6, 8, 7, 9, 11, 10, 12, 15, 14, 12, 14, 13 };
+
+    //Create a vertex buffer for vertex positions and texture coordinates
+    Dali::Property::Map vertexFormat;
+    vertexFormat["aCoefficient"] = Dali::Property::VECTOR3;
+    Dali::PropertyBuffer vertexBuffer = Dali::PropertyBuffer::New( vertexFormat );
+    vertexBuffer.SetData( vertexData, sizeof(vertexData)/sizeof(vertexData[0]));
+
+    //Create the geometry
+    Dali::Geometry geometry = Dali::Geometry::New();
+    geometry.AddVertexBuffer( vertexBuffer );
+    geometry.SetIndexBuffer( indexData, sizeof(indexData)/sizeof(indexData[0]) );
+
+    Renderer renderer = Renderer::New( geometry, shader );
+    renderer.SetProperty( Renderer::Property::BLEND_MODE, BlendMode::ON );
+
+    Actor actor = Actor::New();
+    actor.SetSize( 400.0f, 400.0f );
+    actor.SetPosition( center );
+    actor.SetAnchorPoint( AnchorPoint::CENTER );
+    actor.SetColor(Vector4(1.0f,0.0f,0.0f,1.0f) );
+    actor.AddRenderer( renderer );
+
+    Stage stage = Stage::GetCurrent();
+    stage.Add( actor );
+
+    //Animation
+    Animation animation = Animation::New( 5.0f );
+    KeyFrames k0 = KeyFrames::New();
+    k0.Add( 0.0f, Vector3( 0.0f, -radius, 0.0f ) );
+    k0.Add( 0.5f, Vector3( 0.0f, -radius*4.0f, 0.0f ) );
+    k0.Add( 1.0f, Vector3( 0.0f, -radius, 0.0f ) );
+    animation.AnimateBetween( Property(shader, shader.GetPropertyIndex("uPosition[1]")),k0, AlphaFunction::EASE_IN_OUT_SINE );
+
+    k0 = KeyFrames::New();
+    k0.Add( 0.0f, Vector3( radius, 0.0f, 0.0f ) );
+    k0.Add( 0.5f, Vector3( radius*4.0f, 0.0f, 0.0f ) );
+    k0.Add( 1.0f, Vector3( radius, 0.0f, 0.0f ) );
+    animation.AnimateBetween( Property(shader, shader.GetPropertyIndex("uPosition[4]")),k0, AlphaFunction::EASE_IN_OUT_SINE );
+
+    k0 = KeyFrames::New();
+    k0.Add( 0.0f, Vector3( 0.0f, radius, 0.0f ) );
+    k0.Add( 0.5f, Vector3( 0.0f, radius*4.0f, 0.0f ) );
+    k0.Add( 1.0f, Vector3( 0.0f, radius, 0.0f ) );
+    animation.AnimateBetween( Property(shader, shader.GetPropertyIndex("uPosition[7]")),k0, AlphaFunction::EASE_IN_OUT_SINE );
+
+    k0 = KeyFrames::New();
+    k0.Add( 0.0f, Vector3( -radius, 0.0f, 0.0f ) );
+    k0.Add( 0.5f, Vector3( -radius*4.0f,0.0f, 0.0f ) );
+    k0.Add( 1.0f, Vector3( -radius,  0.0f, 0.0f ) );
+    animation.AnimateBetween( Property(shader, shader.GetPropertyIndex("uPosition[10]")),k0, AlphaFunction::EASE_IN_OUT_SINE );
+
+    animation.AnimateBy( Property( actor, Actor::Property::ORIENTATION ), Quaternion( Radian( Degree(90.0f) ), Vector3::ZAXIS ) );
+    animation.SetLooping( true );
+    animation.Play();
+  }
+
+  /**
+   * Main key event handler
+   */
+  void OnKeyEvent(const KeyEvent& event)
+  {
+    if( event.state == KeyEvent::Down && (IsKey( event, DALI_KEY_ESCAPE) || IsKey( event, DALI_KEY_BACK ))  )
+    {
+      mApplication.Quit();
+    }
+  }
+
+private:
+  Application&                mApplication;
+
+};
+
+void RunTest( Application& application )
+{
+  AnimatedShapesExample test( application );
+  application.MainLoop();
+}
+
+int main( int argc, char **argv )
+{
+  Application application = Application::New( &argc, &argv );
+  RunTest( application );
+
+  return 0;
+}
diff --git a/examples/benchmark/benchmark.cpp b/examples/benchmark/benchmark.cpp
index f4fa4103..6d137fff 100644
--- a/examples/benchmark/benchmark.cpp
+++ b/examples/benchmark/benchmark.cpp
@@ -184,7 +184,6 @@ const char* FRAGMENT_SHADER_TEXTURE = DALI_COMPOSE_SHADER(
 );
 
 bool gUseMesh(false);
-bool gUseImageActor(false);
 bool gNinePatch(false);
 unsigned int gRowsPerPage(25);
 unsigned int gColumnsPerPage( 25 );
@@ -203,12 +202,11 @@ Renderer CreateRenderer( unsigned int index, Geometry geometry, Shader shader )
 }
 
 }
-// Test application to compare performance between ImageActor and ImageView
+// Test application to compare performance between using a mesh and ImageView
 // By default, the application consist of 10 pages of 25x25 Image views, this can be modified using the following command line arguments:
 // -r NumberOfRows  (Modifies the number of rows per page)
 // -c NumberOfColumns (Modifies the number of columns per page)
 // -p NumberOfPages (Modifies the nimber of pages )
-// --use-image-actor ( Use ImageActor instead of ImageView )
 // --use-mesh ( Use new renderer API (as ImageView) but shares renderers between actors when possible )
 // --nine-patch ( Use nine patch images )
 
@@ -251,10 +249,6 @@ public:
     {
       CreateMeshActors();
     }
-    else if( gUseImageActor )
-    {
-      CreateImageActors();
-    }
     else
     {
       CreateImageViews();
@@ -275,22 +269,6 @@ public:
     return !gNinePatch ? IMAGE_PATH[i % NUM_IMAGES] : NINEPATCH_IMAGE_PATH[i % NUM_NINEPATCH_IMAGES];
   }
 
-  void CreateImageActors()
-  {
-    Stage stage = Stage::GetCurrent();
-    unsigned int actorCount(mRowsPerPage*mColumnsPerPage * mPageCount);
-    mActor.resize(actorCount);
-
-    for( size_t i(0); i<actorCount; ++i )
-    {
-      Image image = ResourceImage::New(ImagePath(i));
-      mActor[i] = ImageActor::New(image);
-      mActor[i].SetSize(Vector3(0.0f,0.0f,0.0f));
-      mActor[i].SetResizePolicy( ResizePolicy::FIXED, Dimension::ALL_DIMENSIONS );
-      stage.Add(mActor[i]);
-    }
-  }
-
   void CreateImageViews()
   {
     Stage stage = Stage::GetCurrent();
@@ -378,7 +356,7 @@ public:
           duration = durationPerActor;
           delay = delayBetweenActors * count;
         }
-        if( gUseImageActor || gUseMesh )
+        if( gUseMesh )
         {
           mActor[count].SetPosition( initialPosition );
           mActor[count].SetSize( Vector3(0.0f,0.0f,0.0f) );
@@ -410,7 +388,7 @@ public:
     size_t actorCount( mRowsPerPage*mColumnsPerPage*mPageCount);
     for( size_t i(0); i<actorCount; ++i )
     {
-      if( gUseImageActor || gUseMesh )
+      if( gUseMesh )
       {
         mScroll.AnimateBy( Property( mActor[i], Actor::Property::POSITION), Vector3(-4.0f*stageSize.x,0.0f, 0.0f), AlphaFunction::EASE_OUT, TimePeriod(0.0f,3.0f));
         mScroll.AnimateBy( Property( mActor[i], Actor::Property::POSITION), Vector3(-4.0f*stageSize.x,0.0f, 0.0f), AlphaFunction::EASE_OUT, TimePeriod(3.0f,3.0f));
@@ -453,7 +431,7 @@ public:
           delay = delayBetweenActors * count;
         }
 
-        if( gUseImageActor || gUseMesh )
+        if( gUseMesh )
         {
           mHide.AnimateTo( Property( mActor[count], Actor::Property::ORIENTATION),  Quaternion( Radian( Degree( 70.0f ) ), Vector3::XAXIS ), AlphaFunction::EASE_OUT, TimePeriod( delay, duration ));
           mHide.AnimateBy( Property( mActor[count], Actor::Property::POSITION_Z), finalZ, AlphaFunction::EASE_OUT_BACK, TimePeriod( delay +delayBetweenActors*actorsPerPage + duration, duration ));
@@ -507,10 +485,6 @@ int DALI_EXPORT_API main( int argc, char **argv )
     {
       gUseMesh = true;
     }
-    else if( arg.compare("--use-image-actor") == 0)
-    {
-      gUseImageActor = true;
-    }
     else if( arg.compare("--nine-patch" ) == 0)
     {
       gNinePatch = true;
diff --git a/examples/builder/examples.cpp b/examples/builder/examples.cpp
index e80c88b4..eded833b 100644
--- a/examples/builder/examples.cpp
+++ b/examples/builder/examples.cpp
@@ -26,6 +26,8 @@
 #include <dali-toolkit/devel-api/builder/tree-node.h>
 #include <dali-toolkit/devel-api/builder/json-parser.h>
 #include <dali-toolkit/devel-api/controls/popup/popup.h>
+#include <dali-toolkit/devel-api/controls/navigation-view/navigation-view.h>
+
 #include <map>
 #include <string>
 #include <fstream>
@@ -136,6 +138,7 @@ const std::string ShortName( const std::string& name )
 
   if( pos != std::string::npos )
   {
+    pos++;
     return name.substr( pos );
   }
   else
@@ -249,44 +252,23 @@ public:
     mTitleActor.SetProperty( TextLabel::Property::TEXT, title );
   }
 
-  bool OnToolSelectLayout( Toolkit::Button button )
+  bool OnBackButtonPressed( Toolkit::Button button )
   {
-    bool on = mItemView.IsVisible();
-
-    if( on )
-    {
-      LeaveSelection();
-    }
-    else
-    {
-      EnterSelection();
-    }
-
+    OnQuitOrBack();
     return true;
   }
 
-  void LeaveSelection()
-  {
-
-  }
-
-  void EnterSelection()
+  void SetUpItemView()
   {
     Stage stage = Stage::GetCurrent();
-    stage.SetBackgroundColor( Color::WHITE );
 
     mTapDetector = TapGestureDetector::New();
     mTapDetector.DetectedSignal().Connect( this, &ExampleApp::OnTap );
 
-    if( mItemView )
-    {
-      stage.Remove( mItemView );
-    }
-
     mFiles.clear();
 
     mItemView = ItemView::New(*this);
-    stage.Add( mItemView );
+
     mItemView.SetParentOrigin(ParentOrigin::CENTER);
     mItemView.SetAnchorPoint(AnchorPoint::CENTER);
     mLayout = DefaultItemLayout::New( DefaultItemLayout::LIST );
@@ -354,28 +336,11 @@ public:
       }
     }
 
-    // Display item view on the stage
-    stage.Add( mItemView );
-
-    mItemView.SetVisible( true );
-    mBuilderLayer.SetVisible( false );
-
-    SetTitle("Select");
-
     // Activate the layout
     Vector3 size(stage.GetSize());
     mItemView.ActivateLayout(0, size, 0.0f/*immediate*/);
   }
 
-  void ExitSelection()
-  {
-    mTapDetector.Reset();
-
-    mItemView.SetVisible( false );
-    mBuilderLayer.SetVisible( true );
-
-    SetTitle("View");
-  }
 
   void OnTap( Actor actor, const TapGesture& tap )
   {
@@ -387,7 +352,7 @@ public:
   Actor MenuItem(const std::string& text)
   {
     TextLabel label = TextLabel::New( ShortName( text ) );
-    label.SetProperty( Dali::Toolkit::Control::Property::STYLE_NAME, "builderlabel" );
+    label.SetStyleName( "BuilderLabel" );
     label.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
 
     // Hook up tap detector
@@ -411,7 +376,7 @@ public:
     Stage stage = Stage::GetCurrent();
 
     builder = Builder::New();
-    builder.QuitSignal().Connect( this, &ExampleApp::OnBuilderQuit );
+    builder.QuitSignal().Connect( this, &ExampleApp::OnQuitOrBack );
 
     Property::Map defaultDirs;
     defaultDirs[ TOKEN_STRING(DEMO_IMAGE_DIR) ]  = DEMO_IMAGE_DIR;
@@ -485,10 +450,7 @@ public:
     size.y -= DemoHelper::DEFAULT_VIEW_STYLE.mToolBarHeight;
     mBuilderLayer.SetSize( size );
 
-    mBuilderLayer.LowerToBottom();
-    Stage::GetCurrent().GetRootLayer().RaiseToTop();
-
-    ExitSelection();
+    mNavigationView.Push( mBuilderLayer );
   }
 
   void Create(Application& app)
@@ -504,21 +466,43 @@ public:
                                              TOOLBAR_IMAGE,
                                              "" );
 
-    SetTitle("Builder");
+    SetTitle("Select Example");
 
     mBuilderLayer = Layer::New();
-    stage.GetRootLayer().Add(mBuilderLayer);
-
 
     // Create an edit mode button. (left of toolbar)
-    Toolkit::PushButton editButton = Toolkit::PushButton::New();
-    editButton.SetUnselectedImage( EDIT_IMAGE );
-    editButton.SetSelectedImage( 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  );
-
-    EnterSelection();
+    Toolkit::PushButton backButton = Toolkit::PushButton::New();
+    backButton.SetUnselectedImage( EDIT_IMAGE );
+    backButton.SetSelectedImage( EDIT_IMAGE_SELECTED );
+    backButton.ClickedSignal().Connect( this, &ExampleApp::OnBackButtonPressed);
+    backButton.SetLeaveRequired( true );
+    mToolBar.AddControl( backButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalLeft, DemoHelper::DEFAULT_MODE_SWITCH_PADDING  );
+
+    mNavigationView = Toolkit::NavigationView::New();
+    mNavigationView.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
+    mNavigationView.SetAnchorPoint( AnchorPoint::TOP_LEFT);
+
+    stage.Add( mNavigationView );
+
+    // Set up the background gradient.
+    Property::Array stopOffsets;
+    stopOffsets.PushBack( 0.0f );
+    stopOffsets.PushBack( 1.0f );
+    Property::Array stopColors;
+    stopColors.PushBack( Color::WHITE );
+    stopColors.PushBack( Vector4( 0.45f, 0.70f, 0.80f, 1.0f ) ); // Medium bright, pastel blue
+    const float percentageStageHeight = stage.GetSize().height * 0.6f;
+
+    mNavigationView.SetProperty( Toolkit::Control::Property::BACKGROUND, Dali::Property::Map()
+      .Add( Toolkit::Visual::Property::TYPE, Dali::Toolkit::Visual::GRADIENT )
+      .Add( Toolkit::GradientVisual::Property::STOP_OFFSET, stopOffsets )
+      .Add( Toolkit::GradientVisual::Property::STOP_COLOR, stopColors )
+      .Add( Toolkit::GradientVisual::Property::START_POSITION, Vector2( 0.0f, -percentageStageHeight ) )
+      .Add( Toolkit::GradientVisual::Property::END_POSITION, Vector2( 0.0f, percentageStageHeight ) )
+      .Add( Toolkit::GradientVisual::Property::UNITS, Toolkit::GradientVisual::Units::USER_SPACE ) );
+
+    SetUpItemView();
+    mNavigationView.Push( mItemView );
 
     mTimer = Timer::New( 500 ); // ms
     mTimer.TickSignal().Connect( this, &ExampleApp::OnTimer);
@@ -546,14 +530,7 @@ public:
     {
       if( IsKey( event, Dali::DALI_KEY_ESCAPE) || IsKey( event, Dali::DALI_KEY_BACK) )
       {
-        if ( mItemView.IsVisible() )
-        {
-          mApp.Quit();
-        }
-        else
-        {
-          EnterSelection();
-        }
+        OnQuitOrBack();
       }
     }
   }
@@ -561,15 +538,15 @@ public:
   /**
    * Event handler when Builder wants to quit (we only want to close the shown json unless we're at the top-level)
    */
-  void OnBuilderQuit()
+  void OnQuitOrBack()
   {
-    if ( mItemView.IsVisible() )
+    if ( mItemView.OnStage() )
     {
       mApp.Quit();
     }
     else
     {
-      EnterSelection();
+      mNavigationView.Pop();
     }
   }
 
@@ -578,12 +555,13 @@ private:
 
   ItemLayoutPtr mLayout;
   ItemView mItemView;
+  Toolkit::NavigationView mNavigationView;
 
   Toolkit::Control mView;
   unsigned int mOrientation;
 
   Toolkit::ToolBar mToolBar;
-  TextLabel mTitleActor;             ///< The Toolbar's Title.
+  TextLabel mTitleActor;
 
   Layer mBuilderLayer;
 
diff --git a/examples/buttons/buttons-example.cpp b/examples/buttons/buttons-example.cpp
index bd10f407..4e2b6d54 100644
--- a/examples/buttons/buttons-example.cpp
+++ b/examples/buttons/buttons-example.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2014 Samsung Electronics Co., Ltd.
+ * 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.
@@ -306,6 +306,7 @@ class ButtonsController: public ConnectionTracker
       mCheckboxButton1.SetName( "checkbox1" );
       mCheckboxButton1.SetLabelText( "CheckBox1 is unselected" );
       mCheckboxButton1.StateChangedSignal().Connect( this, &ButtonsController::OnCheckBoxesSelected );
+      mCheckboxButton1.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
 
       checkBoxBackground.Add( mCheckboxButton1 );
     }
@@ -316,6 +317,7 @@ class ButtonsController: public ConnectionTracker
       mCheckboxButton2.SetLabelText( "CheckBox2 is selected" );
       mCheckboxButton2.SetSelected( true );
       mCheckboxButton2.StateChangedSignal().Connect( this, &ButtonsController::OnCheckBoxesSelected );
+      mCheckboxButton2.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
 
       checkBoxBackground.Add( mCheckboxButton2 );
     }
@@ -325,6 +327,7 @@ class ButtonsController: public ConnectionTracker
       mCheckboxButton3.SetName( "checkbox3" );
       mCheckboxButton3.SetLabelText( "CheckBox3 is unselected" );
       mCheckboxButton3.StateChangedSignal().Connect( this, &ButtonsController::OnCheckBoxesSelected );
+      mCheckboxButton3.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
 
       checkBoxBackground.Add( mCheckboxButton3 );
     }
diff --git a/examples/contact-cards/README.md b/examples/contact-cards/README.md
new file mode 100644
index 00000000..ef2f6451
--- /dev/null
+++ b/examples/contact-cards/README.md
@@ -0,0 +1,2 @@
+Please use contact-cards-example.cpp as your start point.
+The ContactCardController class has a brief explanation regarding what this example does and all the classes used in this example.
diff --git a/examples/contact-cards/clipped-image.cpp b/examples/contact-cards/clipped-image.cpp
new file mode 100644
index 00000000..c27a5f62
--- /dev/null
+++ b/examples/contact-cards/clipped-image.cpp
@@ -0,0 +1,221 @@
+/*
+ * 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.
+ *
+ */
+
+// HEADER
+#include "clipped-image.h"
+
+// EXTERNAL INCLUDES
+#include <dali-toolkit/dali-toolkit.h>
+
+namespace ClippedImage
+{
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+namespace
+{
+
+const char * const DELTA_PROPERTY_NAME( "uDelta" ); ///< Name of uniform used to mix the Circle and Quad geometries.
+
+/**
+ * @brief This vertex-shader mixes in the quad and circle geometry depending on the value of uDelta.
+ *
+ * uDelta is used to mix in the Circle and the Quad positions.
+ * If uDelta is 0.0f, then the circle position is adopted and if it is 1.0f, then the quad position is adopted.
+ */
+const char * VERTEX_SHADER = DALI_COMPOSE_SHADER(
+  attribute mediump vec2  aPositionCircle;\n
+  attribute mediump vec2  aPositionQuad;\n
+  uniform   mediump float uDelta;
+  uniform mediump mat4    uMvpMatrix;\n
+  uniform mediump vec3    uSize;\n
+  \n
+  void main()\n
+  {\n
+    mediump vec4 vertexPosition = vec4(mix(aPositionCircle,aPositionQuad,uDelta), 0.0, 1.0);\n
+    vertexPosition.xyz *= uSize;\n
+    gl_Position = uMvpMatrix * vertexPosition;\n
+  }\n
+);
+
+/**
+ * @brief This fragment-shader does not output anything. It's for a control which is just going to clip as specified in the vertex shader.
+ */
+const char * FRAGMENT_SHADER = DALI_COMPOSE_SHADER(
+  void main()\n
+  {\n
+    gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);\n
+  }\n
+);
+
+/**
+ * @brief Creates the shader required for the clipped image
+ * @return A reference to a static handle to a shader object (only created when first called).
+ */
+Shader& CreateShader()
+{
+  // Only need to create it once
+  // The issue with using a static is that the shader will only get destroyed at application destruction.
+  // This is OK for a simple use cases such as this example, but for more polished applications, the shader creation/destruction needs to
+  // be managed by the application writer.
+  static Shader shader;
+
+  if( !shader )
+  {
+    shader = Shader::New( VERTEX_SHADER, FRAGMENT_SHADER );
+  }
+
+  return shader;
+}
+
+/**
+ * @brief Creates the geometry required for the clipped image
+ * @return A reference to a static handle to a geometry object (only created when first called).
+ */
+Geometry& CreateGeometry()
+{
+  // Only need to create it once
+  // The issue with using a static is that the geometry will only get destroyed at application destruction.
+  // This is OK for a simple use cases such as this example, but for more polished applications, the geometry creation/destruction needs to
+  // be managed by the application writer.
+  static Geometry geometry;
+
+  if ( !geometry )
+  {
+    const int vertexCount = 34; // Needs to be 4n plus 2 where n is a positive integer above 4
+
+    // Create the circle geometry
+
+    // Radius is bound to actor's dimensions so this should not be increased.
+    // If a bigger circle is required then the actor size should be increased.
+    const float radius = 0.5f;
+    const Vector2 center = Vector2::ZERO;
+
+    // Create a buffer for vertex data
+    Vector2 circleBuffer[vertexCount];
+    int idx = 0;
+
+    // Center vertex for triangle fan
+    circleBuffer[ idx++ ] = center;
+
+    // Outer vertices of the circle
+    const int outerVertexCount = vertexCount - 1;
+
+    for ( int i = 0; i < outerVertexCount; ++i )
+    {
+      const float percent = ( i / static_cast< float >( outerVertexCount - 1 ) );
+      const float rad = percent * 2.0f * Math::PI;
+
+      // Vertex position
+      Vector2 outer;
+      outer.x = center.x + radius * cos( rad );
+      outer.y = center.y + radius * sin( rad );
+
+      circleBuffer[ idx++ ] = outer;
+    }
+
+    Property::Map circleVertexFormat;
+    circleVertexFormat["aPositionCircle"] = Property::VECTOR2;
+    PropertyBuffer circleVertices = PropertyBuffer::New( circleVertexFormat );
+    circleVertices.SetData( circleBuffer, vertexCount );
+
+    // Create the Quad Geometry
+    Vector2 quadBuffer[vertexCount];
+    idx = 0;
+    quadBuffer[ idx++ ]  = center;
+
+    const size_t vertsPerSide = ( vertexCount - 2 ) / 4;
+    Vector2 outer( 0.5f, 0.0f );
+    quadBuffer[ idx++ ]  = outer;
+    float incrementPerBuffer = 1.0f / static_cast< float >( vertsPerSide );
+
+    for( size_t i = 0; i < vertsPerSide && outer.y < 0.5f; ++i )
+    {
+      outer.y += incrementPerBuffer;
+      quadBuffer[ idx++ ] = outer;
+    }
+
+    for( size_t i = 0; i < vertsPerSide && outer.x > -0.5f; ++i )
+    {
+      outer.x -= incrementPerBuffer;
+      quadBuffer[ idx++ ] = outer;
+    }
+
+    for( size_t i = 0; i < vertsPerSide && outer.y > -0.5f; ++i )
+    {
+      outer.y -= incrementPerBuffer;
+      quadBuffer[ idx++ ] = outer;
+    }
+
+    for( size_t i = 0; i < vertsPerSide && outer.x < 0.5f; ++i )
+    {
+      outer.x += incrementPerBuffer;
+      quadBuffer[ idx++ ] = outer;
+    }
+
+    for( size_t i = 0; i < vertsPerSide && outer.y < 0.0f; ++i )
+    {
+      outer.y += incrementPerBuffer;
+      quadBuffer[ idx++ ] = outer;
+    }
+
+    Property::Map vertexFormat;
+    vertexFormat["aPositionQuad"] = Property::VECTOR2;
+    PropertyBuffer quadVertices2 = PropertyBuffer::New( vertexFormat );
+    quadVertices2.SetData( quadBuffer, vertexCount );
+
+    // Create the geometry object itself
+    geometry = Geometry::New();
+    geometry.AddVertexBuffer( circleVertices );
+    geometry.AddVertexBuffer( quadVertices2 );
+    geometry.SetType( Geometry::TRIANGLE_FAN );
+  }
+
+  return geometry;
+}
+
+} // unnamed namespace
+
+const float CIRCLE_GEOMETRY = 0.0f;
+const float QUAD_GEOMETRY = 1.0f;
+
+Dali::Toolkit::Control Create( const std::string& imagePath, Property::Index& propertyIndex )
+{
+  // Create a control which whose geometry will be morphed between a circle and a quad
+  Control clippedImage = Control::New();
+  clippedImage.SetProperty( Actor::Property::CLIPPING_MODE, ClippingMode::CLIP_CHILDREN );
+
+  // Create the required renderer and add to the clipped image control
+  Renderer renderer = Renderer::New( CreateGeometry(), CreateShader() );
+  renderer.SetProperty( Renderer::Property::BLEND_MODE, BlendMode::ON );
+  clippedImage.AddRenderer( renderer );
+
+  // Register the property on the clipped image control which will allow animations between a circle and a quad
+  propertyIndex = clippedImage.RegisterProperty( DELTA_PROPERTY_NAME, 0.0f );
+
+  // Add the actual image to the control
+  Control image = ImageView::New( imagePath );
+  image.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
+  image.SetParentOrigin( ParentOrigin::CENTER );
+  image.SetAnchorPoint( AnchorPoint::CENTER );
+  clippedImage.Add( image );
+
+  return clippedImage;
+}
+
+} // namespace ClippedImage
diff --git a/examples/contact-cards/clipped-image.h b/examples/contact-cards/clipped-image.h
new file mode 100644
index 00000000..edfd86a5
--- /dev/null
+++ b/examples/contact-cards/clipped-image.h
@@ -0,0 +1,50 @@
+#ifndef CLIPPED_IMAGE_H
+#define CLIPPED_IMAGE_H
+
+/*
+ * 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.
+ *
+ */
+
+// EXTERNAL INCLUDES
+#include <string>
+#include <dali-toolkit/public-api/controls/control.h>
+
+/**
+ * @brief This namespace provides a helper function to create a control that clips an image either as a quad or a circle.
+ *
+ * The CIRCLE_GEOMETRY and QUAD_GEOMETRY constants can be used to set or animate to the different clipping geometries.
+ */
+namespace ClippedImage
+{
+
+extern const float CIRCLE_GEOMETRY; ///< Setting or animating the returned propertyIndex in Create() to this value will provide a circle geometry on the image @see Create
+extern const float QUAD_GEOMETRY; ///< Setting or animating the returned propertyIndex in Create() to this value will provide a quad geometry on the image @see Create
+
+/**
+ * @brief Creates a clipping image whose geometry (i.e. clip area) can be morphed between a circle and a quad by animating the propertyIndex out parameter.
+ *
+ * The propertyIndex parameter can be set or animated to CIRCLE_GEOMETRY or QUAD_GEOMETRY depending on the type of clipping required.
+ * If set to a value between these two constants, then the resulting geometry will be somewhere in between a circle and a quad.
+ *
+ * @param[in]   imagePath      The path to the image to show.
+ * @param[out]  propertyIndex  Gets set with the property index which the caller can animate using the CIRCLE_GEOMETRY & QUAD_GEOMETRY values.
+ * @return The image-mesh control
+ */
+Dali::Toolkit::Control Create( const std::string& imagePath, Dali::Property::Index& propertyIndex );
+
+} // namespace ClippedImage
+
+#endif // CLIPPED_IMAGE_H
diff --git a/examples/contact-cards/contact-card-layout-info.h b/examples/contact-cards/contact-card-layout-info.h
new file mode 100644
index 00000000..68e3f20f
--- /dev/null
+++ b/examples/contact-cards/contact-card-layout-info.h
@@ -0,0 +1,54 @@
+#ifndef CONTACT_CARD_LAYOUT_INFO_H
+#define CONTACT_CARD_LAYOUT_INFO_H
+
+/*
+ * 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.
+ *
+ */
+
+// EXTERNAL INCLUDES
+#include <dali/public-api/math/vector2.h>
+
+/**
+ * @brief This is the common data that is used by all contact cards.
+ *
+ * In this context, "unfolded" means when all the details, including the name, address and image are shown.
+ * In this scenario, the control takes up most of the screen and a header is also shown.
+ *
+ * When the contact card is "folded", this means when only brief information is shown to the user, i.e. the image and name.
+ * In this scenario, the control is small and there should be several of these contact cards visible on the screen.
+ */
+struct ContactCardLayoutInfo
+{
+  Dali::Vector2 unfoldedPosition; ///< The position of the entire contact card when all details (unfolded) are shown
+  Dali::Vector2 unfoldedSize;     ///< The size of the entire contact card when all details (unfolded) are shown
+  Dali::Vector2 foldedSize;       ///< The size of each contact card when only the brief information is shown (folded)
+
+  Dali::Vector2 padding; ///< The default padding to use throughout
+
+  Dali::Vector2 headerSize;             ///< The size of the header area (only shown when unfolded)
+  Dali::Vector2 headerFoldedPosition;   ///< The position of the header area when folded - required for animation purposes only as it's actually clipped
+  Dali::Vector2 headerUnfoldedPosition; ///< The position of the header area when unfolded
+
+  Dali::Vector2 imageSize;             ///< The size of the image
+  Dali::Vector2 imageFoldedPosition;   ///< The position of the image when folded
+  Dali::Vector2 imageUnfoldedPosition; ///< The position of the image when unfolded
+
+  Dali::Vector2 textFoldedPosition;   ///< The position of the text when folded
+  Dali::Vector2 textUnfoldedPosition; ///< The position of the text when unfolded
+};
+
+#endif // CONTACT_CARD_LAYOUT_INFO_H
+
diff --git a/examples/contact-cards/contact-card-layouter.cpp b/examples/contact-cards/contact-card-layouter.cpp
new file mode 100644
index 00000000..c638f836
--- /dev/null
+++ b/examples/contact-cards/contact-card-layouter.cpp
@@ -0,0 +1,121 @@
+/*
+ * 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.
+ *
+ */
+
+// CLASS HEADER
+#include "contact-card-layouter.h"
+
+// EXTERNAL INCLUDES
+#include <dali/public-api/common/stage.h>
+
+// INTERNAL INCLUDES
+#include "contact-card.h"
+
+using namespace Dali;
+
+namespace
+{
+const float DEFAULT_PADDING = 25.0f;
+
+const float MINIMUM_ITEMS_PER_ROW_OR_COLUMN( 3.0f );
+
+const float HEADER_HEIGHT_TO_UNFOLDED_SIZE_RATIO( 0.1f );
+const Vector2 HEADER_FOLDED_POSITION_AS_RATIO_OF_SIZE( -0.05f, -1.5f );
+const Vector2 HEADER_UNFOLDED_POSITION( Vector2::ZERO );
+
+const float IMAGE_SIZE_AS_RATIO_TO_FOLDED_SIZE( 0.5f );
+const Vector2 IMAGE_FOLDED_POSITION_AS_RATIO_OF_SIZE( 0.5f, 0.25f );
+
+const float FOLDED_TEXT_POSITION_AS_RATIO_OF_IMAGE_SIZE( 1.01f );
+} // unnamed namespace
+
+ContactCardLayouter::ContactCardLayouter()
+: mContactCardLayoutInfo(),
+  mContactCards(),
+  mLastPosition(),
+  mPositionIncrementer(),
+  mItemsPerRow( 0 ),
+  mInitialized( false )
+{
+}
+
+ContactCardLayouter::~ContactCardLayouter()
+{
+  // Nothing to do as ContactCardContainer uses intrusive pointers so they will be automatically deleted
+}
+
+void ContactCardLayouter::AddContact( const std::string& contactName, const std::string& contactAddress, const std::string& imagePath )
+{
+  if( ! mInitialized )
+  {
+    // Set up the common layouting info shared between all contact cards when first called
+
+    mContactCardLayoutInfo.unfoldedPosition = mContactCardLayoutInfo.padding = Vector2( DEFAULT_PADDING, DEFAULT_PADDING );
+    mContactCardLayoutInfo.unfoldedSize = Stage::GetCurrent().GetSize() - mContactCardLayoutInfo.padding * ( MINIMUM_ITEMS_PER_ROW_OR_COLUMN - 1.0f );
+
+    // Calculate the size of the folded card (use the minimum of width/height as size)
+    mContactCardLayoutInfo.foldedSize = ( mContactCardLayoutInfo.unfoldedSize - ( mContactCardLayoutInfo.padding * ( MINIMUM_ITEMS_PER_ROW_OR_COLUMN - 1.0f ) ) ) / MINIMUM_ITEMS_PER_ROW_OR_COLUMN;
+    mContactCardLayoutInfo.foldedSize.width = mContactCardLayoutInfo.foldedSize.height = std::min( mContactCardLayoutInfo.foldedSize.width, mContactCardLayoutInfo.foldedSize.height );
+
+    // Set the size and positions of the header
+    mContactCardLayoutInfo.headerSize.width = mContactCardLayoutInfo.unfoldedSize.width;
+    mContactCardLayoutInfo.headerSize.height = mContactCardLayoutInfo.unfoldedSize.height * HEADER_HEIGHT_TO_UNFOLDED_SIZE_RATIO;
+    mContactCardLayoutInfo.headerFoldedPosition = mContactCardLayoutInfo.headerSize * HEADER_FOLDED_POSITION_AS_RATIO_OF_SIZE;
+    mContactCardLayoutInfo.headerUnfoldedPosition = HEADER_UNFOLDED_POSITION;
+
+    // Set the image size and positions
+    mContactCardLayoutInfo.imageSize = mContactCardLayoutInfo.foldedSize * IMAGE_SIZE_AS_RATIO_TO_FOLDED_SIZE;
+    mContactCardLayoutInfo.imageFoldedPosition = mContactCardLayoutInfo.imageSize * IMAGE_FOLDED_POSITION_AS_RATIO_OF_SIZE;
+    mContactCardLayoutInfo.imageUnfoldedPosition.x = mContactCardLayoutInfo.padding.width;
+    mContactCardLayoutInfo.imageUnfoldedPosition.y = mContactCardLayoutInfo.headerSize.height + mContactCardLayoutInfo.padding.height;
+
+    // Set the positions of the contact name
+    mContactCardLayoutInfo.textFoldedPosition.x = 0.0f;
+    mContactCardLayoutInfo.textFoldedPosition.y = mContactCardLayoutInfo.imageFoldedPosition.x + mContactCardLayoutInfo.imageSize.height * FOLDED_TEXT_POSITION_AS_RATIO_OF_IMAGE_SIZE;
+    mContactCardLayoutInfo.textUnfoldedPosition.x = mContactCardLayoutInfo.padding.width;
+    mContactCardLayoutInfo.textUnfoldedPosition.y = mContactCardLayoutInfo.imageUnfoldedPosition.y + mContactCardLayoutInfo.imageSize.height + mContactCardLayoutInfo.padding.height;
+
+    // Figure out the positions of the contact cards
+    mItemsPerRow = ( mContactCardLayoutInfo.unfoldedSize.width + mContactCardLayoutInfo.padding.width ) / ( mContactCardLayoutInfo.foldedSize.width + mContactCardLayoutInfo.padding.width );
+    mLastPosition = mContactCardLayoutInfo.unfoldedPosition;
+    mPositionIncrementer.x = mContactCardLayoutInfo.foldedSize.width + mContactCardLayoutInfo.padding.width;
+    mPositionIncrementer.y = mContactCardLayoutInfo.foldedSize.height + mContactCardLayoutInfo.padding.height;
+
+    mInitialized = true;
+  }
+
+  // Create a new contact card and add to our container
+  mContactCards.push_back( new ContactCard( mContactCardLayoutInfo, contactName, contactAddress, imagePath, NextCardPosition() ) );
+}
+
+const Vector2& ContactCardLayouter::NextCardPosition()
+{
+  size_t currentNumOfCards = mContactCards.size();
+
+  if( currentNumOfCards )
+  {
+    if( currentNumOfCards % mItemsPerRow )
+    {
+      mLastPosition.x += mPositionIncrementer.x;
+    }
+    else // go to the next row
+    {
+      mLastPosition.x = mContactCardLayoutInfo.unfoldedPosition.x;
+      mLastPosition.y += mPositionIncrementer.y;
+    }
+  }
+  return mLastPosition;
+}
diff --git a/examples/contact-cards/contact-card-layouter.h b/examples/contact-cards/contact-card-layouter.h
new file mode 100644
index 00000000..ed4d17bb
--- /dev/null
+++ b/examples/contact-cards/contact-card-layouter.h
@@ -0,0 +1,85 @@
+#ifndef CONTACT_CARD_LAYOUTER_H
+#define CONTACT_CARD_LAYOUTER_H
+
+/*
+ * 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.
+ *
+ */
+
+// EXTERNAL INCLUDES
+#include <vector>
+#include <string>
+#include <dali/public-api/common/intrusive-ptr.h>
+#include <dali/public-api/math/vector2.h>
+
+// INTERNAL INCLUDES
+#include "contact-card-layout-info.h"
+
+class ContactCard;
+
+/**
+ * @brief This class lays out contact cards on the screen appropriately.
+ *
+ * The contact cards are added to the stage directly and it uses the stage size to figure out exactly how to layout them.
+ * It supports a minimum of 3 items on each row or column.
+ *
+ * Relayouting is not supported.
+ */
+class ContactCardLayouter
+{
+public:
+
+  /**
+   * @brief Constructor.
+   */
+  ContactCardLayouter();
+
+  /**
+   * @brief Destructor.
+   */
+  ~ContactCardLayouter();
+
+  /**
+   * @brief Creates a contact card with the given information.
+   * @param[in]  contactName     The name of the contact to display.
+   * @param[in]  contactAddress  The address of the contact to display.
+   * @param[in]  imagePath       The path to the image to display.
+   */
+  void AddContact( const std::string& contactName, const std::string& contactAddress, const std::string& imagePath );
+
+private:
+
+  /**
+   * @brief Calculates the next position of the contact card that's about to be added to our container.
+   * @return A reference to the next position.
+   */
+  const Dali::Vector2& NextCardPosition();
+
+  ContactCardLayoutInfo mContactCardLayoutInfo; ///< The common layouting information used by all contact cards. Set up when AddContact is first called.
+
+  typedef Dali::IntrusivePtr< ContactCard > ContactCardPtr; ///< Better than raw pointers as these are ref counted and the memory is released when the count reduces to 0.
+  typedef std::vector< ContactCardPtr > ContactCardContainer;
+  ContactCardContainer mContactCards; ///< Contains all the contact cards.
+
+  Dali::Vector2 mLastPosition; ///< The last position a contact card was added.
+  Dali::Vector2 mPositionIncrementer; ///< Calculated once when AddContact is first called.
+  size_t mItemsPerRow; ///< Calculated once when AddContact is first called and stores the number of items we have in a row.
+
+  bool mInitialized; ///< Whether initialization has taken place or not.
+};
+
+
+
+#endif // CONTACT_CARD_LAYOUTER_H
diff --git a/examples/contact-cards/contact-card.cpp b/examples/contact-cards/contact-card.cpp
new file mode 100644
index 00000000..eb89a6cb
--- /dev/null
+++ b/examples/contact-cards/contact-card.cpp
@@ -0,0 +1,278 @@
+/*
+ * 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.
+ *
+ */
+
+// CLASS HEADER
+#include "contact-card.h"
+
+// EXTERNAL INCLUDES
+#include <dali-toolkit/dali-toolkit.h>
+
+// INTERNAL INCLUDES
+#include "contact-card-layout-info.h"
+#include "clipped-image.h"
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+namespace
+{
+/*
+ * The constants below are used to create the following Unfold Animation.
+ *
+ * 0ms  50  100  150  200  250  300  350  400 Total Animation time in Milliseconds
+ * |    |    |    |    |    |    |    |    |
+ * o-----------------------------------o   |  X Position Animation            ( 0ms To 360ms)
+ * |   o-----------------------------------o  Y Position Animation            (40ms To 400ms)
+ * o-----------------------------------o   |  Width Animation                 ( 0ms To 360ms)
+ * |   o-----------------------------------o  Height Animation                (40ms To 400ms)
+ * o-------o |    |    |    |    |    |    |  Fade out Name Text Animation    ( 0ms To  80ms)
+ * |       o-------o   |    |    |    |    |  Fade in Details Text Animation  (80ms To 160ms)
+ * o---------------o   |    |    |    |    |  Fade out other cards Animation  ( 0ms To 160ms)
+ * o---------------------------------------o  Mesh Morph Animation            ( 0ms To 400ms)
+ */
+const TimePeriod TIME_PERIOD_UNFOLD_X( 0.0f,  0.36f ); ///< Start at 0ms, duration 360ms
+const TimePeriod TIME_PERIOD_UNFOLD_Y( 0.04f, 0.36f ); ///< Start at 40ms, duration 360ms
+const TimePeriod TIME_PERIOD_UNFOLD_WIDTH( 0.0f,  0.36f ); ///< Start at 0ms, duration 360ms
+const TimePeriod TIME_PERIOD_UNFOLD_HEIGHT( 0.04f, 0.36f ); ///< Start at 40ms, duration 360ms
+const TimePeriod TIME_PERIOD_UNFOLD_NAME_OPACITY( 0.0f, 0.08f ); ///< Start at 0ms, duration 80ms
+const TimePeriod TIME_PERIOD_UNFOLD_DETAIL_OPACITY( 0.08f, 0.08f ); ///< Start at 80ms, duration 80ms
+const TimePeriod TIME_PERIOD_UNFOLD_SIBLING_OPACITY( 0.0f, 0.08f ); ///< Start at 0ms, duration 80ms
+const TimePeriod TIME_PERIOD_UNFOLD_MESH_MORPH( 0.0f, 0.4f ); ///< Start at 0ms, duration 400ms
+
+/*
+ * The constants below are used to create the following Fold Animation:
+ *
+ * 0ms  50  100  150  200  250  300  350  400 Total Animation time in Milliseconds
+ * |    |    |    |    |    |    |    |    |
+ * |    |o---------------------------------o  X Position Animation            ( 64ms To 400ms)
+ * o---------------------------------o|    |  Y Position Animation            (  0ms To 336ms)
+ * |    |o---------------------------------o  Width Animation                 ( 64ms To 400ms)
+ * o---------------------------------o|    |  Height Animation                (  0ms To 336ms)
+ * |       o-------o   |    |    |    |    |  Fade in Name Text animation     ( 80ms To 160ms)
+ * o-------o |    |    |    |    |    |    |  Fade out Details Text animation (  0ms To  80ms)
+ * |    |    |    |    |    |    | o-------o  Fade in other cards animation   (320ms To 400ms)
+ * o---------------------------------------o  Morph Animation                 (  0ms To 400ms)
+ */
+const TimePeriod TIME_PERIOD_FOLD_X( 0.064f, 0.336f ); ///< Start at 64ms, duration 336ms
+const TimePeriod TIME_PERIOD_FOLD_Y( 0.0f, 0.336f ); ///< Start at 0ms, duration 336ms
+const TimePeriod TIME_PERIOD_FOLD_WIDTH( 0.064f, 0.336f ); ///< Start at 64ms, duration 336ms
+const TimePeriod TIME_PERIOD_FOLD_HEIGHT( 0.0f, 0.336f ); ///< Start at 0ms, duration 336ms
+const TimePeriod TIME_PERIOD_FOLD_NAME_OPACITY( 0.08f, 0.08f ); ///< Start at 80ms, duration 80ms
+const TimePeriod TIME_PERIOD_FOLD_DETAIL_OPACITY( 0.0f, 0.08f ); ///< Start at 0ms, duration 80ms
+const TimePeriod TIME_PERIOD_FOLD_SIBLING_OPACITY( 0.32f, 0.08f ); ///< Start at 320ms, duration 80ms
+const TimePeriod TIME_PERIOD_FOLD_MESH_MORPH( 0.0f, 0.4f ); ///< Start at 0ms, duration 400ms
+
+AlphaFunction ALPHA_FUNCTION_UNFOLD( AlphaFunction::DEFAULT ); ///< Alpha function used for the Unfold Animation
+AlphaFunction ALPHA_FUNCTION_FOLD( AlphaFunction::EASE_IN_OUT ); ///< Alpha function used for the Fold Animation
+
+const Vector4 HEADER_COLOR( 231.0f/255.0f, 231.0f/255.0f, 231.0f/255.0f, 1.0f ); ///< The color of the header
+
+} // unnamed namespace
+
+ContactCard::ContactCard(
+    const ContactCardLayoutInfo& contactCardLayoutInfo,
+    const std::string& contactName,
+    const std::string& contactAddress,
+    const std::string& imagePath,
+    const Vector2& position )
+: mTapDetector(),
+  mContactCard(),
+  mHeader(),
+  mClippedImage(),
+  mNameText(),
+  mDetailText(),
+  mSlotDelegate( this ),
+  mContactCardLayoutInfo( contactCardLayoutInfo ),
+  foldedPosition( position ),
+  mClippedImagePropertyIndex( Property::INVALID_INDEX ),
+  mFolded( true )
+{
+  // Create a control which will be used for the background and to clip the contents
+  mContactCard = Control::New();
+  mContactCard.SetProperty( Control::Property::BACKGROUND,
+                            Property::Map().Add( Visual::Property::TYPE, Visual::COLOR )
+                                           .Add( ColorVisual::Property::MIX_COLOR, Color::WHITE ) );
+  mContactCard.SetProperty( Actor::Property::CLIPPING_MODE, ClippingMode::CLIP_CHILDREN );
+  mContactCard.SetParentOrigin( ParentOrigin::TOP_LEFT );
+  mContactCard.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+  mContactCard.SetPosition( foldedPosition.x, foldedPosition.y );
+  mContactCard.SetSize( mContactCardLayoutInfo.foldedSize );
+  Stage::GetCurrent().Add( mContactCard );
+
+  // Create the header which will be shown only when the contact is unfolded
+  mHeader = Control::New();
+  mHeader.SetSize( mContactCardLayoutInfo.headerSize );
+  mHeader.SetProperty( Control::Property::BACKGROUND,
+                       Property::Map().Add( Visual::Property::TYPE, Visual::COLOR )
+                                      .Add( ColorVisual::Property::MIX_COLOR, HEADER_COLOR ) );
+  mHeader.SetParentOrigin( ParentOrigin::TOP_LEFT );
+  mHeader.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+  mHeader.SetPosition( mContactCardLayoutInfo.headerFoldedPosition.x, mContactCardLayoutInfo.headerFoldedPosition.y );
+
+  // Create a clipped image (whose clipping can be animated)
+  mClippedImage = ClippedImage::Create( imagePath, mClippedImagePropertyIndex );
+  mClippedImage.SetSize( mContactCardLayoutInfo.imageSize );
+  mClippedImage.SetParentOrigin( ParentOrigin::TOP_LEFT );
+  mClippedImage.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+  mClippedImage.SetPosition( mContactCardLayoutInfo.imageFoldedPosition.x, mContactCardLayoutInfo.imageFoldedPosition.y );
+  mContactCard.Add( mClippedImage );
+
+  // Add the text label for just the name
+  mNameText = TextLabel::New( contactName );
+  mNameText.SetStyleName( "ContactNameTextLabel" );
+  mNameText.SetParentOrigin( ParentOrigin::TOP_LEFT );
+  mNameText.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+  mNameText.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+  mNameText.SetPosition( mContactCardLayoutInfo.textFoldedPosition.x, mContactCardLayoutInfo.textFoldedPosition.y );
+  mContactCard.Add( mNameText );
+
+  // Create the detail text-label
+  std::string detailString( contactName );
+  detailString += "\n\n";
+  detailString += contactAddress;
+
+  mDetailText = TextLabel::New( detailString );
+  mDetailText.SetStyleName( "ContactDetailTextLabel" );
+  mDetailText.SetParentOrigin( ParentOrigin::TOP_LEFT );
+  mDetailText.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+  mDetailText.SetPosition( mContactCardLayoutInfo.textFoldedPosition.x, mContactCardLayoutInfo.textFoldedPosition.y );
+  mDetailText.SetSize( Vector2( mContactCardLayoutInfo.unfoldedSize.width - mContactCardLayoutInfo.textFoldedPosition.x * 2.0f, 0.0f ) );
+  mDetailText.SetOpacity( 0.0f );
+
+  // Attach tap detection to the overall clip control
+  mTapDetector = TapGestureDetector::New();
+  mTapDetector.Attach( mContactCard );
+  mTapDetector.DetectedSignal().Connect( mSlotDelegate, &ContactCard::OnTap );
+}
+
+ContactCard::~ContactCard()
+{
+  if( mContactCard )
+  {
+    mContactCard.Unparent();
+  }
+}
+
+void ContactCard::OnTap( Actor actor, const TapGesture& gesture )
+{
+  if( mFolded )
+  {
+    mContactCard.Add( mHeader );
+    mContactCard.Add( mDetailText );
+
+    // Animate the size of the control (and clipping area)
+    Animation animation = Animation::New( 0.0f ); // Overall duration is unimportant as superseded by TimePeriods set later
+    animation.AnimateTo( Property( mContactCard, Actor::Property::POSITION_X ),  mContactCardLayoutInfo.unfoldedPosition.x,  ALPHA_FUNCTION_UNFOLD, TIME_PERIOD_UNFOLD_X );
+    animation.AnimateTo( Property( mContactCard, Actor::Property::POSITION_Y ),  mContactCardLayoutInfo.unfoldedPosition.y,  ALPHA_FUNCTION_UNFOLD, TIME_PERIOD_UNFOLD_Y );
+    animation.AnimateTo( Property( mContactCard, Actor::Property::SIZE_WIDTH ),  mContactCardLayoutInfo.unfoldedSize.width,  ALPHA_FUNCTION_UNFOLD, TIME_PERIOD_UNFOLD_WIDTH );
+    animation.AnimateTo( Property( mContactCard, Actor::Property::SIZE_HEIGHT ), mContactCardLayoutInfo.unfoldedSize.height, ALPHA_FUNCTION_UNFOLD, TIME_PERIOD_UNFOLD_HEIGHT );
+
+    // Animate the header area into position
+    animation.AnimateTo( Property( mHeader, Actor::Property::POSITION_X ), mContactCardLayoutInfo.headerUnfoldedPosition.x, ALPHA_FUNCTION_UNFOLD, TIME_PERIOD_UNFOLD_X );
+    animation.AnimateTo( Property( mHeader, Actor::Property::POSITION_Y ), mContactCardLayoutInfo.headerUnfoldedPosition.y, ALPHA_FUNCTION_UNFOLD, TIME_PERIOD_UNFOLD_Y );
+
+    // Animate the clipped image into the unfolded position and into a quad
+    animation.AnimateTo( Property( mClippedImage, Actor::Property::POSITION_X ),  mContactCardLayoutInfo.imageUnfoldedPosition.x, ALPHA_FUNCTION_UNFOLD, TIME_PERIOD_UNFOLD_X );
+    animation.AnimateTo( Property( mClippedImage, Actor::Property::POSITION_Y ),  mContactCardLayoutInfo.imageUnfoldedPosition.y, ALPHA_FUNCTION_UNFOLD, TIME_PERIOD_UNFOLD_Y );
+    animation.AnimateTo( Property( mClippedImage, mClippedImagePropertyIndex ), ClippedImage::QUAD_GEOMETRY, ALPHA_FUNCTION_UNFOLD, TIME_PERIOD_UNFOLD_MESH_MORPH );
+
+    // Fade out the opacity of the name, and animate into the unfolded position
+    animation.AnimateTo( Property( mNameText, Actor::Property::COLOR_ALPHA ), 0.0f, ALPHA_FUNCTION_UNFOLD, TIME_PERIOD_UNFOLD_NAME_OPACITY );
+    animation.AnimateTo( Property( mNameText, Actor::Property::POSITION_X ),  mContactCardLayoutInfo.textUnfoldedPosition.x, ALPHA_FUNCTION_UNFOLD, TIME_PERIOD_UNFOLD_X );
+    animation.AnimateTo( Property( mNameText, Actor::Property::POSITION_Y ),  mContactCardLayoutInfo.textUnfoldedPosition.y, ALPHA_FUNCTION_UNFOLD, TIME_PERIOD_UNFOLD_Y );
+
+    // Fade in the opacity of the detail, and animate into the unfolded position
+    animation.AnimateTo( Property( mDetailText, Actor::Property::COLOR_ALPHA ), 1.0f, ALPHA_FUNCTION_UNFOLD, TIME_PERIOD_UNFOLD_DETAIL_OPACITY );
+    animation.AnimateTo( Property( mDetailText, Actor::Property::POSITION_X ),  mContactCardLayoutInfo.textUnfoldedPosition.x, ALPHA_FUNCTION_UNFOLD, TIME_PERIOD_UNFOLD_X );
+    animation.AnimateTo( Property( mDetailText, Actor::Property::POSITION_Y ),  mContactCardLayoutInfo.textUnfoldedPosition.y, ALPHA_FUNCTION_UNFOLD, TIME_PERIOD_UNFOLD_Y );
+
+    // Fade out all the siblings
+    Actor parent = actor.GetParent();
+    for( size_t i = 0; i < parent.GetChildCount(); ++i )
+    {
+      Actor sibling = parent.GetChildAt( i );
+      if( sibling != actor )
+      {
+        animation.AnimateTo( Property( sibling, Actor::Property::COLOR_ALPHA ), 0.0f, ALPHA_FUNCTION_UNFOLD, TIME_PERIOD_UNFOLD_SIBLING_OPACITY );
+        sibling.SetSensitive( false );
+      }
+    }
+
+    animation.FinishedSignal().Connect( mSlotDelegate, &ContactCard::OnAnimationFinished );
+    animation.Play();
+  }
+  else
+  {
+    mContactCard.Add( mNameText );
+
+    // Animate the size of the control (and clipping area)
+    Animation animation = Animation::New( 0.0f ); // Overall duration is unimportant as superseded by TimePeriods set later
+    animation.AnimateTo( Property( mContactCard, Actor::Property::POSITION_X ),  foldedPosition.x, ALPHA_FUNCTION_FOLD, TIME_PERIOD_FOLD_X );
+    animation.AnimateTo( Property( mContactCard, Actor::Property::POSITION_Y ),  foldedPosition.y, ALPHA_FUNCTION_FOLD, TIME_PERIOD_FOLD_Y );
+    animation.AnimateTo( Property( mContactCard, Actor::Property::SIZE_WIDTH ),  mContactCardLayoutInfo.foldedSize.width,  ALPHA_FUNCTION_FOLD, TIME_PERIOD_FOLD_WIDTH );
+    animation.AnimateTo( Property( mContactCard, Actor::Property::SIZE_HEIGHT ), mContactCardLayoutInfo.foldedSize.height, ALPHA_FUNCTION_FOLD, TIME_PERIOD_FOLD_HEIGHT );
+
+    // Animate the header area out of position
+    animation.AnimateTo( Property( mHeader, Actor::Property::POSITION_X ), mContactCardLayoutInfo.headerFoldedPosition.x, ALPHA_FUNCTION_FOLD, TIME_PERIOD_FOLD_X );
+    animation.AnimateTo( Property( mHeader, Actor::Property::POSITION_Y ), mContactCardLayoutInfo.headerFoldedPosition.y, ALPHA_FUNCTION_FOLD, TIME_PERIOD_FOLD_Y );
+
+    // Animate the clipped image into the folded position and into a circle
+    animation.AnimateTo( Property( mClippedImage, Actor::Property::POSITION_X ),  mContactCardLayoutInfo.imageFoldedPosition.x, ALPHA_FUNCTION_FOLD, TIME_PERIOD_FOLD_X );
+    animation.AnimateTo( Property( mClippedImage, Actor::Property::POSITION_Y ),  mContactCardLayoutInfo.imageFoldedPosition.y, ALPHA_FUNCTION_FOLD, TIME_PERIOD_FOLD_Y );
+    animation.AnimateTo( Property( mClippedImage, mClippedImagePropertyIndex ), ClippedImage::CIRCLE_GEOMETRY, ALPHA_FUNCTION_FOLD, TIME_PERIOD_FOLD_MESH_MORPH );
+
+    // Fade in the opacity of the name, and animate into the folded position
+    animation.AnimateTo( Property( mNameText, Actor::Property::COLOR_ALPHA ), 1.0f, ALPHA_FUNCTION_FOLD, TIME_PERIOD_FOLD_NAME_OPACITY );
+    animation.AnimateTo( Property( mNameText, Actor::Property::POSITION_X ),  mContactCardLayoutInfo.textFoldedPosition.x, ALPHA_FUNCTION_FOLD, TIME_PERIOD_FOLD_X );
+    animation.AnimateTo( Property( mNameText, Actor::Property::POSITION_Y ),  mContactCardLayoutInfo.textFoldedPosition.y, ALPHA_FUNCTION_FOLD, TIME_PERIOD_FOLD_Y );
+
+    // Fade out the opacity of the detail, and animate into the folded position
+    animation.AnimateTo( Property( mDetailText, Actor::Property::COLOR_ALPHA ), 0.0f, ALPHA_FUNCTION_FOLD, TIME_PERIOD_FOLD_DETAIL_OPACITY );
+    animation.AnimateTo( Property( mDetailText, Actor::Property::POSITION_X ),  mContactCardLayoutInfo.textFoldedPosition.x, ALPHA_FUNCTION_FOLD, TIME_PERIOD_FOLD_X );
+    animation.AnimateTo( Property( mDetailText, Actor::Property::POSITION_Y ),  mContactCardLayoutInfo.textFoldedPosition.y, ALPHA_FUNCTION_FOLD, TIME_PERIOD_FOLD_Y );
+
+    // Slowly fade in all the siblings
+    Actor parent = actor.GetParent();
+    for( size_t i = 0; i < parent.GetChildCount(); ++i )
+    {
+      Actor sibling = parent.GetChildAt( i );
+      if( sibling != actor )
+      {
+        animation.AnimateTo( Property( sibling, Actor::Property::COLOR_ALPHA ), 1.0f, ALPHA_FUNCTION_FOLD, TIME_PERIOD_FOLD_SIBLING_OPACITY );
+        sibling.SetSensitive( true );
+      }
+    }
+
+    animation.FinishedSignal().Connect( mSlotDelegate, &ContactCard::OnAnimationFinished );
+    animation.Play();
+  }
+
+  mFolded = !mFolded;
+}
+
+void ContactCard::OnAnimationFinished( Dali::Animation& animation )
+{
+  if( mFolded )
+  {
+    mHeader.Unparent();
+    mDetailText.Unparent();
+  }
+  else
+  {
+    mNameText.Unparent();
+  }
+}
diff --git a/examples/contact-cards/contact-card.h b/examples/contact-cards/contact-card.h
new file mode 100644
index 00000000..043bfdeb
--- /dev/null
+++ b/examples/contact-cards/contact-card.h
@@ -0,0 +1,96 @@
+#ifndef CONTACT_CARD_H
+#define CONTACT_CARD_H
+
+/*
+ * 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.
+ *
+ */
+
+// EXTERNAL INCLUDES
+#include <string>
+#include <dali/public-api/actors/actor.h>
+#include <dali/public-api/events/tap-gesture-detector.h>
+#include <dali/public-api/object/ref-object.h>
+#include <dali-toolkit/public-api/controls/control.h>
+
+class ContactCardLayoutInfo;
+
+/**
+ * @brief Creates and sets up animations for a contact card
+ *
+ * Each contact card has two states, folded and unfolded.
+ * In this context, "unfolded" means when all the details, including the name, address and image are shown.
+ * In this scenario, the control takes up most of the screen.
+ *
+ * When the contact card is "folded", this means when only brief information is shown to the user, i.e. the image and name.
+ * In this scenario, the control is small and there should be several of these contact cards visible on the screen.
+ *
+ * The contact card creates several controls that it requires to appropriately display itself in both of these states.
+ */
+class ContactCard : public Dali::RefObject
+{
+public:
+
+  /**
+   * @brief Constructor.
+   *
+   * This will create all the controls and add them to the stage so should only be called after the init-signal from the Application has been received.
+   *
+   * @param[in]  contactCardLayoutInfo  Reference to the common data used by all contact cards.
+   * @param[in]  contactName            The name of the contact to display.
+   * @param[in]  contactAddress         The address of the contact to display.
+   * @param[in]  imagePath              The path to the image to display.
+   * @param[in]  position               The unique folded position of this particular contact-card.
+   */
+  ContactCard( const ContactCardLayoutInfo& contactCardLayoutInfo, const std::string& contactName, const std::string& contactAddress, const std::string& imagePath, const Dali::Vector2& position );
+
+private:
+
+  /**
+   * @brief Private Destructor. Will only be deleted when ref-count goes to 0.
+   *
+   * Unparent the created contact card (i.e. remove from stage).
+   */
+  ~ContactCard();
+
+  /**
+   * @brief Called when this contact card is tapped.
+   * @param[in] actor The tapped actor.
+   * @param[in] gesture The tap gesture.
+   */
+  void OnTap( Dali::Actor actor, const Dali::TapGesture& gesture );
+
+  /**
+   * @brief Called when the animation finishes.
+   * @param[in] animation The animation which has just finished.
+   */
+  void OnAnimationFinished( Dali::Animation& animation );
+
+  Dali::TapGestureDetector mTapDetector; ///< Used for tap detection.
+  Dali::Toolkit::Control mContactCard; ///< Used for the background and to clip the contents.
+  Dali::Toolkit::Control mHeader; ///< Header shown when unfolded.
+  Dali::Toolkit::Control mClippedImage; ///< The image representing the contact (whose clipping can be animated).
+  Dali::Toolkit::Control mNameText; ///< The text shown when folded.
+  Dali::Toolkit::Control mDetailText; ///< The text shown when unfolded.
+
+  Dali::SlotDelegate< ContactCard > mSlotDelegate; ///< Used to automatically disconnect our member functions from signals that this class connects to upon destruction. Can be used instead of inheriting from ConnectionTracker.
+
+  const ContactCardLayoutInfo& mContactCardLayoutInfo; ///< Reference to the common data used by all contact cards.
+  const Dali::Vector2 foldedPosition; ///< The unique position of this card when it is folded.
+  Dali::Property::Index mClippedImagePropertyIndex; ///< Index used to animate the clipping of mClippedImage.
+  bool mFolded; ///< Whether the contact card is folded or not.
+};
+
+#endif // CONTACT_CARD_H
diff --git a/examples/contact-cards/contact-cards-example.cpp b/examples/contact-cards/contact-cards-example.cpp
new file mode 100644
index 00000000..d9c4d579
--- /dev/null
+++ b/examples/contact-cards/contact-cards-example.cpp
@@ -0,0 +1,120 @@
+/*
+ * 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.
+ *
+ */
+
+// EXTERNAL INCLUDES
+#include <vector>
+#include <dali/public-api/adaptor-framework/application.h>
+#include <dali/public-api/adaptor-framework/key.h>
+#include <dali/public-api/common/stage.h>
+#include <dali/public-api/events/key-event.h>
+
+// INTERNAL INCLUDES
+#include "contact-card-layouter.h"
+#include "contact-data.h"
+
+using namespace Dali;
+
+namespace
+{
+const Vector4 STAGE_COLOR( 211.0f / 255.0f, 211.0f / 255.0f, 211.0f / 255.0f, 1.0f ); ///< The color of the stage
+const char * const THEME_PATH( DEMO_STYLE_DIR "contact-cards-example-theme.json" ); ///< The theme used for this example
+} // unnamed namespace
+
+/**
+ * @brief Creates several contact cards that animate between a folded and unfolded state.
+ *
+ * This demonstrates how different animations can start and stop at different times within the same Animation function.
+ * Additionally, this also shows how to morph between two different geometries.
+ *
+ * ContactCardLayouter: This class is used to lay out the different contact cards on the screen.
+ *                      This takes stage size into account but does not support relayouting.
+ * ContactCard: This class represents each contact card on the screen.
+ *              Two animations are set up in this class which animate several properties with multiple start and stop times.
+ *              An overview of the two animations can be found in contact-card.cpp.
+ * ContactCardLayoutInfo: This is a structure to store common layout information and is created by the ContactCardLayouter and used by each ContactCard.
+ * ContactData: This namespace contains a table which has the contact information we use to populate the contact cards.
+ * ClippedImage: This namespace provides a helper function which creates an ImageView which is added to a control that has clipping.
+ *               This clipping comes in the form of a Circle or Quad.
+ *               The Vertex shader mixes in the Circle and Quad geometry depending on the value of a uniform float.
+ *               Animating this float between CIRCLE_GEOMETRY and QUAD_GEOMETRY is what enables the morphing between the two geometries.
+ */
+class ContactCardController : public ConnectionTracker // Inherit from ConnectionTracker so that our signals can be automatically disconnected upon our destruction.
+{
+public:
+
+  /**
+   * @brief Constructor.
+   * @param[in]  application A reference to the Application class.
+   */
+  ContactCardController( Application& application )
+  : mApplication( application )
+  {
+    // Connect to the Application's Init signal
+    mApplication.InitSignal().Connect( this, &ContactCardController::Create );
+  }
+
+private:
+
+  /**
+   * @brief Called to initialise the application content
+   * @param[in] application A reference to the Application class.
+   */
+  void Create( Application& application )
+  {
+    // Hide the indicator bar
+    application.GetWindow().ShowIndicator( Dali::Window::INVISIBLE );
+
+    // Set the stage background color and connect to the stage's key signal to allow Back and Escape to exit.
+    Stage stage = Stage::GetCurrent();
+    stage.SetBackgroundColor( STAGE_COLOR );
+    stage.KeyEventSignal().Connect( this, &ContactCardController::OnKeyEvent );
+
+    // Add all the contacts to the layouter
+    for( size_t i = 0; i < ContactData::TABLE_SIZE; ++i )
+    {
+      mContactCardLayouter.AddContact( ContactData::TABLE[ i ].name, ContactData::TABLE[ i ].address, ContactData::TABLE[ i ].imagePath );
+    }
+  }
+
+  /**
+   * @brief Called when any key event is received
+   *
+   * Will use this to quit the application if Back or the Escape key is received
+   * @param[in] event The key event information
+   */
+  void OnKeyEvent( const KeyEvent& event )
+  {
+    if( event.state == KeyEvent::Down )
+    {
+      if ( IsKey( event, Dali::DALI_KEY_ESCAPE ) || IsKey( event, Dali::DALI_KEY_BACK ) )
+      {
+        mApplication.Quit();
+      }
+    }
+  }
+
+  Application& mApplication; ///< Reference to the application class.
+  ContactCardLayouter mContactCardLayouter; ///< The contact card layouter.
+};
+
+int DALI_EXPORT_API main( int argc, char **argv )
+{
+  Application application = Application::New( &argc, &argv, THEME_PATH );
+  ContactCardController contactCardController( application );
+  application.MainLoop();
+  return 0;
+}
diff --git a/examples/contact-cards/contact-data.cpp b/examples/contact-cards/contact-data.cpp
new file mode 100644
index 00000000..5ff31631
--- /dev/null
+++ b/examples/contact-cards/contact-data.cpp
@@ -0,0 +1,44 @@
+/*
+ * 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.
+ *
+ */
+
+// HEADER
+#include "contact-data.h"
+
+namespace ContactData
+{
+
+const Item TABLE[] =
+{
+  { "Shelia Ramos",       "19 Wormley Ct\nWinters Way\nWaltham Abbey\nEN9 3HW", DEMO_IMAGE_DIR "gallery-small-19.jpg" },
+  { "Walter Jensen",      "32 Upper Fant Rd\nMaidstone\nME16 8DN",              DEMO_IMAGE_DIR "gallery-small-2.jpg" },
+  { "Randal Parks",       "8 Rymill St\nLondon\nE16 2JF",                       DEMO_IMAGE_DIR "gallery-small-3.jpg" },
+  { "Tasha Cooper",       "2 Kyles View\nColintraive\nPA22 3AS",                DEMO_IMAGE_DIR "gallery-small-4.jpg" },
+  { "Domingo Lynch",      "Red Lion Farm\nWatlington\nOX49 5LG",                DEMO_IMAGE_DIR "gallery-small-5.jpg" },
+  { "Dan Haynes",         "239 Whitefield Dr\nLiverpool\nL32 0RD",              DEMO_IMAGE_DIR "gallery-small-6.jpg" },
+  { "Leslie Wong",        "1 Tullyvar Rd\nAughnacloy\nBT69 6BQ",                DEMO_IMAGE_DIR "gallery-small-7.jpg" },
+  { "Mable Hodges",       "5 Mortimer Rd\nGrazeley\nReading\nRG7 1LA",          DEMO_IMAGE_DIR "gallery-small-8.jpg" },
+  { "Kristi Riley",       "10 Jura Dr\nOld Kilpatrick\nGlasgow\nG60 5EH",       DEMO_IMAGE_DIR "gallery-small-17.jpg" },
+  { "Terry Clark",        "142 Raeberry St\nGlasgow\nG20 6EA",                  DEMO_IMAGE_DIR "gallery-small-18.jpg" },
+  { "Horace Bailey",      "11 Assembly St\nNormanton\nWF6 2DB",                 DEMO_IMAGE_DIR "gallery-small-11.jpg" },
+  { "Suzanne Delgado",    "6 Grange Rd\nDownpatrick\nBT30 7DB",                 DEMO_IMAGE_DIR "gallery-small-12.jpg" },
+  { "Jamie Bennett",      "117 Potter St\nNorthwood\nHA6 1QF",                  DEMO_IMAGE_DIR "gallery-small-13.jpg" },
+  { "Emmett Yates",       "18 Renfrew Way\nBletchley\nMilton Keynes\nMK3 7NY",  DEMO_IMAGE_DIR "gallery-small-14.jpg" },
+  { "Glen Vaughn",        "5 Hasman Terrace\nCove Bay\nAberdeen\nAB12 3GD",     DEMO_IMAGE_DIR "gallery-small-15.jpg" },
+};
+const size_t TABLE_SIZE = sizeof( TABLE ) / sizeof( TABLE[ 0 ] );
+
+} // namespace ContactData
diff --git a/examples/contact-cards/contact-data.h b/examples/contact-cards/contact-data.h
new file mode 100644
index 00000000..00367741
--- /dev/null
+++ b/examples/contact-cards/contact-data.h
@@ -0,0 +1,42 @@
+#ifndef CONTACT_DATA_H
+#define CONTACT_DATA_H
+
+/*
+ * 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.
+ *
+ */
+
+// EXTERNAL INCLUDES
+#include <cstddef>
+
+namespace ContactData
+{
+
+/**
+ * @brief The information for an individual contact.
+ */
+struct Item
+{
+  const char * const name; ///< The name of the contact.
+  const char * const address; ///< The address of the contact.
+  const char * const imagePath; ///< The path to the image that represents the contact.
+};
+
+extern const Item TABLE[]; ///< The table that has the information for all the contacts.
+extern const size_t TABLE_SIZE; ///< The size of TABLE. Can use this to iterate through TABLE.
+
+} // namespace ContactData
+
+#endif // CONTACT_DATA_H
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 7cdc4a60..f13617a3 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
@@ -45,9 +45,8 @@ const char* const SAMPLING_BUTTON_ID = "SAMPLING_BUTTON";
 const char* const FITTING_BUTTON_TEXT = "Fitting";
 const char* const SAMPLING_BUTTON_TEXT = "Sampling";
 
-const char* const STYLE_LABEL_TEXT  = "grouplabel";
-const char* const STYLE_BUTTON_TEXT = "buttonlabel";
-
+const char* const STYLE_LABEL_TEXT  = "ImageScalingGroupLabel";
+const char* const STYLE_BUTTON_TEXT = "ImageScalingButton";
 
 const char* IMAGE_PATHS[] =
 {
@@ -336,7 +335,7 @@ public:
       fittingModeGroup.SetFitHeight( 1 );
 
       TextLabel label = TextLabel::New( "Image fitting mode:" );
-      label.SetProperty( Toolkit::Control::Property::STYLE_NAME, STYLE_LABEL_TEXT );
+      label.SetStyleName( STYLE_LABEL_TEXT );
       fittingModeGroup.Add( label );
 
       Toolkit::PushButton button = CreateButton( FITTING_BUTTON_ID, StringFromScalingMode( mFittingMode ) );
@@ -357,7 +356,7 @@ public:
       samplingModeGroup.SetFitHeight( 1 );
 
       TextLabel label = TextLabel::New( "Image sampling mode:" );
-      label.SetProperty( Toolkit::Control::Property::STYLE_NAME, STYLE_LABEL_TEXT );
+      label.SetStyleName( STYLE_LABEL_TEXT );
       samplingModeGroup.Add( label );
 
       Toolkit::PushButton button = CreateButton( SAMPLING_BUTTON_ID, StringFromFilterMode( mSamplingMode ) );
@@ -371,7 +370,7 @@ public:
   Toolkit::PushButton CreateButton( const char * id, const char * label )
   {
     Toolkit::PushButton button = Toolkit::PushButton::New();
-    button.SetProperty( Toolkit::Control::Property::STYLE_NAME, STYLE_BUTTON_TEXT );
+    button.SetStyleName( STYLE_BUTTON_TEXT );
     button.SetName( id );
     button.SetLabelText( label );
     button.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
diff --git a/examples/image-view-pixel-area/image-view-pixel-area-example.cpp b/examples/image-view-pixel-area/image-view-pixel-area-example.cpp
index 55ac6b60..b00ccf53 100644
--- a/examples/image-view-pixel-area/image-view-pixel-area-example.cpp
+++ b/examples/image-view-pixel-area/image-view-pixel-area-example.cpp
@@ -16,16 +16,21 @@
  */
 
 #include <dali-toolkit/dali-toolkit.h>
+#include "shared/view.h"
 
 using namespace Dali;
 
 namespace
 {
-const char* IMAGE_PATH[] = { DEMO_IMAGE_DIR "gallery-large-7.jpg",
-                             DEMO_IMAGE_DIR "gallery-large-12.jpg",
-                             DEMO_IMAGE_DIR "gallery-large-18.jpg" };
+const char* BIG_TEST_IMAGE( DEMO_IMAGE_DIR "book-landscape-cover.jpg" );
+const char* SMALL_TEST_IMAGE( DEMO_IMAGE_DIR "gallery-large-1.jpg" );
 
-const unsigned int NUM_IMAGES = sizeof(IMAGE_PATH) / sizeof(char*);
+const char * const APPLICATION_TITLE( "Pixel Area & Wrap Mode" );
+const char * const TOOLBAR_IMAGE( DEMO_IMAGE_DIR "top-bar.png" );
+const char * const BUTTON_ICON( DEMO_IMAGE_DIR "icon-change.png" );
+const char * const BUTTON_ICON_SELECTED( DEMO_IMAGE_DIR "icon-change-selected.png" );
+
+const Vector4 ORIGINAL_PIXEL_AREA( -0.5f, -0.5f, 2.f, 2.f );
 }
 
 class ImageViewPixelAreaApp : public ConnectionTracker
@@ -52,44 +57,158 @@ private:
     Stage stage = Stage::GetCurrent();
     stage.KeyEventSignal().Connect(this, &ImageViewPixelAreaApp::OnKeyEvent);
 
-    ImageDimensions size( 510, 510 );
-    float subSize = 170.f;
-    float relativeSubSize = 0.33;
-    Animation animation = Animation::New( 10.f );
+    Toolkit::ToolBar toolBar;
+    Toolkit::Control background;
+    // Creates a default view with a default tool bar.
+    mContent = DemoHelper::CreateView( application,
+                                            background,
+                                            toolBar,
+                                            "",
+                                            TOOLBAR_IMAGE,
+                                            APPLICATION_TITLE );
+
+    // Add a button to switch the scene. (right of toolbar)
+    Toolkit::PushButton switchButton = Toolkit::PushButton::New();
+    switchButton.SetUnselectedImage( BUTTON_ICON );
+    switchButton.SetSelectedImage( BUTTON_ICON_SELECTED );
+    switchButton.ClickedSignal().Connect( this, &ImageViewPixelAreaApp::OnButtonClicked );
+    toolBar.AddControl( switchButton,
+                        DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage,
+                        Toolkit::Alignment::HorizontalRight,
+                        DemoHelper::DEFAULT_MODE_SWITCH_PADDING  );
+
+
+    // for testing image WITH automatic atlasing
+    visualPropertyMap[0][ Toolkit::ImageVisual::Property::URL ] =  SMALL_TEST_IMAGE;
+    visualPropertyMap[0][ Toolkit::ImageVisual::Property::DESIRED_WIDTH ] = 500;
+    visualPropertyMap[0][ Toolkit::ImageVisual::Property::DESIRED_HEIGHT ] = 500;
+    visualPropertyMap[0][ Toolkit::ImageVisual::Property::WRAP_MODE_U ] = WrapMode::CLAMP_TO_EDGE;
+    visualPropertyMap[0][ Toolkit::ImageVisual::Property::WRAP_MODE_V ] = WrapMode::MIRRORED_REPEAT;
+    visualPropertyMap[0][ Toolkit::ImageVisual::Property::PIXEL_AREA ] = ORIGINAL_PIXEL_AREA;
+
+    // for testing image WITHOUT automatic atlasing
+    visualPropertyMap[1][ Toolkit::ImageVisual::Property::URL ] =  BIG_TEST_IMAGE;
+    visualPropertyMap[1][ Toolkit::ImageVisual::Property::DESIRED_WIDTH ] = 640;
+    visualPropertyMap[1][ Toolkit::ImageVisual::Property::DESIRED_HEIGHT ] = 720;
+    visualPropertyMap[1][ Toolkit::ImageVisual::Property::WRAP_MODE_U ] = WrapMode::MIRRORED_REPEAT;
+    visualPropertyMap[1][ Toolkit::ImageVisual::Property::WRAP_MODE_V ] = WrapMode::REPEAT;
+    visualPropertyMap[1][ Toolkit::ImageVisual::Property::PIXEL_AREA ] = ORIGINAL_PIXEL_AREA;
+
+    CreateScene(  visualPropertyMap[0] );
+
+    mWrapLabel = Toolkit::TextLabel::New(" Automatic atlasing\n WrapMode: CLAMP_TO_EDGE, MIRRORED_REPEAT");
+    mWrapLabel.SetParentOrigin( ParentOrigin::BOTTOM_CENTER );
+    mWrapLabel.SetAnchorPoint(AnchorPoint::BOTTOM_CENTER );
+    mWrapLabel.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+    mWrapLabel.SetProperty( Toolkit::TextLabel::Property::MULTI_LINE, true );
+    mWrapLabel.SetProperty( Toolkit::TextLabel::Property::TEXT_COLOR, Color::WHITE );
+    mContent.Add( mWrapLabel );
+
+    mPixelAreaLabel = Toolkit::TextLabel::New( " Use ImageVisual::Property::PIXEL_AREA\n " );
+    mPixelAreaLabel.SetParentOrigin( ParentOrigin::TOP_CENTER );
+    mPixelAreaLabel.SetAnchorPoint(AnchorPoint::BOTTOM_CENTER );
+    mPixelAreaLabel.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+    mPixelAreaLabel.SetProperty( Toolkit::TextLabel::Property::MULTI_LINE, true );
+    mPixelAreaLabel.SetProperty( Toolkit::TextLabel::Property::TEXT_COLOR, Color::WHITE );
+    mWrapLabel.Add( mPixelAreaLabel );
+  }
+
+  void CreateScene( const Property::Value& propertyMap )
+  {
     for( int i=0; i<3;i++ )
       for( int j=0; j<3; j++ )
       {
-        mImageView[i][j] = Toolkit::ImageView::New( IMAGE_PATH[mIndex], size );
-        mImageView[i][j].SetParentOrigin( ParentOrigin::CENTER );
-        mImageView[i][j].SetAnchorPoint(AnchorPoint::CENTER );
-        mImageView[i][j].SetPosition( subSize*(i-1)*1.1f, subSize*(j-1)*1.1f );
-        mImageView[i][j].SetSize( subSize, subSize );
-        stage.Add(mImageView[i][j]);
-
-        animation.AnimateTo( Property(mImageView[i][j], Toolkit::ImageView::Property::PIXEL_AREA),
-                             Vector4( relativeSubSize*i, relativeSubSize*j, relativeSubSize, relativeSubSize ),
-                             AlphaFunction::BOUNCE );
+        mImageView[i][j] = Toolkit::ImageView::New();
+        mImageView[i][j].SetProperty( Toolkit::ImageView::Property::IMAGE, propertyMap );
+        mImageView[i][j].SetPosition( 50.f*(i-1), 50.f*(j-1) );
       }
-    animation.SetLooping( true );
-    animation.Play();
 
-    // Respond to a click anywhere on the stage
-    stage.GetRootLayer().TouchSignal().Connect( this, &ImageViewPixelAreaApp::OnTouch );
+    mImageView[1][1].SetParentOrigin( ParentOrigin::CENTER );
+    mImageView[1][1].SetAnchorPoint(AnchorPoint::CENTER );
+    mImageView[1][1].SetScale( 1.f/3.f );
+    mContent.Add( mImageView[1][1] );
+
+    mImageView[0][0].SetParentOrigin( ParentOrigin::TOP_LEFT );
+    mImageView[0][0].SetAnchorPoint(AnchorPoint::BOTTOM_RIGHT );
+    mImageView[0][0].SetPosition( -50.f, -50.f );
+    mImageView[1][1].Add( mImageView[0][0] );
+
+    mImageView[1][0].SetParentOrigin( ParentOrigin::TOP_CENTER );
+    mImageView[1][0].SetAnchorPoint(AnchorPoint::BOTTOM_CENTER );
+    mImageView[1][1].Add( mImageView[1][0] );
+
+    mImageView[2][0].SetParentOrigin( ParentOrigin::TOP_RIGHT );
+    mImageView[2][0].SetAnchorPoint(AnchorPoint::BOTTOM_LEFT );
+    mImageView[1][1].Add( mImageView[2][0] );
+
+    mImageView[0][1].SetParentOrigin( ParentOrigin::CENTER_LEFT );
+    mImageView[0][1].SetAnchorPoint(AnchorPoint::CENTER_RIGHT );
+    mImageView[1][1].Add( mImageView[0][1] );
+
+    mImageView[2][1].SetParentOrigin( ParentOrigin::CENTER_RIGHT );
+    mImageView[2][1].SetAnchorPoint(AnchorPoint::CENTER_LEFT );
+    mImageView[1][1].Add( mImageView[2][1] );
+
+    mImageView[0][2].SetParentOrigin( ParentOrigin::BOTTOM_LEFT );
+    mImageView[0][2].SetAnchorPoint(AnchorPoint::TOP_RIGHT );
+    mImageView[1][1].Add( mImageView[0][2] );
+
+    mImageView[1][2].SetParentOrigin( ParentOrigin::BOTTOM_CENTER );
+    mImageView[1][2].SetAnchorPoint(AnchorPoint::TOP_CENTER );
+    mImageView[1][1].Add( mImageView[1][2] );
+
+    mImageView[2][2].SetParentOrigin( ParentOrigin::BOTTOM_RIGHT );
+    mImageView[2][2].SetAnchorPoint(AnchorPoint::TOP_LEFT );
+    mImageView[1][1].Add( mImageView[2][2] );
+
   }
 
-  bool OnTouch( Actor actor, const TouchData& touch )
-  {
-    if( touch.GetState( 0 ) == PointState::DOWN )
+  bool OnButtonClicked( Toolkit::Button button )
     {
-      mIndex++;
-      for( int i=0; i<3;i++ )
-        for( int j=0; j<3; j++ )
+      if( mAnimation )
+      {
+        mAnimation.Stop();
+        mAnimation.Clear();
+      }
+
+      mIndex = ( mIndex+1 ) % 4;
+      if( mIndex%2 == 0 )
+      {
+        // switch to the other image
+        // set the pixel area to image visual, the pixel area property is registered on the renderer
+        mContent.Remove( mImageView[1][1] );
+        CreateScene(  visualPropertyMap[mIndex/2] );
+        if( mIndex == 0 )
         {
-          mImageView[i][j].SetImage( IMAGE_PATH[mIndex%NUM_IMAGES] );
+          mWrapLabel.SetProperty( Toolkit::TextLabel::Property::TEXT," Automatic atlasing\n WrapMode: CLAMP_TO_EDGE, MIRRORED_REPEAT");
         }
+        else
+        {
+          mWrapLabel.SetProperty( Toolkit::TextLabel::Property::TEXT," No atlasing\n WrapMode: MIRRORED_REPEAT, REPEAT");
+        }
+        mPixelAreaLabel.SetProperty( Toolkit::TextLabel::Property::TEXT, " Use ImageVisual::Property::PIXEL_AREA\n " );
+      }
+      else
+      {
+        // animate the pixel area property on image view,
+        // the animatable pixel area property is registered on the actor, which overwrites the property on the renderer
+        mAnimation = Animation::New( 10.f );
+        float relativeSubSize = 0.33;
+        for( int i=0; i<3;i++ )
+          for( int j=0; j<3; j++ )
+          {
+            mImageView[i][j].SetProperty( Toolkit::ImageView::Property::PIXEL_AREA, ORIGINAL_PIXEL_AREA );
+            mAnimation.AnimateTo( Property(mImageView[i][j], Toolkit::ImageView::Property::PIXEL_AREA),
+                Vector4( relativeSubSize*i, relativeSubSize*j, relativeSubSize, relativeSubSize ),
+                AlphaFunction::BOUNCE );
+          }
+        mAnimation.SetLooping( true );
+        mAnimation.Play();
+
+        mPixelAreaLabel.SetProperty( Toolkit::TextLabel::Property::TEXT, " Animate ImageView::Property::PIXEL_AREA \n     (Overwrite the ImageVisual property) " );
+      }
+      return true;
     }
-    return true;
-  }
 
   void OnKeyEvent(const KeyEvent& event)
   {
@@ -104,7 +223,12 @@ private:
 
 private:
   Application&  mApplication;
+  Layer mContent;
   Toolkit::ImageView mImageView[3][3];
+  Property::Map visualPropertyMap[2];
+  Toolkit::TextLabel mWrapLabel;
+  Toolkit::TextLabel mPixelAreaLabel;
+  Animation mAnimation;
   unsigned int mIndex;
 };
 
diff --git a/examples/line-mesh/line-mesh-example.cpp b/examples/line-mesh/line-mesh-example.cpp
index 53f0fe84..a56f1b59 100644
--- a/examples/line-mesh/line-mesh-example.cpp
+++ b/examples/line-mesh/line-mesh-example.cpp
@@ -234,7 +234,7 @@ public:
 
       Dali::Toolkit::RadioButton radio = Dali::Toolkit::RadioButton::New();
 
-      radio.SetProperty( Dali::Toolkit::RadioButton::Property::LABEL, labelMap );
+      radio.SetProperty( Dali::Toolkit::Button::Property::LABEL, labelMap );
       radio.SetParentOrigin( ParentOrigin::TOP_LEFT );
       radio.SetAnchorPoint( AnchorPoint::TOP_LEFT );
       radio.SetSelected( i == 0 );
diff --git a/examples/mesh-visual/mesh-visual-example.cpp b/examples/mesh-visual/mesh-visual-example.cpp
index 33408388..e8674c9c 100644
--- a/examples/mesh-visual/mesh-visual-example.cpp
+++ b/examples/mesh-visual/mesh-visual-example.cpp
@@ -39,11 +39,24 @@ namespace
     MeshVisual::ShadingMode::TEXTURELESS_WITH_DIFFUSE_LIGHTING
   };
 
+  //Button labels.
+  const char * const PAUSE =  "  ||  ";
+  const char * const PLAY =   "  >  ";
+  const char * const FIXED =  "FIXED";
+  const char * const MANUAL = "MANUAL";
+  const char * const FRONT =  "FRONT";
+  const char * const BACK =   "BACK";
+
+  //Image urls for the light.
+  const char * const LIGHT_URL_FRONT = DEMO_IMAGE_DIR "light-icon-front.png";
+  const char * const LIGHT_URL_BACK =  DEMO_IMAGE_DIR "light-icon-back.png";
+
   const float X_ROTATION_DISPLACEMENT_FACTOR = 60.0f;
   const float Y_ROTATION_DISPLACEMENT_FACTOR = 60.0f;
   const float MODEL_SCALE =                    0.75f;
   const float LIGHT_SCALE =                    0.15f;
-  const float BUTTONS_OFFSET_BOTTOM =          0.9f;
+  const float BUTTONS_OFFSET_BOTTOM =          0.08f;
+  const float BUTTONS_OFFSET_SIDE =            0.2f;
   const int   NUM_MESHES =                     2;
 
   //Used to identify actors.
@@ -60,11 +73,12 @@ public:
   MeshVisualController( Application& application )
   : mApplication( application ),   //Store handle to the application.
     mModelIndex( 1 ),              //Start with metal robot.
-    mShadingModeIndex( 0 ),        //Start with textured with detailed specular lighting.
+    mShadingModeIndex( 0 ),        //Start with texture and detailed specular lighting.
     mTag( -1 ),                    //Non-valid default, which will get set to a correct value when used.
     mSelectedModelIndex( -1 ),     //Non-valid default, which will get set to a correct value when used.
     mPaused( false ),              //Animations play by default.
-    mLightFixed( true )            //The light is fixed by default.
+    mLightFixed( true ),           //The light is fixed by default.
+    mLightFront( true )            //The light is in front by default.
   {
     // Connect to the Application's Init signal
     mApplication.InitSignal().Connect( this, &MeshVisualController::Create );
@@ -81,25 +95,19 @@ public:
     Stage stage = Stage::GetCurrent();
     stage.SetBackgroundColor( Vector4( 0.0, 0.5, 1.0, 1.0 ) );
 
-    //Set up layer to place objects on.
-    Layer baseLayer = Layer::New();
-    baseLayer.SetParentOrigin( ParentOrigin::CENTER );
-    baseLayer.SetAnchorPoint( AnchorPoint::CENTER );
-    baseLayer.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
-    baseLayer.SetBehavior( Layer::LAYER_2D ); //We use a 2D layer as this is closer to UI work than full 3D scene creation.
-    baseLayer.SetDepthTestDisabled( false ); //Enable depth testing, as otherwise the 2D layer would not do so.
-    baseLayer.RegisterProperty( "Tag", LAYER_TAG ); //Used to differentiate between different kinds of actor.
-    baseLayer.TouchedSignal().Connect( this, &MeshVisualController::OnTouch );
-    stage.Add( baseLayer );
+    //Set up root layer to receive touch gestures.
+    Layer rootLayer = stage.GetRootLayer();
+    rootLayer.RegisterProperty( "Tag", LAYER_TAG ); //Used to differentiate between different kinds of actor.
+    rootLayer.TouchSignal().Connect( this, &MeshVisualController::OnTouch );
 
     //Place models on the scene.
-    SetupModels( baseLayer );
+    SetupModels( rootLayer );
 
     //Place buttons on the scene.
-    SetupButtons( baseLayer );
+    SetupButtons( rootLayer );
 
     //Add a light to the scene.
-    SetupLight( baseLayer );
+    SetupLight( rootLayer );
 
     //Allow for exiting of the application via key presses.
     stage.KeyEventSignal().Connect( this, &MeshVisualController::OnKeyEvent );
@@ -115,7 +123,7 @@ public:
       mContainers[i].SetResizePolicy( ResizePolicy::SIZE_RELATIVE_TO_PARENT, Dimension::ALL_DIMENSIONS );
       mContainers[i].RegisterProperty( "Tag", MODEL_TAG ); //Used to differentiate between different kinds of actor.
       mContainers[i].RegisterProperty( "Model", Property::Value( i ) ); //Used to index into the model.
-      mContainers[i].TouchedSignal().Connect( this, &MeshVisualController::OnTouch );
+      mContainers[i].TouchSignal().Connect( this, &MeshVisualController::OnTouch );
       layer.Add( mContainers[i] );
     }
 
@@ -163,57 +171,78 @@ public:
   //Place the various buttons on the bottom of the screen, with title labels where necessary.
   void SetupButtons( Layer layer )
   {
-    //Text label title for changing model or shader.
-    TextLabel changeTitleLabel = TextLabel::New( "Switch" );
-    changeTitleLabel.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
-    changeTitleLabel.SetProperty( TextLabel::Property::UNDERLINE, "{\"thickness\":\"2.0\"}" );
-    changeTitleLabel.SetParentOrigin( Vector3( 0.2, BUTTONS_OFFSET_BOTTOM, 0.5 ) );
-    changeTitleLabel.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
-    layer.Add( changeTitleLabel );
+    //Actor for positioning model and shading mode buttons.
+    Actor positionActorModel = Actor::New();
+    positionActorModel.SetParentOrigin( Vector3( BUTTONS_OFFSET_SIDE, 1.0 - BUTTONS_OFFSET_BOTTOM, 0.5 ) );
+    positionActorModel.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
+    layer.Add( positionActorModel );
 
-    //Create button for model changing
+    //Create button for model changing.
     PushButton modelButton = Toolkit::PushButton::New();
     modelButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
     modelButton.ClickedSignal().Connect( this, &MeshVisualController::OnChangeModelClicked );
-    modelButton.SetParentOrigin( ParentOrigin::BOTTOM_CENTER );
-    modelButton.SetAnchorPoint( AnchorPoint::TOP_RIGHT );
+    modelButton.SetParentOrigin( ParentOrigin::TOP_CENTER );
+    modelButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
     modelButton.SetLabelText( "Model" );
-    changeTitleLabel.Add( modelButton );
-
-    //Create button for shader changing
-    PushButton shaderButton = Toolkit::PushButton::New();
-    shaderButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
-    shaderButton.ClickedSignal().Connect( this, &MeshVisualController::OnChangeShaderClicked );
-    shaderButton.SetParentOrigin( ParentOrigin::BOTTOM_CENTER );
-    shaderButton.SetAnchorPoint( AnchorPoint::TOP_LEFT );
-    shaderButton.SetLabelText( "Shader" );
-    changeTitleLabel.Add( shaderButton );
-
-    //Create button for pausing animations
+    positionActorModel.Add( modelButton );
+
+    //Create button for shading mode changing.
+    PushButton shadingModeButton = Toolkit::PushButton::New();
+    shadingModeButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
+    shadingModeButton.ClickedSignal().Connect( this, &MeshVisualController::OnChangeShadingModeClicked );
+    shadingModeButton.SetParentOrigin( ParentOrigin::BOTTOM_CENTER );
+    shadingModeButton.SetAnchorPoint( AnchorPoint::TOP_CENTER );
+    shadingModeButton.SetLabelText( "Shading Mode" );
+    positionActorModel.Add( shadingModeButton );
+
+    //Text label title for changing model or shading mode.
+    TextLabel changeTitleLabel = TextLabel::New( "Change" );
+    changeTitleLabel.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
+    changeTitleLabel.SetProperty( TextLabel::Property::UNDERLINE, "{\"thickness\":\"2.0\"}" );
+    changeTitleLabel.SetParentOrigin( ParentOrigin::TOP_CENTER );
+    changeTitleLabel.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
+    modelButton.Add( changeTitleLabel );
+
+    //Create button for pausing animations.
     PushButton pauseButton = Toolkit::PushButton::New();
     pauseButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
     pauseButton.ClickedSignal().Connect( this, &MeshVisualController::OnPauseClicked );
-    pauseButton.SetParentOrigin( Vector3( 0.5, BUTTONS_OFFSET_BOTTOM, 0.5 ) );
-    pauseButton.SetAnchorPoint( AnchorPoint::TOP_CENTER );
-    pauseButton.SetLabelText( " || " );
+    pauseButton.SetParentOrigin( Vector3( 0.5, 1.0 - BUTTONS_OFFSET_BOTTOM, 0.5 ) );
+    pauseButton.SetAnchorPoint( AnchorPoint::CENTER );
+    pauseButton.SetLabelText( PAUSE );
     layer.Add( pauseButton );
 
+    //Actor for positioning light position buttons.
+    Actor positionActorLight = Actor::New();
+    positionActorLight.SetParentOrigin( Vector3( 1.0 - BUTTONS_OFFSET_SIDE, 1.0 - BUTTONS_OFFSET_BOTTOM, 0.5 ) );
+    positionActorLight.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
+    layer.Add( positionActorLight );
+
+    //Create button for switching between manual and fixed light position.
+    PushButton lightModeButton = Toolkit::PushButton::New();
+    lightModeButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
+    lightModeButton.ClickedSignal().Connect( this, &MeshVisualController::OnChangeLightModeClicked );
+    lightModeButton.SetParentOrigin( ParentOrigin::TOP_CENTER );
+    lightModeButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
+    lightModeButton.SetLabelText( FIXED );
+    positionActorLight.Add( lightModeButton );
+
+    //Create button for switching between front and back light position.
+    PushButton lightSideButton = Toolkit::PushButton::New();
+    lightSideButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
+    lightSideButton.ClickedSignal().Connect( this, &MeshVisualController::OnChangeLightSideClicked );
+    lightSideButton.SetParentOrigin( ParentOrigin::BOTTOM_CENTER );
+    lightSideButton.SetAnchorPoint( AnchorPoint::TOP_CENTER );
+    lightSideButton.SetLabelText( FRONT );
+    positionActorLight.Add( lightSideButton );
+
     //Text label title for light position mode.
     TextLabel lightTitleLabel = TextLabel::New( "Light Position" );
     lightTitleLabel.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
     lightTitleLabel.SetProperty( TextLabel::Property::UNDERLINE, "{\"thickness\":\"2.0\"}" );
-    lightTitleLabel.SetParentOrigin( Vector3( 0.8, BUTTONS_OFFSET_BOTTOM, 0.5 ) );
+    lightTitleLabel.SetParentOrigin( ParentOrigin::TOP_CENTER );
     lightTitleLabel.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
-    layer.Add( lightTitleLabel );
-
-    //Create button for switching between manual and fixed light position.
-    PushButton lightButton = Toolkit::PushButton::New();
-    lightButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
-    lightButton.ClickedSignal().Connect( this, &MeshVisualController::OnChangeLightModeClicked );
-    lightButton.SetParentOrigin( ParentOrigin::BOTTOM_CENTER );
-    lightButton.SetAnchorPoint( AnchorPoint::TOP_CENTER );
-    lightButton.SetLabelText( "FIXED" );
-    lightTitleLabel.Add( lightButton );
+    lightModeButton.Add( lightTitleLabel );
   }
 
   //Add a point light source the the scene, on a layer above the first.
@@ -246,13 +275,10 @@ public:
     mLightSource.SetPosition( Stage::GetCurrent().GetSize().x * 0.85f, Stage::GetCurrent().GetSize().y * 0.125 );
 
     //Supply an image to represent the light.
-    Property::Map lightMap;
-    lightMap.Insert( Visual::Property::TYPE, Visual::IMAGE );
-    lightMap.Insert( ImageVisual::Property::URL, DEMO_IMAGE_DIR "light-icon.png" );
-    mLightSource.SetProperty( Control::Property::BACKGROUND, Property::Value( lightMap ) );
+    SetLightImage();
 
     //Connect to touch signal for dragging.
-    mLightSource.TouchedSignal().Connect( this, &MeshVisualController::OnTouch );
+    mLightSource.TouchSignal().Connect( this, &MeshVisualController::OnTouch );
 
     //Place the light source on a layer above the base, so that it is rendered above everything else.
     Layer upperLayer = Layer::New();
@@ -264,14 +290,27 @@ public:
     upperLayer.Add( mLightSource );
 
     //Decide which light to use to begin with.
-    if( mLightFixed )
+    SetLightMode();
+  }
+
+  //Sets the image to use for the light source depending on whether the light is in front or behind.
+  void SetLightImage()
+  {
+    std::string imageUrl;
+
+    if( mLightFront )
     {
-      UseFixedLight();
+      imageUrl = LIGHT_URL_FRONT;
     }
     else
     {
-      UseManualLight();
+      imageUrl = LIGHT_URL_BACK;
     }
+
+    Property::Map lightMap;
+    lightMap.Insert( Visual::Property::TYPE, Visual::IMAGE );
+    lightMap.Insert( ImageVisual::Property::URL, imageUrl );
+    mLightSource.SetProperty( Control::Property::BACKGROUND, Property::Value( lightMap ) );
   }
 
   //Updates the displayed models to account for parameter changes.
@@ -292,16 +331,31 @@ public:
     }
   }
 
+  //Set the mode used to light the models.
+  void SetLightMode()
+  {
+    if( mLightFixed )
+    {
+      UseFixedLight();
+    }
+    else
+    {
+      UseManualLight();
+    }
+  }
+
+  //Make the models use a fixed, invisible light above the center of the stage.
   void UseFixedLight()
   {
     //Hide draggable source
     mLightSource.SetVisible( false );
 
-    //Use stage dimensions to place light at center, offset outwards in z axis.
+    //Use stage dimensions to place light at center, offset in z axis.
     Stage stage = Stage::GetCurrent();
     float width = stage.GetSize().width;
     float height = stage.GetSize().height;
-    Vector3 lightPosition = Vector3( width / 2.0f, height / 2.0f, std::max( width, height ) * 5.0f );
+    Vector3 lightPosition = Vector3( width / 2.0f, height / 2.0f,
+                                     ( mLightFront ? 1 : -1 ) * std::max( width, height ) * 5.0f );
 
     //Set global light position
     for( int i = 0; i < NUM_MESHES; ++i )
@@ -310,21 +364,23 @@ public:
     }
   }
 
+  //Make the models use a light source that the user can drag around.
   void UseManualLight()
   {
     //Show draggable source
     mLightSource.SetVisible( true );
 
-    //Update to switch light position to that off the source.
+    //Update to switch light position of models to that of the source.
     UpdateLight();
   }
 
   //Updates the light position for each model to account for changes in the source on screen.
   void UpdateLight()
   {
-    //Set light position to the x and y of the light control, offset out of the screen.
+    //Set light position to the x and y of the light control, offset into/out of the screen.
     Vector3 controlPosition = mLightSource.GetCurrentPosition();
-    Vector3 lightPosition = Vector3( controlPosition.x, controlPosition.y, Stage::GetCurrent().GetSize().x / 2.0f );
+    Vector3 lightPosition = Vector3( controlPosition.x, controlPosition.y,
+                                     ( mLightFront ? 1 : -1 ) * Stage::GetCurrent().GetSize().x / 2.0f );
 
     for( int i = 0; i < NUM_MESHES; ++i )
     {
@@ -334,14 +390,11 @@ public:
 
   //If the light source is touched, move it by dragging it.
   //If a model is touched, rotate it by panning around.
-  bool OnTouch( Actor actor, const TouchEvent& event )
+  bool OnTouch( Actor actor, const TouchData& touch )
   {
-    //Get primary touch point.
-    const Dali::TouchPoint& point = event.GetPoint( 0 );
-
-    switch( point.state )
+    switch( touch.GetState( 0 ) )
     {
-      case TouchPoint::Down:
+      case PointState::DOWN:
       {
         //Determine what was touched.
         actor.GetProperty( actor.GetPropertyIndex( "Tag" ) ).Get( mTag );
@@ -355,13 +408,13 @@ public:
           mModels[mSelectedModelIndex].rotationAnimation.Pause();
 
           //Store start points.
-          mPanStart = point.screen;
+          mPanStart = touch.GetScreenPosition( 0 );
           mRotationStart = mModels[mSelectedModelIndex].rotation;
         }
 
         break;
       }
-      case TouchPoint::Motion:
+      case PointState::MOTION:
       {
         //Switch on the kind of actor we're interacting with.
         switch( mTag )
@@ -369,7 +422,7 @@ public:
           case MODEL_TAG: //Rotate model
           {
             //Calculate displacement and corresponding rotation.
-            Vector2 displacement = point.screen - mPanStart;
+            Vector2 displacement = touch.GetScreenPosition( 0 ) - mPanStart;
             mModels[mSelectedModelIndex].rotation = Vector2( mRotationStart.x - displacement.y / Y_ROTATION_DISPLACEMENT_FACTOR,   // Y displacement rotates around X axis
                                                              mRotationStart.y + displacement.x / X_ROTATION_DISPLACEMENT_FACTOR ); // X displacement rotates around Y axis
             Quaternion rotation = Quaternion( Radian( mModels[mSelectedModelIndex].rotation.x ), Vector3::XAXIS) *
@@ -383,7 +436,7 @@ public:
           case LIGHT_TAG: //Drag light
           {
             //Set light source to new position and update the models accordingly.
-            mLightSource.SetPosition( Vector3( point.screen ) );
+            mLightSource.SetPosition( Vector3( touch.GetScreenPosition( 0 ) ) );
             UpdateLight();
 
             break;
@@ -392,8 +445,8 @@ public:
 
         break;
       }
-      case TouchPoint::Interrupted: //Same as finished.
-      case TouchPoint::Finished:
+      case PointState::INTERRUPTED: //Same as finished.
+      case PointState::FINISHED:
       {
         if( mTag == MODEL_TAG )
         {
@@ -426,8 +479,8 @@ public:
     return true;
   }
 
-  //Cycle through the list of shaders.
-  bool OnChangeShaderClicked( Toolkit::Button button )
+  //Cycle through the list of shading modes.
+  bool OnChangeShadingModeClicked( Toolkit::Button button )
   {
     ++mShadingModeIndex %= 3;
 
@@ -451,7 +504,7 @@ public:
         mModels[i].rotationAnimation.Pause();
       }
 
-      button.SetLabelText( " > " );
+      button.SetLabelText( PLAY );
     }
     else //Unpause all animations again.
     {
@@ -460,14 +513,14 @@ public:
         mModels[i].rotationAnimation.Play();
       }
 
-      button.SetLabelText( " || " );
+      button.SetLabelText( PAUSE );
     }
 
     return true;
   }
 
 
-  //Switch between a fixed light source in front of the screen, and a light source the user can drag around.
+  //Switch between a fixed light source above/behind the screen, and a light source the user can drag around.
   bool OnChangeLightModeClicked( Toolkit::Button button )
   {
     //Toggle state.
@@ -475,16 +528,38 @@ public:
 
     if( mLightFixed )
     {
-      UseFixedLight();
-
-      button.SetLabelText( "FIXED" );
+      button.SetLabelText( FIXED );
     }
     else
     {
-      UseManualLight();
+      button.SetLabelText( MANUAL );
+    }
+
+    SetLightMode();
+
+    return true;
+  }
+
+  //Switch between the light being in front of and behind the models.
+  bool OnChangeLightSideClicked( Toolkit::Button button )
+  {
+    //Toggle state.
+    mLightFront = !mLightFront;
 
-      button.SetLabelText( "MANUAL" );
+    if( mLightFront )
+    {
+      button.SetLabelText( FRONT );
     }
+    else
+    {
+      button.SetLabelText( BACK );
+    }
+
+    //Change light image.
+    SetLightImage();
+
+    //Update light to account for the change.
+    SetLightMode();
 
     return true;
   }
@@ -516,11 +591,12 @@ private:
   Vector2 mRotationStart;
 
   int mModelIndex; //Index of model to load.
-  int mShadingModeIndex; //Index of shader type to use.
+  int mShadingModeIndex; //Index of shading mode to use.
   int mTag; //Identifies what kind of actor has been selected in OnTouch.
   int mSelectedModelIndex; //Index of model selected on screen.
   bool mPaused; //If true, all animations are paused and should stay so.
   bool mLightFixed; //If false, the light is in manual.
+  bool mLightFront; //Bool for light being in front or behind the models.
 };
 
 // Entry point for Linux & Tizen applications
diff --git a/examples/metaball-explosion/metaball-explosion-example.cpp b/examples/metaball-explosion/metaball-explosion-example.cpp
index bd26be9b..71a0106f 100644
--- a/examples/metaball-explosion/metaball-explosion-example.cpp
+++ b/examples/metaball-explosion/metaball-explosion-example.cpp
@@ -18,13 +18,13 @@
 // EXTERNAL INCLUDES
 #include <cstdio>
 #include <string>
-
-// INTERNAL INCLUDES
 #include <dali/dali.h>
 #include <dali/devel-api/images/texture-set-image.h>
 #include <dali/public-api/rendering/renderer.h>
 #include <dali-toolkit/dali-toolkit.h>
+#include <dali-toolkit/devel-api/controls/gaussian-blur-view/gaussian-blur-view.h>
 
+// INTERNAL INCLUDES
 #include "shared/view.h"
 #include "shared/utility.h"
 
diff --git a/examples/model3d-view/model3d-view-example.cpp b/examples/model3d-view/model3d-view-example.cpp
index 5adb9456..40cf6ebc 100644
--- a/examples/model3d-view/model3d-view-example.cpp
+++ b/examples/model3d-view/model3d-view-example.cpp
@@ -76,18 +76,10 @@ public:
     Vector2 screenSize = stage.GetSize();
 
     //Add background
-    Toolkit::ImageView backView = Toolkit::ImageView::New(BACKGROUND_IMAGE);
-    backView.SetAnchorPoint( AnchorPoint::TOP_LEFT );
-    stage.Add(backView);
-
-    //Add 3D model control
-    m3DLayer = Layer::New();
-    stage.GetRootLayer().Add(m3DLayer);
-
-    //3D models require 3D based rendering method, so it can use depth buffer, etc.
-    m3DLayer.SetBehavior(Layer::LAYER_3D);
-    m3DLayer.SetParentOrigin( ParentOrigin::CENTER );
-    m3DLayer.SetAnchorPoint( AnchorPoint::CENTER );
+    Toolkit::ImageView backView = Toolkit::ImageView::New( BACKGROUND_IMAGE );
+    backView.SetParentOrigin( ParentOrigin::CENTER );
+    backView.SetAnchorPoint( AnchorPoint::CENTER );
+    stage.Add( backView );
 
     mModelCounter = 0;
 
@@ -100,7 +92,7 @@ public:
 
     mModel3dView.SetProperty(Model3dView::Property::LIGHT_POSITION, Vector3(5,10.,0));
 
-    m3DLayer.Add( mModel3dView );
+    backView.Add( mModel3dView );
 
     mIlluminationShader = Model3dView::IlluminationType(mModel3dView.GetProperty<int>(Model3dView::Property::ILLUMINATION_TYPE));
 
@@ -108,7 +100,7 @@ public:
     mButtonLayer.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
     mButtonLayer.SetParentOrigin( ParentOrigin::CENTER );
     mButtonLayer.SetAnchorPoint( AnchorPoint::CENTER );
-    stage.GetRootLayer().Add(mButtonLayer);
+    stage.Add(mButtonLayer);
 
     // Create button for model changing
     Toolkit::PushButton editButton = Toolkit::PushButton::New();
@@ -281,7 +273,6 @@ private:
   int mModelCounter;
   Model3dView mModel3dView;
 
-  Layer m3DLayer;
   Layer mButtonLayer;
   TapGestureDetector mTapDetector;
 
diff --git a/examples/new-window/new-window-example.cpp b/examples/new-window/new-window-example.cpp
index 0daf0709..56b74f38 100644
--- a/examples/new-window/new-window-example.cpp
+++ b/examples/new-window/new-window-example.cpp
@@ -19,6 +19,7 @@
 #include <dali/public-api/rendering/renderer.h>
 #include <dali-toolkit/dali-toolkit.h>
 #include <dali-toolkit/devel-api/controls/bubble-effect/bubble-emitter.h>
+#include <dali-toolkit/devel-api/controls/gaussian-blur-view/gaussian-blur-view.h>
 
 #include <cstdio>
 #include <iostream>
diff --git a/examples/page-turn-view/page-turn-view-example.cpp b/examples/page-turn-view/page-turn-view-example.cpp
index 3d037eb9..7c40ef40 100644
--- a/examples/page-turn-view/page-turn-view-example.cpp
+++ b/examples/page-turn-view/page-turn-view-example.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2014 Samsung Electronics Co., Ltd.
+ * 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.
@@ -17,8 +17,10 @@
 
 #include <dali/dali.h>
 #include <dali-toolkit/dali-toolkit.h>
-#include <dali-toolkit/devel-api/image-atlas/image-atlas.h>
-#include <dali/devel-api/images/atlas.h>
+#include <dali-toolkit/devel-api/controls/page-turn-view/page-factory.h>
+#include <dali-toolkit/devel-api/controls/page-turn-view/page-turn-landscape-view.h>
+#include <dali-toolkit/devel-api/controls/page-turn-view/page-turn-portrait-view.h>
+#include <dali-toolkit/devel-api/controls/page-turn-view/page-turn-view.h>
 
 #include <assert.h>
 #include <cstdlib>
@@ -68,19 +70,19 @@ const char* PAGE_IMAGES_LANDSCAPE[] =
 };
 const unsigned int NUMBER_OF_LANDSCAPE_IMAGE( sizeof(PAGE_IMAGES_LANDSCAPE) / sizeof(PAGE_IMAGES_LANDSCAPE[0]) );
 
-Atlas LoadImages( const char*imagePath1, const char* imagePath2 )
+Texture LoadTextures( const char* imagePath1, const char* imagePath2 )
 {
   PixelData pixelData1 = DemoHelper::LoadPixelData( imagePath1, ImageDimensions(), FittingMode::DEFAULT, SamplingMode::DEFAULT );
   PixelData pixelData2 = DemoHelper::LoadPixelData( imagePath2, ImageDimensions(), FittingMode::DEFAULT, SamplingMode::DEFAULT );
 
-  unsigned int width = pixelData1.GetWidth()+pixelData2.GetWidth();
+  unsigned int width = pixelData1.GetWidth() + pixelData2.GetWidth();
   unsigned int height = pixelData1.GetHeight() > pixelData2.GetHeight() ? pixelData1.GetHeight() : pixelData2.GetHeight();
 
-  Atlas image  = Atlas::New( width, height );
-  image.Upload( pixelData1, 0u, 0u );
-  image.Upload( pixelData2, pixelData1.GetWidth(), 0u );
+  Texture texture = Texture::New( Dali::TextureType::TEXTURE_2D, Pixel::RGB888, width, height );
+  texture.Upload( pixelData1 );
+  texture.Upload( pixelData2, 0u, 0u, pixelData1.GetWidth(), 0u, pixelData2.GetWidth(), pixelData2.GetHeight() );
 
-  return image;
+  return texture;
 }
 
 }// end LOCAL STUFF
@@ -96,21 +98,21 @@ class PortraitPageFactory : public PageFactory
     return 10*NUMBER_OF_PORTRAIT_IMAGE + 1;
   }
   /**
-   * Create an image to represent a page.
+   * Create an texture to represent a page.
    * @param[in] pageId The ID of the page to create.
-   * @return An image, or an uninitialized pointer if the ID is out of range.
+   * @return A texture, or an uninitialized handle if the ID is out of range.
    */
-  virtual Image NewPage( unsigned int pageId )
+  virtual Texture NewPage( unsigned int pageId )
   {
-    Atlas page;
+    Texture page;
 
     if( pageId == 0 )
     {
-      page = DemoHelper::LoadImage( BOOK_COVER_PORTRAIT );
+      page = DemoHelper::LoadTexture( BOOK_COVER_PORTRAIT );
     }
     else
     {
-      page = DemoHelper::LoadImage( PAGE_IMAGES_PORTRAIT[ (pageId-1) % NUMBER_OF_PORTRAIT_IMAGE ] );
+      page = DemoHelper::LoadTexture( PAGE_IMAGES_PORTRAIT[ (pageId-1) % NUMBER_OF_PORTRAIT_IMAGE ] );
     }
 
     return page;
@@ -129,22 +131,21 @@ class LandscapePageFactory : public PageFactory
     return 10*NUMBER_OF_LANDSCAPE_IMAGE / 2 + 1;
   }
   /**
-   * Create an image to represent a page.
+   * Create an texture to represent a page.
    * @param[in] pageId The ID of the page to create.
-   * @return An image, or an uninitialized pointer if the ID is out of range.
+   * @return A texture, or an uninitialized handle if the ID is out of range.
    */
-  virtual Image NewPage( unsigned int pageId )
+  virtual Texture NewPage( unsigned int pageId )
   {
-
-    Atlas page;
+    Texture page;
     if( pageId == 0 )
     {
-      page = LoadImages( BOOK_COVER_LANDSCAPE, BOOK_COVER_BACK_LANDSCAPE );
+      page = LoadTextures( BOOK_COVER_LANDSCAPE, BOOK_COVER_BACK_LANDSCAPE );
     }
     else
     {
       unsigned int imageId = (pageId-1)*2;
-      page = LoadImages( PAGE_IMAGES_LANDSCAPE[ imageId % NUMBER_OF_LANDSCAPE_IMAGE ], PAGE_IMAGES_LANDSCAPE[ (imageId+1) % NUMBER_OF_LANDSCAPE_IMAGE ] );
+      page = LoadTextures( PAGE_IMAGES_LANDSCAPE[ imageId % NUMBER_OF_LANDSCAPE_IMAGE ], PAGE_IMAGES_LANDSCAPE[ (imageId+1) % NUMBER_OF_LANDSCAPE_IMAGE ] );
     }
 
     return page;
@@ -154,8 +155,8 @@ class LandscapePageFactory : public PageFactory
 /**
  * This example shows how to use the page turn UI control to implement the page-turn demo
  * The effect follows the pan gesture to animate the page
- * Pan the image inwards, the page will bent,
- * Depends on the distance of the panning, the image might turn over or slide back
+ * Pan the page inwards, the page will bent,
+ * Depends on the distance of the panning, the page might turn over or slide back
  * Also, in portrait view, the pan gesture outwards from position near the spine could turn the previous page back
  * Allows to turn multiple pages one by one quickly towards the same direction, multiple animations are launched in this case
 */
diff --git a/examples/primitive-shapes/primitive-shapes-example.cpp b/examples/primitive-shapes/primitive-shapes-example.cpp
index 9329371b..06e794ac 100644
--- a/examples/primitive-shapes/primitive-shapes-example.cpp
+++ b/examples/primitive-shapes/primitive-shapes-example.cpp
@@ -19,6 +19,9 @@ namespace
     DEMO_IMAGE_DIR "octahedron-button.png"
   };
 
+  //Prefix of all shape titles.
+  const std::string SHAPE_TITLE_PREFIX = "Current Shape: ";
+
   //Shape property defaults
   const int DEFAULT_SLICES = 32;
   const int DEFAULT_STACKS = 32;
@@ -94,9 +97,11 @@ public:
   }
 
   //Place buttons on the top of the screen, which allow for selection of the shape to be displayed.
+  //A title above indicates the currently selected shape.
   //The buttons are laid out like so:
   //
   //      ^    +--------------------------------+
+  //      |    | Current Shape: ~~~~~           |
   //      |    |                                |
   //      |    | +----+ +----+ +----+ +----+    |
   //      |    | |    | |    | |    | |    |    |
@@ -123,26 +128,39 @@ public:
   //           |                                |
   //           |                                |
   //           |                                |
-  //           |                                |
   //           +--------------------------------+
   //
   void SetupButtons( Layer layer )
   {
     float containerPadding = 10.0f;
-    float buttonPadding = 5.0f;
+    float elementPadding = 5.0f;
+
+    //Used to layout the title and the buttons below it.
+    Control topAlignment = Control::New();
+    topAlignment.SetParentOrigin( ParentOrigin::TOP_CENTER );
+    topAlignment.SetAnchorPoint( AnchorPoint::TOP_CENTER );
+    topAlignment.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+    topAlignment.SetResizePolicy( ResizePolicy::FIT_TO_CHILDREN, Dimension::HEIGHT );
+    layer.Add( topAlignment );
+
+    //Add a title to indicate the currently selected shape.
+    mShapeTitle = TextLabel::New( "DEFAULT" );
+    mShapeTitle.SetParentOrigin( ParentOrigin::CENTER );
+    mShapeTitle.SetAnchorPoint( AnchorPoint::CENTER );
+    mShapeTitle.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
+    mShapeTitle.SetPadding( Padding( elementPadding, elementPadding, elementPadding, elementPadding ) );
+    topAlignment.Add( mShapeTitle );
 
     //Create a variable-length container that can wrap buttons around as more are added.
     FlexContainer buttonContainer = FlexContainer::New();
-    buttonContainer.SetParentOrigin( ParentOrigin::TOP_CENTER );
+    buttonContainer.SetParentOrigin( ParentOrigin::BOTTOM_CENTER );
     buttonContainer.SetAnchorPoint( AnchorPoint::TOP_CENTER );
     buttonContainer.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
-    buttonContainer.SetResizePolicy( ResizePolicy::SIZE_RELATIVE_TO_PARENT, Dimension::HEIGHT );
-    buttonContainer.SetSizeModeFactor( Vector3( 0.0, 0.3, 0.0 ) );  //30% of height.
+    buttonContainer.SetResizePolicy( ResizePolicy::FIXED, Dimension::HEIGHT );
     buttonContainer.SetPadding( Padding( containerPadding, containerPadding, containerPadding, containerPadding ) );
     buttonContainer.SetProperty( FlexContainer::Property::FLEX_DIRECTION, FlexContainer::ROW );
     buttonContainer.SetProperty( FlexContainer::Property::FLEX_WRAP, FlexContainer::WRAP );
-
-    layer.Add( buttonContainer );
+    topAlignment.Add( buttonContainer );
 
     //Create buttons and place them in the container.
     for( int modelNumber = 0; modelNumber < NUM_MODELS; modelNumber++ )
@@ -151,7 +169,7 @@ public:
       button.SetParentOrigin( ParentOrigin::CENTER );
       button.SetAnchorPoint( AnchorPoint::CENTER );
       button.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
-      button.SetPadding( Padding( buttonPadding, buttonPadding, buttonPadding, buttonPadding ) );
+      button.SetPadding( Padding( elementPadding, elementPadding, elementPadding, elementPadding ) );
       button.SetProperty( Button::Property::UNSELECTED_STATE_IMAGE, Property::Value( BUTTON_IMAGE_URL[modelNumber] ) );
       button.SetProperty( Button::Property::SELECTED_STATE_IMAGE, Property::Value( BUTTON_IMAGE_URL[modelNumber] ) );
       button.RegisterProperty( "modelNumber", Property::Value( modelNumber ) );
@@ -318,7 +336,7 @@ public:
     //Visual map for model
     mVisualMap.Clear();
     mVisualMap[ Visual::Property::TYPE           ] = Visual::PRIMITIVE;
-    mVisualMap[ PrimitiveVisual::Property::COLOR ] = mColor;
+    mVisualMap[ PrimitiveVisual::Property::MIX_COLOR ] = mColor;
   }
 
   //Sets the 3D model to a sphere and modifies the sliders appropriately.
@@ -333,12 +351,18 @@ public:
 
     //Set up sliders.
     SetupSlider( 0, SLICES_LOWER_BOUND, SLICES_UPPER_BOUND, DEFAULT_STACKS, PrimitiveVisual::Property::SLICES, "slices" );
-    SetupMarks( mSliders.at( 0 ), SLICES_LOWER_BOUND, SLICES_UPPER_BOUND );
+    SetupMarks( 0, SLICES_LOWER_BOUND, SLICES_UPPER_BOUND );
+    mSliders.at( 0 ).SetProperty( Slider::Property::VALUE_PRECISION, Property::Value( 0 ) );
+
     SetupSlider( 1, STACKS_LOWER_BOUND, STACKS_UPPER_BOUND, DEFAULT_STACKS, PrimitiveVisual::Property::STACKS, "stacks" );
-    SetupMarks( mSliders.at( 1 ), STACKS_LOWER_BOUND, STACKS_UPPER_BOUND );
+    SetupMarks( 1, STACKS_LOWER_BOUND, STACKS_UPPER_BOUND );
+    mSliders.at( 1 ).SetProperty( Slider::Property::VALUE_PRECISION, Property::Value( 0 ) );
 
     //Set model in control.
     mModel.SetProperty( Control::Property::BACKGROUND, Property::Value( mVisualMap ) );
+
+    //Update title.
+    mShapeTitle.SetProperty( TextLabel::Property::TEXT, SHAPE_TITLE_PREFIX + "Sphere" );
   }
 
   //Sets the 3D model to a cone and modifies the sliders appropriately.
@@ -354,12 +378,20 @@ public:
 
     //Set up sliders.
     SetupSlider( 0, 1.0f, 32.0f, DEFAULT_SCALE_HEIGHT, PrimitiveVisual::Property::SCALE_HEIGHT, "scaleHeight" );
+    mSliders.at( 0 ).SetProperty( Slider::Property::VALUE_PRECISION, Property::Value( 1 ) );
+
     SetupSlider( 1, 1.0f, 32.0f, DEFAULT_SCALE_BOTTOM_RADIUS, PrimitiveVisual::Property::SCALE_BOTTOM_RADIUS, "scaleBottomRadius" );
+    mSliders.at( 1 ).SetProperty( Slider::Property::VALUE_PRECISION, Property::Value( 1 ) );
+
     SetupSlider( 2, SLICES_LOWER_BOUND, SLICES_UPPER_BOUND, DEFAULT_STACKS, PrimitiveVisual::Property::SLICES, "slices" );
-    SetupMarks( mSliders.at( 2 ), SLICES_LOWER_BOUND, SLICES_UPPER_BOUND );
+    SetupMarks( 2, SLICES_LOWER_BOUND, SLICES_UPPER_BOUND );
+    mSliders.at( 2 ).SetProperty( Slider::Property::VALUE_PRECISION, Property::Value( 0 ) );
 
     //Set model in control.
     mModel.SetProperty( Control::Property::BACKGROUND, Property::Value( mVisualMap ) );
+
+    //Update title.
+    mShapeTitle.SetProperty( TextLabel::Property::TEXT, SHAPE_TITLE_PREFIX + "Cone" );
   }
 
   //Sets the 3D model to a conical frustrum and modifies the sliders appropriately.
@@ -376,11 +408,19 @@ public:
 
     //Set up used sliders.
     SetupSlider( 0, 1.0f, 32.0f, DEFAULT_SCALE_HEIGHT, PrimitiveVisual::Property::SCALE_HEIGHT, "scaleHeight" );
+    mSliders.at( 0 ).SetProperty( Slider::Property::VALUE_PRECISION, Property::Value( 1 ) );
+
     SetupSlider( 1, 0.0f, 32.0f, DEFAULT_SCALE_BOTTOM_RADIUS, PrimitiveVisual::Property::SCALE_BOTTOM_RADIUS, "scaleBottomRadius" );
+    mSliders.at( 1 ).SetProperty( Slider::Property::VALUE_PRECISION, Property::Value( 1 ) );
+
     SetupSlider( 2, 0.0f, 32.0f, DEFAULT_SCALE_TOP_RADIUS, PrimitiveVisual::Property::SCALE_TOP_RADIUS, "scaleTopRadius" );
+    mSliders.at( 2 ).SetProperty( Slider::Property::VALUE_PRECISION, Property::Value( 1 ) );
 
     //Set model in control.
     mModel.SetProperty( Control::Property::BACKGROUND, Property::Value( mVisualMap ) );
+
+    //Update title.
+    mShapeTitle.SetProperty( TextLabel::Property::TEXT, SHAPE_TITLE_PREFIX + "Conical Frustrum" );
   }
 
   //Sets the 3D model to a cylinder and modifies the sliders appropriately.
@@ -396,12 +436,20 @@ public:
 
     //Set up used sliders.
     SetupSlider( 0, 1.0f, 32.0f, DEFAULT_SCALE_HEIGHT, PrimitiveVisual::Property::SCALE_HEIGHT, "scaleHeight" );
+    mSliders.at( 0 ).SetProperty( Slider::Property::VALUE_PRECISION, Property::Value( 1 ) );
+
     SetupSlider( 1, 1.0f, 32.0f, DEFAULT_SCALE_RADIUS, PrimitiveVisual::Property::SCALE_RADIUS, "scaleRadius" );
+    mSliders.at( 1 ).SetProperty( Slider::Property::VALUE_PRECISION, Property::Value( 1 ) );
+
     SetupSlider( 2, SLICES_LOWER_BOUND, SLICES_UPPER_BOUND, DEFAULT_STACKS, PrimitiveVisual::Property::SLICES, "slices" );
-    SetupMarks( mSliders.at( 2 ), SLICES_LOWER_BOUND, SLICES_UPPER_BOUND );
+    SetupMarks( 2 , SLICES_LOWER_BOUND, SLICES_UPPER_BOUND );
+    mSliders.at( 2 ).SetProperty( Slider::Property::VALUE_PRECISION, Property::Value( 0 ) );
 
     //Set model in control.
     mModel.SetProperty( Control::Property::BACKGROUND, Property::Value( mVisualMap ) );
+
+    //Update title.
+    mShapeTitle.SetProperty( TextLabel::Property::TEXT, SHAPE_TITLE_PREFIX + "Cylinder" );
   }
 
   //Sets the 3D model to a cube and modifies the sliders appropriately.
@@ -414,6 +462,9 @@ public:
 
     //Set model in control.
     mModel.SetProperty( Control::Property::BACKGROUND, Property::Value( mVisualMap ) );
+
+    //Update title.
+    mShapeTitle.SetProperty( TextLabel::Property::TEXT, SHAPE_TITLE_PREFIX + "Cube" );
   }
 
   //Sets the 3D model to a bevelled cube and modifies the sliders appropriately.
@@ -428,10 +479,16 @@ public:
 
     //Set up used sliders.
     SetupSlider( 0, 0.0f, 1.0f, DEFAULT_BEVEL_PERCENTAGE, PrimitiveVisual::Property::BEVEL_PERCENTAGE, "bevelPercentage" );
+    mSliders.at( 0 ).SetProperty( Slider::Property::VALUE_PRECISION, Property::Value( 2 ) );
+
     SetupSlider( 1, 0.0f, 1.0f, DEFAULT_BEVEL_SMOOTHNESS, PrimitiveVisual::Property::BEVEL_SMOOTHNESS, "bevelSmoothness" );
+    mSliders.at( 1 ).SetProperty( Slider::Property::VALUE_PRECISION, Property::Value( 2 ) );
 
     //Set model in control.
     mModel.SetProperty( Control::Property::BACKGROUND, Property::Value( mVisualMap ) );
+
+    //Update title.
+    mShapeTitle.SetProperty( TextLabel::Property::TEXT, SHAPE_TITLE_PREFIX + "Bevelled Cube" );
   }
 
   //Sets the 3D model to an octahedron and modifies the sliders appropriately.
@@ -444,6 +501,9 @@ public:
 
     //Set model in control.
     mModel.SetProperty( Control::Property::BACKGROUND, Property::Value( mVisualMap ) );
+
+    //Update title.
+    mShapeTitle.SetProperty( TextLabel::Property::TEXT, SHAPE_TITLE_PREFIX + "Octahedron" );
   }
 
   //Sets up the slider at the given index for the supplied property, and labels it appropriately.
@@ -475,7 +535,7 @@ public:
   }
 
   //Setup snapping to integer values between the two given values.
-  void SetupMarks( Slider& slider, int lower, int upper )
+  void SetupMarks( int sliderIndex, int lower, int upper )
   {
     Property::Array marks;
 
@@ -484,8 +544,8 @@ public:
       marks.PushBack( Property::Value( mark ) );
     }
 
-    slider.SetProperty( Slider::Property::MARKS, Property::Value( marks ) );
-    slider.SetProperty( Slider::Property::SNAP_TO_MARKS, Property::Value( true ) );
+    mSliders.at( sliderIndex ).SetProperty( Slider::Property::MARKS, Property::Value( marks ) );
+    mSliders.at( sliderIndex ).SetProperty( Slider::Property::SNAP_TO_MARKS, Property::Value( true ) );
   }
 
   //When a shape button is tapped, switch to the corresponding shape.
@@ -612,18 +672,19 @@ public:
 private:
   Application& mApplication;
 
-  std::vector<Slider> mSliders; ///< Holds the sliders on screen that each shape accesses.
-  std::vector<TextLabel> mSliderLabels; ///< Holds the labels to each slider.
-  TableView mSliderTable; ///< A table to layout the sliders next to their labels.
+  std::vector<Slider>       mSliders;               ///< Holds the sliders on screen that each shape accesses.
+  std::vector<TextLabel>    mSliderLabels;          ///< Holds the labels to each slider.
+  TableView                 mSliderTable;           ///< A table to layout the sliders next to their labels.
 
-  Property::Map mVisualMap; ///< Property map to create a primitive visual.
-  Control mModel; ///< Control to house the primitive visual.
+  Property::Map             mVisualMap;             ///< Property map to create a primitive visual.
+  Control                   mModel;                 ///< Control to house the primitive visual.
+  TextLabel                 mShapeTitle;            ///< Indicates what the currently selected shape is.
 
-  PanGestureDetector mPanGestureDetector; ///< Detects pan gestures for rotation of the model.
-  Animation mRotationAnimation; ///< Automatically rotates the model, unless it is being panned.
+  PanGestureDetector        mPanGestureDetector;    ///< Detects pan gestures for rotation of the model.
+  Animation                 mRotationAnimation;     ///< Automatically rotates the model, unless it is being panned.
 
-  Vector4 mColor; ///< Color to set all shapes.
-  Vector2 mRotation; ///< Keeps track of model rotation.
+  Vector4                   mColor;                 ///< Color to set all shapes.
+  Vector2                   mRotation;              ///< Keeps track of model rotation.
 };
 
 void RunTest( Application& application )
diff --git a/examples/progress-bar/progress-bar-example.cpp b/examples/progress-bar/progress-bar-example.cpp
new file mode 100644
index 00000000..593e297e
--- /dev/null
+++ b/examples/progress-bar/progress-bar-example.cpp
@@ -0,0 +1,193 @@
+/*
+ * 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 "shared/view.h"
+#include <dali-toolkit/dali-toolkit.h>
+#include <dali-toolkit/devel-api/controls/progress-bar/progress-bar.h>
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+using Dali::Toolkit::ProgressBar;
+
+namespace
+{
+
+const char* const BACKGROUND_IMAGE = DEMO_IMAGE_DIR "background-gradient.jpg";
+const char* const TOOLBAR_IMAGE = DEMO_IMAGE_DIR "top-bar.png";
+const char* const TOOLBAR_TITLE = "Progress Bar";
+
+const Vector4 BACKGROUND_COLOUR( 1.0f, 1.0f, 1.0f, 0.15f );
+
+// Layout sizes
+const int MARGIN_SIZE = 10;
+const int TOP_MARGIN = 85;
+
+}  // namespace
+
+/** This example shows how to create and use PROGRESS BAR.
+ */
+
+class ProgressBarExample: public ConnectionTracker
+{
+public:
+
+  ProgressBarExample( Application& application )
+    : mApplication( application )
+  {
+    // Connect to the Application's Init signal
+    mProgressValue = 0.0f;
+    mApplication.InitSignal().Connect( this, &ProgressBarExample::Create );
+  }
+
+  ~ProgressBarExample()
+  {
+    // Nothing to do here
+  }
+
+  void Create( Application& application )
+  {
+    // The Init signal is received once (only) during the Application lifetime
+
+    // Respond to key events
+    Stage::GetCurrent().KeyEventSignal().Connect( this, &ProgressBarExample::OnKeyEvent );
+
+    // Creates a default view with a default tool bar.
+    // The view is added to the stage.
+
+    mContentLayer = DemoHelper::CreateView( application,
+                                            mView,
+                                            mToolBar,
+                                            BACKGROUND_IMAGE,
+                                            TOOLBAR_IMAGE,
+                                            TOOLBAR_TITLE );
+
+    mProgressBar = ProgressBar::New();
+    mProgressBar.SetParentOrigin(ParentOrigin::TOP_CENTER);
+    mProgressBar.SetAnchorPoint(AnchorPoint::TOP_CENTER);
+    mProgressBar.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
+    mProgressBar.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT);
+
+    Toolkit::TableView contentTable = Toolkit::TableView::New(2, 1);
+    contentTable.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
+    contentTable.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT);
+    contentTable.SetAnchorPoint(AnchorPoint::TOP_LEFT);
+    contentTable.SetParentOrigin(ParentOrigin::TOP_LEFT);
+    contentTable.SetCellPadding(Size(MARGIN_SIZE, MARGIN_SIZE * 0.5f));
+
+    for( unsigned int i = 0; i < contentTable.GetRows(); ++i )
+    {
+      contentTable.SetFitHeight( i );
+    }
+
+    contentTable.SetPosition( 0.0f, TOP_MARGIN );
+    mContentLayer.Add( contentTable );
+
+    // Image selector for progress bar
+    Toolkit::TableView progressBackground = Toolkit::TableView::New( 1, 1 );
+    progressBackground.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+    progressBackground.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
+    progressBackground.SetBackgroundColor( BACKGROUND_COLOUR );
+    progressBackground.SetCellPadding( Size( MARGIN_SIZE, MARGIN_SIZE ) );
+    progressBackground.SetRelativeWidth( 0, 1.0f );
+    progressBackground.SetFitHeight( 0 );
+    contentTable.Add( progressBackground );
+    progressBackground.Add( mProgressBar );
+
+    // Create buttons
+    Toolkit::TableView buttonBackground = Toolkit::TableView::New( 2, 1 );
+    buttonBackground.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+    buttonBackground.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
+    buttonBackground.SetBackgroundColor( BACKGROUND_COLOUR );
+    buttonBackground.SetCellPadding( Size( MARGIN_SIZE, MARGIN_SIZE ) );
+
+    for( unsigned int i = 0; i < buttonBackground.GetRows(); ++i )
+    {
+      buttonBackground.SetFitHeight( i );
+    }
+
+    contentTable.Add( buttonBackground );
+
+    mSetProgressButton = Toolkit::PushButton::New();
+    mSetProgressButton.SetLabelText( "Set Progress" );
+    mSetProgressButton.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+    mSetProgressButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
+    mSetProgressButton.ClickedSignal().Connect( this, &ProgressBarExample::OnSetProgressButtonSelected );
+
+    buttonBackground.Add( mSetProgressButton );
+
+    mResetProgressButton = Toolkit::PushButton::New();
+    mResetProgressButton.SetLabelText( "Reset Progress" );
+    mResetProgressButton.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+    mResetProgressButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
+    mResetProgressButton.ClickedSignal().Connect( this, &ProgressBarExample::OnResetProgressButtonSelected );
+
+    buttonBackground.Add( mResetProgressButton );
+ }
+
+ bool OnResetProgressButtonSelected( Toolkit::Button button )
+ {
+   mProgressValue = 0.0f;
+   mProgressBar.SetProperty(ProgressBar::Property::PROGRESS_VALUE, 0.0f);
+   return true;
+ }
+
+ bool OnSetProgressButtonSelected( Toolkit::Button button )
+ {
+   mProgressValue += 0.1f;
+   mProgressBar.SetProperty(ProgressBar::Property::PROGRESS_VALUE, mProgressValue);
+   return true;
+ }
+
+ void OnKeyEvent( const KeyEvent& event )
+ {
+   if( event.state == KeyEvent::Down )
+   {
+     if( IsKey( event, Dali::DALI_KEY_ESCAPE ) || IsKey( event, Dali::DALI_KEY_BACK ) )
+     {
+       // Exit application when click back or escape.
+       mApplication.Quit();
+     }
+   }
+ }
+
+private:
+
+  Application&      mApplication;
+  Toolkit::Control  mView;                              ///< The View instance.
+  Toolkit::ToolBar  mToolBar;                           ///< The View's Toolbar.
+  Layer             mContentLayer;                      ///< Content layer.
+  ProgressBar       mProgressBar;
+  Toolkit::PushButton mSetProgressButton;
+  Toolkit::PushButton mResetProgressButton;
+  float mProgressValue;
+};
+
+void RunTest( Application& application )
+{
+  ProgressBarExample test( application );
+  application.MainLoop();
+}
+
+// Entry point for Linux & Tizen applications
+int DALI_EXPORT_API main( int argc, char **argv )
+{
+  Application application = Application::New( &argc, &argv, DEMO_THEME_PATH );
+
+  RunTest( application );
+
+  return 0;
+}
diff --git a/examples/radial-menu/radial-menu-example.cpp b/examples/radial-menu/radial-menu-example.cpp
deleted file mode 100644
index 13be24af..00000000
--- a/examples/radial-menu/radial-menu-example.cpp
+++ /dev/null
@@ -1,307 +0,0 @@
-/*
- * Copyright (c) 2015 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 <dali/dali.h>
-#include <dali-toolkit/dali-toolkit.h>
-#include "shared/view.h"
-#include "radial-sweep-view.h"
-#include "radial-sweep-view-impl.h"
-
-using namespace Dali;
-using namespace Dali::Toolkit;
-
-namespace
-{
-const char* TEST_OUTER_RING_FILENAME = DEMO_IMAGE_DIR "layer2.png"; // Image to be masked
-const char* TEST_INNER_RING_FILENAME = DEMO_IMAGE_DIR "layer1.png"; // Image to be masked
-const char* TEST_MENU_FILENAME = DEMO_IMAGE_DIR "layer3.png"; // Image to be masked
-const char* TEST_DIAL_FILENAME = DEMO_IMAGE_DIR "layer4.png"; // Image to be masked
-const char* TOOLBAR_IMAGE( DEMO_IMAGE_DIR "top-bar.png" ); // Background for toolbar
-const char* APPLICATION_TITLE( "Radial Menu" );
-const char * const PLAY_ICON( DEMO_IMAGE_DIR "icon-play.png" );
-const char * const PLAY_ICON_SELECTED( DEMO_IMAGE_DIR "icon-play-selected.png" );
-const char * const STOP_ICON( DEMO_IMAGE_DIR "icon-stop.png" );
-const char * const STOP_ICON_SELECTED( DEMO_IMAGE_DIR "icon-stop-selected.png" );
-}
-
-
-/********************************************************************************
- * Application controller class
- */
-
-// This example shows how to create a mesh actor for use as a stencil buffer
-class RadialMenuExample : public ConnectionTracker
-{
-public:
-  /**
-   * Constructor
-   * @param[in] app The application handle
-   */
-  RadialMenuExample(Application app);
-
-  /**
-   * Destructor
-   */
-  ~RadialMenuExample();
-
-private:
-
-  /**
-   * Initialization signal handler - all actor initialization should happen here
-   * @param[in] app The application handle
-   */
-  void OnInit(Application& app);
-
-  /**
-   * Create a sweep view with the given image and parameters
-   */
-  RadialSweepView CreateSweepView( std::string imageName, Degree initial, Degree final );
-
-  /**
-   * Start the sweep animation on the menu
-   */
-  void StartAnimation();
-
-  /**
-   * Play or pause the animation when the button is clicked
-   */
-  bool OnButtonClicked( Toolkit::Button button );
-
-  /**
-   * Update the state flag and change the button icon when the animation is finished
-   */
-  void OnAnimationFinished( Animation& source );
-
-  /**
-   * Main key event handler
-   *
-   * @param[in] event The key event to respond to
-   */
-  void OnKeyEvent(const KeyEvent& event);
-
-private: // Member variables
-  enum AnimState
-  {
-    STOPPED,
-    PAUSED,
-    PLAYING
-  };
-
-  Application     mApplication; ///< The application handle
-  Toolkit::Control mView;        ///< The toolbar view
-  Layer           mContents;    ///< The toolbar contents pane
-  ImageView       mImageView;  ///< Image view shown by stencil mask
-  Animation       mAnimation;
-  AnimState       mAnimationState;
-
-  Toolkit::PushButton mPlayStopButton;
-  ImageView       mDialView;
-  RadialSweepView mRadialSweepView1;
-  RadialSweepView mRadialSweepView2;
-  RadialSweepView mRadialSweepView3;
-};
-
-RadialMenuExample::RadialMenuExample(Application app)
-: mApplication( app ),
-  mAnimationState(STOPPED)
-{
-  // Connect to the Application's Init signal
-  app.InitSignal().Connect(this, &RadialMenuExample::OnInit);
-}
-
-RadialMenuExample::~RadialMenuExample()
-{
-  // Nothing to do here; actor handles will clean up themselves.
-}
-
-void RadialMenuExample::OnInit(Application& app)
-{
-  Stage stage = Dali::Stage::GetCurrent();
-
-  // The Init signal is received once (only) during the Application lifetime
-  stage.KeyEventSignal().Connect(this, &RadialMenuExample::OnKeyEvent);
-
-  // Create toolbar & view
-  Toolkit::ToolBar toolBar;
-  mContents = DemoHelper::CreateView( mApplication,
-                                      mView,
-                                      toolBar,
-                                      "",
-                                      TOOLBAR_IMAGE,
-                                      APPLICATION_TITLE );
-
-  mPlayStopButton = Toolkit::PushButton::New();
-  mPlayStopButton.SetUnselectedImage( STOP_ICON );
-  mPlayStopButton.SetSelectedImage( STOP_ICON_SELECTED );
-
-  mPlayStopButton.ClickedSignal().Connect( this, &RadialMenuExample::OnButtonClicked );
-
-  toolBar.AddControl( mPlayStopButton,
-                      DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage,
-                      Toolkit::Alignment::HorizontalRight,
-                      DemoHelper::DEFAULT_PLAY_PADDING );
-
-
-  const ImageDimensions intImgSize = ResourceImage::GetImageSize(TEST_OUTER_RING_FILENAME);
-  Vector2 imgSize = Vector2( intImgSize.GetWidth(), intImgSize.GetHeight() );
-  Vector2 stageSize = stage.GetSize();
-  float scale = stageSize.width / imgSize.width;
-  float availableHeight = stageSize.height - DemoHelper::DEFAULT_VIEW_STYLE.mToolBarHeight * 2.0f;
-  if(availableHeight <= stageSize.width)
-  {
-    scale = availableHeight / imgSize.width;
-  }
-
-  mRadialSweepView1 = CreateSweepView( TEST_OUTER_RING_FILENAME, Degree(-90.0f), Degree(-90.0f));
-  mRadialSweepView2 = CreateSweepView( TEST_INNER_RING_FILENAME, Degree(90.0f),  Degree(0.0f));
-  mRadialSweepView3 = CreateSweepView( TEST_MENU_FILENAME, Degree(100.0f), Degree(0.0f));
-  mRadialSweepView3.SetInitialActorAngle(Degree(-110));
-  mRadialSweepView3.SetFinalActorAngle(Degree(0));
-
-  mDialView = ImageView::New( TEST_DIAL_FILENAME );
-  mDialView.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
-  mDialView.SetParentOrigin( ParentOrigin::CENTER );
-  mDialView.SetScale(scale);
-  Layer dialLayer = Layer::New();
-
-  dialLayer.Add( mDialView );
-  dialLayer.SetParentOrigin( ParentOrigin::CENTER );
-  dialLayer.SetSize(stage.GetSize());
-  mContents.Add(dialLayer);
-
-  mRadialSweepView1.SetScale(scale);
-  mRadialSweepView2.SetScale(scale);
-  mRadialSweepView3.SetScale(scale);
-
-  StartAnimation();
-}
-
-void RadialMenuExample::StartAnimation()
-{
-  mDialView.SetOpacity(0.0f);
-  mRadialSweepView1.SetOpacity(0.0f);
-  mAnimation = Animation::New(6.0f);
-  mRadialSweepView1.Activate(mAnimation, 0.0f, 3.0f);
-  mRadialSweepView2.Activate(mAnimation, 1.5f, 3.0f);
-  mRadialSweepView3.Activate(mAnimation, 3.0f, 3.0f);
-  mAnimation.AnimateTo( Property( mDialView, Actor::Property::COLOR_ALPHA ), 1.0f, AlphaFunction::EASE_IN, TimePeriod( 0.0f, 0.8f ) );
-  mAnimation.AnimateTo( Property( mRadialSweepView1, Actor::Property::COLOR_ALPHA ), 1.0f, AlphaFunction::EASE_IN, TimePeriod( 0.0f, 0.5f ) );
-  mAnimation.FinishedSignal().Connect( this, &RadialMenuExample::OnAnimationFinished );
-
-  mAnimationState = PLAYING;
-  mAnimation.Play();
-}
-
-bool RadialMenuExample::OnButtonClicked( Toolkit::Button button )
-{
-  switch( mAnimationState )
-  {
-    case PLAYING:
-    {
-      mAnimation.Pause();
-      mAnimationState = PAUSED;
-      mPlayStopButton.SetUnselectedImage( PLAY_ICON );
-      mPlayStopButton.SetSelectedImage( PLAY_ICON_SELECTED );
-    }
-    break;
-
-    case PAUSED:
-    {
-      mAnimation.Play();
-      mAnimationState = PLAYING;
-      mPlayStopButton.SetUnselectedImage( STOP_ICON );
-      mPlayStopButton.SetSelectedImage( STOP_ICON_SELECTED );
-    }
-    break;
-
-    case STOPPED:
-    {
-      mPlayStopButton.SetUnselectedImage( STOP_ICON );
-      mPlayStopButton.SetSelectedImage( STOP_ICON_SELECTED );
-      mRadialSweepView1.Deactivate();
-      mRadialSweepView2.Deactivate();
-      mRadialSweepView3.Deactivate();
-      StartAnimation();
-    }
-  }
-  return false;
-}
-
-void RadialMenuExample::OnAnimationFinished( Animation& source )
-{
-  mAnimationState = STOPPED;
-  mPlayStopButton.SetUnselectedImage( PLAY_ICON );
-  mPlayStopButton.SetSelectedImage( PLAY_ICON_SELECTED );
-}
-
-RadialSweepView RadialMenuExample::CreateSweepView( std::string imageName,
-                                                    Degree initialAngle,
-                                                    Degree finalAngle)
-{
-  // Create the image
-  mImageView = ImageView::New(imageName);
-  mImageView.SetParentOrigin(ParentOrigin::CENTER);
-  mImageView.SetAnchorPoint(AnchorPoint::CENTER);
-  mImageView.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
-
-  // Create the stencil
-  const ImageDimensions imageSize = ResourceImage::GetImageSize(imageName);
-  float diameter = std::max(imageSize.GetWidth(), imageSize.GetHeight());
-  RadialSweepView radialSweepView = RadialSweepView::New();
-  radialSweepView.SetDiameter( diameter );
-  radialSweepView.SetInitialAngle( initialAngle );
-  radialSweepView.SetFinalAngle( finalAngle );
-  radialSweepView.SetInitialSector( Degree(0.0f) );
-  radialSweepView.SetFinalSector( Degree(359.999f) );
-  radialSweepView.SetSize( Stage::GetCurrent().GetSize());
-  radialSweepView.SetEasingFunction( Dali::AlphaFunction::EASE_IN_OUT );
-  radialSweepView.SetParentOrigin( ParentOrigin::CENTER );
-  mContents.Add(radialSweepView);
-  radialSweepView.Add( mImageView );
-  mImageView.SetParentOrigin( ParentOrigin::CENTER );
-
-  return radialSweepView;
-}
-
-
-void RadialMenuExample::OnKeyEvent(const KeyEvent& event)
-{
-  if(event.state == KeyEvent::Down)
-  {
-    if( IsKey( event, Dali::DALI_KEY_ESCAPE) || IsKey( event, Dali::DALI_KEY_BACK) )
-    {
-      mApplication.Quit();
-    }
-  }
-}
-
-void RunTest(Application app)
-{
-  RadialMenuExample test(app);
-
-  app.MainLoop();
-}
-
-// Entry point for Linux & Tizen applications
-int DALI_EXPORT_API main(int argc, char **argv)
-{
-  Application app = Application::New(&argc, &argv, DEMO_THEME_PATH);
-
-  RunTest(app);
-
-  return 0;
-}
diff --git a/examples/radial-menu/radial-sweep-view-impl.cpp b/examples/radial-menu/radial-sweep-view-impl.cpp
deleted file mode 100644
index 34bbe7ce..00000000
--- a/examples/radial-menu/radial-sweep-view-impl.cpp
+++ /dev/null
@@ -1,357 +0,0 @@
-/*
- * 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 "radial-sweep-view-impl.h"
-
-#include <dali/public-api/rendering/renderer.h>
-#include <sstream>
-
-using namespace Dali;
-
-namespace
-{
-
-const char* VERTEX_SHADER_PREFIX( "#define MATH_PI_2 1.570796\n#define MATH_PI_4 0.785398\n" );
-
-const char* VERTEX_SHADER = DALI_COMPOSE_SHADER(
-attribute mediump float   aAngleIndex;\n
-attribute mediump vec2    aPosition1;\n
-attribute mediump vec2    aPosition2;\n
-uniform   mediump mat4    uMvpMatrix;\n
-uniform   mediump float   uStartAngle;\n
-uniform   mediump float   uRotationAngle;\n
-\n
-void main()\n
-{\n
-  float currentAngle = uStartAngle + uRotationAngle;\n
-  float angleInterval1 =  MATH_PI_4 * aAngleIndex;\n
-  vec4 vertexPosition = vec4(0.0, 0.0, 0.0, 1.0);\n
-  if( currentAngle >=  angleInterval1)\n
-  {\n
-    float angleInterval2 =  angleInterval1 + MATH_PI_2;\n
-    float angle = currentAngle < angleInterval2 ? currentAngle : angleInterval2;\n
-    float delta;\n
-    if( mod( aAngleIndex+4.0, 4.0) < 2.0  )\n
-    {\n
-      delta = 0.5 - 0.5*cos(angle) / sin(angle);\n
-    }\n
-    else\n
-    {\n
-      delta = 0.5 + 0.5*sin(angle) / cos(angle);\n
-    }\n
-    vertexPosition.xy = mix( aPosition1, aPosition2, delta );\n
-  }\n
-  gl_Position = uMvpMatrix * vertexPosition;\n
-}
-);
-
-const char* FRAGMENT_SHADER = DALI_COMPOSE_SHADER(
-uniform lowp  vec4    uColor;\n
-\n
-void main()\n
-{\n
-  gl_FragColor = uColor;\n
-}\n
-);
-
-float HoldZeroFastEaseInOutHoldOne(float progress)
-{
-  if( progress < 0.2f)
-  {
-    return 0.0f;
-  }
-  else if(progress < 0.5f)
-  {
-    progress = (progress-0.2) / 0.3f;
-    return  progress*progress*progress*0.5f;
-  }
-  else if(progress < 0.8f)
-  {
-    progress = ((progress - 0.5f) / 0.3f) - 1.0f;
-    return (progress*progress*progress+1.0f) * 0.5f + 0.5f;
-  }
-  else
-  {
-    return 1.0f;
-  }
-}
-
-} // anonymous namespace
-
-
-RadialSweepView RadialSweepViewImpl::New( )
-{
-  return New( 2.0f, 100.0f, ANGLE_0, ANGLE_0, ANGLE_0, ANGLE_360 );
-}
-
-
-RadialSweepView RadialSweepViewImpl::New( float duration, float diameter, Radian initialAngle, Radian finalAngle, Radian initialSector, Radian finalSector )
-{
-  RadialSweepViewImpl* impl= new RadialSweepViewImpl(duration, diameter, initialAngle, finalAngle, initialSector, finalSector);
-  RadialSweepView handle = RadialSweepView(*impl);
-  return handle;
-}
-
-RadialSweepViewImpl::RadialSweepViewImpl( float duration, float diameter, Radian initialAngle, Radian finalAngle, Radian initialSector, Radian finalSector )
-: Control( ControlBehaviour( ACTOR_BEHAVIOUR_NONE ) ),
-  mDuration(duration),
-  mDiameter(diameter),
-  mInitialAngle(initialAngle),
-  mFinalAngle(finalAngle),
-  mInitialSector(initialSector),
-  mFinalSector(finalSector),
-  mInitialActorAngle(0),
-  mFinalActorAngle(0),
-  mEasingFunction(HoldZeroFastEaseInOutHoldOne),
-  mStartAngleIndex(Property::INVALID_INDEX),
-  mRotationAngleIndex(Property::INVALID_INDEX),
-  mRotateActorsWithStencil(false),
-  mRotateActors(false)
-{
-}
-
-void RadialSweepViewImpl::SetDuration(float duration)
-{
-  mDuration = duration;
-}
-
-void RadialSweepViewImpl::SetEasingFunction( Dali::AlphaFunction easingFunction )
-{
-  mEasingFunction = easingFunction;
-}
-
-void RadialSweepViewImpl::SetDiameter(float diameter)
-{
-  mDiameter = diameter;
-}
-
-void RadialSweepViewImpl::SetInitialAngle( Dali::Radian initialAngle)
-{
-  mInitialAngle = initialAngle;
-}
-
-void RadialSweepViewImpl::SetFinalAngle( Dali::Radian finalAngle)
-{
-  mFinalAngle = finalAngle;
-}
-
-void RadialSweepViewImpl::SetInitialSector( Dali::Radian initialSector)
-{
-  mInitialSector = initialSector;
-}
-
-void RadialSweepViewImpl::SetFinalSector( Dali::Radian finalSector)
-{
-  mFinalSector = finalSector;
-}
-
-void RadialSweepViewImpl::SetInitialActorAngle( Dali::Radian initialAngle )
-{
-  mInitialActorAngle = initialAngle;
-  mRotateActors = true;
-}
-
-void RadialSweepViewImpl::SetFinalActorAngle( Dali::Radian finalAngle )
-{
-  mFinalActorAngle = finalAngle;
-  mRotateActors = true;
-}
-
-float RadialSweepViewImpl::GetDuration( )
-{
-  return mDuration;
-}
-
-float RadialSweepViewImpl::GetDiameter( )
-{
-  return mDiameter;
-}
-
-Dali::Radian RadialSweepViewImpl::GetInitialAngle( )
-{
-  return mInitialAngle;
-}
-
-Dali::Radian RadialSweepViewImpl::GetFinalAngle( )
-{
-  return mFinalAngle;
-}
-
-Dali::Radian RadialSweepViewImpl::GetInitialSector( )
-{
-  return mInitialSector;
-}
-
-Dali::Radian RadialSweepViewImpl::GetFinalSector( )
-{
-  return mFinalSector;
-}
-
-Dali::Radian RadialSweepViewImpl::GetInitialActorAngle( )
-{
-  return mInitialActorAngle;
-}
-
-Dali::Radian RadialSweepViewImpl::GetFinalActorAngle(  )
-{
-  return mFinalActorAngle;
-}
-
-void RadialSweepViewImpl::RotateActorsWithStencil(bool rotate)
-{
-  mRotateActorsWithStencil = rotate;
-}
-
-void RadialSweepViewImpl::Add(Actor actor)
-{
-  if( ! mLayer )
-  {
-    mLayer = Layer::New();
-    Self().Add(mLayer);
-    mLayer.SetSize( Stage::GetCurrent().GetSize() );
-    mLayer.SetParentOrigin( ParentOrigin::CENTER );
-  }
-
-  mLayer.Add(actor);
-}
-
-void RadialSweepViewImpl::Activate( Animation anim, float offsetTime, float duration )
-{
-  bool startAnimation=false;
-  if( ! anim )
-  {
-    mAnim = Animation::New( mDuration );
-    anim = mAnim;
-    startAnimation = true;
-  }
-
-  if( ! mStencilActor )
-  {
-    CreateStencil( mInitialSector );
-    mLayer.Add( mStencilActor );
-    mStencilActor.SetScale(mDiameter);
-  }
-
-  mStencilActor.SetOrientation( mInitialAngle, Vector3::ZAXIS );
-  mStencilActor.SetProperty( mRotationAngleIndex, mInitialSector.radian );
-
-  if( mRotateActors )
-  {
-    for(unsigned int i=0, count=mLayer.GetChildCount(); i<count; i++)
-    {
-      Actor actor = mLayer.GetChildAt(i);
-      if( actor != mStencilActor )
-      {
-        anim.AnimateTo( Property( actor, Actor::Property::ORIENTATION ), Quaternion( Radian( mInitialActorAngle ), Vector3::ZAXIS ) );
-      }
-    }
-  }
-
-  anim.AnimateTo( Property( mStencilActor, mRotationAngleIndex ), mFinalSector.radian, mEasingFunction, TimePeriod( offsetTime, duration ) );
-  anim.AnimateTo( Property( mStencilActor, Actor::Property::ORIENTATION ), Quaternion( Radian( mFinalAngle ), Vector3::ZAXIS ), mEasingFunction, TimePeriod( offsetTime, duration ) );
-
-  if( mRotateActorsWithStencil )
-  {
-    for(unsigned int i=0, count=mLayer.GetChildCount(); i<count; i++)
-    {
-      Actor actor = mLayer.GetChildAt(i);
-      if( actor != mStencilActor )
-      {
-        anim.AnimateTo( Property( actor, Actor::Property::ORIENTATION ), Quaternion( Radian( mFinalAngle.radian - mInitialAngle.radian ) , Vector3::ZAXIS ), mEasingFunction, TimePeriod( offsetTime, duration ) );
-      }
-    }
-  }
-  else if( mRotateActors )
-  {
-    for(unsigned int i=0, count=mLayer.GetChildCount(); i<count; i++)
-    {
-      Actor actor = mLayer.GetChildAt(i);
-      if( actor != mStencilActor )
-      {
-        anim.AnimateTo( Property( actor, Actor::Property::ORIENTATION ), Quaternion( Radian( mFinalActorAngle ), Vector3::ZAXIS ), mEasingFunction, TimePeriod( offsetTime, duration ) );
-      }
-    }
-  }
-
-
-  if( startAnimation )
-  {
-    anim.SetLooping(true);
-    anim.Play();
-  }
-}
-
-
-void RadialSweepViewImpl::Deactivate()
-{
-  if( mAnim )
-  {
-    mAnim.Stop();
-  }
-}
-
-void RadialSweepViewImpl::CreateStencil( Radian initialSector )
-{
-  // Create the stencil mesh geometry
-  //     3-----2
-  //     | \ / |
-  //     |  0--1 , 6
-  //     | / \ |
-  //     4-----5
-
-  struct VertexPosition { float angleIndex; Vector2 position1; Vector2 position2; };
-  VertexPosition vertexData[7] = { // With X coordinate inverted to make the animation go anti clockwise from left center
-      { 9.f,  Vector2( 0.f, 0.f ),     Vector2( 0.f, 0.f )     }, // center point, keep static
-      { 0.f,  Vector2( -0.5f, 0.f ),   Vector2( -0.5f, 0.f )   }, // vertex 1, 0 degree, keep static
-      { -1.f, Vector2( -0.5f, 0.5f ),  Vector2( -0.5f, -0.5f ) }, // -45 ~ 45 degrees  ( 0 ~ 45)
-      { 1.f,  Vector2( -0.5f, -0.5f ), Vector2( 0.5f, -0.5f )  }, // 45 ~ 135 degrees
-      { 3.f,  Vector2( 0.5f, -0.5f ),  Vector2( 0.5f, 0.5f )   }, // 135 ~ 225 degrees
-      { 5.f,  Vector2( 0.5f, 0.5f ),   Vector2( -0.5f, 0.5f )  }, // 225 ~ 315 degrees
-      { 7.f,  Vector2( -0.5f, 0.5f ),  Vector2( -0.5f, -0.5f ) }  // 315 ~ 405 degrees ( 315 ~ 359.999 )
-  };
-  Property::Map vertexFormat;
-  vertexFormat["aAngleIndex"] = Property::FLOAT;
-  vertexFormat["aPosition1"] = Property::VECTOR2;
-  vertexFormat["aPosition2"] = Property::VECTOR2;
-  PropertyBuffer vertices = PropertyBuffer::New( vertexFormat );
-  vertices.SetData( vertexData, 7u );
-
-  unsigned short indexData[15] = { 0,1,2,0,2,3,0,3,4,0,4,5,0,5,6 };
-
-  Geometry meshGeometry = Geometry::New();
-  meshGeometry.AddVertexBuffer( vertices );
-  meshGeometry.SetIndexBuffer( &indexData[0], sizeof( indexData )/sizeof(indexData[0]) );
-
-  // Create shader
-  std::ostringstream vertexShaderStringStream;
-  vertexShaderStringStream<<VERTEX_SHADER_PREFIX<<VERTEX_SHADER;
-  Shader shader = Shader::New( vertexShaderStringStream.str(), FRAGMENT_SHADER );
-
-  // Create renderer
-  Renderer renderer = Renderer::New( meshGeometry, shader );
-
-  mStencilActor = Actor::New();
-  mStencilActor.AddRenderer( renderer );
-  mStencilActor.SetSize(1.f, 1.f);
-
-  // register properties
-  mStartAngleIndex = mStencilActor.RegisterProperty("uStartAngle", 0.f);
-  mRotationAngleIndex = mStencilActor.RegisterProperty("uRotationAngle", initialSector.radian);
-
-  mStencilActor.SetDrawMode( DrawMode::STENCIL );
-  mStencilActor.SetParentOrigin( ParentOrigin::CENTER );
-}
diff --git a/examples/radial-menu/radial-sweep-view-impl.h b/examples/radial-menu/radial-sweep-view-impl.h
deleted file mode 100644
index 5089c785..00000000
--- a/examples/radial-menu/radial-sweep-view-impl.h
+++ /dev/null
@@ -1,118 +0,0 @@
-#ifndef DALI_DEMO_RADIAL_SWEEP_VIEW_IMPL_H
-#define DALI_DEMO_RADIAL_SWEEP_VIEW_IMPL_H
-
-/*
- * Copyright (c) 2015 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 <dali-toolkit/dali-toolkit.h>
-#include "radial-sweep-view.h"
-
-
-/********************************************************************************
- * Class to implement a layer with a radial sweep stencil mask and an actor tree
- */
-class RadialSweepViewImpl : public Dali::Toolkit::Internal::Control
-{
-public:
-  static RadialSweepView New();
-
-  static RadialSweepView New( float duration,
-                              float diameter,
-                              Dali::Radian initialAngle,
-                              Dali::Radian finalAngle,
-                              Dali::Radian initialSector,
-                              Dali::Radian finalSector );
-
-  RadialSweepViewImpl( float duration,
-                       float diameter,
-                       Dali::Radian initialAngle,
-                       Dali::Radian finalAngle,
-                       Dali::Radian initialSector,
-                       Dali::Radian finalSector );
-
-  void SetDuration(float duration);
-  void SetEasingFunction( Dali::AlphaFunction easingFunction );
-
-  void SetDiameter(float diameter);
-  void SetInitialAngle( Dali::Radian initialAngle);
-  void SetFinalAngle( Dali::Radian finalAngle);
-  void SetInitialSector( Dali::Radian initialSector);
-  void SetFinalSector( Dali::Radian finalSector);
-  void SetInitialActorAngle( Dali::Radian initialAngle );
-  void SetFinalActorAngle( Dali::Radian finalAngle );
-
-  float GetDuration( );
-  float GetDiameter( );
-  Dali::Radian GetInitialAngle( );
-  Dali::Radian GetFinalAngle( );
-  Dali::Radian GetInitialSector( );
-  Dali::Radian GetFinalSector( );
-  Dali::Radian GetInitialActorAngle( );
-  Dali::Radian GetFinalActorAngle( );
-
-  void RotateActorsWithStencil(bool rotate);
-
-  void Add( Dali::Actor actor );
-
-  void Activate( Dali::Animation anim = Dali::Animation(), float offsetTime=0, float duration=2.0f );
-
-  void Deactivate();
-
-private:
-
-  /**
-   * Create the stencil mask
-   */
-  void CreateStencil(Dali::Radian initialSector );
-
-private:
-  Dali::Layer           mLayer;
-  Dali::Animation       mAnim;
-  float                 mDuration;
-  float                 mDiameter;
-  Dali::Radian          mInitialAngle;
-  Dali::Radian          mFinalAngle;
-  Dali::Radian          mInitialSector;
-  Dali::Radian          mFinalSector;
-  Dali::Radian          mInitialActorAngle;
-  Dali::Radian          mFinalActorAngle;
-  Dali::AlphaFunction   mEasingFunction;
-  Dali::Actor           mStencilActor;       ///< Stencil actor which generates mask
-  Dali::Property::Index mStartAngleIndex;    ///< Index of start-angle property
-  Dali::Property::Index mRotationAngleIndex; ///< Index of rotation-angle property
-  bool                  mRotateActorsWithStencil:1;
-  bool                  mRotateActors;
-};
-
-
-inline RadialSweepViewImpl& GetImpl( RadialSweepView& obj )
-{
-  DALI_ASSERT_ALWAYS(obj);
-  Dali::RefObject& handle = obj.GetImplementation();
-  return static_cast<RadialSweepViewImpl&>(handle);
-}
-
-inline const RadialSweepViewImpl& GetImpl( const RadialSweepView& obj )
-{
-  DALI_ASSERT_ALWAYS(obj);
-  const Dali::RefObject& handle = obj.GetImplementation();
-  return static_cast<const RadialSweepViewImpl&>(handle);
-}
-
-
-
-#endif // DALI_DEMO_RADIAL_SWEEP_VIEW_IMPL_H
diff --git a/examples/radial-menu/radial-sweep-view.cpp b/examples/radial-menu/radial-sweep-view.cpp
deleted file mode 100644
index 46e26099..00000000
--- a/examples/radial-menu/radial-sweep-view.cpp
+++ /dev/null
@@ -1,184 +0,0 @@
-/*
- * Copyright (c) 2015 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 "radial-sweep-view.h"
-#include "radial-sweep-view-impl.h"
-
-using namespace Dali;
-
-RadialSweepView::RadialSweepView()
-{
-}
-
-RadialSweepView::RadialSweepView(const RadialSweepView& handle)
-: Control(handle)
-{
-}
-
-RadialSweepView& RadialSweepView::operator=(const RadialSweepView& rhs)
-{
-  if( &rhs != this )
-  {
-    Control::operator=(rhs);
-  }
-  return *this;
-}
-
-RadialSweepView::~RadialSweepView()
-{
-}
-
-RadialSweepView RadialSweepView::DownCast( BaseHandle handle )
-{
-  return Control::DownCast<RadialSweepView, RadialSweepViewImpl>(handle);
-}
-
-RadialSweepView RadialSweepView::New( )
-{
-  return RadialSweepViewImpl::New();
-}
-
-RadialSweepView RadialSweepView::New( float duration,
-                                      float diameter,
-                                      Radian initialAngle,
-                                      Radian finalAngle,
-                                      Radian initialSector,
-                                      Radian finalSector )
-{
-  return RadialSweepViewImpl::New(duration, diameter, initialAngle, finalAngle, initialSector, finalSector );
-}
-
-RadialSweepView::RadialSweepView( RadialSweepViewImpl& impl )
-: Control( impl )
-{
-}
-
-RadialSweepView::RadialSweepView( Dali::Internal::CustomActor* impl )
-: Control( impl )
-{
-  VerifyCustomActorPointer<RadialSweepViewImpl>(impl);
-}
-
-void RadialSweepView::SetDuration(float duration)
-{
-  GetImpl(*this).SetDuration(duration);
-}
-
-void RadialSweepView::SetEasingFunction( Dali::AlphaFunction easingFunction )
-{
-  GetImpl(*this).SetEasingFunction( easingFunction );
-}
-
-void RadialSweepView::SetDiameter(float diameter)
-{
-  GetImpl(*this).SetDiameter(diameter);
-}
-
-void RadialSweepView::SetInitialAngle( Dali::Radian initialAngle)
-{
-  GetImpl(*this).SetInitialAngle(initialAngle);
-}
-
-void RadialSweepView::SetFinalAngle( Dali::Radian finalAngle)
-{
-  GetImpl(*this).SetFinalAngle(finalAngle);
-}
-
-void RadialSweepView::SetInitialSector( Dali::Radian initialSector)
-{
-  GetImpl(*this).SetInitialSector(initialSector);
-}
-
-void RadialSweepView::SetFinalSector( Dali::Radian finalSector)
-{
-  GetImpl(*this).SetFinalSector(finalSector);
-}
-
-void RadialSweepView::SetInitialActorAngle( Dali::Radian initialAngle )
-{
-  GetImpl(*this).SetInitialActorAngle(initialAngle);
-}
-
-void RadialSweepView::SetFinalActorAngle( Dali::Radian finalAngle )
-{
-  GetImpl(*this).SetFinalActorAngle(finalAngle);
-}
-
-float RadialSweepView::GetDuration( )
-{
-  return GetImpl(*this).GetDuration();
-}
-
-float RadialSweepView::GetDiameter( )
-{
-  return GetImpl(*this).GetDiameter();
-}
-
-Dali::Radian RadialSweepView::GetInitialAngle( )
-{
-  return GetImpl(*this).GetInitialAngle();
-}
-
-Dali::Radian RadialSweepView::GetFinalAngle( )
-{
-  return GetImpl(*this).GetFinalAngle();
-}
-
-Dali::Radian RadialSweepView::GetInitialSector( )
-{
-  return GetImpl(*this).GetInitialSector();
-}
-
-Dali::Radian RadialSweepView::GetFinalSector( )
-{
-  return GetImpl(*this).GetFinalSector();
-}
-
-Dali::Radian RadialSweepView::GetInitialActorAngle( )
-{
-  return GetImpl(*this).GetInitialActorAngle();
-}
-
-Dali::Radian RadialSweepView::GetFinalActorAngle( )
-{
-  return GetImpl(*this).GetFinalActorAngle();
-}
-
-void RadialSweepView::RotateActorsWithStencil(bool rotate)
-{
-  GetImpl(*this).RotateActorsWithStencil(rotate);
-}
-
-void RadialSweepView::Add(Actor actor)
-{
-  GetImpl(*this).Add(actor);
-}
-
-void RadialSweepView::Activate()
-{
-  GetImpl(*this).Activate();
-}
-
-void RadialSweepView::Activate( Dali::Animation anim, float offsetTime, float duration )
-{
-  GetImpl(*this).Activate(anim, offsetTime, duration);
-}
-
-void RadialSweepView::Deactivate()
-{
-  GetImpl(*this).Deactivate();
-}
diff --git a/examples/radial-menu/radial-sweep-view.h b/examples/radial-menu/radial-sweep-view.h
deleted file mode 100644
index 3abdcb0d..00000000
--- a/examples/radial-menu/radial-sweep-view.h
+++ /dev/null
@@ -1,150 +0,0 @@
-#ifndef DALI_DEMO_RADIAL_SWEEP_VIEW_H
-#define DALI_DEMO_RADIAL_SWEEP_VIEW_H
-
-/*
- * Copyright (c) 2015 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 <dali-toolkit/dali-toolkit.h>
-
-class RadialSweepViewImpl;
-
-
-/********************************************************************************
- * Handle to RadialSweepView implementation
- */
-class RadialSweepView : public Dali::Toolkit::Control
-{
-public:
-  /**
-   * Create a new RadialSweepView with default parameters (2 second animation,
-   * no rotation, sweeping out a full circle).
-   */
-  static RadialSweepView New( );
-
-  /**
-   * Create a new RadialSweepView.
-   * @param[in] duration The duration of the sweep animation
-   * @param[in] diameter The diameter of the stencil mask
-   * @param[in] initialAngle The initial angle of the anticlockwise line of the sweep sector
-   * @param[in] finalAngle The final angle of the anticlockwise line of the sweep sector
-   * @param[in] initialSector The angle of the starting sector
-   * @param[in] finalSector The angle of the sector at the end of the animation.
-   * Note, to cover the entire circle, use a value of 359.9999 degrees, not zero or 360 degrees.
-   *
-   *            initial sector
-   *             \   |  .
-   *              \  |    .
-   * initialAngle  \ |     .   final sector
-   *                \|      _|
-   *                 .________
-   */
-  static RadialSweepView New( float duration,
-                              float diameter,
-                              Dali::Radian initialAngle,
-                              Dali::Radian finalAngle,
-                              Dali::Radian initialSector,
-                              Dali::Radian finalSector );
-
-  void SetDuration(float duration);
-
-  void SetEasingFunction( Dali::AlphaFunction easingFunction );
-
-  void SetDiameter(float diameter);
-
-  void SetInitialAngle( Dali::Radian initialAngle);
-
-  void SetFinalAngle( Dali::Radian finalAngle);
-
-  void SetInitialSector( Dali::Radian initialSector);
-
-  void SetFinalSector( Dali::Radian finalSector);
-
-  void SetInitialActorAngle( Dali::Radian initialAngle );
-
-  void SetFinalActorAngle( Dali::Radian finalAngle );
-
-  float GetDuration( );
-
-  float GetDiameter( );
-
-  Dali::Radian GetInitialAngle( );
-
-  Dali::Radian GetFinalAngle( );
-
-  Dali::Radian GetInitialSector( );
-
-  Dali::Radian GetFinalSector( );
-
-  Dali::Radian GetInitialActorAngle( );
-
-  Dali::Radian GetFinalActorAngle( );
-
-  /**
-   * @param[in] rotate True if the actors should rotate with the stencil
-   */
-  void RotateActorsWithStencil(bool rotate);
-
-  /**
-   * Add actors to the view
-   */
-  void Add(Actor actor);
-
-  /**
-   * Activate the sweep animation
-   */
-  void Activate( );
-
-  void Activate( Dali::Animation anim, float offsetTime, float duration );
-
-  /**
-   * Deactivate the sweep animation
-   */
-  void Deactivate();
-
-  /**
-   * Default constructor. Create an uninitialized handle.
-   */
-  RadialSweepView();
-
-  /**
-   * Copy constructor
-   */
-  RadialSweepView(const RadialSweepView& handle);
-
-  /**
-   * Assignment operator
-   */
-  RadialSweepView& operator=(const RadialSweepView& rhs);
-
-  /**
-   * Destructor
-   */
-  ~RadialSweepView();
-
-  /**
-   * Downcast method
-   */
-  static RadialSweepView DownCast( BaseHandle handle );
-
-public: // Not for use by application developers
-
-  RadialSweepView( RadialSweepViewImpl& impl );
-
-  RadialSweepView( Dali::Internal::CustomActor* impl );
-};
-
-#endif
diff --git a/examples/renderer-stencil/renderer-stencil-example.cpp b/examples/renderer-stencil/renderer-stencil-example.cpp
index 27385f0f..e16cc48f 100644
--- a/examples/renderer-stencil/renderer-stencil-example.cpp
+++ b/examples/renderer-stencil/renderer-stencil-example.cpp
@@ -119,15 +119,29 @@ private:
     // Hide the indicator bar
     application.GetWindow().ShowIndicator( Dali::Window::INVISIBLE );
 
-    // Creates the background image.
+    // Use a gradient visual to render the background gradient.
     Toolkit::Control background = Dali::Toolkit::Control::New();
     background.SetAnchorPoint( Dali::AnchorPoint::CENTER );
     background.SetParentOrigin( Dali::ParentOrigin::CENTER );
     background.SetResizePolicy( Dali::ResizePolicy::FILL_TO_PARENT, Dali::Dimension::ALL_DIMENSIONS );
-    Dali::Property::Map map;
-    map["rendererType"] = "IMAGE";
-    map["url"] = BACKGROUND_IMAGE;
-    background.SetProperty( Dali::Toolkit::Control::Property::BACKGROUND, map );
+
+    // Set up the background gradient.
+    Property::Array stopOffsets;
+    stopOffsets.PushBack( 0.0f );
+    stopOffsets.PushBack( 1.0f );
+    Property::Array stopColors;
+    stopColors.PushBack( Vector4( 0.17f, 0.24f, 0.35f, 1.0f ) ); // Dark, medium saturated blue  ( top   of screen)
+    stopColors.PushBack( Vector4( 0.45f, 0.70f, 0.80f, 1.0f ) ); // Medium bright, pastel blue   (bottom of screen)
+    const float percentageStageHeight = stage.GetSize().height * 0.7f;
+
+    background.SetProperty( Toolkit::Control::Property::BACKGROUND, Dali::Property::Map()
+      .Add( Toolkit::Visual::Property::TYPE, Dali::Toolkit::Visual::GRADIENT )
+      .Add( Toolkit::GradientVisual::Property::STOP_OFFSET, stopOffsets )
+      .Add( Toolkit::GradientVisual::Property::STOP_COLOR, stopColors )
+      .Add( Toolkit::GradientVisual::Property::START_POSITION, Vector2( 0.0f, -percentageStageHeight ) )
+      .Add( Toolkit::GradientVisual::Property::END_POSITION, Vector2( 0.0f, percentageStageHeight ) )
+      .Add( Toolkit::GradientVisual::Property::UNITS, Toolkit::GradientVisual::Units::USER_SPACE ) );
+
     stage.Add( background );
 
     // Create a TextLabel for the application title.
@@ -275,13 +289,10 @@ private:
     renderer.SetTextures( textureSet );
 
     // Setup the renderer properties:
-    // We are writing to the color buffer & culling back faces.
-    renderer.SetProperty( Renderer::Property::WRITE_TO_COLOR_BUFFER, true );
+    // We are writing to the color buffer & culling back faces (no stencil is used for the main cube).
+    renderer.SetProperty( Renderer::Property::RENDER_MODE, RenderMode::COLOR );
     renderer.SetProperty( Renderer::Property::FACE_CULLING_MODE, FaceCullingMode::BACK );
 
-    // No stencil is used for the main cube.
-    renderer.SetProperty( Renderer::Property::STENCIL_MODE, StencilMode::OFF );
-
     // We do need to write to the depth buffer as other objects need to appear underneath this cube.
     renderer.SetProperty( Renderer::Property::DEPTH_WRITE_MODE, DepthWriteMode::ON );
     // We do not need to test the depth buffer as we are culling the back faces.
@@ -316,13 +327,10 @@ private:
     renderer.SetTextures( planeTextureSet );
 
     // Setup the renderer properties:
-    // We are writing to the color buffer & culling back faces (as we are NOT doing depth write).
-    renderer.SetProperty( Renderer::Property::WRITE_TO_COLOR_BUFFER, true );
+    // We are writing to the color buffer & culling back faces as we are NOT doing depth write (no stencil is used for the floor).
+    renderer.SetProperty( Renderer::Property::RENDER_MODE, RenderMode::COLOR );
     renderer.SetProperty( Renderer::Property::FACE_CULLING_MODE, FaceCullingMode::BACK );
 
-    // No stencil is used for the floor.
-    renderer.SetProperty( Renderer::Property::STENCIL_MODE, StencilMode::OFF );
-
     // We do not write to the depth buffer as its not needed.
     renderer.SetProperty( Renderer::Property::DEPTH_WRITE_MODE, DepthWriteMode::OFF );
     // We do need to test the depth buffer as we need the floor to be underneath the cube.
@@ -360,11 +368,9 @@ private:
     Renderer renderer = CreateRenderer( planeGeometry, size, false, Vector4::ONE );
 
     // Setup the renderer properties:
-    // The stencil plane is only for stencilling, so disable writing to color buffer.
-    renderer.SetProperty( Renderer::Property::WRITE_TO_COLOR_BUFFER, false );
+    // The stencil plane is only for stencilling.
+    renderer.SetProperty( Renderer::Property::RENDER_MODE, RenderMode::STENCIL );
 
-    // Enable stencil. Draw to the stencil buffer (only).
-    renderer.SetProperty( Renderer::Property::STENCIL_MODE, StencilMode::ON );
     renderer.SetProperty( Renderer::Property::STENCIL_FUNCTION, StencilFunction::ALWAYS );
     renderer.SetProperty( Renderer::Property::STENCIL_FUNCTION_REFERENCE, 1 );
     renderer.SetProperty( Renderer::Property::STENCIL_FUNCTION_MASK, 0xFF );
@@ -410,8 +416,9 @@ private:
     renderer.SetTextures( textureSet );
 
     // Setup the renderer properties:
-    // Write to color buffer so reflection is visible
-    renderer.SetProperty( Renderer::Property::WRITE_TO_COLOR_BUFFER, true );
+    // Write to color buffer so reflection is visible.
+    // Also enable the stencil buffer, as we will be testing against it to only draw to areas within the stencil.
+    renderer.SetProperty( Renderer::Property::RENDER_MODE, RenderMode::COLOR_STENCIL );
     // We cull to skip drawing the back faces.
     renderer.SetProperty( Renderer::Property::FACE_CULLING_MODE, FaceCullingMode::BACK );
 
@@ -422,7 +429,6 @@ private:
     renderer.SetProperty( Renderer::Property::BLEND_FACTOR_DEST_RGB, BlendFactor::ONE );
 
     // Enable stencil. Here we only draw to areas within the stencil.
-    renderer.SetProperty( Renderer::Property::STENCIL_MODE, StencilMode::ON );
     renderer.SetProperty( Renderer::Property::STENCIL_FUNCTION, StencilFunction::EQUAL );
     renderer.SetProperty( Renderer::Property::STENCIL_FUNCTION_REFERENCE, 1 );
     renderer.SetProperty( Renderer::Property::STENCIL_FUNCTION_MASK, 0xff );
diff --git a/examples/renderer-stencil/renderer-stencil-shaders.h b/examples/renderer-stencil/renderer-stencil-shaders.h
index fe9c461b..fcf758f3 100644
--- a/examples/renderer-stencil/renderer-stencil-shaders.h
+++ b/examples/renderer-stencil/renderer-stencil-shaders.h
@@ -29,7 +29,7 @@ const char * const POSITION( "aPosition");
 const char * const NORMAL( "aNormal" );
 const char * const TEXTURE( "aTexCoord" );
 
-// Shader for todor (vertex):
+// Shader for basic, per-vertex lighting (vertex):
 const char* VERTEX_SHADER = DALI_COMPOSE_SHADER(
   attribute mediump vec3  aPosition;
   attribute highp   vec3  aNormal;
@@ -62,6 +62,7 @@ const char* VERTEX_SHADER = DALI_COMPOSE_SHADER(
   }
 );
 
+// Fragment shader.
 const char* FRAGMENT_SHADER = DALI_COMPOSE_SHADER(
   varying mediump vec2  vTexCoord;
   varying mediump vec3  vIllumination;
@@ -74,6 +75,7 @@ const char* FRAGMENT_SHADER = DALI_COMPOSE_SHADER(
   }
 );
 
+// Shader for basic, per-vertex lighting with texture (vertex):
 const char* VERTEX_SHADER_TEXTURED = DALI_COMPOSE_SHADER(
   attribute mediump vec3  aPosition;
   attribute highp   vec3  aNormal;
@@ -107,6 +109,7 @@ const char* VERTEX_SHADER_TEXTURED = DALI_COMPOSE_SHADER(
   }
 );
 
+// Fragment shader.
 const char* FRAGMENT_SHADER_TEXTURED = DALI_COMPOSE_SHADER(
   varying mediump vec2  vTexCoord;
   varying mediump vec3  vIllumination;
diff --git a/examples/shadow-bone-lighting/shadow-bone-lighting-example.cpp b/examples/shadows-and-lights/shadows-and-lights-example.cpp
index 72b6fa12..4ae58776 100644
--- a/examples/shadow-bone-lighting/shadow-bone-lighting-example.cpp
+++ b/examples/shadows-and-lights/shadows-and-lights-example.cpp
@@ -35,7 +35,7 @@ const char* BACKGROUND_IMAGE( DEMO_IMAGE_DIR "background-default.png" );
 const char* TOOLBAR_IMAGE( DEMO_IMAGE_DIR "top-bar.png" );
 
 const char* APPLICATION_TITLE_PAN_LIGHT( "Lighting: Pan Light" );
-const char* APPLICATION_TITLE_PAN_OBJECT( "Lighting: Rotate Object" );
+const char* APPLICATION_TITLE_ROTATE_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( DEMO_IMAGE_DIR "icon-change.png" );
@@ -60,8 +60,8 @@ const Vector2 DEFAULT_STAGE_SIZE( 480.0f, 800.0f );
 
 const float X_ROTATION_DISPLACEMENT_FACTOR = 60.f;
 const float Y_ROTATION_DISPLACEMENT_FACTOR = 60.f;
-const float LIGHT_PAN_X_DISPLACEMENT_FACTOR = 180.f;
-const float LIGHT_PAN_Y_DISPLACEMENT_FACTOR = 180.f;
+const float LIGHT_PAN_X_DISPLACEMENT_FACTOR = 1/360.f;
+const float LIGHT_PAN_Y_DISPLACEMENT_FACTOR = 1/360.f;
 
 }
 
@@ -81,16 +81,16 @@ public:
   TestApp(Application &app)
   : mApp(app),
     mPaused(false),
-    mTranslation(Vector3::ZERO),
-    mSceneYRotation( Dali::ANGLE_30 * 0.5f ),
-    mSceneXRotation( Dali::ANGLE_30 ),
-    mLightYRotation(0.0f),
-    mLightXRotation(0.0f),
-    mObjectYRotation(0.0f),
+    mTranslation(22.0f, -1.0f, 0.0f),
+    mSceneXRotation( Degree(-6.0f) ), // Initial values give a reasonable off-straight view.
+    mSceneYRotation( Degree(20.0f) ),
+    mLightXRotation( Degree(-1.5f) ),
+    mLightYRotation( Degree(-9.5f) ),
     mObjectXRotation(0.0f),
-    mPinchScale(0.5f),
-    mScaleAtPinchStart(0.5f),
-    mPanState(PAN_SCENE)
+    mObjectYRotation(0.0f),
+    mPinchScale(0.6f),
+    mScaleAtPinchStart(0.6f),
+    mPanState(PAN_LIGHT)
   {
     app.InitSignal().Connect(this, &TestApp::Create);
     app.TerminateSignal().Connect(this, &TestApp::Terminate);
@@ -157,7 +157,7 @@ public:
     toolBar.AddControl( mTitleActor, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarTitlePercentage, Toolkit::Alignment::HorizontalCenter );
 
     // Set Title text
-    mTitleActor.SetProperty( TextLabel::Property::TEXT, std::string(APPLICATION_TITLE_PAN_SCENE) );
+    mTitleActor.SetProperty( TextLabel::Property::TEXT, std::string(APPLICATION_TITLE_PAN_LIGHT) );
 
     //Add a reset button
     Toolkit::PushButton resetButton = Toolkit::PushButton::New();
@@ -167,7 +167,7 @@ public:
     toolBar.AddControl( resetButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalCenter, DemoHelper::DEFAULT_PLAY_PADDING );
 
     // Setup
-    mView.SetPosition(Vector3(0.0f, 0.0f, -50));
+    mView.SetPosition(Vector3(0.0f, 0.0f, 0.0f));
 
     mContents.SetBehavior(Layer::LAYER_3D);
     mContents.SetPosition(mTranslation);
@@ -324,9 +324,9 @@ public:
         {
           case PAN_LIGHT:
           {
-            mLightXRotation = mLightXRotation - gesture.displacement.y / LIGHT_PAN_X_DISPLACEMENT_FACTOR; // X displacement rotates around Y axis
+            mLightXRotation = mLightXRotation - gesture.displacement.y * LIGHT_PAN_X_DISPLACEMENT_FACTOR; // X displacement rotates around Y axis
             mLightXRotation = Clamp(mLightXRotation, -Dali::ANGLE_45, Dali::ANGLE_45 );
-            mLightYRotation = mLightYRotation + gesture.displacement.x / LIGHT_PAN_Y_DISPLACEMENT_FACTOR; // Y displacement rotates around X axis
+            mLightYRotation = mLightYRotation + gesture.displacement.x * LIGHT_PAN_Y_DISPLACEMENT_FACTOR; // Y displacement rotates around X axis
             mLightYRotation = Clamp(mLightYRotation, -Dali::ANGLE_45, Dali::ANGLE_45 );
             mLightAnchor.SetOrientation( CalculateWorldRotation( mLightXRotation, mLightYRotation ) );
             break;
@@ -407,22 +407,22 @@ public:
   {
     switch(mPanState)
     {
-      case PAN_SCENE:
-        mPanState = ROTATE_SCENE;
-        mTitleActor.SetProperty( TextLabel::Property::TEXT, std::string(APPLICATION_TITLE_ROTATE_SCENE) );
-        break;
-      case ROTATE_SCENE:
-        mPanState = PAN_LIGHT;
-        mTitleActor.SetProperty( TextLabel::Property::TEXT, std::string(APPLICATION_TITLE_PAN_LIGHT) );
-        break;
       case PAN_LIGHT:
         mPanState = ROTATE_OBJECT;
-        mTitleActor.SetProperty( TextLabel::Property::TEXT, std::string(APPLICATION_TITLE_PAN_OBJECT) );
+        mTitleActor.SetProperty( TextLabel::Property::TEXT, std::string(APPLICATION_TITLE_ROTATE_OBJECT) );
         break;
       case ROTATE_OBJECT:
+        mPanState = ROTATE_SCENE;
+        mTitleActor.SetProperty( TextLabel::Property::TEXT, std::string(APPLICATION_TITLE_ROTATE_SCENE) );
+        break;
+      case ROTATE_SCENE:
         mPanState = PAN_SCENE;
         mTitleActor.SetProperty( TextLabel::Property::TEXT, std::string(APPLICATION_TITLE_PAN_SCENE) );
         break;
+      case PAN_SCENE:
+        mPanState = PAN_LIGHT;
+        mTitleActor.SetProperty( TextLabel::Property::TEXT, std::string(APPLICATION_TITLE_PAN_LIGHT) );
+        break;
       default:
         break;
     }
@@ -464,12 +464,12 @@ private:
   PinchGestureDetector      mPinchGestureDetector;
   TapGestureDetector        mTapGestureDetector;
   Vector3                   mTranslation;
-  Radian                    mSceneYRotation;
   Radian                    mSceneXRotation;
-  Radian                    mLightYRotation;
+  Radian                    mSceneYRotation;
   Radian                    mLightXRotation;
-  Radian                    mObjectYRotation;
+  Radian                    mLightYRotation;
   Radian                    mObjectXRotation;
+  Radian                    mObjectYRotation;
   float                     mPinchScale;
   float                     mScaleAtPinchStart;
 
diff --git a/examples/size-negotiation/size-negotiation-example.cpp b/examples/size-negotiation/size-negotiation-example.cpp
index 3c05fbd2..5e03efac 100644
--- a/examples/size-negotiation/size-negotiation-example.cpp
+++ b/examples/size-negotiation/size-negotiation-example.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2015 Samsung Electronics Co., Ltd.
+ * 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.
@@ -19,6 +19,7 @@
 #include <dali/dali.h>
 #include <dali-toolkit/dali-toolkit.h>
 #include <dali-toolkit/devel-api/controls/popup/popup.h>
+#include <dali-toolkit/devel-api/focus-manager/keyinput-focus-manager.h>
 
 using namespace Dali;
 
@@ -72,6 +73,19 @@ const ButtonItem TABLEVIEW_BUTTON_ITEMS[] = {
 
 const unsigned int TABLEVIEW_BUTTON_ITEMS_COUNT = sizeof( TABLEVIEW_BUTTON_ITEMS ) / sizeof( TABLEVIEW_BUTTON_ITEMS[0] );
 
+
+Actor CreateSolidColor( Vector4 color )
+{
+  Toolkit::Control control = Toolkit::Control::New();
+
+  Property::Map map;
+  map[ Toolkit::Visual::Property::TYPE ] = Toolkit::Visual::COLOR;
+  map[ Toolkit::ColorVisual::Property::MIX_COLOR ] = color;
+  control.SetProperty( Toolkit::Control::Property::BACKGROUND, map );
+
+  return control;
+}
+
 }  // anonymous namespace
 
 
@@ -99,8 +113,12 @@ public:
     // The Init signal is received once (only) during the Application lifetime
     Stage stage = Stage::GetCurrent();
 
-    // Respond to key events
-    stage.KeyEventSignal().Connect(this, &SizeNegotiationController::OnKeyEvent);
+    // Respond to key events if not handled
+    Toolkit::KeyInputFocusManager keyInputFocusManager = Toolkit::KeyInputFocusManager::Get();
+    if( keyInputFocusManager )
+    {
+      keyInputFocusManager.UnhandledKeyEventSignal().Connect(this, &SizeNegotiationController::OnKeyEvent);
+    }
 
     // Creates a default view with a default tool bar.
     // The view is added to the stage.
@@ -190,7 +208,7 @@ public:
       table.SetName( "TABLEVIEW_BUTTON_1CELL_ID" );
       table.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
 
-      Actor backing = Toolkit::CreateSolidColorActor( Vector4( 1.0f, 0.0f, 0.0f, 1.0f ) );
+      Actor backing = CreateSolidColor( Vector4( 1.0f, 0.0f, 0.0f, 1.0f ) );
       backing.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
       table.Add( backing );
 
@@ -208,17 +226,17 @@ public:
       table.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
 
       {
-        Actor backing = Toolkit::CreateSolidColorActor( Vector4( 1.0f, 0.0f, 0.0f, 1.0f ) );
+        Actor backing = CreateSolidColor( Vector4( 1.0f, 0.0f, 0.0f, 1.0f ) );
         backing.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
         table.AddChild( backing, Toolkit::TableView::CellPosition( 0, 0 ) );
       }
       {
-        Actor backing = Toolkit::CreateSolidColorActor( Vector4( 1.0f, 1.0f, 0.0f, 1.0f ) );
+        Actor backing = CreateSolidColor( Vector4( 1.0f, 1.0f, 0.0f, 1.0f ) );
         backing.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
         table.AddChild( backing, Toolkit::TableView::CellPosition( 1, 0 ) );
       }
       {
-        Actor backing = Toolkit::CreateSolidColorActor( Vector4( 0.0f, 1.0f, 0.0f, 1.0f ) );
+        Actor backing = CreateSolidColor( Vector4( 0.0f, 1.0f, 0.0f, 1.0f ) );
         backing.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
         table.AddChild( backing, Toolkit::TableView::CellPosition( 2, 0 ) );
       }
@@ -238,51 +256,51 @@ public:
 
       // Column 0
       {
-        Actor backing = Toolkit::CreateSolidColorActor( Vector4( 1.0f, 0.0f, 0.0f, 1.0f ) );
+        Actor backing = CreateSolidColor( Vector4( 1.0f, 0.0f, 0.0f, 1.0f ) );
         backing.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
         table.AddChild( backing, Toolkit::TableView::CellPosition( 0, 0 ) );
       }
       {
-        Actor backing = Toolkit::CreateSolidColorActor( Vector4( 1.0f, 1.0f, 0.0f, 1.0f ) );
+        Actor backing = CreateSolidColor( Vector4( 1.0f, 1.0f, 0.0f, 1.0f ) );
         backing.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
         table.AddChild( backing, Toolkit::TableView::CellPosition( 1, 0 ) );
       }
       {
-        Actor backing = Toolkit::CreateSolidColorActor( Vector4( 0.0f, 1.0f, 0.0f, 1.0f ) );
+        Actor backing = CreateSolidColor( Vector4( 0.0f, 1.0f, 0.0f, 1.0f ) );
         backing.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
         table.AddChild( backing, Toolkit::TableView::CellPosition( 2, 0 ) );
       }
 
       // Column 1
       {
-        Actor backing = Toolkit::CreateSolidColorActor( Vector4( 1.0f, 0.0f, 1.0f, 1.0f ) );
+        Actor backing = CreateSolidColor( Vector4( 1.0f, 0.0f, 1.0f, 1.0f ) );
         backing.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
         table.AddChild( backing, Toolkit::TableView::CellPosition( 0, 1 ) );
       }
       {
-        Actor backing = Toolkit::CreateSolidColorActor( Vector4( 1.0f, 1.0f, 1.0f, 1.0f ) );
+        Actor backing = CreateSolidColor( Vector4( 1.0f, 1.0f, 1.0f, 1.0f ) );
         backing.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
         table.AddChild( backing, Toolkit::TableView::CellPosition( 1, 1 ) );
       }
       {
-        Actor backing = Toolkit::CreateSolidColorActor( Vector4( 0.0f, 0.0f, 1.0f, 1.0f ) );
+        Actor backing = CreateSolidColor( Vector4( 0.0f, 0.0f, 1.0f, 1.0f ) );
         backing.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
         table.AddChild( backing, Toolkit::TableView::CellPosition( 2, 1 ) );
       }
 
       // Column 2
       {
-        Actor backing = Toolkit::CreateSolidColorActor( Vector4( 0.0f, 0.0f, 0.0f, 1.0f ) );
+        Actor backing = CreateSolidColor( Vector4( 0.0f, 0.0f, 0.0f, 1.0f ) );
         backing.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
         table.AddChild( backing, Toolkit::TableView::CellPosition( 0, 2 ) );
       }
       {
-        Actor backing = Toolkit::CreateSolidColorActor( Vector4( 0.5f, 0.5f, 0.5f, 1.0f ) );
+        Actor backing = CreateSolidColor( Vector4( 0.5f, 0.5f, 0.5f, 1.0f ) );
         backing.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
         table.AddChild( backing, Toolkit::TableView::CellPosition( 1, 2 ) );
       }
       {
-        Actor backing = Toolkit::CreateSolidColorActor( Vector4( 1.0f, 0.5f, 0.0f, 1.0f ) );
+        Actor backing = CreateSolidColor( Vector4( 1.0f, 0.5f, 0.0f, 1.0f ) );
         backing.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
         table.AddChild( backing, Toolkit::TableView::CellPosition( 2, 2 ) );
       }
@@ -302,7 +320,7 @@ public:
       table.SetFixedHeight( 0, 50.0f );
 
       {
-        Actor backing = Toolkit::CreateSolidColorActor( Vector4( 1.0f, 0.0f, 0.0f, 1.0f ) );
+        Actor backing = CreateSolidColor( Vector4( 1.0f, 0.0f, 0.0f, 1.0f ) );
         backing.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
         Toolkit::TextLabel text = Toolkit::TextLabel::New( "Fixed" );
         text.SetProperty( Toolkit::TextLabel::Property::TEXT_COLOR, Color::WHITE );
@@ -314,7 +332,7 @@ public:
         table.Add( backing );
       }
       {
-        Actor backing = Toolkit::CreateSolidColorActor( Vector4( 1.0f, 1.0f, 0.0f, 1.0f ) );
+        Actor backing = CreateSolidColor( Vector4( 1.0f, 1.0f, 0.0f, 1.0f ) );
         backing.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
         Toolkit::TextLabel text = Toolkit::TextLabel::New( "Fill" );
         text.SetProperty( Toolkit::TextLabel::Property::TEXT_COLOR, Color::WHITE );
@@ -326,7 +344,7 @@ public:
         table.Add( backing );
       }
       {
-        Actor backing = Toolkit::CreateSolidColorActor( Vector4( 0.0f, 1.0f, 0.0f, 1.0f ) );
+        Actor backing = CreateSolidColor( Vector4( 0.0f, 1.0f, 0.0f, 1.0f ) );
         backing.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
         Toolkit::TextLabel text = Toolkit::TextLabel::New( "Fill" );
         text.SetProperty( Toolkit::TextLabel::Property::TEXT_COLOR, Color::WHITE );
@@ -354,7 +372,7 @@ public:
       table.SetFixedHeight( 2, 50.0f );
 
       {
-        Actor backing = Toolkit::CreateSolidColorActor( Vector4( 1.0f, 0.0f, 0.0f, 1.0f ) );
+        Actor backing = CreateSolidColor( Vector4( 1.0f, 0.0f, 0.0f, 1.0f ) );
         backing.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
         Toolkit::TextLabel text = Toolkit::TextLabel::New( "Fixed" );
         text.SetProperty( Toolkit::TextLabel::Property::TEXT_COLOR, Color::WHITE );
@@ -368,7 +386,7 @@ public:
         table.Add( backing );
       }
       {
-        Actor backing = Toolkit::CreateSolidColorActor( Vector4( 1.0f, 1.0f, 0.0f, 1.0f ) );
+        Actor backing = CreateSolidColor( Vector4( 1.0f, 1.0f, 0.0f, 1.0f ) );
         backing.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
         Toolkit::TextLabel text = Toolkit::TextLabel::New( "Fill" );
         text.SetProperty( Toolkit::TextLabel::Property::TEXT_COLOR, Color::WHITE );
@@ -382,7 +400,7 @@ public:
         table.Add( backing );
       }
       {
-        Actor backing = Toolkit::CreateSolidColorActor( Vector4( 0.0f, 1.0f, 0.0f, 1.0f ) );
+        Actor backing = CreateSolidColor( Vector4( 0.0f, 1.0f, 0.0f, 1.0f ) );
         backing.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
         Toolkit::TextLabel text = Toolkit::TextLabel::New( "Fixed" );
         text.SetProperty( Toolkit::TextLabel::Property::TEXT_COLOR, Color::WHITE );
@@ -412,7 +430,7 @@ public:
       table.SetFitHeight( 2 );
 
       {
-        Actor backing = Toolkit::CreateSolidColorActor( Vector4( 1.0f, 0.0f, 0.0f, 1.0f ) );
+        Actor backing = CreateSolidColor( Vector4( 1.0f, 0.0f, 0.0f, 1.0f ) );
         backing.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
         backing.SetSize( 0.0f, 100.0f );
 
@@ -429,7 +447,7 @@ public:
         table.Add( backing );
       }
       {
-        Actor backing = Toolkit::CreateSolidColorActor( Vector4( 1.0f, 1.0f, 0.0f, 1.0f ) );
+        Actor backing = CreateSolidColor( Vector4( 1.0f, 1.0f, 0.0f, 1.0f ) );
         backing.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
 
         Toolkit::TextLabel text = Toolkit::TextLabel::New( "Fill" );
@@ -445,7 +463,7 @@ public:
         table.Add( backing );
       }
       {
-        Actor backing = Toolkit::CreateSolidColorActor( Vector4( 0.0f, 1.0f, 0.0f, 1.0f ) );
+        Actor backing = CreateSolidColor( Vector4( 0.0f, 1.0f, 0.0f, 1.0f ) );
         backing.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
         backing.SetSize( 0.0f, 100.0f );
 
@@ -477,7 +495,7 @@ public:
       table.SetFitHeight( 1 );
 
       {
-        Actor backing = Toolkit::CreateSolidColorActor( Vector4( 1.0f, 0.0f, 0.0f, 1.0f ) );
+        Actor backing = CreateSolidColor( Vector4( 1.0f, 0.0f, 0.0f, 1.0f ) );
         backing.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
 
         Toolkit::TextLabel text = Toolkit::TextLabel::New( "Fill" );
@@ -493,7 +511,7 @@ public:
         table.Add( backing );
       }
       {
-        Actor backing = Toolkit::CreateSolidColorActor( Vector4( 1.0f, 1.0f, 0.0f, 1.0f ) );
+        Actor backing = CreateSolidColor( Vector4( 1.0f, 1.0f, 0.0f, 1.0f ) );
         backing.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
         backing.SetSize( 0.0f, 200.0f );
 
@@ -510,7 +528,7 @@ public:
         table.Add( backing );
       }
       {
-        Actor backing = Toolkit::CreateSolidColorActor( Vector4( 0.0f, 1.0f, 0.0f, 1.0f ) );
+        Actor backing = CreateSolidColor( Vector4( 0.0f, 1.0f, 0.0f, 1.0f ) );
         backing.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
 
         Toolkit::TextLabel text = Toolkit::TextLabel::New( "Fill" );
@@ -545,7 +563,7 @@ public:
       table.SetFitHeight( 2 );
 
       {
-        Actor backing = Toolkit::CreateSolidColorActor( Vector4( 1.0f, 0.0f, 0.0f, 1.0f ) );
+        Actor backing = CreateSolidColor( Vector4( 1.0f, 0.0f, 0.0f, 1.0f ) );
         backing.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
         backing.SetSize( 0.0f, 100.0f );
 
@@ -562,7 +580,7 @@ public:
         table.Add( backing );
       }
       {
-        Actor backing = Toolkit::CreateSolidColorActor( Vector4( 1.0f, 1.0f, 0.0f, 1.0f ) );
+        Actor backing = CreateSolidColor( Vector4( 1.0f, 1.0f, 0.0f, 1.0f ) );
         backing.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
         backing.SetSize( 0.0f, 200.0f );
 
@@ -579,7 +597,7 @@ public:
         table.Add( backing );
       }
       {
-        Actor backing = Toolkit::CreateSolidColorActor( Vector4( 0.0f, 1.0f, 0.0f, 1.0f ) );
+        Actor backing = CreateSolidColor( Vector4( 0.0f, 1.0f, 0.0f, 1.0f ) );
         backing.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
         backing.SetSize( 0.0f, 300.0f );
 
@@ -614,7 +632,7 @@ public:
       table.SetFitHeight( 1 );
 
       {
-        Actor backing = Toolkit::CreateSolidColorActor( Vector4( 1.0f, 0.0f, 0.0f, 1.0f ) );
+        Actor backing = CreateSolidColor( Vector4( 1.0f, 0.0f, 0.0f, 1.0f ) );
         backing.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
         backing.SetResizePolicy( ResizePolicy::FIXED, Dimension::HEIGHT );
         backing.SetSize( 0.0f, 100.0f );
@@ -632,7 +650,7 @@ public:
         table.Add( backing );
       }
       {
-        Actor backing = Toolkit::CreateSolidColorActor( Vector4( 0.0f, 1.0f, 0.0f, 1.0f ) );
+        Actor backing = CreateSolidColor( Vector4( 0.0f, 1.0f, 0.0f, 1.0f ) );
         backing.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
         backing.SetSize( 0.0f, 200.0f );
 
@@ -667,7 +685,7 @@ public:
       table.SetFitHeight( 1 );
 
       {
-        Actor backing = Toolkit::CreateSolidColorActor( Vector4( 1.0f, 0.0f, 0.0f, 1.0f ) );
+        Actor backing = CreateSolidColor( Vector4( 1.0f, 0.0f, 0.0f, 1.0f ) );
         backing.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
 
         Toolkit::TextLabel text = Toolkit::TextLabel::New( "Fixed" );
@@ -683,7 +701,7 @@ public:
         table.Add( backing );
       }
       {
-        Actor backing = Toolkit::CreateSolidColorActor( Vector4( 0.0f, 1.0f, 0.0f, 1.0f ) );
+        Actor backing = CreateSolidColor( Vector4( 0.0f, 1.0f, 0.0f, 1.0f ) );
         backing.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
         backing.SetSize( 0.0f, 200.0f );
 
@@ -798,7 +816,7 @@ private:
   Layer              mContentLayer;          ///< Content layer.
 
   Toolkit::TextLabel mTitleActor;            ///< Title text.
-  Toolkit::Popup     mMenu;                  ///< The navigation menu todor.
+  Toolkit::Popup     mMenu;                  ///< The navigation menu.
   Toolkit::Popup     mPopup;                 ///< The current example popup.
 
   Toolkit::ItemView  mItemView;              ///< ItemView to hold test images.
diff --git a/examples/sparkle/sparkle-effect-example.cpp b/examples/sparkle/sparkle-effect-example.cpp
new file mode 100644
index 00000000..1cc465a4
--- /dev/null
+++ b/examples/sparkle/sparkle-effect-example.cpp
@@ -0,0 +1,568 @@
+/*
+ * 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 <dali/dali.h>
+#include <dali-toolkit/dali-toolkit.h>
+
+#include <sstream>
+#include <algorithm>
+#include <map>
+
+#include "shared/utility.h"
+#include "sparkle-effect.h"
+
+using namespace Dali;
+using Dali::Toolkit::ImageView;
+
+using namespace SparkleEffect;
+
+namespace // unnamed namespace
+{
+
+//background image for normal status
+const char * const CIRCLE_BACKGROUND_IMAGE( DEMO_IMAGE_DIR "sparkle_normal_background.png" );
+//particle shape image
+const char * const PARTICLE_IMAGE( DEMO_IMAGE_DIR "sparkle_particle.png" );
+
+float EaseOutSquare( float progress )
+{
+  return 1.0f - (1.0f-progress) * (1.0f-progress);
+}
+
+float CustomBounce( float progress )
+{
+  float p = 1.f-progress;
+  p *=p;
+  return 17.68f*p*p*p*progress;
+}
+
+float Mix( const Vector2& range, float a )
+{
+  return range.x * a + range.y*(1.f-a)-0.001f;
+}
+
+const Vector4 BACKGROUND_COLOR( 0.f, 0.f, 0.05f, 1.f );
+
+} // unnamed namespace
+
+// This example shows a sparkle particle effect
+//
+class SparkleEffectExample : public ConnectionTracker
+{
+public:
+
+  /**
+   * Create the SparkleEffectExample
+   * @param[in] application The DALi application instance
+   */
+  SparkleEffectExample( Application& application )
+  : mApplication( application ),
+    mAnimationIndex( 0u ),
+    mShaking( false )
+  {
+    mApplication.InitSignal().Connect( this, &SparkleEffectExample::OnInit );
+  }
+
+private:
+
+  /**
+   * Initialize the SparkleEffectExample
+   * @param[in] application The DALi application instance
+   */
+  void OnInit( Application& application )
+  {
+    Stage stage = Stage::GetCurrent();
+    stage.KeyEventSignal().Connect(this, &SparkleEffectExample::OnKeyEvent);
+    stage.SetBackgroundColor( BACKGROUND_COLOR );
+
+    mCircleBackground = ImageView::New( CIRCLE_BACKGROUND_IMAGE );
+    mCircleBackground.SetParentOrigin( ParentOrigin::CENTER );
+    mCircleBackground.SetAnchorPoint( AnchorPoint::CENTER );
+
+    stage.Add( mCircleBackground );
+
+    mEffect = SparkleEffect::New();
+
+    mMeshActor = CreateMeshActor();
+
+    stage.Add( mMeshActor );
+
+    mMeshActor.SetPosition( ACTOR_POSITION );
+    mMeshActor.SetScale( ACTOR_SCALE );
+
+    mTapDetector = TapGestureDetector::New();
+    mTapDetector.Attach(mCircleBackground);
+    mTapDetector.DetectedSignal().Connect( this, &SparkleEffectExample::OnTap );
+
+    mPanGestureDetector = PanGestureDetector::New();
+    mPanGestureDetector.DetectedSignal().Connect( this, &SparkleEffectExample::OnPan );
+    mPanGestureDetector.Attach( mCircleBackground );
+
+    PlayWanderAnimation( 35.f );
+  }
+
+  /**
+   * Create the mesh representing all the particles
+   */
+  Actor CreateMeshActor()
+  {
+    // shuffling to assign the color in random order
+    unsigned int* shuffleArray = new unsigned int[NUM_PARTICLE];
+    for( unsigned int i = 0; i<NUM_PARTICLE; i++ )
+    {
+      shuffleArray[i] = i;
+    }
+    std::random_shuffle(&shuffleArray[0],&shuffleArray[NUM_PARTICLE]);
+
+    // Create vertices
+
+    std::vector< Vertex > vertices;
+    std::vector< unsigned short > faces;
+
+    for( unsigned int i = 0; i<NUM_PARTICLE; i++ )
+    {
+      float colorIndex = GetColorIndex( shuffleArray[i] );
+      AddParticletoMesh( vertices, faces, PATHS[i], colorIndex );
+    }
+
+    delete [] shuffleArray;
+
+    Property::Map vertexFormat;
+    vertexFormat["aTexCoord"] = Property::VECTOR2;
+    vertexFormat["aParticlePath0"] = Property::VECTOR2;
+    vertexFormat["aParticlePath1"] = Property::VECTOR2;
+    vertexFormat["aParticlePath2"] = Property::VECTOR2;
+    vertexFormat["aParticlePath3"] = Property::VECTOR2;
+    vertexFormat["aParticlePath4"] = Property::VECTOR2;
+    vertexFormat["aParticlePath5"] = Property::VECTOR2;
+
+    PropertyBuffer propertyBuffer = PropertyBuffer::New( vertexFormat );
+    propertyBuffer.SetData( &vertices[0], vertices.size() );
+
+    Geometry geometry = Geometry::New();
+    geometry.AddVertexBuffer( propertyBuffer );
+    geometry.SetIndexBuffer( &faces[0], faces.size() );
+    geometry.SetType( Geometry::TRIANGLES );
+
+    Texture particleTexture = DemoHelper::LoadTexture( PARTICLE_IMAGE );
+    TextureSet textureSet = TextureSet::New();
+    textureSet.SetTexture( 0u, particleTexture );
+
+    Renderer renderer = Renderer::New( geometry, mEffect );
+    renderer.SetTextures( textureSet );
+
+    Actor meshActor = Actor::New();
+    meshActor.SetParentOrigin( ParentOrigin::CENTER );
+    meshActor.SetSize( 1, 1 );
+    meshActor.AddRenderer( renderer );
+
+    return meshActor;
+  }
+
+  /**
+   * Defines a rule to assign particle with a color according to its index
+   */
+  float GetColorIndex( unsigned int particleIndex )
+  {
+    unsigned int thereshold = 0;
+    for( unsigned int i = 0; i<NUM_COLOR; i++ )
+    {
+      thereshold += PARTICLE_COLORS[i].numParticle;
+      if( particleIndex < thereshold)
+      {
+        return i + Mix( PARTICLE_COLORS[i].AlphaRange, static_cast<float>(thereshold-particleIndex)/PARTICLE_COLORS[i].numParticle );
+      }
+    }
+    return NUM_COLOR-1;
+  }
+
+  /**
+   * All a particle to the mesh by giving the moving path and color index
+   *
+   * Two triangles per particle
+   *  0---------3
+   *   |\      |
+   *   |  \    |
+   *   |    \  |
+   *   |      \|
+   *  1---------2
+   *
+   * The information we need to pass in through attribute include:
+   *
+   *   path which contains 12 integer
+   *          ---- passed in 6 Vector2 attributes
+   *
+   *   color index, particle index and textureCoor( (0,0) or (1,0) or (0,1) or (1,1)  )
+   *          ---- package these info into texCood attribute as: (+-colorIndex, +-particleIndex)
+   */
+  void AddParticletoMesh( std::vector< Vertex >& vertices,
+                          std::vector< unsigned short >& faces,
+                          MovingPath& movingPath,
+                          float colorIndex )
+  {
+    unsigned int idx = vertices.size();
+
+    // store the path into position and normal, which would be decoded inside the shader
+    Vector2 particlePath0( movingPath[0],  movingPath[1] );
+    Vector2 particlePath1( movingPath[2],  movingPath[3] );
+    Vector2 particlePath2( movingPath[4],  movingPath[5] );
+    Vector2 particlePath3( movingPath[6],  movingPath[7] );
+    Vector2 particlePath4( movingPath[8],  movingPath[9] );
+    Vector2 particlePath5( movingPath[10], movingPath[11] );
+
+    float particleIdx = static_cast<float>(idx/4 + 1); // count from 1
+    float colorIdx = colorIndex+1.f; // count from 1
+    vertices.push_back( Vertex( Vector2(-colorIdx, -particleIdx), particlePath0, particlePath1, particlePath2, particlePath3, particlePath4, particlePath5 ) );
+    vertices.push_back( Vertex( Vector2(-colorIdx,  particleIdx), particlePath0, particlePath1, particlePath2, particlePath3, particlePath4, particlePath5 ) );
+    vertices.push_back( Vertex( Vector2( colorIdx,  particleIdx), particlePath0, particlePath1, particlePath2, particlePath3, particlePath4, particlePath5 ) );
+    vertices.push_back( Vertex( Vector2( colorIdx, -particleIdx), particlePath0, particlePath1, particlePath2, particlePath3, particlePath4, particlePath5 ) );
+
+    faces.push_back(idx);
+    faces.push_back(idx+1);
+    faces.push_back(idx+2);
+
+    faces.push_back(idx);
+    faces.push_back(idx+2);
+    faces.push_back(idx+3);
+  }
+
+  /*
+   * Main key event handler
+   */
+  void OnKeyEvent(const KeyEvent& event)
+  {
+    if(event.state == KeyEvent::Down)
+    {
+      if( IsKey( event, Dali::DALI_KEY_ESCAPE) || IsKey( event, Dali::DALI_KEY_BACK) )
+      {
+        mApplication.Quit();
+      }
+    }
+  }
+
+  /**
+   * Callback of the TapGesture
+   */
+  void OnTap( Actor actor, const TapGesture& tap )
+  {
+    {
+      PlayTapAnimation(5.f, tap.localPoint);
+    }
+  }
+
+  /**
+   * Callback of the PanGesture
+   */
+  void OnPan( Actor actor, const PanGesture& gesture )
+  {
+    if( gesture.state == Gesture::Finished )
+    {
+      switch(mAnimationIndex)
+      {
+      case 0:
+      {
+        PlayParticleFadeAnimation(0, NUM_PARTICLE, 0.f, 3.f );
+        break;
+      }
+      case 1:
+      {
+        PlayBreakAnimation(2.0f);
+        break;
+      }
+      case 2:
+      {
+        PlayShakeAnimation(0.5f, 2.5f);
+        break;
+      }
+      default:
+      {
+        break;
+      }
+     }
+
+      mAnimationIndex = (mAnimationIndex+1)%3;
+    }
+  }
+
+  /**
+   * Animate the particle position to make them wandering on the screen with 'seemingly' random fade in/out
+   * @param[in] duration The duration for the particle to move a cycle on the path. the bigger this value the slower the floating movement.
+   * @param[in] looping Infinite playing or not
+   */
+  void PlayWanderAnimation( float duration, bool looping = true )
+  {
+    Animation wanderAnimation= Animation::New(duration);
+    wanderAnimation.AnimateTo( Property( mEffect, PERCENTAGE_UNIFORM_NAME ), 1.f );
+    wanderAnimation.SetLooping(looping); // infinite playing
+
+    wanderAnimation.Play();
+  }
+
+  /**
+   * Accelerate the particle moving speed
+   * @param[in] cycle How many extra cycles to move during the animation
+   * @param[in] duration The duration for the animation
+   */
+  void PlayShakeAnimation(  float cycle, float duration )
+  {
+    if( mShaking )
+    {
+      return;
+    }
+    DestroyAnimation( mTapAnimationAux );
+
+    float accelaration = GetFloatUniformValue( ACCELARATION_UNIFORM_NAME );
+    mEffect.SetProperty( mEffect.GetPropertyIndex(ACCELARATION_UNIFORM_NAME), accelaration - int( accelaration) ); // Set the value as its fractional part
+    Animation shakeAnimation = Animation::New(duration);
+    shakeAnimation.AnimateBy( Property( mEffect, ACCELARATION_UNIFORM_NAME ), cycle, AlphaFunction::EASE_OUT );
+    shakeAnimation.FinishedSignal().Connect( this, &SparkleEffectExample::OnShakeAnimationFinished );
+
+    shakeAnimation.Play();
+    mShaking = true;
+  }
+
+  /**
+   * Animate the particles to appear from center and spread all over around
+   * @param[in] duration The duration for the animation
+   */
+  void PlayBreakAnimation( float duration )
+  {
+    if( GetFloatUniformValue(BREAK_UNIFORM_NAME) > 0.f )
+    {
+      return;
+    }
+
+    // Stop the fading / tap animation before the breaking
+    DestroyAnimation( mFadeAnimation);
+    mTapIndices.x = mTapIndices.y;
+    mEffect.SetProperty( mEffect.GetPropertyIndex( TAP_INDICES_UNIFORM_NAME ), mTapIndices );
+    mEffect.SetProperty( mEffect.GetPropertyIndex( ACCELARATION_UNIFORM_NAME ), 0.f );
+
+    // prepare the animation by setting the uniform to the required value
+    mEffect.SetProperty( mEffect.GetPropertyIndex( BREAK_UNIFORM_NAME ), 1.f );
+    mMeshActor.SetScale(0.01f);
+    mEffect.SetProperty( mEffect.GetPropertyIndex( "uScale" ), 0.01f );
+    mMeshActor.SetPosition( 0.f, 0.f, 1.f );
+
+    Animation breakAnimation = Animation::New(duration*1.5f);
+    breakAnimation.AnimateTo( Property(mMeshActor, Actor::Property::SCALE), Vector3(ACTOR_SCALE,ACTOR_SCALE,ACTOR_SCALE), EaseOutSquare);
+    breakAnimation.AnimateTo( Property( mEffect, "uScale" ), ACTOR_SCALE, EaseOutSquare);
+    breakAnimation.AnimateTo( Property(mMeshActor, Actor::Property::POSITION), ACTOR_POSITION, EaseOutSquare);
+    breakAnimation.FinishedSignal().Connect( this, &SparkleEffectExample::OnBreakAnimationFinished );
+
+    float timeUnit = duration/ (NUM_PARTICLE+1) /(NUM_PARTICLE+1) ;
+    std::ostringstream oss;
+    for(unsigned int i = 0; i<NUM_PARTICLE; i++)
+    {
+      oss.str("");
+      oss<< OPACITY_UNIFORM_NAME<< i << "]";
+      mEffect.SetProperty( mEffect.GetPropertyIndex( oss.str() ), 0.01f);
+      float timeSlice = timeUnit*i*i;
+      breakAnimation.AnimateTo( Property( mEffect, oss.str() ), 1.f, AlphaFunction::EASE_IN_OUT_SINE, TimePeriod( timeSlice*0.5f, timeSlice ) );
+    }
+
+    breakAnimation.Play();
+  }
+
+  /**
+   * Animate the particle opacity
+   * Particles with index between startIndex ~ startIndex+numParticle-1 fade to the target opacity one after another
+   * @param[in] startIndex The index of the first particle
+   * @param[in] numParticle The number of particle to change opacity
+   * @param[in] targetValue The final opacity
+   * @param[in] duration The duration for the animation
+   */
+  void PlayParticleFadeAnimation( unsigned int startIndex, unsigned int numParticle, float targetValue, float duration )
+  {
+    if( GetFloatUniformValue(BREAK_UNIFORM_NAME) > 0.f )
+    {
+      return;
+    }
+
+    // start the opacity animation one particle after another gradually
+    float timeSlice = duration / (numParticle+1);
+    float fadeDuration = timeSlice>0.5f ? timeSlice : 0.5f;
+
+    Animation fadeAnimation= Animation::New(duration+fadeDuration*2.f);
+    std::ostringstream oss;
+    for(unsigned int i = startIndex; i<numParticle; i++)
+    {
+      if( i>=NUM_PARTICLE ) break; // out of bound
+
+      oss.str("");
+      oss<< OPACITY_UNIFORM_NAME<< i << "]";
+      fadeAnimation.AnimateTo(Property( mEffect, oss.str()), targetValue, TimePeriod( timeSlice*i, fadeDuration*2.f ));
+    }
+
+    fadeAnimation.Play();
+    mFadeAnimation = fadeAnimation;
+    mFadeAnimation.FinishedSignal().Connect( this, &SparkleEffectExample::OnFadeAnimationFinished );
+  }
+
+  /**
+   * Push the particles to the edge all around the circle then bounce back
+   * @param[in] duration The duration for the animation
+   * @param[in] tapPoint The position of the tap point
+   */
+  void PlayTapAnimation(float duration, const Vector2& tapPoint )
+  {
+    if( mTapIndices.y > mTapIndices.x && mTapAnimation.GetCurrentProgress() < 0.2f)
+    {
+      return;
+    }
+
+    Animation animation= Animation::New(duration);
+    int idx = int(mTapIndices.y)%MAXIMUM_ANIMATION_COUNT;
+    mTapIndices.y += 1.f;
+
+    std::ostringstream oss;
+    oss<< TAP_OFFSET_UNIFORM_NAME<< idx << "]";
+    mEffect.SetProperty( mEffect.GetPropertyIndex( oss.str() ), 0.f);
+    animation.AnimateTo( Property( mEffect, oss.str() ), 0.75f, CustomBounce);
+
+    oss.str("");
+    oss<< TAP_POINT_UNIFORM_NAME<< idx << "]";
+    mEffect.SetProperty( mEffect.GetPropertyIndex( oss.str() ), tapPoint/ACTOR_SCALE);
+
+    mEffect.SetProperty( mEffect.GetPropertyIndex( TAP_INDICES_UNIFORM_NAME ), mTapIndices);
+
+    if(!mShaking)
+    {
+      mTapAnimationAux = Animation::New(duration*0.2f);
+      mTapAnimationAux.AnimateBy( Property( mEffect, ACCELARATION_UNIFORM_NAME ), 0.15f, AlphaFunction::EASE_IN_OUT );
+      mTapAnimationAux.Play();
+    }
+    animation.Play();
+    mTapAnimationIndexPair[animation] = static_cast<int>(mTapIndices.y -1.f);
+    animation.FinishedSignal().Connect( this, &SparkleEffectExample::OnTapAnimationFinished );
+    mTapAnimation = animation;
+  }
+
+  /**
+   * Callback of the animation finished signal
+   */
+  void OnShakeAnimationFinished( Animation& animation)
+  {
+    mShaking = false;
+  }
+
+  /**
+   * Callback of the animation finished signal
+   */
+  void OnFadeAnimationFinished( Animation& animation)
+  {
+    mFadeAnimation.Clear();
+    mFadeAnimation.Reset();
+  }
+
+  /**
+   * Callback of the animation finished signal
+   */
+  void OnBreakAnimationFinished( Animation& animation)
+  {
+    mEffect.SetProperty( mEffect.GetPropertyIndex( BREAK_UNIFORM_NAME ), 0.f );
+  }
+
+  /**
+   * Callback of the animation finished signal
+   */
+  void OnTapAnimationFinished( Animation& animation )
+  {
+    if( mTapAnimationIndexPair[animation] ==  static_cast<int>(mTapIndices.x) )
+    {
+      mTapIndices.x += 1.f;
+      if( mTapIndices.x >= mTapIndices.y )
+      {
+        mTapIndices = Vector2::ZERO;
+      }
+      mEffect.SetProperty( mEffect.GetPropertyIndex( TAP_INDICES_UNIFORM_NAME ), mTapIndices);
+    }
+
+    mTapAnimationIndexPair.erase( animation );
+    if( mTapAnimationIndexPair.size() < 1 && mTapIndices != Vector2::ZERO)
+    {
+      mTapIndices = Vector2::ZERO;
+      mEffect.SetProperty( mEffect.GetPropertyIndex( TAP_INDICES_UNIFORM_NAME ), mTapIndices);
+    }
+
+    animation.Clear();
+    animation.Reset();
+  }
+
+  /**
+   * Helper retrieve a uniform value from the Sparkle effect shader
+   * @param[in] uniformName The uniform
+   * @return The float value
+   */
+  float GetFloatUniformValue( const std::string& uniformName )
+  {
+    float value;
+    mEffect.GetProperty(mEffect.GetPropertyIndex(uniformName)).Get(value);
+    return value;
+  }
+
+  /**
+   * Terminate the given animation
+   */
+  void DestroyAnimation( Animation& animation )
+  {
+    if( animation )
+    {
+      animation.Clear();
+      animation.Reset();
+    }
+  }
+
+private:
+
+  Application&       mApplication;
+  Shader             mEffect;
+  ImageView          mCircleBackground;
+  Actor              mMeshActor;
+
+  PanGestureDetector mPanGestureDetector;
+  TapGestureDetector mTapDetector;
+
+  Animation          mFadeAnimation;
+  Animation          mTapAnimation;
+  Animation          mTapAnimationAux;
+
+  Vector2            mTapIndices;
+  unsigned int       mAnimationIndex;
+  bool               mShaking;
+
+  std::map< Animation, int > mTapAnimationIndexPair;
+};
+
+void RunTest( Application& application )
+{
+  SparkleEffectExample theApp( application );
+
+  application.MainLoop();
+}
+
+// Entry point for Linux & Tizen applications
+//
+int DALI_EXPORT_API main( int argc, char **argv )
+{
+  Application application = Application::New( &argc, &argv );
+
+  RunTest( application );
+
+  return 0;
+}
+
diff --git a/examples/sparkle/sparkle-effect.h b/examples/sparkle/sparkle-effect.h
new file mode 100644
index 00000000..f37e1e62
--- /dev/null
+++ b/examples/sparkle/sparkle-effect.h
@@ -0,0 +1,393 @@
+#ifndef DALI_SPARKLE_EFFECT_H
+#define DALI_SPARKLE_EFFECT_H
+
+/*
+ * 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 <dali/dali.h>
+#include <dali-toolkit/dali-toolkit.h>
+
+using namespace Dali;
+using Dali::Toolkit::ImageView;
+
+/************************************************************/
+/* Custom sparkle effect shader******************************/
+/************************************************************/
+
+namespace SparkleEffect
+{
+  // uniform which controls the position of particle on the path
+  const std::string PERCENTAGE_UNIFORM_NAME( "uPercentage" );
+  // uniform array of particle color, set their value as the PARTICLE_COLORS given below
+  const std::string PARTICLE_COLOR_UNIFORM_NAME("uParticleColors[");
+  // uniform array of particle opacity
+  const std::string OPACITY_UNIFORM_NAME("uOpacity[");
+  // uniform which offsets the path control point, with this values >=0, the paths are squeezed towards the GatheringPoint
+  const std::string ACCELARATION_UNIFORM_NAME("uAcceleration");
+  // uniform which indicates the ongoing tap animations
+  const std::string TAP_INDICES_UNIFORM_NAME("uTapIndices");
+  // uniform which controls how much the offset of the midpoints relative to the start/end points of the cubic bezier curve when the path is squeezed for tap animation
+  const std::string TAP_OFFSET_UNIFORM_NAME("uTapOffset[");
+  // uniform which gives the position of the tapping, in this way the particles will be pushed away from this point
+  const std::string TAP_POINT_UNIFORM_NAME("uTapPoint[");
+  // uniform which trigger the break animation, set to 1.0 when break animation is playing, otherwise set to 0.0
+  const std::string BREAK_UNIFORM_NAME("uBreak");
+
+  /****************particle colors******************/
+
+  struct ParticleColor
+  {
+    Vector3 RGB;
+    Vector2 AlphaRange;
+    unsigned int numParticle;
+  };
+
+  ParticleColor PARTICLE_COLORS[]=
+  {
+    { Vector3( 0.f,   240.f, 255.f )/255.f, Vector2( 0.2f, 1.f ),  22 }, // 00f0ff, opacity 20%~100%
+    { Vector3( 89.f,  151.f, 239.f )/255.f, Vector2( 0.2f, 0.5f ), 12 }, // 5997ef, opacity 20%~50%
+    { Vector3( 181.f, 181.f, 207.f )/255.f, Vector2( 0.5f, 1.f ),  22 }, // b5b5cf, opacity 50%~100%
+    { Vector3( 147.f, 147.f, 170.f )/255.f, Vector2( 0.5f, 0.5f ), 22 }, // 9393aa, opacity 50%~50%
+    { Vector3( 145.f, 145.f, 201.f )/255.f, Vector2( 1.f, 1.f ),   12 }, // 91bdc9, opacity 100%~100%
+    { Vector3( 145.f, 145.f, 201.f )/255.f, Vector2( 0.2f, 0.2f ), 21 }  // 91bdc9, opacity 20%~20%
+  };
+  const unsigned int NUM_COLOR( sizeof( PARTICLE_COLORS ) / sizeof( PARTICLE_COLORS[0] ) );
+
+  /***************particle moving paths********************/
+
+  typedef int MovingPath[12];
+
+  // these paths are defined inside the circle which has the center at (250, 250) and the radius as 250
+  MovingPath PATHS[]=
+  { // each path is composed of two cubic b-curves: (p0, p1, p2, p3) & (p3, p4, p5, p0)
+    // p0        p1        p2       p3        p4        p5
+    { 280,273,  386,41,  489,141,  491,199,  494,256,  230,394  },
+    { 129,226,  357,120, 150,491,  291,406,  433,320,  47,283   },
+    { 96,264,   356,133, 446,196,  370,297,  294,399,  -169,384 },
+    { 345,110,  359,186,  14,393,  4,247,  -6,101,  321,-28 },
+    { 166,161,  128,353,  566,200,  487,304,  413,403,  203,-32 },
+    { 193,286,  106,331,  206,569,  334,477,  462,385,  279,240 },
+    { 336,247,  293,232,  301,465,  346,479,  390,493,  374,261 },
+    { 250,72,  314,72,  332,495,  250,497,  168,499,  161,72 },
+    { 48,387,  32,241,  452,558,  433,358,  411,121,  62,523 },
+    { 300,32,  159,27,  442,568,  186,492,  -70,415,  551,41 },
+    { 479,150,  503,203,  216,403,  163,298,  110,193,  448,78 },
+    { 346,75,  311,97,  336,196,  389,160,  442,123,  383,51 },
+    { 90,61,  54,96,  218,373,  294,300,  370,227,  141,11 },
+    { 126,225,  240,280,  378,29,  221,16,  64,4,  11,170 },
+    { 308,101,  243,22,  -10,271,  22,352,  49,422,  396,208 },
+    { 193,188,  174,302,  502,389,  500,250,  498,111,  212,72 },
+    { 227,3,  16,35,  577,309,  428,423,  279,537,  438,-28 },
+    { 410,58,  387,18,  22,179,  154,277,  286,374,  459,142 },
+    { 178,272,  109,299,  144,429,  218,396,  293,362,  221,254 },
+    { 247,46,  98,5,  -91,357,  160,431,  412,505,  397,88 },
+    { 41,112,  22,144,  123,273,  158,187,  192,101,  75,56 },
+    { 8,300,  23,340,  267,294,  238,218,  209,142,  -20,226 },
+    { 112,256,  24,270,  -1,470,  154,433,  308,396,  201,242 },
+    { 212,277,  267,346,  509,202,  452,103,  398,8,  150,199 },
+    { 154,205,  146,287,  496,282,  492,194,  488,107,  160,140 },
+    { 281,350,  365,318,  415,476,  332,482,  248,489,  204,379 },
+    { 327,23,  346,81,  154,319,  123,207,  92,95,  313,-21 },
+    { 323,233,  283,307,  454,420,  478,354,  501,288,  374,136 },
+    { 318,186,  311,252,  488,248,  481,168,  474,87,  328,76 },
+    { 7,192,  -10,270,  249,398,  269,307,  290,216,  25,111 },
+    { 148,22,  98,22,  25,458,  125,458,  225,458,  198,22 },
+    { 349,32,  307,39,  492,416,  399,446,  305,477,  460,16 },
+    { 147,474,  222,554,  392,154,  486,240,  581,325,  73,394 },
+    { 57,186,  13,200,  51,398,  114,374,  178,349,  97,174 },
+    { 257,192,  198,188,  162,345,  240,349,  319,354,  316,197 },
+    { 242,4,  283,21,  30,172,  81,215,  133,257,  209,-10 },
+    { 149,408,  165,442,  472,340,  444,275,  416,210,  120,348 },
+    { 106,271,  136,359,  483,370,  422,186,  360,2,  76,186 },
+    { 120,146,  29,224,  469,262,  346,390,  222,518,  393,-87 },
+    { 318,265,  415,280,  398,537,  247,491,  96,446,  222,249 },
+    { 171,275,  207,246,  274,469,  237,497,  199,525,  139,300 },
+    { 196,84,  135,105,  256,510,  334,486,  412,462,  280,55 },
+    { 485,314,  452,170,  158,606,  111,411,  55,179,  515,446 },
+    { 134,54,  266,4,  175,607,  392,451,  609,296,  -100,144 },
+    { 3,229,  -1,287,  334,383,  350,267,  366,150,  10,151 },
+    { 105,115,  146,125,  154,227,  92,209,  30,192,  62,105 },
+    { 343,20,  388,42,  323,357,  228,313,  132,269,  278,-10 },
+    { 362,186,  271,274,  60,82,  204,19,  349,-44,  453,97 },
+    { 145,128,  181,32,  501,185,  498,272,  495,347,  97,257 },
+    { 286,172,  342,274,  59,463,  16,331,  -27,198,  231,69 },
+    { 194,7,  404,-32,  -38,410,  140,469,  317,528,  -16,45 },
+    { 39,120,  48,74,  445,109,  352,244,  259,379,  20,215 },
+    { 328,247,  402,250,  411,384,  330,377,  248,370,  281,244 },
+    { 189,56,  317,-31,  610,240,  396,392,  183,543,  61,144 },
+    { 402,53,  430,77,  376,231,  315,161,  255,91,  351,10 },
+    { 496,218,  494,260,  249,296,  251,214,  254,133,  498,139 },
+    { 381,210,  469,195,  557,376,  399,391,  241,407,  292,226 },
+    { 297,263,  267,346,  -8,289,  14,176,  35,69,  331,168 },
+    { 329,187,  363,263,  30,371,  5,287,  -19,203,  302,128 },
+    { 257,354,  168,351,  171,516,  252,496,  333,475,  340,356 },
+    { 106,60,  107,121,  366,284,  359,168,  352,52,  105,14 },
+    { 178,257,  240,314,  115,476,  71,421,  28,367,  98,182 },
+    { 163,213,  191,273,  22,327,  3,248,  -17,170,  118,113 },
+    { 459,117,  500,185,  297,390,  248,311,  199,232,  416,46 },
+    { 270,3,  317,-14,  528,375,  434,407,  339,440,  223,19 },
+    { 88,76,  130,68,  78,485,  176,483,  274,482,  -22,96 },
+    { 422,428,  378,528,  88,205,  26,317,  -36,428,  467,328 },
+    { 414,127,  460,125,  489,325,  421,322,  353,320,  372,128 },
+    { 227,197,  281,174,  367,311,  294,340,  221,370,  173,220 },
+    { 180,14,  147,44,  436,104,  401,161,  366,219,  207,-10 },
+    { 400,367,  395,404,  71,406,  77,336,  82,265,  407,300 },
+    { 396,222,  396,316,  71,439,  70,245,  68,51,  396,132 },
+    { 342,109,  454,153,  49,332,  208,413,  367,494,  8,-23 },
+    { 147,167,  222,137,  266,169,  231,199,  197,229,  129,178 },
+    { 227,272,  310,243,  277,313,  322,266,  367,219,  207,313 },
+    { 279,192,  339,233,  396,211,  367,182,  338,152,  228,194 },
+    { 236,20,  283,75,  346,26,  338,71,  330,116,  207,17 },
+    { 129,83,  164,23,  158,14,  179,11,  200,8,  91,78 },
+    { 86,231,  129,293,  164,421,  104,348,  44,275,  66,200 },
+    { 193,328,  197,278,  240,348,  276,305,  311,263,  199,354 },
+    { 231,364,  241,209,  309,104,  326,236,  342,367,  225,424 },
+    { 414,230,  398,328,  446,445,  467,363,  489,281,  373,254 },
+    { 289,122,  332,123,  348,161,  322,158,  297,156,  275,125 },
+    { 142,235,  199,308,  402,229,  283,218,  164,206,  130,206 },
+    { 174,396,  210,387,  328,501,  246,455,  165,409,  138,394 },
+    { 288,388,  366,357,  372,458,  393,400,  414,343,  249,431 },
+    { 351,278,  409,369,  497,316,  437,288,  376,260,  351,243 },
+    { 87,134,  181,77,  311,121,  206,140,  101,160,  61,159 },
+    { 95,195,  126,208,  133,258,  110,236,  88,215,  95,195 },
+    { 140,293,  158,330,  169,275,  184,299,  198,323,  126,313 },
+    { 336,319,  383,357,  388,278,  393,333,  397,388,  311,325 },
+    { 338,107,  434,209,  -37,469,  151,287,  338,104,  285,50 },
+    { 403,134,  446,182,  378,318,  386,233,  393,149,  360,98 },
+    { 366,82,  413,93,  416,158,  390,118,  364,78,  336,75 },
+    { 448,188,  448,230,  465,269,  470,225,  474,181,  448,177 },
+    { 121,398,  142,418,  126,475,  111,436,  96,396,  100,382 },
+    { 40,296,  90,352,  170,310,  143,350,  116,391,  7,300 },
+    { 25,203,  45,241,  70,204,  45,248,  19,293,  4,204 },
+    { 243,222,  225,275,  345,256,  296,237,  247,218,  249,199 },
+    { 159,149,  282,133,  284,199,  226,191,  169,184,  147,160 },
+    { 149,257,  290,322,  151,374,  166,338,  182,302,  116,263 },
+    { 255,285,  354,327,  234,287,  279,327,  323,367,  193,290 },
+    { 188,220,  353,190,  290,354,  348,293,  407,231,  152,248 },
+    { 305,122,  382,174,  402,229,  366,198,  329,167,  297,127 },
+    { 378,260,  406,267,  390,330,  384,293,  377,257,  366,263 },
+    { 178,396,  357,365,  273,461,  248,431,  223,401,  157,412 },
+    { 180,89,  258,88,  302,94,  255,115,  207,136,  166,96 },
+    { 81,197,  139,232,  39,257,  94,259,  150,261,  58,200 },
+    { 314,89,  378,40,  383,38,  389,42,  395,45,  267,90 },
+    { 371,141,  482,233,  508,244,  498,272,  488,299,  307,157 },
+    { 339,348,  361,465,  382,477,  406,442,  430,406,  269,369 }
+  };
+  const unsigned int NUM_PARTICLE( sizeof( PATHS ) / sizeof( PATHS[0] ) );
+
+  const float PARTICLE_SIZE = 13.f;
+
+  const float ACTOR_SCALE = 0.704f; // resize 500*500 to 352*352, a bit smaller than 360*360
+  const Vector3 ACTOR_POSITION( -176.f, -176.f, 1.f);
+
+  const int MAXIMUM_ANIMATION_COUNT = 30;
+
+  // Geometry format used by the SparkeEffect
+  struct Vertex
+  {
+    Vertex( const Vector2& texCoord,
+            const Vector2& aParticlePath0,
+            const Vector2& aParticlePath1,
+            const Vector2& aParticlePath2,
+            const Vector2& aParticlePath3,
+            const Vector2& aParticlePath4,
+            const Vector2& aParticlePath5 )
+    : aTexCoord( texCoord ),
+      aParticlePath0( aParticlePath0 ),
+      aParticlePath1( aParticlePath1 ),
+      aParticlePath2( aParticlePath2 ),
+      aParticlePath3( aParticlePath3 ),
+      aParticlePath4( aParticlePath4 ),
+      aParticlePath5( aParticlePath5 )
+    {
+    }
+
+    Vector2 aTexCoord;
+    Vector2 aParticlePath0;
+    Vector2 aParticlePath1;
+    Vector2 aParticlePath2;
+    Vector2 aParticlePath3;
+    Vector2 aParticlePath4;
+    Vector2 aParticlePath5;
+  };
+
+  /**
+   * Create a SparkleEffect object.
+   * @return A handle to a newly allocated SparkleEffect
+   */
+  Shader New()
+  {
+    std::string vertexShader = DALI_COMPOSE_SHADER(
+      precision highp float;\n
+      \n
+      attribute vec2  aTexCoord;\n
+      uniform   mat4  uMvpMatrix;\n
+      varying   vec2  vTexCoord;\n
+      \n
+      attribute vec2  aParticlePath0;\n
+      attribute vec2  aParticlePath1;\n
+      attribute vec2  aParticlePath2;\n
+      attribute vec2  aParticlePath3;\n
+      attribute vec2  aParticlePath4;\n
+      attribute vec2  aParticlePath5;\n
+      \n
+      uniform float uPercentage;\n
+      uniform float uPercentageMarked;\n
+      uniform vec3  uParticleColors[NUM_COLOR];\n
+      uniform float uOpacity[NUM_PARTICLE];\n
+      uniform vec2  uTapIndices;
+      uniform float uTapOffset[MAXIMUM_ANIMATION_COUNT];\n
+      uniform vec2  uTapPoint[MAXIMUM_ANIMATION_COUNT];\n
+      uniform float uAcceleration;\n
+      uniform float uRadius;\n
+      uniform float uScale;\n
+      uniform float uBreak;\n
+      \n
+      varying lowp vec4 vColor;\n
+      \n
+      void main()\n
+      {\n
+        // we store the particle index inside texCoord attribute
+        float idx = abs(aTexCoord.y)-1.0;\n
+        \n
+        // early out if the particle is invisible
+        if(uOpacity[int(idx)]<1e-5)\n
+        {\n
+          gl_Position = vec4(0.0);\n
+          vColor = vec4(0.0);\n
+          return;\n
+        }\n
+        \n
+        // As the movement along the b-curve has nonuniform speed with a uniform increasing parameter 'uPercentage'
+        // we give different particles the different 'percentage' to make them looks more random
+        float increment = idx / float(NUM_PARTICLE)*5.0;
+        float percentage = mod(uPercentage +uAcceleration+increment, 1.0);
+        \n
+        vec2 p0; vec2 p1; vec2 p2; vec2 p3;
+        // calculate the particle position by using the cubic b-curve equation
+        if(percentage<0.5)\n // particle on the first b-curve
+        {\n
+          p0 = aParticlePath0;\n
+          p1 = aParticlePath1;\n
+          p2 = aParticlePath2;\n
+          p3 = aParticlePath3;\n
+        }\n
+        else\n
+        {\n
+          p0 = aParticlePath3;\n
+          p1 = aParticlePath4;\n
+          p2 = aParticlePath5;\n
+          p3 = aParticlePath0;\n
+        }\n
+        float t = mod( percentage*2.0, 1.0);\n
+        vec2 position = (1.0-t)*(1.0-t)*(1.0-t)*p0 + 3.0*(1.0-t)*(1.0-t)*t*p1+3.0*(1.0-t)*t*t*p2 + t*t*t*p3;\n
+        \n
+        vec2 referencePoint = mix(p0,p3,0.5);\n
+        float maxAnimationCount = float(MAXIMUM_ANIMATION_COUNT);\n
+        \n
+        for( float i=uTapIndices.x; i<uTapIndices.y; i+=1.0 )\n
+        {
+          int id = int( mod(i+0.5,maxAnimationCount ) );\n
+          vec2 edgePoint = normalize(referencePoint-uTapPoint[id])*uRadius+vec2(uRadius);\n
+          position = mix( position, edgePoint, uTapOffset[id] ) ;\n
+        }\n
+        \n
+        position = mix( position, vec2( 250.0,250.0 ),uBreak*(1.0-uOpacity[int(idx)]) ) ;
+        \n
+        // vertex position on the mesh: (sign(aTexCoord.x), sign(aTexCoord.y))*PARTICLE_HALF_SIZE
+        gl_Position = uMvpMatrix * vec4( position.x+sign(aTexCoord.x)*PARTICLE_HALF_SIZE/uScale,
+                                         position.y+sign(aTexCoord.y)*PARTICLE_HALF_SIZE/uScale,
+                                         0.0, 1.0 );\n
+        \n
+        // we store the color index inside texCoord attribute
+        float colorIndex = abs(aTexCoord.x);
+        vColor.rgb = uParticleColors[int(colorIndex)-1];\n
+        vColor.a = fract(colorIndex) * uOpacity[int(idx)];\n
+        \n
+        // produce a 'seemingly' random fade in/out
+        percentage = mod(uPercentage+increment+0.15, 1.0);\n
+        float ramdomOpacity = (min(percentage, 0.25)-0.15+0.9-max(percentage,0.9))*10.0;\n
+        vColor.a *=ramdomOpacity;\n
+        \n
+        vTexCoord = clamp(aTexCoord, 0.0, 1.0);\n
+      }\n
+    );
+
+    std::string fragmentShader = DALI_COMPOSE_SHADER(
+        precision highp float;\n
+        uniform sampler2D sTexture;\n
+        varying vec2      vTexCoord;\n
+        \n
+        varying lowp vec4 vColor;\n
+        \n
+        void main()\n
+        {\n
+          gl_FragColor = vColor;\n
+          gl_FragColor.a *= texture2D(sTexture, vTexCoord).a;\n
+        }\n
+    );
+
+    std::ostringstream vertexShaderStringStream;
+    vertexShaderStringStream<< "#define NUM_COLOR "<< NUM_COLOR << "\n"
+                            << "#define NUM_PARTICLE "<< NUM_PARTICLE << "\n"
+                            << "#define PARTICLE_HALF_SIZE "<< PARTICLE_SIZE*ACTOR_SCALE/2.f << "\n"
+                            << "#define MAXIMUM_ANIMATION_COUNT "<<MAXIMUM_ANIMATION_COUNT<<"\n"
+                            << vertexShader;
+
+    Shader handle = Shader::New( vertexShaderStringStream.str(), fragmentShader );
+
+    // set the particle colors
+    std::ostringstream oss;
+    for( unsigned int i = 0; i < NUM_COLOR; i++ )
+    {
+      oss.str("");
+      oss<< PARTICLE_COLOR_UNIFORM_NAME<< i << "]";
+      handle.RegisterProperty(oss.str(), PARTICLE_COLORS[i].RGB);
+    }
+    handle.RegisterProperty( "uRadius", 250.f );
+    handle.RegisterProperty( "uScale", ACTOR_SCALE );
+
+    // set the initial uniform values
+
+    for( unsigned int i = 0; i < NUM_PARTICLE; i++ )
+    {
+      oss.str("");
+      oss<< OPACITY_UNIFORM_NAME << i << "]";
+      handle.RegisterProperty(oss.str(), 1.f);
+    }
+    handle.RegisterProperty( PERCENTAGE_UNIFORM_NAME, 0.f );
+    handle.RegisterProperty( ACCELARATION_UNIFORM_NAME, 0.f );
+    handle.RegisterProperty( BREAK_UNIFORM_NAME, 0.f);
+    handle.RegisterProperty( TAP_INDICES_UNIFORM_NAME, Vector2::ZERO);
+
+    for( int i = 0; i < MAXIMUM_ANIMATION_COUNT; i++ )
+    {
+      oss.str("");
+      oss<< TAP_OFFSET_UNIFORM_NAME << i << "]";
+      handle.RegisterProperty(oss.str(), 0.f);
+
+      oss.str("");
+      oss<< TAP_POINT_UNIFORM_NAME << i << "]";
+      handle.RegisterProperty(oss.str(), Vector2( 250.0f,250.0f ));
+    }
+
+    return handle;
+  }
+
+}; // namespace SparkleEffect
+
+#endif // DALI_SPARKLE_EFFECT_H
diff --git a/examples/styling/image-channel-control-impl.cpp b/examples/styling/image-channel-control-impl.cpp
new file mode 100644
index 00000000..4672d7d1
--- /dev/null
+++ b/examples/styling/image-channel-control-impl.cpp
@@ -0,0 +1,321 @@
+/*
+ * 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 "image-channel-control-impl.h"
+#include <dali-toolkit/dali-toolkit.h>
+#include <dali/public-api/object/type-registry-helper.h>
+#include <dali-toolkit/devel-api/visual-factory/visual-factory.h>
+#include <cstdio>
+
+using namespace Dali; // Needed for macros
+
+namespace Demo
+{
+namespace Internal
+{
+
+namespace
+{
+
+const char* FRAGMENT_SHADER = DALI_COMPOSE_SHADER(
+  varying mediump vec2 vTexCoord;\n
+  uniform sampler2D sTexture;\n
+  uniform mediump vec4 uColor;\n
+  uniform mediump vec3 uChannels;\n
+  \n
+  void main()\n
+  {\n
+    gl_FragColor = texture2D( sTexture, vTexCoord ) * uColor * vec4(uChannels, 1.0) ;\n
+  }\n
+);
+
+Dali::BaseHandle Create()
+{
+  return Demo::ImageChannelControl::New();
+}
+
+DALI_TYPE_REGISTRATION_BEGIN( ImageChannelControl, Dali::Toolkit::Control, Create );
+
+DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, "url", STRING, RESOURCE_URL );
+DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, "redChannel", FLOAT, RED_CHANNEL );
+DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, "greenChannel", FLOAT, GREEN_CHANNEL );
+DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, "blueChannel", FLOAT, BLUE_CHANNEL );
+
+DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, "visibility", BOOLEAN, VISIBILITY );
+DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, "enableVisibilityTransition", ARRAY, ENABLE_VISIBILITY_TRANSITION );
+DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, "disableVisibilityTransition", ARRAY, DISABLE_VISIBILITY_TRANSITION );
+
+DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, "imageVisual", MAP, IMAGE_VISUAL );
+DALI_TYPE_REGISTRATION_END();
+
+} // anonymous namespace
+
+
+Internal::ImageChannelControl::ImageChannelControl()
+: Control( ControlBehaviour( REQUIRES_STYLE_CHANGE_SIGNALS ) ),
+  mChannels( 1.0f, 1.0f, 1.0f ),
+  mVisibility(true),
+  mTargetVisibility(true)
+{
+}
+
+Internal::ImageChannelControl::~ImageChannelControl()
+{
+}
+
+Demo::ImageChannelControl Internal::ImageChannelControl::New()
+{
+  IntrusivePtr<Internal::ImageChannelControl> impl = new Internal::ImageChannelControl();
+  Demo::ImageChannelControl handle = Demo::ImageChannelControl( *impl );
+  impl->Initialize();
+  return handle;
+}
+
+void ImageChannelControl::SetImage( const std::string& url )
+{
+  mUrl = url;
+
+  Actor self = Self();
+
+  Property::Map properties;
+  Property::Map shader;
+  shader[Dali::Toolkit::Visual::Shader::Property::FRAGMENT_SHADER] = FRAGMENT_SHADER;
+  properties[Dali::Toolkit::Visual::Property::TYPE] = Dali::Toolkit::Visual::IMAGE;
+  properties[Dali::Toolkit::Visual::Property::SHADER]=shader;
+  properties[Dali::Toolkit::ImageVisual::Property::URL] = url;
+
+  mVisual = Toolkit::VisualFactory::Get().CreateVisual( properties );
+  RegisterVisual( Demo::ImageChannelControl::Property::IMAGE_VISUAL, mVisual );
+  mVisual.SetName("imageVisual");
+
+  RelayoutRequest();
+}
+
+void ImageChannelControl::SetVisibility( bool visibility )
+{
+  printf("ImageChannelControl %s: SetVisibility( %s )\n", Self().GetName().c_str(), visibility?"T":"F" );
+
+  Animation animation;
+
+  if( mAnimation )
+  {
+    mAnimation.Stop();
+    mAnimation.FinishedSignal().Disconnect( this, &ImageChannelControl::OnStateChangeAnimationFinished );
+    OnStateChangeAnimationFinished(mAnimation);
+  }
+
+  if( mVisibility != visibility )
+  {
+    if( mVisibility )
+    {
+      if( mDisableVisibilityTransition.Count() > 0 )
+      {
+        mAnimation = CreateTransition( mDisableVisibilityTransition );
+      }
+    }
+    else
+    {
+      if( mEnableVisibilityTransition.Count() > 0 )
+      {
+        mAnimation = CreateTransition( mEnableVisibilityTransition );
+      }
+    }
+  }
+
+  if( mAnimation )
+  {
+    mAnimation.FinishedSignal().Connect( this, &ImageChannelControl::OnStateChangeAnimationFinished );
+    mAnimation.Play();
+    mTargetVisibility = visibility;
+  }
+  else
+  {
+    mVisibility = visibility;
+  }
+}
+
+void ImageChannelControl::OnStateChangeAnimationFinished( Animation& src )
+{
+  mVisibility = mTargetVisibility;
+}
+
+void ImageChannelControl::OnInitialize()
+{
+  Actor self = Self();
+  mChannelIndex = self.RegisterProperty( "uChannels", Vector3(1.0f, 1.0f, 1.0f) );
+}
+
+void ImageChannelControl::OnStageConnection( int depth )
+{
+  Control::OnStageConnection( depth );
+}
+
+void ImageChannelControl::OnStageDisconnection()
+{
+  Control::OnStageDisconnection();
+}
+
+void ImageChannelControl::OnSizeSet( const Vector3& targetSize )
+{
+  Control::OnSizeSet( targetSize );
+
+  if( mVisual )
+  {
+    Vector2 size( targetSize );
+    mVisual.SetSize( size );
+  }
+}
+
+Vector3 ImageChannelControl::GetNaturalSize()
+{
+  if( mVisual )
+  {
+    Vector2 naturalSize;
+    mVisual.GetNaturalSize(naturalSize);
+    return Vector3(naturalSize);
+  }
+  return Vector3::ZERO;
+}
+
+void ImageChannelControl::OnStyleChange( Toolkit::StyleManager styleManager, StyleChange::Type change )
+{
+  // Chain up.
+  Control::OnStyleChange( styleManager, change );
+}
+
+
+///////////////////////////////////////////////////////////
+//
+// Properties
+//
+
+void ImageChannelControl::SetProperty( BaseObject* object, Property::Index index, const Property::Value& value )
+{
+  Demo::ImageChannelControl imageChannelControl = Demo::ImageChannelControl::DownCast( Dali::BaseHandle( object ) );
+
+  if( imageChannelControl )
+  {
+    ImageChannelControl& impl = GetImpl( imageChannelControl );
+    Actor self = impl.Self();
+    switch ( index )
+    {
+      case Demo::ImageChannelControl::Property::RESOURCE_URL:
+      {
+        impl.SetImage( value.Get<std::string>() );
+        break;
+      }
+      case Demo::ImageChannelControl::Property::IMAGE_VISUAL:
+      {
+        Property::Map* map = value.GetMap();
+        if( map )
+        {
+          impl.mVisual = Toolkit::VisualFactory::Get().CreateVisual( *map );
+          impl.RegisterVisual( Demo::ImageChannelControl::Property::IMAGE_VISUAL, impl.mVisual );
+        }
+        break;
+      }
+      case Demo::ImageChannelControl::Property::VISIBILITY:
+      {
+        impl.SetVisibility( value.Get<bool>() );
+        break;
+      }
+      case Demo::ImageChannelControl::Property::ENABLE_VISIBILITY_TRANSITION:
+      {
+        if( value.GetType() == Property::ARRAY )
+        {
+          impl.mEnableVisibilityTransition = Toolkit::TransitionData::New( *value.GetArray());
+        }
+        else if( value.GetType() == Property::MAP )
+        {
+          impl.mEnableVisibilityTransition = Toolkit::TransitionData::New( *value.GetMap() );
+        }
+        break;
+      }
+      case Demo::ImageChannelControl::Property::DISABLE_VISIBILITY_TRANSITION:
+      {
+        if( value.GetType() == Property::ARRAY )
+        {
+          impl.mDisableVisibilityTransition = Toolkit::TransitionData::New( *value.GetArray());
+        }
+        else if( value.GetType() == Property::MAP )
+        {
+          impl.mDisableVisibilityTransition = Toolkit::TransitionData::New( *value.GetMap() );
+        }
+        break;
+      }
+      case Demo::ImageChannelControl::Property::RED_CHANNEL:
+      {
+        impl.mChannels[0] = value.Get<float>();
+        self.SetProperty( impl.mChannelIndex, impl.mChannels );
+        break;
+      }
+      case Demo::ImageChannelControl::Property::GREEN_CHANNEL:
+      {
+        impl.mChannels[1] = value.Get<float>();
+        self.SetProperty( impl.mChannelIndex, impl.mChannels );
+        break;
+      }
+      case Demo::ImageChannelControl::Property::BLUE_CHANNEL:
+      {
+        impl.mChannels[2] = value.Get<float>();
+        self.SetProperty( impl.mChannelIndex, impl.mChannels );
+        break;
+      }
+    }
+  }
+}
+
+Property::Value ImageChannelControl::GetProperty( BaseObject* object, Property::Index propertyIndex )
+{
+  Property::Value value;
+
+  Demo::ImageChannelControl imageChannelControl = Demo::ImageChannelControl::DownCast( Dali::BaseHandle( object ) );
+
+  if ( imageChannelControl )
+  {
+    ImageChannelControl& impl = GetImpl( imageChannelControl );
+    switch ( propertyIndex )
+    {
+      case Demo::ImageChannelControl::Property::RED_CHANNEL:
+      {
+        value = impl.mChannels[0];
+        break;
+      }
+      case Demo::ImageChannelControl::Property::GREEN_CHANNEL:
+      {
+        value = impl.mChannels[1];
+        break;
+      }
+      case Demo::ImageChannelControl::Property::BLUE_CHANNEL:
+      {
+        value = impl.mChannels[2];
+        break;
+      }
+      case Demo::ImageChannelControl::Property::VISIBILITY:
+      {
+        value = impl.mVisibility;
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  return value;
+}
+
+} // Internal
+} // Demo
diff --git a/examples/styling/image-channel-control-impl.h b/examples/styling/image-channel-control-impl.h
new file mode 100644
index 00000000..bcfa9eac
--- /dev/null
+++ b/examples/styling/image-channel-control-impl.h
@@ -0,0 +1,140 @@
+#ifndef DALI_DEMO_INTERNAL_IMAGE_CHANNEL_CONTROL_IMPL_H
+#define DALI_DEMO_INTERNAL_IMAGE_CHANNEL_CONTROL_IMPL_H
+
+/*
+ * 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 "image-channel-control.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>
+#include <dali-toolkit/devel-api/visual-factory/transition-data.h>
+
+namespace Demo
+{
+
+namespace Internal // To use TypeRegistry, handle and body classes need the same name
+{
+
+class ImageChannelControl : public Dali::Toolkit::Internal::Control
+{
+public:
+  /**
+   * Instantiate a new ImageChannelControl object
+   */
+  static Demo::ImageChannelControl New();
+  ImageChannelControl();
+  ~ImageChannelControl();
+
+public: // API
+  /**
+   * @copydoc ImageChannelControl::SetImage
+   */
+  void SetImage( const std::string& url );
+
+  /**
+   * @copydoc ImageChannelControl::SetVisibility
+   */
+  void SetVisibility( bool visibility );
+
+public:  // Properties
+  /**
+   * Called when a property of an object of this type is set.
+   * @param[in] object The object whose property is set.
+   * @param[in] index The property index.
+   * @param[in] value The new property value.
+   */
+  static void SetProperty( Dali::BaseObject* object, Dali::Property::Index index, const Dali::Property::Value& value );
+
+  /**
+   * Called to retrieve a property of an object of this type.
+   * @param[in] object The object whose property is to be retrieved.
+   * @param[in] index The property index.
+   * @return The current value of the property.
+   */
+  static Dali::Property::Value GetProperty( Dali::BaseObject* object, Dali::Property::Index propertyIndex );
+
+private: // From Control
+  /**
+   * @copydoc Toolkit::Control::OnInitialize()
+   */
+  virtual void OnInitialize();
+
+  /**
+   * @copydoc Toolkit::Control::OnStageConnect()
+   */
+  virtual void OnStageConnection( int depth );
+
+  /**
+   * @copydoc Toolkit::Control::OnStageDisconnection()
+   */
+  virtual void OnStageDisconnection();
+
+  /**
+   * @copydoc Toolkit::Control::OnSizeSet()
+   */
+  virtual void OnSizeSet( const Dali::Vector3& targetSize );
+
+  /**
+   * @copydoc Toolkit::Control::GetNaturalSize
+   */
+  virtual Dali::Vector3 GetNaturalSize();
+
+  /**
+   * @copydoc Toolkit::Control::OnStyleChange
+   */
+  virtual void OnStyleChange( Dali::Toolkit::StyleManager styleManager, Dali::StyleChange::Type change );
+
+private:
+  void OnStateChangeAnimationFinished(Dali::Animation& handle);
+
+private:
+  //undefined
+  ImageChannelControl( const ImageChannelControl& );
+  ImageChannelControl& operator=( const ImageChannelControl& );
+
+private:
+  // Implementation details
+  std::string mUrl;
+  Dali::Toolkit::Visual::Base mVisual;
+  Dali::Vector3 mChannels;
+  Dali::Toolkit::TransitionData mEnableVisibilityTransition;
+  Dali::Toolkit::TransitionData mDisableVisibilityTransition;
+  Dali::Animation mAnimation;
+  Dali::Property::Index mChannelIndex;
+  bool mVisibility:1;
+  bool mTargetVisibility:1;
+};
+
+} // Internal
+
+inline Internal::ImageChannelControl& GetImpl( Demo::ImageChannelControl& handle )
+{
+  DALI_ASSERT_ALWAYS( handle );
+  Dali::RefObject& object = handle.GetImplementation();
+  return static_cast<Internal::ImageChannelControl&>(object);
+}
+
+inline const Internal::ImageChannelControl& GetImpl( const Demo::ImageChannelControl& handle )
+{
+  DALI_ASSERT_ALWAYS( handle );
+  const Dali::RefObject& object = handle.GetImplementation();
+  return static_cast<const Internal::ImageChannelControl&>(object);
+}
+
+} // Demo
+
+#endif //  DALI_DEMO_IMAGE_CHANNEL_CONTROL_IMPL_H
diff --git a/examples/styling/image-channel-control.cpp b/examples/styling/image-channel-control.cpp
new file mode 100644
index 00000000..45a0b29c
--- /dev/null
+++ b/examples/styling/image-channel-control.cpp
@@ -0,0 +1,85 @@
+/*
+ * 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 "image-channel-control.h"
+#include "image-channel-control-impl.h"
+
+namespace Demo
+{
+
+ImageChannelControl::ImageChannelControl()
+{
+}
+
+ImageChannelControl::ImageChannelControl( const ImageChannelControl& imageChannelControl )
+: Control( imageChannelControl )
+{
+}
+
+ImageChannelControl& ImageChannelControl::operator= ( const ImageChannelControl& rhs )
+{
+  if( &rhs != this )
+  {
+    Control::operator=( rhs );
+  }
+  return *this;
+}
+
+ImageChannelControl::~ImageChannelControl()
+{
+}
+
+ImageChannelControl ImageChannelControl::New()
+{
+  ImageChannelControl imageChannelControl = Internal::ImageChannelControl::New();
+  return imageChannelControl;
+}
+
+ImageChannelControl ImageChannelControl::New( const std::string& url )
+{
+  ImageChannelControl imageChannelControl = Internal::ImageChannelControl::New();
+  imageChannelControl.SetImage( url );
+  return imageChannelControl;
+}
+
+ImageChannelControl ImageChannelControl::DownCast( BaseHandle handle )
+{
+  return Control::DownCast< ImageChannelControl, Internal::ImageChannelControl > ( handle );
+}
+
+void ImageChannelControl::SetImage( const std::string& url )
+{
+  GetImpl( *this ).SetImage( url );
+}
+
+void ImageChannelControl::SetVisibility( bool visibility )
+{
+  GetImpl( *this ).SetVisibility( visibility );
+}
+
+ImageChannelControl::ImageChannelControl( Internal::ImageChannelControl& implementation )
+: Control( implementation )
+{
+}
+
+ImageChannelControl::ImageChannelControl( Dali::Internal::CustomActor* internal )
+: Control( internal )
+{
+  VerifyCustomActorPointer< Internal::ImageChannelControl >( internal ) ;
+}
+
+
+} //namespace Demo
diff --git a/examples/styling/image-channel-control.h b/examples/styling/image-channel-control.h
new file mode 100644
index 00000000..e48c21dc
--- /dev/null
+++ b/examples/styling/image-channel-control.h
@@ -0,0 +1,130 @@
+#ifndef DALI_DEMO_IMAGE_CHANNEL_CONTROL_H
+#define DALI_DEMO_IMAGE_CHANNEL_CONTROL_H
+
+/*
+ * 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 <dali-toolkit/dali-toolkit.h>
+#include <string>
+
+namespace Demo
+{
+
+namespace Internal
+{
+// All type registered types need to have the same name for the body and the handle
+class ImageChannelControl;
+}
+
+/**
+ * Control that allows the RGB channels of an image to be altered.
+ */
+class ImageChannelControl : public Dali::Toolkit::Control
+{
+public:
+  /**
+   * The start and end property ranges for this control
+   */
+  enum PropertyRange
+  {
+    PROPERTY_START_INDEX = Dali::Toolkit::Control::CONTROL_PROPERTY_END_INDEX + 1,
+    PROPERTY_END_INDEX   = PROPERTY_START_INDEX + 1000,
+    ANIMATABLE_PROPERTY_START_INDEX = Dali::ANIMATABLE_PROPERTY_REGISTRATION_START_INDEX,
+    ANIMATABLE_PROPERTY_END_INDEX = ANIMATABLE_PROPERTY_START_INDEX+1000
+  };
+
+  struct Property
+  {
+    enum
+    {
+      RESOURCE_URL = PROPERTY_START_INDEX,
+      RED_CHANNEL,
+      GREEN_CHANNEL,
+      BLUE_CHANNEL,
+      VISIBILITY,
+      ENABLE_VISIBILITY_TRANSITION,
+      DISABLE_VISIBILITY_TRANSITION,
+      IMAGE_VISUAL
+    };
+  };
+
+public: // Construction / destruction
+
+  /**
+   * Create an uninitialized handle
+   */
+  ImageChannelControl();
+
+  /**
+   * Create a new image channel control without an image. Use
+   * SetImage to give this control an image
+   */
+  static ImageChannelControl New();
+
+  /**
+   * Create a new image channel control from a given URL
+   */
+  static ImageChannelControl New( const std::string& url );
+
+  /**
+   * Destructor. This is non-virtual since derived Handle types must not
+   * contain data or virtual methods
+   */
+  ~ImageChannelControl();
+
+  /**
+   * Copy Constructor
+   */
+  ImageChannelControl( const ImageChannelControl& imageChannelControl );
+
+  /**
+   * Assignment Operator
+   */
+  ImageChannelControl& operator=( const ImageChannelControl& imageChannelControl );
+
+  /**
+   * Downcast
+   */
+  static ImageChannelControl DownCast( BaseHandle handle );
+
+public: // API
+
+  /**
+   * Set the image for this ImageChannelControl
+   * @param[in] url The url of the image resource
+   */
+  void SetImage( const std::string& url );
+
+  /**
+   * Set the visibility of this control
+   */
+  void SetVisibility( bool visibility );
+
+public: // Not for public use
+  /**
+   * Create a handle from an implementation
+   */
+  ImageChannelControl( Internal::ImageChannelControl& implementation );
+
+  /**
+   * Allow the creation of an ImageChannelControl handle from an internal CustomActor pointer
+   */
+  ImageChannelControl( Dali::Internal::CustomActor* internal );
+};
+
+} // namespace Demo
+
+#endif // DALI_DEMO_IMAGE_CHANNEL_CONTROL_H
diff --git a/examples/styling/style-example.cpp b/examples/styling/style-example.cpp
new file mode 100644
index 00000000..cbdecf66
--- /dev/null
+++ b/examples/styling/style-example.cpp
@@ -0,0 +1,53 @@
+/*
+ * 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.
+ */
+
+/**
+ * @file style-example.cpp
+ * @brief Example of styling Toolkit controls.
+ */
+
+// External includes
+#include <dali/dali.h>
+
+// Internal includes
+#include "styling-application.h"
+
+
+/// Entry point for applications
+int DALI_EXPORT_API main( int argc, char** argv )
+{
+  const char* themeName = Demo::StylingApplication::DEMO_THEME_ONE_PATH;
+
+  if( argc > 1 )
+  {
+    int theme = atoi(argv[1]);
+    if( theme == 2 )
+    {
+      themeName = Demo::StylingApplication::DEMO_THEME_TWO_PATH;
+    }
+    else if( theme == 3 )
+    {
+      themeName = Demo::StylingApplication::DEMO_THEME_THREE_PATH;
+    }
+  }
+
+  Application application = Application::New( &argc, &argv, themeName );
+  {
+    Demo::StylingApplication stylingApplication( application );
+    application.MainLoop();
+  }
+  return 0;
+}
diff --git a/examples/styling/styling-application.cpp b/examples/styling/styling-application.cpp
new file mode 100644
index 00000000..a80a97b5
--- /dev/null
+++ b/examples/styling/styling-application.cpp
@@ -0,0 +1,686 @@
+/*
+ * 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.
+ */
+
+/**
+ * @file style-example.cpp
+ * @brief Example of styling Toolkit controls.
+ */
+
+// Class include
+#include "styling-application.h"
+
+// 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 "image-channel-control.h"
+#include <cstdio>
+#include <sstream>
+
+// Internal includes
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+namespace Demo
+{
+
+const char* StylingApplication::DEMO_THEME_ONE_PATH( DEMO_STYLE_DIR "style-example-theme-one.json" );
+const char* StylingApplication::DEMO_THEME_TWO_PATH( DEMO_STYLE_DIR "style-example-theme-two.json" );
+const char* StylingApplication::DEMO_THEME_THREE_PATH( DEMO_STYLE_DIR "style-example-theme-three.json" );
+
+namespace
+{
+#define DP(x) x
+
+const char* DEFAULT_CONTROL_AREA_IMAGE_PATH( DEMO_IMAGE_DIR "popup_button_background.9.png" );
+
+const char* POPUP_CONTROL_OK_NAME( "PopupControlOk" );
+const char* POPUP_CONTROL_CANCEL_NAME( "PopupControlCancel" );
+const char* BORDER_IMAGE( DEMO_IMAGE_DIR "border-4px.9.png" );
+const char* RESIZE_HANDLE_IMAGE( DEMO_IMAGE_DIR "resize-handle.png" );
+
+const int NUMBER_OF_THEMES(3); // The default theme is considered.
+
+const Vector4 BACKGROUND_COLOUR( 1.0f, 1.0f, 1.0f, 0.15f );
+const int BORDER_WIDTH( 4 );
+
+const char* const SMALL_IMAGE_1 = DEMO_IMAGE_DIR "gallery-small-14.jpg";
+const char* const BIG_IMAGE_1   = DEMO_IMAGE_DIR "gallery-large-4.jpg";
+
+const char* const SMALL_IMAGE_2 = DEMO_IMAGE_DIR "gallery-small-39.jpg";
+const char* const BIG_IMAGE_2   = DEMO_IMAGE_DIR "gallery-large-7.jpg";
+
+const char* const SMALL_IMAGE_3 = DEMO_IMAGE_DIR "gallery-small-20.jpg";
+const char* const BIG_IMAGE_3   = DEMO_IMAGE_DIR "gallery-large-11.jpg";
+
+// Layout
+const int MARGIN_SIZE = 10;
+
+const int RADIO_LABEL_THUMBNAIL_SIZE = 60;
+const int RADIO_LABEL_THUMBNAIL_SIZE_SMALL = 40;
+const int RADIO_IMAGE_SPACING = 8;
+const int BUTTON_HEIGHT = 48;
+
+Property::Index GetChannelProperty( int index )
+{
+  Property::Index channelIndex = Property::INVALID_INDEX;
+  switch(index)
+  {
+    case 0: { channelIndex = ImageChannelControl::Property::RED_CHANNEL; break; }
+    case 1: { channelIndex = ImageChannelControl::Property::GREEN_CHANNEL; break; }
+    case 2: { channelIndex = ImageChannelControl::Property::BLUE_CHANNEL; break; }
+  }
+  return channelIndex;
+}
+
+} // anonymous namespace
+
+
+
+StylingApplication::StylingApplication( Application& application )
+: mApplication( application )
+{
+  application.InitSignal().Connect( this, &StylingApplication::Create );
+}
+
+StylingApplication::~StylingApplication()
+{
+}
+
+void StylingApplication::Create( Application& application )
+{
+  Stage stage = Stage::GetCurrent();
+  stage.KeyEventSignal().Connect(this, &StylingApplication::OnKeyEvent);
+  stage.SetBackgroundColor( Vector4( 0.1f, 0.1f, 0.1f, 1.0f ) );
+
+  // Hide the indicator bar
+  application.GetWindow().ShowIndicator( Dali::Window::INVISIBLE );
+
+  mContentPane = CreateContentPane();
+  stage.Add( mContentPane );
+  mContentPane.SetSize( stage.GetSize() );
+
+  // Content panes:
+  TableView contentLayout = TableView::New( 5, 1 );
+  contentLayout.SetName("ContentLayout");
+  contentLayout.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
+  contentLayout.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+  contentLayout.SetParentOrigin( ParentOrigin::TOP_LEFT );
+  contentLayout.SetCellPadding( Size( MARGIN_SIZE, MARGIN_SIZE ) );
+
+  // Assign all rows the size negotiation property of fitting to children
+  for( unsigned int i = 0; i < contentLayout.GetRows(); ++i )
+  {
+    if( i != 1 )
+    {
+      contentLayout.SetFitHeight(i); // Row 1 should fill
+    }
+  }
+
+  mContentPane.Add( contentLayout );
+
+  mTitle = TextLabel::New( "Styling 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 );
+
+  // Buttons:
+
+  TableView imageSelectLayout = TableView::New( 1, 2 );
+  imageSelectLayout.SetName("ImageSelectLayout");
+
+  imageSelectLayout.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+  imageSelectLayout.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::HEIGHT );
+  imageSelectLayout.SetAnchorPoint( AnchorPoint::CENTER );
+  imageSelectLayout.SetParentOrigin( ParentOrigin::CENTER );
+  imageSelectLayout.SetCellPadding( Size( MARGIN_SIZE, MARGIN_SIZE ) );
+
+  // Fit radio button column to child width, leave image to fill remainder
+  imageSelectLayout.SetFitWidth( 0 );
+
+  contentLayout.Add( imageSelectLayout );
+
+  TableView radioButtonsLayout = TableView::New( 3, 2 );
+  radioButtonsLayout.SetName("RadioButtonsLayout");
+  radioButtonsLayout.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::HEIGHT );
+  // Leave each row to fill to parent height
+  // Set each column to fit to child width
+  radioButtonsLayout.SetFitWidth(0);
+  radioButtonsLayout.SetFitWidth(1);
+  radioButtonsLayout.SetCellPadding( Vector2( 6.0f, 0.0f ) );
+
+  imageSelectLayout.AddChild( radioButtonsLayout, TableView::CellPosition(0, 0) );
+  imageSelectLayout.SetCellAlignment( TableView::CellPosition( 0, 0 ), HorizontalAlignment::LEFT, VerticalAlignment::CENTER );
+
+  const char* images[] = { SMALL_IMAGE_1, SMALL_IMAGE_2, SMALL_IMAGE_3 };
+
+  for( int i=0; i<3; ++i )
+  {
+    std::ostringstream thumbnailName; thumbnailName << "thumbnail" << i+1;
+    ImageView image = ImageView::New( ResourceImage::New( images[i] ) );
+    image.SetName( thumbnailName.str() );
+    image.SetSize( DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
+
+    std::ostringstream label; label << (i+1);
+    std::ostringstream radioButtonStyleName;
+    radioButtonStyleName << "imageSelectButton" << i+1;
+    mRadioButtons[i] = RadioButton::New( label.str() );
+    mRadioButtons[i].SetName( radioButtonStyleName.str() );
+    mRadioButtons[i].SetParentOrigin( ParentOrigin::TOP_LEFT );
+    mRadioButtons[i].SetAnchorPoint( AnchorPoint::TOP_LEFT );
+    mRadioButtons[i].SetSelected( false );
+    mRadioButtons[i].StateChangedSignal().Connect( this, &StylingApplication::OnButtonStateChange );
+
+    radioButtonsLayout.AddChild( mRadioButtons[i], TableView::CellPosition( i, 0 ) );
+    radioButtonsLayout.AddChild( image, TableView::CellPosition( i, 1 ) );
+    radioButtonsLayout.SetCellAlignment( TableView::CellPosition( i, 0 ), HorizontalAlignment::CENTER, VerticalAlignment::CENTER );
+    radioButtonsLayout.SetCellAlignment( TableView::CellPosition( i, 1 ), HorizontalAlignment::CENTER, VerticalAlignment::CENTER );
+  }
+
+  mRadioButtons[0].SetSelected( true );
+
+  mImagePlacement = Actor::New();
+  mImagePlacement.SetParentOrigin( ParentOrigin::CENTER );
+  mImagePlacement.SetAnchorPoint( AnchorPoint::CENTER );
+  mImagePlacement.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
+  imageSelectLayout.AddChild( mImagePlacement, TableView::CellPosition( 0, 1 ) );
+  imageSelectLayout.SetCellAlignment( TableView::CellPosition( 0, 1 ), HorizontalAlignment::RIGHT, VerticalAlignment::CENTER );
+
+  mIcc1 = ImageChannelControl::New( BIG_IMAGE_1 );
+  mIcc1.SetName("ICC1");
+  mIcc1.SetResizePolicy( ResizePolicy::FILL_TO_PARENT , Dimension::ALL_DIMENSIONS );
+  mIcc1.SetSizeScalePolicy( SizeScalePolicy::FIT_WITH_ASPECT_RATIO );
+  mIcc1.SetParentOrigin( ParentOrigin::CENTER );
+  mIcc1.SetVisibility( true );
+  
+  mImagePlacement.Add( mIcc1 );
+
+  mIcc2 = ImageChannelControl::New( BIG_IMAGE_2 );
+  mIcc2.SetName("ICC2");
+  mIcc2.SetResizePolicy( ResizePolicy::FILL_TO_PARENT , Dimension::ALL_DIMENSIONS );
+  mIcc2.SetSizeScalePolicy( SizeScalePolicy::FIT_WITH_ASPECT_RATIO );
+  mIcc2.SetParentOrigin( ParentOrigin::CENTER );
+  mIcc2.SetVisibility( false );
+
+  mImagePlacement.Add( mIcc2 );
+
+  mIcc3 = ImageChannelControl::New( BIG_IMAGE_3 );
+  mIcc3.SetName("ICC3");
+  mIcc3.SetResizePolicy( ResizePolicy::FILL_TO_PARENT , Dimension::ALL_DIMENSIONS );
+  mIcc3.SetSizeScalePolicy( SizeScalePolicy::FIT_WITH_ASPECT_RATIO );
+  mIcc3.SetParentOrigin( ParentOrigin::CENTER );
+  mIcc3.SetVisibility( false );
+
+  mImagePlacement.Add( mIcc3 );
+
+  mImageChannelControl = mIcc1;
+
+  TableView channelSliderLayout = TableView::New( 3, 3 );
+  channelSliderLayout.SetName("ChannelSliderLayout");
+
+  // Contains a column of check buttons and a column of sliders for R/G/B
+  channelSliderLayout.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+  channelSliderLayout.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
+  channelSliderLayout.SetAnchorPoint( AnchorPoint::CENTER );
+  channelSliderLayout.SetParentOrigin( ParentOrigin::CENTER );
+  channelSliderLayout.SetCellPadding( Size( MARGIN_SIZE, MARGIN_SIZE ) );
+
+  // Set each row to fit to child height
+  channelSliderLayout.SetFitHeight( 0 );
+  channelSliderLayout.SetFitHeight( 1 );
+  channelSliderLayout.SetFitHeight( 2 );
+
+  // Set each column to fit to child width
+  channelSliderLayout.SetFitWidth( 0 );
+  channelSliderLayout.SetFitWidth( 1 );
+
+  contentLayout.Add( channelSliderLayout );
+  const char *checkboxLabels[3] = {"R", "G", "B"};
+
+  for( int i=0; i<3; ++i )
+  {
+    std::ostringstream checkBoxStyleName;
+    checkBoxStyleName << "channelActiveCheckBox" << i+1;
+    mCheckButtons[i] = CheckBoxButton::New();
+    mCheckButtons[i].SetName( checkBoxStyleName.str() );
+    mCheckButtons[i].SetParentOrigin( ParentOrigin::CENTER );
+    mCheckButtons[i].SetAnchorPoint( AnchorPoint::CENTER );
+    mCheckButtons[i].SetSelected( true );
+
+    mCheckButtons[i].StateChangedSignal().Connect( this, &StylingApplication::OnCheckButtonChange );
+    mCheckButtons[i].RegisterProperty( "channel", i, Property::READ_WRITE );
+
+    channelSliderLayout.AddChild( mCheckButtons[i], TableView::CellPosition( i, 0 ) );
+    channelSliderLayout.SetCellAlignment( TableView::CellPosition( i, 0 ), HorizontalAlignment::CENTER, VerticalAlignment::CENTER );
+
+    TextLabel label = TextLabel::New( checkboxLabels[i] );
+    std::ostringstream labelStyleName; labelStyleName << "ColorLabel" << i+1;
+    label.SetName( labelStyleName.str() );
+    label.SetStyleName( labelStyleName.str() );
+    label.SetParentOrigin( ParentOrigin::CENTER );
+    label.SetAnchorPoint ( AnchorPoint::CENTER );
+    label.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::WIDTH );
+    label.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
+
+    channelSliderLayout.AddChild( label, TableView::CellPosition( i, 1 ) );
+    channelSliderLayout.SetCellAlignment( TableView::CellPosition( i, 1 ), HorizontalAlignment::CENTER, VerticalAlignment::CENTER );
+
+    mChannelSliders[i] = Slider::New();
+    std::ostringstream sliderStyleName; sliderStyleName << "ColorSlider" << i+1;
+    mChannelSliders[i].SetName( sliderStyleName.str() );
+    mChannelSliders[i].SetStyleName( sliderStyleName.str() );
+    mChannelSliders[i].SetParentOrigin( ParentOrigin::CENTER );
+    mChannelSliders[i].SetAnchorPoint ( AnchorPoint::CENTER );
+    mChannelSliders[i].SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+    mChannelSliders[i].SetResizePolicy( ResizePolicy::FIT_TO_CHILDREN , Dimension::HEIGHT );
+    mChannelSliders[i].SetProperty( Slider::Property::LOWER_BOUND, 0.0f );
+    mChannelSliders[i].SetProperty( Slider::Property::UPPER_BOUND, 100.0f );
+    mChannelSliders[i].SetProperty( Slider::Property::VALUE_PRECISION, 0 );
+    mChannelSliders[i].SetProperty( Slider::Property::VALUE, 100.0f );
+    mChannelSliders[i].SetProperty( Slider::Property::SHOW_POPUP, true );
+    mChannelSliders[i].SetProperty( Slider::Property::SHOW_VALUE, true );
+
+    mChannelSliders[i].RegisterProperty( "channel", i, Property::READ_WRITE );
+
+    channelSliderLayout.AddChild( mChannelSliders[i], TableView::CellPosition( i, 2 ) );
+    channelSliderLayout.SetCellAlignment( TableView::CellPosition( i, 2 ), HorizontalAlignment::RIGHT, VerticalAlignment::CENTER );
+
+    mChannelSliders[i].ValueChangedSignal().Connect( this, &StylingApplication::OnSliderChanged );
+  }
+
+  mResetButton = PushButton::New();
+  mResetButton.SetLabelText( "Reset" );
+  mResetButton.SetName("ResetButton");
+  mResetButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
+  mResetButton.ClickedSignal().Connect( this, &StylingApplication::OnResetClicked );
+
+  contentLayout.Add( mResetButton );
+  contentLayout.SetCellAlignment( TableView::CellPosition( 3, 0 ), HorizontalAlignment::CENTER, VerticalAlignment::CENTER );
+
+  TableView themeButtonLayout = TableView::New( 1, 4 );
+  themeButtonLayout.SetName("ThemeButtonsLayout");
+  themeButtonLayout.SetCellPadding( Vector2( 6.0f, 0.0f ) );
+
+  themeButtonLayout.SetAnchorPoint( AnchorPoint::CENTER );
+  themeButtonLayout.SetParentOrigin( ParentOrigin::CENTER );
+  themeButtonLayout.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+  themeButtonLayout.SetResizePolicy( ResizePolicy::FIT_TO_CHILDREN, Dimension::HEIGHT );
+  themeButtonLayout.SetCellPadding( Size( MARGIN_SIZE, MARGIN_SIZE ) );
+  themeButtonLayout.SetFitHeight( 0 );
+
+  TextLabel label = TextLabel::New( "Theme: ");
+  label.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
+  label.SetStyleName("ThemeLabel");
+  label.SetAnchorPoint( AnchorPoint::TOP_CENTER );
+  label.SetParentOrigin( ParentOrigin::TOP_CENTER );
+  themeButtonLayout.AddChild( label, TableView::CellPosition( 0, 0 ) );
+  themeButtonLayout.SetCellAlignment( TableView::CellPosition( 0, 0 ), HorizontalAlignment::LEFT, VerticalAlignment::CENTER );
+
+  for( int i=0; i<3; ++i )
+  {
+    mThemeButtons[i] = PushButton::New();
+    mThemeButtons[i].SetName("ThemeButton");
+    mThemeButtons[i].SetStyleName("ThemeButton");
+    mThemeButtons[i].SetParentOrigin( ParentOrigin::CENTER );
+    mThemeButtons[i].SetAnchorPoint( ParentOrigin::CENTER );
+    mThemeButtons[i].SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+    mThemeButtons[i].SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
+    mThemeButtons[i].RegisterProperty( "theme", i, Property::READ_WRITE );
+    mThemeButtons[i].ClickedSignal().Connect( this, &StylingApplication::OnThemeButtonClicked );
+    themeButtonLayout.AddChild( mThemeButtons[i], TableView::CellPosition( 0, 1+i ) );
+  }
+  mThemeButtons[0].SetLabelText( "Lite" ); // Lightweight changes on top of Dali
+  mThemeButtons[1].SetLabelText( "App1" ); // Different application style
+  mThemeButtons[2].SetLabelText( "App2" );
+
+  contentLayout.Add( themeButtonLayout );
+}
+
+Actor StylingApplication::CreateContentPane()
+{
+  Toolkit::ImageView contentPane = Toolkit::ImageView::New( BORDER_IMAGE );
+  contentPane.SetName("ContentPane");
+  contentPane.SetParentOrigin( ParentOrigin::CENTER );
+  contentPane.SetAnchorPoint( AnchorPoint::CENTER );
+  contentPane.SetPadding( Padding( BORDER_WIDTH, BORDER_WIDTH, BORDER_WIDTH, BORDER_WIDTH ) );
+  return contentPane;
+}
+
+Actor StylingApplication::CreateResizableContentPane()
+{
+  Toolkit::ImageView contentPane = Toolkit::ImageView::New( BORDER_IMAGE );
+  contentPane.SetName("ContentPane");
+  contentPane.SetParentOrigin( ParentOrigin::CENTER );
+  contentPane.SetAnchorPoint( AnchorPoint::CENTER );
+  contentPane.SetPadding( Padding( BORDER_WIDTH, BORDER_WIDTH, BORDER_WIDTH, BORDER_WIDTH ) );
+
+  Toolkit::ImageView grabHandle = Toolkit::ImageView::New( RESIZE_HANDLE_IMAGE );
+  grabHandle.SetName("GrabHandle");
+  grabHandle.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
+  grabHandle.SetParentOrigin( ParentOrigin::BOTTOM_RIGHT );
+  grabHandle.SetAnchorPoint( AnchorPoint::BOTTOM_RIGHT );
+  grabHandle.SetPosition( -BORDER_WIDTH, -BORDER_WIDTH );
+  grabHandle.SetOpacity( 0.6f );
+
+  Layer grabCornerLayer = Layer::New();
+  grabCornerLayer.SetName("GrabCornerLayer");
+  grabCornerLayer.SetParentOrigin( ParentOrigin::BOTTOM_RIGHT );
+  grabCornerLayer.SetAnchorPoint( AnchorPoint::BOTTOM_RIGHT );
+  grabCornerLayer.Add( grabHandle );
+  contentPane.Add( grabCornerLayer );
+
+  mPanGestureDetector = PanGestureDetector::New();
+  mPanGestureDetector.Attach( grabHandle );
+  mPanGestureDetector.DetectedSignal().Connect( this, &StylingApplication::OnPan );
+
+  return contentPane;
+}
+
+Popup StylingApplication::CreateResetPopup()
+{
+  Stage stage = Stage::GetCurrent();
+
+  Popup popup= Popup::New();
+  popup.SetName("ResetPopup");
+  popup.SetStyleName("ResetPopup");
+  popup.SetParentOrigin( ParentOrigin::CENTER );
+  popup.SetAnchorPoint( AnchorPoint::CENTER );
+  popup.SetSize( stage.GetSize().width * 0.75f, 0.0f );
+  popup.SetProperty( Popup::Property::TAIL_VISIBILITY, false );
+  popup.OutsideTouchedSignal().Connect( this, &StylingApplication::HidePopup );
+  popup.HiddenSignal().Connect( this, &StylingApplication::PopupHidden );
+
+  popup.SetTitle( CreateTitle( "Reset channels" ) );
+
+  TextLabel text = TextLabel::New( "This will reset the channel data to full value. Are you sure?" );
+  text.SetName( "PopupContentText" );
+  text.SetStyleName( "PopupBody" );
+  text.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+  text.SetResizePolicy( ResizePolicy::DIMENSION_DEPENDENCY, Dimension::HEIGHT );
+  text.SetProperty( TextLabel::Property::MULTI_LINE, true );
+  text.SetPadding( Padding( 10.0f, 10.0f, 20.0f, 0.0f ) );
+  popup.SetContent( text );
+
+  ImageView footer = ImageView::New( DEFAULT_CONTROL_AREA_IMAGE_PATH );
+  footer.SetName( "PopupFooter" );
+  footer.SetStyleName( "PopupFooter" );
+  footer.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+  footer.SetResizePolicy( ResizePolicy::FIXED, Dimension::HEIGHT );
+  footer.SetSize( 0.0f, 80.0f );
+  footer.SetAnchorPoint( AnchorPoint::CENTER );
+  footer.SetParentOrigin( ParentOrigin::CENTER );
+
+  TableView footerLayout = TableView::New( 1, 2 );
+  footerLayout.SetParentOrigin( ParentOrigin::CENTER );
+  footerLayout.SetAnchorPoint ( AnchorPoint::CENTER );
+  footerLayout.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
+
+  PushButton okayButton = PushButton::New();
+  okayButton.SetName( POPUP_CONTROL_OK_NAME );
+  okayButton.SetStyleName( POPUP_CONTROL_OK_NAME );
+  okayButton.SetLabelText( "Ok!" );
+  okayButton.ClickedSignal().Connect( this, &StylingApplication::OnReset );
+  okayButton.SetParentOrigin( ParentOrigin::CENTER );
+  okayButton.SetAnchorPoint( AnchorPoint::CENTER );
+  okayButton.SetResizePolicy( ResizePolicy::SIZE_FIXED_OFFSET_FROM_PARENT, Dimension::ALL_DIMENSIONS );
+  okayButton.SetSizeModeFactor( Vector3( -20.0f, -20.0f, 0.0f ) );
+
+  PushButton cancelButton = PushButton::New();
+  cancelButton.SetName( POPUP_CONTROL_CANCEL_NAME );
+  cancelButton.SetStyleName( POPUP_CONTROL_CANCEL_NAME );
+  cancelButton.SetLabelText( "Cancel" );
+  cancelButton.ClickedSignal().Connect( this, &StylingApplication::OnResetCancelled );
+  cancelButton.SetParentOrigin( ParentOrigin::CENTER );
+  cancelButton.SetAnchorPoint( AnchorPoint::CENTER );
+  cancelButton.SetResizePolicy( ResizePolicy::SIZE_FIXED_OFFSET_FROM_PARENT, Dimension::ALL_DIMENSIONS );
+  cancelButton.SetSizeModeFactor( Vector3( -20.0f, -20.0f, 0.0f ) );
+
+  footerLayout.SetCellAlignment( TableView::CellPosition( 0, 0 ), HorizontalAlignment::CENTER, VerticalAlignment::CENTER );
+  footerLayout.SetCellAlignment( TableView::CellPosition( 0, 1 ), HorizontalAlignment::CENTER, VerticalAlignment::CENTER );
+  footerLayout.AddChild( okayButton, TableView::CellPosition( 0, 0 ) );
+  footerLayout.AddChild( cancelButton, TableView::CellPosition( 0, 1 ) );
+  footerLayout.SetCellPadding( Size( 10.f, 10.f ) );
+  footer.Add( footerLayout );
+
+  popup.SetFooter( footer );
+  return popup;
+}
+
+TextLabel StylingApplication::CreateTitle( std::string title )
+{
+  TextLabel titleActor = TextLabel::New( title );
+  titleActor.SetName( "titleActor" );
+  titleActor.SetStyleName( "PopupTitle" );
+  titleActor.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" );
+  titleActor.SetProperty( TextLabel::Property::MULTI_LINE, false );
+
+  return titleActor;
+}
+
+bool StylingApplication::OnButtonStateChange( Button button )
+{
+  // On button press, called twice, once to tell new button it's selected,
+  // once to tell old button it isn't selected?
+
+// Todo: save / restore slider states per image
+
+  if( button.IsSelected() )
+  {
+
+    ImageChannelControl prevIcc = mImageChannelControl;
+
+    if( mRadioButtons[0].IsSelected() )
+    {
+      mImageChannelControl = mIcc1;
+    }
+    else if( mRadioButtons[1].IsSelected() )
+    {
+      mImageChannelControl = mIcc2;
+    }
+    else if( mRadioButtons[2].IsSelected() )
+    {
+      mImageChannelControl = mIcc3;
+    }
+
+    if( prevIcc )
+    {
+      prevIcc.SetVisibility( false );
+    }
+
+    if( mImageChannelControl )
+    {
+      mImageChannelControl.SetVisibility( true );
+    }
+  }
+
+  return true;
+}
+
+bool StylingApplication::OnCheckButtonChange( Button button )
+{
+  Property::Index index = button.GetPropertyIndex("channel");
+  if( index != Property::INVALID_INDEX )
+  {
+    int channel = button.GetProperty<int>( index );
+    float value = mChannelSliders[channel].GetProperty<float>( Slider::Property::VALUE );
+    if( !button.IsSelected() )
+    {
+      // "Turn off" the channel's contribution
+      value = 0.0f;
+    }
+    Property::Index channelIndex = GetChannelProperty( channel );
+    mImageChannelControl.SetProperty(channelIndex, value/100.0f);
+  }
+  return true;
+}
+
+bool StylingApplication::OnThemeButtonClicked( Button button )
+{
+  int theme = button.GetProperty<int>(button.GetPropertyIndex("theme"));
+  const char* themePath=NULL;
+
+  switch( theme )
+  {
+    case 0:
+    {
+      themePath = DEMO_THEME_ONE_PATH;
+      break;
+    }
+    case 1:
+    {
+      themePath = DEMO_THEME_TWO_PATH;
+      break;
+    }
+    case 2:
+    {
+      themePath = DEMO_THEME_THREE_PATH;
+      break;
+    }
+  }
+
+  StyleManager::Get().ApplyTheme( themePath );
+
+  return true;
+}
+
+bool StylingApplication::OnResetClicked( Button button )
+{
+  if( ! mResetPopup )
+  {
+    mResetPopup = CreateResetPopup ();
+  }
+
+  Stage::GetCurrent().Add( mResetPopup );
+
+  mResetPopup.SetDisplayState( Popup::SHOWN );
+  return true;
+}
+
+bool StylingApplication::OnReset( Button button )
+{
+  // todo: Reset the sliders for this image
+  for( int i=0; i<3; ++i )
+  {
+    mChannelSliders[i].SetProperty( Slider::Property::VALUE, 100.0f );
+  }
+  HidePopup();
+  return true;
+}
+
+bool StylingApplication::OnResetCancelled( Button button )
+{
+  HidePopup();
+  return true;
+}
+
+bool StylingApplication::OnSliderChanged( Slider slider, float value )
+{
+  // todo - change color channel's saturation
+  Property::Index index = slider.GetPropertyIndex("channel");
+  if( index != Property::INVALID_INDEX )
+  {
+    int channel = slider.GetProperty<int>( index );
+    if( mCheckButtons[channel].IsSelected() )
+    {
+      Property::Index channelIndex = GetChannelProperty( channel );
+      mImageChannelControl.SetProperty(channelIndex, value/100.0f);
+    }
+  }
+  return true;
+}
+
+void StylingApplication::HidePopup()
+{
+  if( mResetPopup )
+  {
+    mResetPopup.SetDisplayState( Popup::HIDDEN );
+  }
+}
+
+void StylingApplication::PopupHidden()
+{
+  if( mResetPopup )
+  {
+    // Clear down resources
+    mResetPopup.Unparent();
+    mResetPopup.Reset();
+  }
+}
+
+void StylingApplication::OnPan( Actor actor, const PanGesture& gesture )
+{
+  Vector3 size = mContentPane.GetTargetSize();
+  mContentPane.SetSize( size.GetVectorXY() + gesture.displacement * 2.0f );
+}
+
+void StylingApplication::OnKeyEvent( const KeyEvent& keyEvent )
+{
+  static int keyPressed = 0;
+
+  if( keyEvent.state == KeyEvent::Down)
+  {
+    if( keyPressed == 0 ) // Is this the first down event?
+    {
+      printf("Key pressed: %s %d\n", keyEvent.keyPressedName.c_str(), keyEvent.keyCode );
+
+      if( IsKey( keyEvent, DALI_KEY_ESCAPE) || IsKey( keyEvent, DALI_KEY_BACK ) )
+      {
+        mApplication.Quit();
+      }
+      else if( keyEvent.keyPressedName.compare("Return") == 0 )
+      {
+        mCurrentTheme++;
+        mCurrentTheme %= NUMBER_OF_THEMES;
+
+        StyleManager styleManager = StyleManager::Get();
+        switch( mCurrentTheme )
+        {
+          case 0:
+          {
+            styleManager.ApplyTheme( DEMO_THEME_ONE_PATH );
+            printf("Changing to theme One\n");
+            break;
+          }
+          case 1:
+          {
+            styleManager.ApplyTheme( DEMO_THEME_TWO_PATH );
+            printf("Changing to theme Two\n");
+            break;
+          }
+          case 2:
+          {
+            styleManager.ApplyDefaultTheme();
+            printf("Changing to Toolkit theme\n");
+            break;
+          }
+        }
+      }
+    }
+    keyPressed = 1;
+  }
+  else if( keyEvent.state == KeyEvent::Up )
+  {
+    keyPressed = 0;
+  }
+}
+
+} // namespace Demo
diff --git a/examples/styling/styling-application.h b/examples/styling/styling-application.h
new file mode 100644
index 00000000..ad7af1b3
--- /dev/null
+++ b/examples/styling/styling-application.h
@@ -0,0 +1,101 @@
+#ifndef DALI_DEMO_STYLING_APPLICATION_H
+#define DALI_DEMO_STYLING_APPLICATION_H
+
+/*
+ * 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.
+ */
+
+// 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 "image-channel-control.h"
+#include <cstdio>
+#include <sstream>
+
+// Internal includes
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+namespace Demo
+{
+
+class StylingApplication : public ConnectionTracker
+{
+public:
+  // Constructor
+  StylingApplication( Application& application );
+
+  // Destructor
+  ~StylingApplication();
+
+  // Init signal handler
+  void Create( Application& application );
+
+  // Create the GUI components
+  Actor CreateContentPane();
+  Actor CreateResizableContentPane();
+  Toolkit::Popup CreateResetPopup();
+  Toolkit::TextLabel CreateTitle( std::string title );
+
+  // Key event handler
+  void OnKeyEvent( const KeyEvent& event );
+
+  // Button event handlers
+  bool OnButtonStateChange( Toolkit::Button button );
+  bool OnCheckButtonChange( Toolkit::Button button );
+  bool OnResetClicked( Toolkit::Button button );
+  bool OnThemeButtonClicked( Toolkit::Button button );
+
+  // Slider event handler
+  bool OnSliderChanged( Toolkit::Slider slider, float value );
+
+  // Popup event handlers
+  void HidePopup();
+  void PopupHidden();
+  bool OnReset(Button button);
+  bool OnResetCancelled(Button button);
+
+  // Grab handle handler
+  void OnPan( Actor actor, const PanGesture& gesture );
+
+  static const char* DEMO_THEME_ONE_PATH;
+  static const char* DEMO_THEME_TWO_PATH;
+  static const char* DEMO_THEME_THREE_PATH;
+
+private:
+  Application& mApplication;
+  int mCurrentTheme;
+  Actor mContentPane;
+  TextLabel mTitle;
+  RadioButton mRadioButtons[3]; // 3 demo images
+  CheckBoxButton mCheckButtons[3]; // rgb buttons
+  Slider mChannelSliders[3]; // rgb sliders
+  PushButton mThemeButtons[3];
+  PushButton mResetButton;
+  ImageChannelControl mImageChannelControl;
+  ImageChannelControl mIcc1;
+  ImageChannelControl mIcc2;
+  ImageChannelControl mIcc3;
+  Actor mImagePlacement;
+  Popup mResetPopup;
+  PanGestureDetector mPanGestureDetector;
+};
+
+} // Namespace Demo
+
+
+#endif // DALI_DEMO_STYLING_APPLICATION_H
diff --git a/examples/text-editor/text-editor-example.cpp b/examples/text-editor/text-editor-example.cpp
index eb83eecf..209c2800 100644
--- a/examples/text-editor/text-editor-example.cpp
+++ b/examples/text-editor/text-editor-example.cpp
@@ -40,7 +40,7 @@ const float   TOOLBAR_BUTTON_PERCENTAGE = 0.1f;                     ///< The but
 const float   TOOLBAR_TITLE_PERCENTAGE = 0.7f;                      ///< The title's width as a percentage of the toolbar's width.
 const float   TOOLBAR_HEIGHT_PERCENTAGE = 0.05f;                    ///< The toolbar's height as a percentage of the stage's height.
 const float   TOOLBAR_PADDING = 4.f;                                ///< The padding in pixels.
-const Vector3 BUTTON_PERCENTAGE( 0.8f, 0.8f, 1.f );                 ///< The button's width as a percentage of the space for the buttons in the toolbar.
+const float   BUTTON_PERCENTAGE = 0.8f;                             ///< The button's height as a percentage of the space for the buttons in the toolbar.
 const Vector3 TEXT_EDITOR_RELATIVE_SIZE( 1.f, 0.45f, 1.0f );        ///< The size of the text editor as a percentage of the stage's size.
 const Vector4 TEXT_EDITOR_BACKGROUND_COLOR( 1.f, 1.f, 1.f, 0.15f ); ///< The background color of the text editor.
 
@@ -62,7 +62,6 @@ const unsigned int NUMBER_OF_COLORS = sizeof( COLORS ) / sizeof( Vector4 );
 class TextEditorExample : public ConnectionTracker
 {
 public:
-
   TextEditorExample( Application& application )
   : mApplication( application )
   {
@@ -109,17 +108,46 @@ public:
                                              "",
                                              viewStyle );
 
+    // Create a label for the color selection button.
+    // The button will be a child of this, so as to be placed next to it.
+    TextLabel colorLabel = TextLabel::New( "Text Color: " );
+    colorLabel.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::WIDTH );
+    colorLabel.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::HEIGHT );
+    colorLabel.SetProperty( TextLabel::Property::VERTICAL_ALIGNMENT, "CENTER" );
+
+    // Create a container for the color button, to layout the drop-down list below it.
+    mColorContainer = Control::New();
+    mColorContainer.SetResizePolicy( ResizePolicy::DIMENSION_DEPENDENCY, Dimension::WIDTH );
+    mColorContainer.SetResizePolicy( ResizePolicy::SIZE_RELATIVE_TO_PARENT, Dimension::HEIGHT );
+    mColorContainer.SetSizeModeFactor( Vector3( 0.0f, BUTTON_PERCENTAGE, 0.0f ) );
+
+    // Place to right of parent.
+    mColorContainer.SetParentOrigin( ParentOrigin::CENTER_RIGHT );
+    mColorContainer.SetAnchorPoint( AnchorPoint::CENTER_LEFT );
+    colorLabel.Add( mColorContainer );
+
+    // Add border to highlight harder-to-see colors.
+    // We use a color rather than border visual as the container will always be behind the button.
+    Property::Map colorMap;
+    colorMap.Insert( Visual::Property::TYPE, Visual::COLOR);
+    colorMap.Insert( ColorVisual::Property::MIX_COLOR, Color::BLACK );
+    mColorContainer.SetProperty( Control::Property::BACKGROUND, colorMap );
+
     // Create a 'select color' button.
     mColorButtonOption = Toolkit::PushButton::New();
     mColorButtonOption.SetResizePolicy( ResizePolicy::SIZE_RELATIVE_TO_PARENT, Dimension::ALL_DIMENSIONS );
-    mColorButtonOption.SetSizeModeFactor( BUTTON_PERCENTAGE );
+    mColorButtonOption.SetSizeModeFactor( Vector3( 0.9f, 0.9f, 0.0f ) ); // Smaller than container to show border.
+    mColorButtonOption.SetParentOrigin( ParentOrigin::CENTER );
+    mColorButtonOption.SetAnchorPoint( AnchorPoint::CENTER );
 
     mColorButtonOption.SetProperty( Button::Property::UNSELECTED_COLOR, Color::BLACK );
     mColorButtonOption.SetProperty( Button::Property::SELECTED_COLOR, Color::BLACK );
 
     mColorButtonOption.ClickedSignal().Connect( this, &TextEditorExample::OnChangeColorButtonClicked );
+    mColorContainer.Add( mColorButtonOption );
 
-    mToolBar.AddControl( mColorButtonOption, viewStyle.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalLeft, DemoHelper::DEFAULT_MODE_SWITCH_PADDING  );
+    //Add label to toolbar, which will also add the color button next to it.
+    mToolBar.AddControl( colorLabel, viewStyle.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalLeft, DemoHelper::DEFAULT_MODE_SWITCH_PADDING  );
 
     // Create the text editor.
     mEditor = TextEditor::New();
@@ -152,27 +180,22 @@ public:
                          "Asšúm sapěret usu ůť.\n"
                          "Síť ut apeirián laboramúš percipitur, sůas hařum ín éos?\n" );
 
+    mEditor.InputStyleChangedSignal().Connect( this, &TextEditorExample::OnTextInputStyleChanged );
+
     contents.Add( mEditor );
   }
 
   void CreateButtonContainer()
   {
     mButtonContainer = Toolkit::TableView::New( NUMBER_OF_COLORS, 1u );
-    mButtonContainer.SetParentOrigin( ParentOrigin::TOP_LEFT );
-    mButtonContainer.SetAnchorPoint( AnchorPoint::TOP_LEFT );
-
-    Stage stage = Stage::GetCurrent();
-    const Vector2 stageSize = stage.GetSize();
-    const float toolBarHeight = TOOLBAR_HEIGHT_PERCENTAGE * stageSize.height;
-    mButtonContainer.SetPosition( TOOLBAR_PADDING, 2.f * TOOLBAR_PADDING + toolBarHeight, 0.f );
-
     mButtonContainer.SetResizePolicy( ResizePolicy::SIZE_RELATIVE_TO_PARENT, Dimension::ALL_DIMENSIONS );
+    mButtonContainer.SetSizeModeFactor( Vector3( 1.0f, NUMBER_OF_COLORS, 1.0f ) );
 
-    const Vector3 containerPercentage( 0.8f * TOOLBAR_BUTTON_PERCENTAGE, NUMBER_OF_COLORS, 1.f );
-    mButtonContainer.SetSizeModeFactor( containerPercentage );
-
-    Layer toolbarLayer = mToolBar.GetLayer();
-    toolbarLayer.Add( mButtonContainer );
+    // Place below color selection button.
+    mButtonContainer.SetParentOrigin( ParentOrigin::BOTTOM_CENTER  );
+    mButtonContainer.SetAnchorPoint( AnchorPoint::TOP_CENTER );
+    mButtonContainer.SetPosition( 0.0f, 2.f * TOOLBAR_PADDING, 0.f );
+    mColorContainer.Add( mButtonContainer );
 
     const Vector3 buttonPercentage( 1.f, 0.8f / static_cast<float>( NUMBER_OF_COLORS ), 1.f );
     for( unsigned int index = 0u; index < NUMBER_OF_COLORS; ++index )
@@ -222,18 +245,36 @@ public:
   {
     const std::string& name = button.GetName();
 
+    Vector4 color;
     if( "color" == name.substr( 0u, 5u ) )
     {
       const unsigned int index = strtoul( name.substr( 5u, 1u ).c_str(), NULL, 10u );
-      mEditor.SetProperty( TextEditor::Property::INPUT_COLOR, COLORS[index] );
+      color = COLORS[index];
+      mEditor.SetProperty( TextEditor::Property::INPUT_COLOR, color );
     }
 
+    mColorButtonOption.SetProperty( Button::Property::UNSELECTED_COLOR, color );
+    mColorButtonOption.SetProperty( Button::Property::SELECTED_COLOR, color );
+
     mButtonContainer.SetVisible( false );
     mButtonContainer.SetSensitive( false );
 
     return true;
   }
 
+  void OnTextInputStyleChanged( TextEditor editor, TextEditor::InputStyle::Mask mask )
+  {
+    if( TextEditor::InputStyle::NONE != static_cast<TextEditor::InputStyle::Mask>( mask & TextEditor::InputStyle::COLOR ) )
+    {
+      const Vector4 color = editor.GetProperty( TextEditor::Property::INPUT_COLOR ).Get<Vector4>();
+
+      mColorButtonOption.SetProperty( Button::Property::UNSELECTED_COLOR, color );
+      mColorButtonOption.SetProperty( Button::Property::SELECTED_COLOR, color );
+    }
+
+    editor.Reset();
+  }
+
 private:
 
   Application& mApplication;
@@ -241,6 +282,7 @@ private:
   Toolkit::Control    mView;
   Toolkit::ToolBar    mToolBar;
   Toolkit::TextEditor mEditor;
+  Toolkit::Control    mColorContainer;
   Toolkit::PushButton mColorButtonOption;
   Toolkit::TableView  mButtonContainer;
 };
diff --git a/examples/text-fonts/text-fonts-example.cpp b/examples/text-fonts/text-fonts-example.cpp
index 9cc4d8ee..be78963a 100644
--- a/examples/text-fonts/text-fonts-example.cpp
+++ b/examples/text-fonts/text-fonts-example.cpp
@@ -185,7 +185,7 @@ public:
     CreateTextLabel ( mLabel, LABEL_TEXT, Color::WHITE  );
 
     CreateTextLabel ( mLabel2, LABEL_TEXT, Color::WHITE  );
-    mLabel2.SetStyleName("textlabel-Rosemary");
+    mLabel2.SetStyleName("TextLabelRosemary");
 
     CreateTextLabel ( mLabel3, LABEL_TEXT, Color::WHITE  );
     mLabel3.SetProperty( TextLabel::Property::FONT_FAMILY, "SamsungOneUI" );
diff --git a/examples/text-label/text-label-example.cpp b/examples/text-label/text-label-example.cpp
index b2ad9a5b..c035ed63 100644
--- a/examples/text-label/text-label-example.cpp
+++ b/examples/text-label/text-label-example.cpp
@@ -34,42 +34,69 @@ using namespace MultiLanguageStrings;
 
 namespace
 {
-  const char* const BACKGROUND_IMAGE = DEMO_IMAGE_DIR "grab-handle.png";
-
-  const unsigned int KEY_ZERO = 10;
-  const unsigned int KEY_ONE = 11;
-  const unsigned int KEY_F = 41;
-  const unsigned int KEY_H = 43;
-  const unsigned int KEY_V = 55;
-  const unsigned int KEY_M = 58;
-  const unsigned int KEY_L = 46;
-  const unsigned int KEY_S = 39;
-  const unsigned int KEY_PLUS = 21;
-  const unsigned int KEY_MINUS = 20;
-
-  const char* H_ALIGNMENT_STRING_TABLE[] =
-  {
-    "BEGIN",
-    "CENTER",
-    "END"
-  };
+const char* const BACKGROUND_IMAGE = DEMO_IMAGE_DIR "grab-handle.png";
+
+const unsigned int KEY_ZERO = 10;
+const unsigned int KEY_ONE = 11;
+const unsigned int KEY_F = 41;
+const unsigned int KEY_H = 43;
+const unsigned int KEY_V = 55;
+const unsigned int KEY_M = 58;
+const unsigned int KEY_L = 46;
+const unsigned int KEY_S = 39;
+const unsigned int KEY_PLUS = 21;
+const unsigned int KEY_MINUS = 20;
+
+const char* H_ALIGNMENT_STRING_TABLE[] =
+{
+  "BEGIN",
+  "CENTER",
+  "END"
+};
+
+const unsigned int H_ALIGNMENT_STRING_COUNT = sizeof( H_ALIGNMENT_STRING_TABLE ) / sizeof( H_ALIGNMENT_STRING_TABLE[0u] );
+
+const char* V_ALIGNMENT_STRING_TABLE[] =
+{
+  "TOP",
+  "CENTER",
+  "BOTTOM"
+};
+
+const unsigned int V_ALIGNMENT_STRING_COUNT = sizeof( V_ALIGNMENT_STRING_TABLE ) / sizeof( V_ALIGNMENT_STRING_TABLE[0u] );
 
-  const unsigned int H_ALIGNMENT_STRING_COUNT = sizeof( H_ALIGNMENT_STRING_TABLE ) / sizeof( H_ALIGNMENT_STRING_TABLE[0u] );
+int ConvertToEven(int value)
+{
+  return (value % 2 == 0) ? value : (value + 1);
+}
 
-  const char* V_ALIGNMENT_STRING_TABLE[] =
+struct HSVColorConstraint
+{
+  HSVColorConstraint(float hue, float saturation, float value)
+  : hue(hue),
+    saturation(saturation),
+    value(value)
   {
-    "TOP",
-    "CENTER",
-    "BOTTOM"
-  };
+  }
 
-  const unsigned int V_ALIGNMENT_STRING_COUNT = sizeof( V_ALIGNMENT_STRING_TABLE ) / sizeof( V_ALIGNMENT_STRING_TABLE[0u] );
+  void operator()(Vector4& current, const PropertyInputContainer& inputs )
+  {
+    current = hsv2rgb(Vector4(inputs[0]->GetFloat(), saturation, value, current.a));
+  }
 
-  int ConvertToEven(int value)
+  Vector4 hsv2rgb(Vector4 colorHSV)
   {
-    return (value % 2 == 0) ? value : (value + 1);
+    float r=colorHSV.z*(1+colorHSV.y*(cos(colorHSV.x)-1));
+    float g=colorHSV.z*(1+colorHSV.y*(cos(colorHSV.x-2.09439)-1));
+    float b=colorHSV.z*(1+colorHSV.y*(cos(colorHSV.x+2.09439)-1));
+    return Vector4(r, g, b, colorHSV.a);
   }
-}
+  float hue;
+  float saturation;
+  float value;
+};
+
+} // anonymous namespace
 
 /**
  * @brief The main class of the demo.
@@ -134,6 +161,20 @@ public:
     mLabel.SetBackgroundColor( Color::WHITE );
     mContainer.Add( mLabel );
 
+    mHueAngleIndex = mLabel.RegisterProperty( "hue", 0.0f );
+    Renderer bgRenderer = mLabel.GetRendererAt(0);
+    mOverrideMixColorIndex = bgRenderer.GetPropertyIndex( ColorVisual::Property::MIX_COLOR );
+
+    Constraint constraint = Constraint::New<Vector4>( bgRenderer, mOverrideMixColorIndex, HSVColorConstraint(0.0f, 0.5f, 0.8f));
+    constraint.AddSource( Source( mLabel, mHueAngleIndex ) );
+    constraint.SetRemoveAction( Constraint::Discard );
+    constraint.Apply();
+
+    Animation anim = Animation::New(50.0f);
+    anim.AnimateTo(Property(mLabel, mHueAngleIndex), 6.28318f);
+    anim.SetLooping(true);
+    anim.Play();
+
     Property::Value labelText = mLabel.GetProperty( TextLabel::Property::TEXT );
     std::cout << "Displaying text: \"" << labelText.Get< std::string >() << "\"" << std::endl;
   }
@@ -284,6 +325,8 @@ private:
 
   unsigned int mLanguageId;
   unsigned int mAlignment;
+  Property::Index mHueAngleIndex;
+  Property::Index mOverrideMixColorIndex;
 };
 
 void RunTest( Application& application )
diff --git a/examples/video-view/video-view-example.cpp b/examples/video-view/video-view-example.cpp
index ddbc1a8d..c20b8f81 100644
--- a/examples/video-view/video-view-example.cpp
+++ b/examples/video-view/video-view-example.cpp
@@ -28,7 +28,7 @@ namespace
   const int INIT_HEIGHT( 400 );
   const int BUTTON_SIZE( 80 );
 
-  const char* const PLAY_FILE = DEMO_VIDEO_DIR "big_buck_bunny.mp4";
+  const char* const PLAY_FILE = DEMO_VIDEO_DIR "demoVideo.mp4";
   const char* const PLAY_IMAGE = DEMO_IMAGE_DIR "icon-play.png";
   const char* const PAUSE_IMAGE = DEMO_IMAGE_DIR "Pause.png";
   const char* const STOP_IMAGE = DEMO_IMAGE_DIR "icon-stop.png";
@@ -36,32 +36,6 @@ namespace
   const char* const FORWARD_IMAGE = DEMO_IMAGE_DIR "Forward.png";
   const char* const BACKWARD_IMAGE = DEMO_IMAGE_DIR "Backward.png";
 
-const char* DEFAULT_FRAGMENT_SHADER = DALI_COMPOSE_SHADER(
-  varying mediump vec2 vTexCoord;\n
-  uniform sampler2D sTexture;\n
-  uniform lowp vec4 uColor;\n
-  \n
-  void main()\n
-  {\n
-    gl_FragColor = texture2D( sTexture, vTexCoord ) * uColor;\n
-  }\n
-);
-
-const char* FRAGMENT_SHADER = DALI_COMPOSE_SHADER(
-  precision mediump float;
-  varying mediump vec2 vTexCoord;\n
-  uniform sampler2D sTexture;\n
-  uniform lowp vec4 uColor;\n
-  \n
-  void main()\n
-  {\n
-    vec2 st = vTexCoord.st;\n
-    vec3 irgb = texture2D( sTexture, st ).rgb;\n
-    vec3 negative = vec3( 1., 1., 1. ) - irgb;\n
-    gl_FragColor = vec4( mix( irgb, negative, 1.0), 1. ) * uColor;\n
-  }\n
-);
-
 }  // namespace
 
 class VideoViewController: public ConnectionTracker
@@ -73,7 +47,6 @@ class VideoViewController: public ConnectionTracker
       mIsPlay( false ),
       mIsStop( false ),
       mIsFullScreen( false ),
-      mSetCustomShader( false ),
       mScale( 1.f )
   {
     // Connect to the Application's Init signal
@@ -209,16 +182,6 @@ class VideoViewController: public ConnectionTracker
 
     Stage::GetCurrent().KeyEventSignal().Connect( this, &VideoViewController::OnKeyEvent );
 
-    Property::Map customShader;
-    customShader.Insert( Visual::Shader::Property::FRAGMENT_SHADER, FRAGMENT_SHADER );
-    mCustomShader.Insert( Visual::Property::TYPE, Visual::IMAGE );
-    mCustomShader.Insert( Visual::Property::SHADER, customShader );
-
-    Property::Map defaultShader;
-    customShader.Insert( Visual::Shader::Property::FRAGMENT_SHADER, DEFAULT_FRAGMENT_SHADER );
-    mDefaultShader.Insert( Visual::Property::TYPE, Visual::IMAGE );
-    mDefaultShader.Insert( Visual::Property::SHADER, customShader );
-
     mWindowSurfaceTarget.Insert( "RENDERING_TARGET", "windowSurfaceTarget" );
     mNativeImageTarget.Insert( "RENDERING_TARGET", "nativeImageTarget" );
 
@@ -350,17 +313,6 @@ class VideoViewController: public ConnectionTracker
     if( !mIsFullScreen )
     {
       mRotationAnimation.Play();
-
-      if( mSetCustomShader )
-      {
-        mSetCustomShader = false;
-        mVideoView.SetProperty( VideoView::Property::VIDEO, mDefaultShader );
-      }
-      else
-      {
-        mSetCustomShader = true;
-        mVideoView.SetProperty( VideoView::Property::VIDEO, mCustomShader );
-      }
     }
   }
 
@@ -389,7 +341,6 @@ private:
   bool mIsPlay;
   bool mIsStop;
   bool mIsFullScreen;
-  bool mSetCustomShader;
 
   PushButton mPlayButton;
   PushButton mPauseButton;
@@ -405,8 +356,6 @@ private:
   float mPinchStartScale;
 
   Animation mRotationAnimation;
-  Property::Map mCustomShader;
-  Property::Map mDefaultShader;
   Property::Map mWindowSurfaceTarget;
   Property::Map mNativeImageTarget;
 };
diff --git a/packaging/com.samsung.dali-demo.spec b/packaging/com.samsung.dali-demo.spec
index 7e5beb9d..76a23f74 100755
--- a/packaging/com.samsung.dali-demo.spec
+++ b/packaging/com.samsung.dali-demo.spec
@@ -2,7 +2,7 @@
 
 Name:       com.samsung.dali-demo
 Summary:    The OpenGLES Canvas Core Demo
-Version:    1.2.0
+Version:    1.2.14
 Release:    1
 Group:      System/Libraries
 License:    Apache-2.0
@@ -53,8 +53,9 @@ of the capability of the toolkit.
 %define smack_rule_dir        %TZ_SYS_SMACK/accesses2.d/
 %endif
 
+%define dali_app_res_dir      %{dali_app_ro_dir}/res/
 %define dali_app_exe_dir      %{dali_app_ro_dir}/bin/
-%define locale_dir            %{dali_app_ro_dir}/res/locale
+%define locale_dir            %{dali_app_res_dir}/locale
 %define local_style_dir       ../../resources/style/mobile
 
 ##############################
@@ -73,6 +74,7 @@ cd %{_builddir}/%{name}-%{version}/build/tizen
 
 cmake -DDALI_APP_DIR=%{dali_app_ro_dir} \
       -DLOCALE_DIR=%{locale_dir} \
+      -DDALI_APP_RES_DIR=%{dali_app_res_dir} \
 %if 0%{?enable_debug}
       -DCMAKE_BUILD_TYPE=Debug \
 %endif
@@ -89,12 +91,13 @@ make %{?jobs:-j%jobs}
 rm -rf %{buildroot}
 cd build/tizen
 %make_install DALI_APP_DIR=%{dali_app_ro_dir}
+%make_install DDALI_APP_RES_DIR=%{dali_app_res_dir}
 
 mkdir -p %{buildroot}%{dali_xml_file_dir}
 cp -f %{_builddir}/%{name}-%{version}/%{name}.xml %{buildroot}%{dali_xml_file_dir}
 
 mkdir -p %{buildroot}%{dali_icon_dir}
-mv %{buildroot}/%{dali_app_ro_dir}/images/%{name}.png %{buildroot}%{dali_icon_dir}
+mv %{buildroot}/%{dali_app_res_dir}/images/%{name}.png %{buildroot}%{dali_icon_dir}
 
 %if 0%{?enable_dali_smack_rules} && !%{with wayland}
 mkdir -p %{buildroot}%{smack_rule_dir}
@@ -133,11 +136,12 @@ exit 0
 %{dali_app_exe_dir}/dali-demo
 %{dali_app_exe_dir}/*.example
 %{dali_app_exe_dir}/dali-builder
-%{dali_app_ro_dir}/images/*
-%{dali_app_ro_dir}/videos/*
-%{dali_app_ro_dir}/models/*
-%{dali_app_ro_dir}/scripts/*
-%{dali_app_ro_dir}/style/*
+%{dali_app_res_dir}/images/*
+%{dali_app_res_dir}/videos/*
+%{dali_app_res_dir}/models/*
+%{dali_app_res_dir}/scripts/*
+%{dali_app_res_dir}/style/*
+%{dali_app_res_dir}/style/images/*
 %{dali_xml_file_dir}/%{name}.xml
 %{dali_icon_dir}/*
 %{locale_dir}/*
diff --git a/resources/images/bevelled-cube-button.png b/resources/images/bevelled-cube-button.png
index 77b7ed6a..4fcd0849 100644
--- a/resources/images/bevelled-cube-button.png
+++ b/resources/images/bevelled-cube-button.png
diff --git a/resources/images/cone-button.png b/resources/images/cone-button.png
index 6ad6c0ba..61d83075 100644
--- a/resources/images/cone-button.png
+++ b/resources/images/cone-button.png
diff --git a/resources/images/conical-frustrum-button.png b/resources/images/conical-frustrum-button.png
index be175631..c14c7e15 100644
--- a/resources/images/conical-frustrum-button.png
+++ b/resources/images/conical-frustrum-button.png
diff --git a/resources/images/cube-button.png b/resources/images/cube-button.png
index 29611bef..1e49e09d 100644
--- a/resources/images/cube-button.png
+++ b/resources/images/cube-button.png
diff --git a/resources/images/cylinder-button.png b/resources/images/cylinder-button.png
index 07d5494c..d2cc96c9 100644
--- a/resources/images/cylinder-button.png
+++ b/resources/images/cylinder-button.png
diff --git a/resources/images/demo-tile-texture.9.png b/resources/images/demo-tile-texture.9.png
new file mode 100644
index 00000000..e7a6a4d1
--- /dev/null
+++ b/resources/images/demo-tile-texture.9.png
diff --git a/resources/images/item-background-alpha.9.png b/resources/images/item-background-alpha.9.png
deleted file mode 100644
index 64579ddd..00000000
--- a/resources/images/item-background-alpha.9.png
+++ /dev/null
diff --git a/resources/images/item-background.9.png b/resources/images/item-background.9.png
index c5ec3939..93664ca7 100644
--- a/resources/images/item-background.9.png
+++ b/resources/images/item-background.9.png
diff --git a/resources/images/light-icon-back.png b/resources/images/light-icon-back.png
new file mode 100644
index 00000000..96b53f17
--- /dev/null
+++ b/resources/images/light-icon-back.png
diff --git a/resources/images/light-icon.png b/resources/images/light-icon-front.png
index ff9fcf74..ff9fcf74 100644
--- a/resources/images/light-icon.png
+++ b/resources/images/light-icon-front.png
diff --git a/resources/images/octahedron-button.png b/resources/images/octahedron-button.png
index 72bd52bf..a04a8b0b 100644
--- a/resources/images/octahedron-button.png
+++ b/resources/images/octahedron-button.png
diff --git a/resources/images/sparkle_normal_background.png b/resources/images/sparkle_normal_background.png
new file mode 100755
index 00000000..a416be0d
--- /dev/null
+++ b/resources/images/sparkle_normal_background.png
diff --git a/resources/images/sparkle_particle.png b/resources/images/sparkle_particle.png
new file mode 100755
index 00000000..836153e6
--- /dev/null
+++ b/resources/images/sparkle_particle.png
diff --git a/resources/images/sphere-button.png b/resources/images/sphere-button.png
index 319abb17..5ffc6f8b 100644
--- a/resources/images/sphere-button.png
+++ b/resources/images/sphere-button.png
diff --git a/resources/images/tile-focus.9.png b/resources/images/tile-focus.9.png
new file mode 100644
index 00000000..5d7d91f5
--- /dev/null
+++ b/resources/images/tile-focus.9.png
diff --git a/resources/po/as.po b/resources/po/as.po
index 3d30f88d..fc7c2046 100755
--- a/resources/po/as.po
+++ b/resources/po/as.po
@@ -1,3 +1,6 @@
+msgid "DALI_DEMO_STR_TITLE_ANIMATED_SHAPES"
+msgstr "অ্যানিমেটেড আকার"
+
 msgid "DALI_DEMO_STR_TITLE_BLOCKS"
 msgstr "অৱৰুদ্ধ কৰক"
 
@@ -10,6 +13,9 @@ msgstr "ক্লিক্"
 msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
 msgstr "ঝুৰ্"
 
+msgid "DALI_DEMO_STR_TITLE_CONTACT_CARDS"
+msgstr "অঁপইতা "
+
 msgid "DALI_DEMO_STR_TITLE_CUBE_TRANSITION"
 msgstr "ঘনক পৰিৱৰ্তনীয় প্ৰভাৱ"
 
@@ -88,6 +94,9 @@ msgstr "পৃষ্ঠা লেআউট"
 msgid "DALI_DEMO_STR_TITLE_POPUP"
 msgstr "পোপা মেনু"
 
+msgid "DALI_DEMO_STR_TITLE_PROGRESS_BAR"
+msgstr "অগ্রগতি বার"
+
 msgid "DALI_DEMO_STR_TITLE_PRIMITIVE_SHAPES"
 msgstr "অংশ্যমান অৰ্কিড"
 
@@ -106,6 +115,12 @@ msgstr "লিপি"
 msgid "DALI_DEMO_STR_TITLE_SCROLL_VIEW"
 msgstr "স্ক্ৰ'ল কৰক"
 
+msgid "DALI_DEMO_STR_TITLE_SPARKLE"
+msgstr "তাৰকা"
+
+msgid "DALI_DEMO_STR_TITLE_STYLING"
+msgstr "শৈলী"
+
 msgid "DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM"
 msgstr "অস্পষ্টকৈ অপুষ্পক"
 
@@ -128,4 +143,4 @@ msgid "DALI_DEMO_STR_TITLE_TEXT_SCROLLING"
 msgstr "অকনিষ্ঠ অৰ্জুন বঁটা"
 
 msgid "DALI_DEMO_STR_TITLE_TILT_SENSOR"
-msgstr "টিল্ট অনুভূতি"
\ No newline at end of file
+msgstr "টিল্ট অনুভূতি"
diff --git a/resources/po/de.po b/resources/po/de.po
index 8524b05e..7d3e41ca 100755
--- a/resources/po/de.po
+++ b/resources/po/de.po
@@ -1,3 +1,6 @@
+msgid "DALI_DEMO_STR_TITLE_ANIMATED_SHAPES"
+msgstr "Animierte Formen"
+
 msgid "DALI_DEMO_STR_TITLE_BLOCKS"
 msgstr "Blöcke"
 
@@ -8,7 +11,10 @@ msgid "DALI_DEMO_STR_TITLE_BUTTONS"
 msgstr "Tasten"
 
 msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
-msgstr "Farbverlauf "
+msgstr "Farbverlauf"
+
+msgid "DALI_DEMO_STR_TITLE_CONTACT_CARDS"
+msgstr "Kontakt"
 
 msgid "DALI_DEMO_STR_TITLE_CUBE_TRANSITION"
 msgstr "Würfel Übergangseffekt"
@@ -88,6 +94,9 @@ msgstr "Seite wechseln"
 msgid "DALI_DEMO_STR_TITLE_POPUP"
 msgstr "Popup-Menü"
 
+msgid "DALI_DEMO_STR_TITLE_PROGRESS_BAR"
+msgstr "Fortschrittsanzeige"
+
 msgid "DALI_DEMO_STR_TITLE_PRIMITIVE_SHAPES"
 msgstr "Grundformen"
 
@@ -106,6 +115,12 @@ msgstr "Scripting"
 msgid "DALI_DEMO_STR_TITLE_SCROLL_VIEW"
 msgstr "Scroll-Ansicht"
 
+msgid "DALI_DEMO_STR_TITLE_SPARKLE"
+msgstr "Funkeln"
+
+msgid "DALI_DEMO_STR_TITLE_STYLING"
+msgstr "Styling"
+
 msgid "DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM"
 msgstr "Unschärfe und blühen"
 
diff --git a/resources/po/en_GB.po b/resources/po/en_GB.po
index 3cbc74c8..e90637b4 100755
--- a/resources/po/en_GB.po
+++ b/resources/po/en_GB.po
@@ -1,3 +1,6 @@
+msgid "DALI_DEMO_STR_TITLE_ANIMATED_SHAPES"
+msgstr "Animated Shapes"
+
 msgid "DALI_DEMO_STR_TITLE_BLOCKS"
 msgstr "Blocks"
 
@@ -10,6 +13,9 @@ msgstr "Buttons"
 msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
 msgstr "Colour Gradient"
 
+msgid "DALI_DEMO_STR_TITLE_CONTACT_CARDS"
+msgstr "Contact Cards"
+
 msgid "DALI_DEMO_STR_TITLE_CUBE_TRANSITION"
 msgstr "Cube Effect"
 
@@ -88,6 +94,9 @@ msgstr "Page Turn View"
 msgid "DALI_DEMO_STR_TITLE_POPUP"
 msgstr "Popup"
 
+msgid "DALI_DEMO_STR_TITLE_PROGRESS_BAR"
+msgstr "Progress Bar"
+
 msgid "DALI_DEMO_STR_TITLE_PRIMITIVE_SHAPES"
 msgstr "Primitive Shapes"
 
@@ -106,6 +115,12 @@ msgstr "Script-based UI"
 msgid "DALI_DEMO_STR_TITLE_SCROLL_VIEW"
 msgstr "Scroll View"
 
+msgid "DALI_DEMO_STR_TITLE_SPARKLE"
+msgstr "Sparkle"
+
+msgid "DALI_DEMO_STR_TITLE_STYLING"
+msgstr "Styling"
+
 msgid "DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM"
 msgstr "Super Blur and Bloom"
 
diff --git a/resources/po/en_US.po b/resources/po/en_US.po
index aab93ba8..1d6c984d 100755
--- a/resources/po/en_US.po
+++ b/resources/po/en_US.po
@@ -1,3 +1,6 @@
+msgid "DALI_DEMO_STR_TITLE_ANIMATED_SHAPES"
+msgstr "Animated Shapes"
+
 msgid "DALI_DEMO_STR_TITLE_BLOCKS"
 msgstr "Blocks"
 
@@ -10,6 +13,9 @@ msgstr "Buttons"
 msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
 msgstr "Color Gradient"
 
+msgid "DALI_DEMO_STR_TITLE_CONTACT_CARDS"
+msgstr "Contact Cards"
+
 msgid "DALI_DEMO_STR_TITLE_CUBE_TRANSITION"
 msgstr "Cube Effect"
 
@@ -88,6 +94,9 @@ msgstr "Page Turn View"
 msgid "DALI_DEMO_STR_TITLE_POPUP"
 msgstr "Popup"
 
+msgid "DALI_DEMO_STR_TITLE_PROGRESS_BAR"
+msgstr "Progress Bar"
+
 msgid "DALI_DEMO_STR_TITLE_PRIMITIVE_SHAPES"
 msgstr "Primitive Shapes"
 
@@ -106,6 +115,12 @@ msgstr "Script-based UI"
 msgid "DALI_DEMO_STR_TITLE_SCROLL_VIEW"
 msgstr "Scroll View"
 
+msgid "DALI_DEMO_STR_TITLE_SPARKLE"
+msgstr "Sparkle"
+
+msgid "DALI_DEMO_STR_TITLE_STYLING"
+msgstr "Styling"
+
 msgid "DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM"
 msgstr "Super Blur and Bloom"
 
diff --git a/resources/po/es.po b/resources/po/es.po
index d3216e8c..1454c503 100755
--- a/resources/po/es.po
+++ b/resources/po/es.po
@@ -1,3 +1,6 @@
+msgid "DALI_DEMO_STR_TITLE_ANIMATED_SHAPES"
+msgstr "Formas Animadas"
+
 msgid "DALI_DEMO_STR_TITLE_BLOCKS"
 msgstr "Bloques"
 
@@ -10,6 +13,9 @@ msgstr "Botones"
 msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
 msgstr "Gradiente de color"
 
+msgid "DALI_DEMO_STR_TITLE_CONTACT_CARDS"
+msgstr "Contactos"
+
 msgid "DALI_DEMO_STR_TITLE_CUBE_TRANSITION"
 msgstr "Transición cubos"
 
@@ -88,6 +94,9 @@ msgstr "Vista de páginas"
 msgid "DALI_DEMO_STR_TITLE_POPUP"
 msgstr "Popup"
 
+msgid "DALI_DEMO_STR_TITLE_PROGRESS_BAR"
+msgstr "Barra de progreso"
+
 msgid "DALI_DEMO_STR_TITLE_PRIMITIVE_SHAPES"
 msgstr "Primitvas 3D"
 
@@ -106,6 +115,12 @@ msgstr "Interfaz definida por Script"
 msgid "DALI_DEMO_STR_TITLE_SCROLL_VIEW"
 msgstr "Vista de desplazamiento"
 
+msgid "DALI_DEMO_STR_TITLE_SPARKLE"
+msgstr "Brillar"
+
+msgid "DALI_DEMO_STR_TITLE_STYLING"
+msgstr "Estilo"
+
 msgid "DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM"
 msgstr "Efecto blur y bloom"
 
diff --git a/resources/po/fi.po b/resources/po/fi.po
new file mode 100755
index 00000000..dcbfb241
--- /dev/null
+++ b/resources/po/fi.po
@@ -0,0 +1,146 @@
+msgid "DALI_DEMO_STR_TITLE_ANIMATED_SHAPES"
+msgstr "Animoidut Muodot"
+
+msgid "DALI_DEMO_STR_TITLE_BLOCKS"
+msgstr "Lohko Peli"
+
+msgid "DALI_DEMO_STR_TITLE_BUBBLES"
+msgstr "Kuplat"
+
+msgid "DALI_DEMO_STR_TITLE_BUTTONS"
+msgstr "Painikkeet"
+
+msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
+msgstr "Liukuväri"
+
+msgid "DALI_DEMO_STR_TITLE_CONTACT_CARDS"
+msgstr "Yhteystietokortit"
+
+msgid "DALI_DEMO_STR_TITLE_CUBE_TRANSITION"
+msgstr "Kuutioefekti"
+
+msgid "DALI_DEMO_STR_TITLE_DISSOLVE_TRANSITION"
+msgstr "Häivytysefekti"
+
+msgid "DALI_DEMO_STR_TITLE_EFFECTS_VIEW"
+msgstr "Efektinäkymä"
+
+msgid "DALI_DEMO_STR_TITLE_EMOJI_TEXT"
+msgstr "Teksti Hymiöillä"
+
+msgid "DALI_DEMO_STR_TITLE_IMAGE_FITTING_SAMPLING"
+msgstr "Kuvien Sovitus ja Suodatus"
+
+msgid "DALI_DEMO_STR_TITLE_IMAGE_SCALING"
+msgstr "Kuvien Skaalaus"
+
+msgid "DALI_DEMO_STR_TITLE_IMAGE_VIEW"
+msgstr "Kuvanäkymä"
+
+msgid "DALI_DEMO_STR_TITLE_IMAGE_VIEW_ALPHA_BLENDING"
+msgstr "Kuvanäkymän Läpinäkyvyysmoodit"
+
+msgid "DALI_DEMO_STR_TITLE_IMAGE_VIEW_PIXEL_AREA"
+msgstr "Kuvanäkymän Pikselialue"
+
+msgid "DALI_DEMO_STR_TITLE_IMAGE_VIEW_SVG"
+msgstr "SVG Kuvanäkymä"
+
+msgid "DALI_DEMO_STR_TITLE_ITEM_VIEW"
+msgstr "Esinenäkymä"
+
+msgid "DALI_DEMO_STR_TITLE_LIGHTS_AND_SHADOWS"
+msgstr "Valot ja Varjot"
+
+msgid "DALI_DEMO_STR_TITLE_LINE_MESH"
+msgstr "Viivapolygoniverkko"
+
+msgid "DALI_DEMO_STR_TITLE_LOGGING"
+msgstr "Loggaus"
+
+msgid "DALI_DEMO_STR_TITLE_MAGNIFIER"
+msgstr "Suurennuslasi"
+
+msgid "DALI_DEMO_STR_TITLE_MESH_MORPH"
+msgstr "Polygoniverkon Muodonmuutos"
+
+msgid "DALI_DEMO_STR_TITLE_MESH_SORTING"
+msgstr "Polygoniverkon Lajittelu"
+
+msgid "DALI_DEMO_STR_TITLE_MESH_VISUAL"
+msgstr "Polygoniverkkovisuaali"
+
+msgid "DALI_DEMO_STR_TITLE_METABALL_EXPLOSION"
+msgstr "Metaball Räjähdys"
+
+msgid "DALI_DEMO_STR_TITLE_METABALL_REFRAC"
+msgstr "Metaball Valon Taittumisella"
+
+msgid "DALI_DEMO_STR_TITLE_MOTION_BLUR"
+msgstr "Liikesumennus"
+
+msgid "DALI_DEMO_STR_TITLE_MOTION_STRETCH"
+msgstr "Liikevenytys"
+
+msgid "DALI_DEMO_STR_TITLE_NATIVE_IMAGE_SOURCE"
+msgstr "Natiivi Kuvalähde"
+
+msgid "DALI_DEMO_STR_TITLE_NEGOTIATE_SIZE"
+msgstr "Kokoneuvottelu"
+
+msgid "DALI_DEMO_STR_TITLE_PAGE_TURN_VIEW"
+msgstr "Sivunkääntönäkymä"
+
+msgid "DALI_DEMO_STR_TITLE_POPUP"
+msgstr "Ponnahdusikkuna"
+
+msgid "DALI_DEMO_STR_TITLE_PROGRESS_BAR"
+msgstr "Edistymispalkki"
+
+msgid "DALI_DEMO_STR_TITLE_PRIMITIVE_SHAPES"
+msgstr "Primitiivimuodot"
+
+msgid "DALI_DEMO_STR_TITLE_RADIAL_MENU"
+msgstr "Säteittäinen Valikko"
+
+msgid "DALI_DEMO_STR_TITLE_REFRACTION"
+msgstr "Valon Taittuminen"
+
+msgid "DALI_DEMO_STR_TITLE_RENDERER_STENCIL"
+msgstr "Sapluuna Efekti"
+
+msgid "DALI_DEMO_STR_TITLE_SCRIPT_BASED_UI"
+msgstr "Skriptipohjainen UI"
+
+msgid "DALI_DEMO_STR_TITLE_SCROLL_VIEW"
+msgstr "Vieritysnäkymä"
+
+msgid "DALI_DEMO_STR_TITLE_SPARKLE"
+msgstr "Kimalteluefekti"
+
+msgid "DALI_DEMO_STR_TITLE_STYLING"
+msgstr "UI Tyyli"
+
+msgid "DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM"
+msgstr "Erikoissumennus ja Hehku efekti"
+
+msgid "DALI_DEMO_STR_TITLE_TEXTURED_MESH"
+msgstr "Teksturoitu Polygoniverkko"
+
+msgid "DALI_DEMO_STR_TITLE_TEXT_EDITOR"
+msgstr "Tekstieditori"
+
+msgid "DALI_DEMO_STR_TITLE_TEXT_FIELD"
+msgstr "Tekstikenttä"
+
+msgid "DALI_DEMO_STR_TITLE_TEXT_LABEL"
+msgstr "Tekstietiketti"
+
+msgid "DALI_DEMO_STR_TITLE_TEXT_LABEL_MULTI_LANGUAGE"
+msgstr "Monikielinen Teksti"
+
+msgid "DALI_DEMO_STR_TITLE_TEXT_SCROLLING"
+msgstr "Tekstin Vieritys"
+
+msgid "DALI_DEMO_STR_TITLE_TILT_SENSOR"
+msgstr "Kallistustunnistin"
diff --git a/resources/po/ko.po b/resources/po/ko.po
index b7cdee78..69775e47 100755
--- a/resources/po/ko.po
+++ b/resources/po/ko.po
@@ -1,3 +1,6 @@
+msgid "DALI_DEMO_STR_TITLE_ANIMATED_SHAPES"
+msgstr "애니메이션 모양"
+
 msgid "DALI_DEMO_STR_TITLE_BLOCKS"
 msgstr "블록"
 
@@ -5,10 +8,13 @@ msgid "DALI_DEMO_STR_TITLE_BUBBLES"
 msgstr "방울"
 
 msgid "DALI_DEMO_STR_TITLE_BUTTONS"
-msgstr ""
+msgstr "버튼"
 
 msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
-msgstr ""
+msgstr "색상 그라디언트"
+
+msgid "DALI_DEMO_STR_TITLE_CONTACT_CARDS"
+msgstr "접촉"
 
 msgid "DALI_DEMO_STR_TITLE_CUBE_TRANSITION"
 msgstr "입방체 전환"
@@ -17,28 +23,28 @@ msgid "DALI_DEMO_STR_TITLE_DISSOLVE_TRANSITION"
 msgstr "디졸브 전환"
 
 msgid "DALI_DEMO_STR_TITLE_EFFECTS_VIEW"
-msgstr ""
+msgstr "이펙트 뷰"
 
 msgid "DALI_DEMO_STR_TITLE_EMOJI_TEXT"
-msgstr ""
+msgstr "이모티콘 텍스트"
 
 msgid "DALI_DEMO_STR_TITLE_IMAGE_FITTING_SAMPLING"
-msgstr ""
+msgstr "이미지 조정 샘플링"
 
 msgid "DALI_DEMO_STR_TITLE_IMAGE_SCALING"
 msgstr "이미지 확대"
 
 msgid "DALI_DEMO_STR_TITLE_IMAGE_VIEW"
-msgstr ""
+msgstr "이미지 뷰"
 
 msgid "DALI_DEMO_STR_TITLE_IMAGE_VIEW_ALPHA_BLENDING"
-msgstr ""
+msgstr "이미지 뷰 알파 블렌딩"
 
 msgid "DALI_DEMO_STR_TITLE_IMAGE_VIEW_PIXEL_AREA"
-msgstr ""
+msgstr "이미지 뷰 픽셀 영역"
 
 msgid "DALI_DEMO_STR_TITLE_IMAGE_VIEW_SVG"
-msgstr ""
+msgstr "이미지 뷰 SVG"
 
 msgid "DALI_DEMO_STR_TITLE_ITEM_VIEW"
 msgstr "아이템 뷰"
@@ -47,28 +53,28 @@ msgid "DALI_DEMO_STR_TITLE_LIGHTS_AND_SHADOWS"
 msgstr "빛과 그림자"
 
 msgid "DALI_DEMO_STR_TITLE_LINE_MESH"
-msgstr ""
+msgstr "라인 메쉬"
 
 msgid "DALI_DEMO_STR_TITLE_LOGGING"
-msgstr ""
+msgstr "로깅"
 
 msgid "DALI_DEMO_STR_TITLE_MAGNIFIER"
 msgstr "돋보기"
 
 msgid "DALI_DEMO_STR_TITLE_MESH_MORPH"
-msgstr ""
+msgstr "메쉬 형태"
 
 msgid "DALI_DEMO_STR_TITLE_MESH_SORTING"
-msgstr ""
+msgstr "메쉬 분류"
 
 msgid "DALI_DEMO_STR_TITLE_MESH_VISUAL"
-msgstr ""
+msgstr "메쉬 비주얼"
 
 msgid "DALI_DEMO_STR_TITLE_METABALL_EXPLOSION"
-msgstr ""
+msgstr "메타볼 폭발"
 
 msgid "DALI_DEMO_STR_TITLE_METABALL_REFRAC"
-msgstr ""
+msgstr "메타볼 굴절"
 
 msgid "DALI_DEMO_STR_TITLE_MOTION_BLUR"
 msgstr "모션 블러"
@@ -77,19 +83,22 @@ msgid "DALI_DEMO_STR_TITLE_MOTION_STRETCH"
 msgstr "늘이기"
 
 msgid "DALI_DEMO_STR_TITLE_NATIVE_IMAGE_SOURCE"
-msgstr ""
+msgstr "네이티브 이미지 소스"
 
 msgid "DALI_DEMO_STR_TITLE_NEGOTIATE_SIZE"
-msgstr ""
+msgstr "사이즈 조절"
 
 msgid "DALI_DEMO_STR_TITLE_PAGE_TURN_VIEW"
 msgstr "책장 넘기기"
 
 msgid "DALI_DEMO_STR_TITLE_POPUP"
-msgstr ""
+msgstr "팝업"
+
+msgid "DALI_DEMO_STR_TITLE_PROGRESS_BAR"
+msgstr "진행률 표시 줄"
 
 msgid "DALI_DEMO_STR_TITLE_PRIMITIVE_SHAPES"
-msgstr ""
+msgstr "기본 모양"
 
 msgid "DALI_DEMO_STR_TITLE_RADIAL_MENU"
 msgstr "레이디 얼 메뉴"
@@ -98,7 +107,7 @@ msgid "DALI_DEMO_STR_TITLE_REFRACTION"
 msgstr "굴절 효과"
 
 msgid "DALI_DEMO_STR_TITLE_RENDERER_STENCIL"
-msgstr ""
+msgstr "렌더러 스텐실"
 
 msgid "DALI_DEMO_STR_TITLE_SCRIPT_BASED_UI"
 msgstr "스크립팅"
@@ -106,26 +115,32 @@ msgstr "스크립팅"
 msgid "DALI_DEMO_STR_TITLE_SCROLL_VIEW"
 msgstr "스크롤 뷰"
 
+msgid "DALI_DEMO_STR_TITLE_SPARKLE"
+msgstr "불꽃"
+
+msgid "DALI_DEMO_STR_TITLE_STYLING"
+msgstr "스타일링"
+
 msgid "DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM"
-msgstr ""
+msgstr "블러링 이펙트"
 
 msgid "DALI_DEMO_STR_TITLE_TEXTURED_MESH"
-msgstr ""
+msgstr "텍스쳐 메쉬"
 
 msgid "DALI_DEMO_STR_TITLE_TEXT_EDITOR"
-msgstr ""
+msgstr "텍스트 편집기"
 
 msgid "DALI_DEMO_STR_TITLE_TEXT_FIELD"
-msgstr ""
+msgstr "텍스트 필드"
 
 msgid "DALI_DEMO_STR_TITLE_TEXT_LABEL"
 msgstr "텍스트 라벨"
 
 msgid "DALI_DEMO_STR_TITLE_TEXT_LABEL_MULTI_LANGUAGE"
-msgstr ""
+msgstr "다국어"
 
 msgid "DALI_DEMO_STR_TITLE_TEXT_SCROLLING"
-msgstr ""
+msgstr "텍스트 스크롤"
 
 msgid "DALI_DEMO_STR_TITLE_TILT_SENSOR"
-msgstr ""
\ No newline at end of file
+msgstr "기울기 센서"
diff --git a/resources/po/ml.po b/resources/po/ml.po
index 1f477a5c..10fd9e36 100755
--- a/resources/po/ml.po
+++ b/resources/po/ml.po
@@ -1,3 +1,6 @@
+msgid "DALI_DEMO_STR_TITLE_ANIMATED_SHAPES"
+msgstr "ആനിമേഷൻ രൂപങ്ങൾ"
+
 msgid "DALI_DEMO_STR_TITLE_BLOCKS"
 msgstr "തടയപ്പെട്ട"
 
@@ -10,6 +13,9 @@ msgstr "ബട്ടണുകൾ"
 msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
 msgstr "വർണ്ണ ഗ്രേഡിയന്റ്"
 
+msgid "DALI_DEMO_STR_TITLE_CONTACT_CARDS"
+msgstr "ബന്ധങ്ങൾ"
+
 msgid "DALI_DEMO_STR_TITLE_CUBE_TRANSITION"
 msgstr "സമചതുരക്കട്ട സംക്രമണ ഇഫക്ട്"
 
@@ -88,6 +94,9 @@ msgstr "പേജ് ലേഔട്ട്"
 msgid "DALI_DEMO_STR_TITLE_POPUP"
 msgstr "പോപപ്പ് മെനുവിൽ"
 
+msgid "DALI_DEMO_STR_TITLE_PROGRESS_BAR"
+msgstr "പ്രോഗ്രസ് ബാർ"
+
 msgid "DALI_DEMO_STR_TITLE_PRIMITIVE_SHAPES"
 msgstr "അടിസ്ഥാന രൂപങ്ങൾ"
 
@@ -106,6 +115,12 @@ msgstr "സ്ക്രിപ്റ്റ്"
 msgid "DALI_DEMO_STR_TITLE_SCROLL_VIEW"
 msgstr "സ്ക്രോള്ചെയ്യുക കാഴ്ച"
 
+msgid "DALI_DEMO_STR_TITLE_SPARKLE"
+msgstr "നക്ഷത്ര"
+
+msgid "DALI_DEMO_STR_TITLE_STYLING"
+msgstr "ശൈലി"
+
 msgid "DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM"
 msgstr "മങ്ങൽ പൂക്കൽ"
 
@@ -128,4 +143,4 @@ msgid "DALI_DEMO_STR_TITLE_TEXT_SCROLLING"
 msgstr "ടെക്സ്റ്റ് സ്ക്രോളിംഗ്"
 
 msgid "DALI_DEMO_STR_TITLE_TILT_SENSOR"
-msgstr "ചെരിവ് സെൻസർ"
\ No newline at end of file
+msgstr "ചെരിവ് സെൻസർ"
diff --git a/resources/po/ur.po b/resources/po/ur.po
index 935a8ab7..49d552f1 100755
--- a/resources/po/ur.po
+++ b/resources/po/ur.po
@@ -1,3 +1,6 @@
+msgid "DALI_DEMO_STR_TITLE_ANIMATED_SHAPES"
+msgstr "متحرک شکلیں"
+
 msgid "DALI_DEMO_STR_TITLE_BLOCKS"
 msgstr "اینٹیں"
 
@@ -10,6 +13,9 @@ msgstr "بٹنوں"
 msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
 msgstr "رنگ میلان"
 
+msgid "DALI_DEMO_STR_TITLE_CONTACT_CARDS"
+msgstr "لوگ"
+
 msgid "DALI_DEMO_STR_TITLE_CUBE_TRANSITION"
 msgstr "کیوب منتقلی"
 
@@ -88,6 +94,9 @@ msgstr "کتاب"
 msgid "DALI_DEMO_STR_TITLE_POPUP"
 msgstr "پاپ اپ"
 
+msgid "DALI_DEMO_STR_TITLE_PROGRESS_BAR"
+msgstr "ترقی بار"
+
 msgid "DALI_DEMO_STR_TITLE_PRIMITIVE_SHAPES"
 msgstr "سادہ ماڈلیے"
 
@@ -106,6 +115,12 @@ msgstr "سکرپٹ"
 msgid "DALI_DEMO_STR_TITLE_SCROLL_VIEW"
 msgstr "سکرول ویو"
 
+msgid "DALI_DEMO_STR_TITLE_SPARKLE"
+msgstr "سٹار"
+
+msgid "DALI_DEMO_STR_TITLE_STYLING"
+msgstr "سٹائل"
+
 msgid "DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM"
 msgstr "دھندلاپن اور بلوم"
 
diff --git a/resources/po/zn_CH.po b/resources/po/zn_CH.po
index 17c43abe..b2684111 100755
--- a/resources/po/zn_CH.po
+++ b/resources/po/zn_CH.po
@@ -1,3 +1,6 @@
+msgid "DALI_DEMO_STR_TITLE_ANIMATED_SHAPES"
+msgstr "动画造型"
+
 msgid "DALI_DEMO_STR_TITLE_BLOCKS"
 msgstr "块体"
 
@@ -10,6 +13,9 @@ msgstr "按钮"
 msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
 msgstr "颜色梯度"
 
+msgid "DALI_DEMO_STR_TITLE_CONTACT_CARDS"
+msgstr "往来"
+
 msgid "DALI_DEMO_STR_TITLE_CUBE_TRANSITION"
 msgstr "方块切换效果"
 
@@ -88,6 +94,9 @@ msgstr "翻页"
 msgid "DALI_DEMO_STR_TITLE_POPUP"
 msgstr "弹窗"
 
+msgid "DALI_DEMO_STR_TITLE_PROGRESS_BAR"
+msgstr "进度条"
+
 msgid "DALI_DEMO_STR_TITLE_PRIMITIVE_SHAPES"
 msgstr "基本形状"
 
@@ -106,6 +115,12 @@ msgstr "脚本用户界面"
 msgid "DALI_DEMO_STR_TITLE_SCROLL_VIEW"
 msgstr "滚动视图"
 
+msgid "DALI_DEMO_STR_TITLE_SPARKLE"
+msgstr "火花"
+
+msgid "DALI_DEMO_STR_TITLE_STYLING"
+msgstr "样式"
+
 msgid "DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM"
 msgstr "模糊及泛光"
 
@@ -128,4 +143,4 @@ msgid "DALI_DEMO_STR_TITLE_TEXT_SCROLLING"
 msgstr "滚动文字"
 
 msgid "DALI_DEMO_STR_TITLE_TILT_SENSOR"
-msgstr "倾斜传感器"
\ No newline at end of file
+msgstr "倾斜传感器"
diff --git a/resources/style/.gitignore b/resources/style/.gitignore
new file mode 100644
index 00000000..d9670800
--- /dev/null
+++ b/resources/style/.gitignore
@@ -0,0 +1,5 @@
+demo-theme.json
+contact-cards-example-theme.json
+style-example-theme-three.json
+style-example-theme-two.json
+style-example-theme-one.json
diff --git a/resources/style/contact-cards-example-theme.json.in b/resources/style/contact-cards-example-theme.json.in
new file mode 100644
index 00000000..3a1448f2
--- /dev/null
+++ b/resources/style/contact-cards-example-theme.json.in
@@ -0,0 +1,35 @@
+/*
+ * 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.
+ *
+ */
+
+{
+  "styles":
+  {
+    "ContactNameTextLabel":
+    {
+      "textColor": [ 0, 0, 0, 1 ],
+      "horizontalAlignment": "CENTER",
+      "pointSize": 14
+    },
+
+    "ContactDetailTextLabel":
+    {
+      "textColor": [ 0, 0, 0, 1 ],
+      "multiLine": true,
+      "pointSize": 20
+    }
+  }
+}
diff --git a/resources/style/demo-theme.json.in b/resources/style/demo-theme.json.in
index 3e680ba4..f9c0d99f 100644
--- a/resources/style/demo-theme.json.in
+++ b/resources/style/demo-theme.json.in
@@ -15,57 +15,54 @@
  */
 
 {
-  "constants":
-  {
-    "DEMO_IMAGE_DIR":"@DEMO_STYLE_IMAGE_DIR@"
-  },
-
   "styles":
   {
-    "confirmationpopup":{
-      "popupBackgroundImage":"{DEMO_IMAGE_DIR}00_popup_bg.9.png"
+    "ConfirmationPopup":{
+      "popupBackgroundImage":"{APPLICATION_RESOURCE_PATH}/images/00_popup_bg.9.png"
     },
 
-    "textlabel-Rosemary":
+    "TextLabelRosemary":
     {
       "fontFamily":"Rosemary"
     },
-    "textlabel":
+    "TextLabel":
     {
-      "fontStyle":"Regular",
+      "fontStyle":{"weight":"normal"},
       "pointSize":18
     },
-    "launcherlabel":
+    "LauncherLabel":
     {
       "pointSize":18
     },
 
-    "toolbarlabel":
+    "ToolbarLabel":
     {
       "pointSize":18
     },
 
-    "builderlabel":
+    "BuilderLabel":
     {
       "pointSize":13
     },
 
-    "scrollview":
+    "ScrollView":
     {
       "overshootEffectColor":"B018"
     },
 
-    "grouplabel":
+    "ImageScalingGroupLabel":
     {
       "pointSize":9
     },
 
-    "buttonlabel":
+    "ImageScalingButton":
     {
-      "pointSize":11
+      "label":{
+        "pointSize":11
+      }
     },
 
-    "launcherbackground":
+    "LauncherBackground":
     {
       "background":
       {
diff --git a/resources/style/images/.gitignore b/resources/style/images/.gitignore
new file mode 100644
index 00000000..01b9fd9c
--- /dev/null
+++ b/resources/style/images/.gitignore
@@ -0,0 +1 @@
+*.xcf
diff --git a/resources/style/images/00_popup_bg.9.png b/resources/style/images/00_popup_bg.9.png
new file mode 100644
index 00000000..f0e84ff7
--- /dev/null
+++ b/resources/style/images/00_popup_bg.9.png
diff --git a/resources/style/images/radio-button-selected.png b/resources/style/images/radio-button-selected.png
new file mode 100644
index 00000000..96411bcd
--- /dev/null
+++ b/resources/style/images/radio-button-selected.png
diff --git a/resources/style/images/radio-button-unselected-disabled.png b/resources/style/images/radio-button-unselected-disabled.png
new file mode 100644
index 00000000..d2d8d24c
--- /dev/null
+++ b/resources/style/images/radio-button-unselected-disabled.png
diff --git a/resources/style/images/radio-button-unselected.png b/resources/style/images/radio-button-unselected.png
new file mode 100644
index 00000000..bdf4abd8
--- /dev/null
+++ b/resources/style/images/radio-button-unselected.png
diff --git a/resources/style/images/slider-skin-progress-blue.9.png b/resources/style/images/slider-skin-progress-blue.9.png
new file mode 100644
index 00000000..94772807
--- /dev/null
+++ b/resources/style/images/slider-skin-progress-blue.9.png
diff --git a/resources/style/images/slider-skin-progress-green.9.png b/resources/style/images/slider-skin-progress-green.9.png
new file mode 100644
index 00000000..6738075d
--- /dev/null
+++ b/resources/style/images/slider-skin-progress-green.9.png
diff --git a/resources/style/images/slider-skin-progress-red.9.png b/resources/style/images/slider-skin-progress-red.9.png
new file mode 100644
index 00000000..6c8cdbbe
--- /dev/null
+++ b/resources/style/images/slider-skin-progress-red.9.png
diff --git a/resources/style/mobile/contact-cards-example-theme.json.in b/resources/style/mobile/contact-cards-example-theme.json.in
new file mode 100644
index 00000000..03ece785
--- /dev/null
+++ b/resources/style/mobile/contact-cards-example-theme.json.in
@@ -0,0 +1,35 @@
+/*
+ * 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.
+ *
+ */
+
+{
+  "styles":
+  {
+    "ContactNameTextLabel":
+    {
+      "textColor": [ 0, 0, 0, 1 ],
+      "horizontalAlignment": "CENTER",
+      "pointSize": 7
+    },
+
+    "ContactDetailTextLabel":
+    {
+      "textColor": [ 0, 0, 0, 1 ],
+      "multiLine": true,
+      "pointSize": 13
+    }
+  }
+}
diff --git a/resources/style/mobile/demo-theme.json.in b/resources/style/mobile/demo-theme.json.in
index 86a6b572..f42198ea 100644
--- a/resources/style/mobile/demo-theme.json.in
+++ b/resources/style/mobile/demo-theme.json.in
@@ -18,67 +18,67 @@
 {
   "styles":
   {
-    "textlabel-Rosemary":
+    "TextLabelRosemary":
     {
       "fontFamily":"Rosemary"
     },
-    "textlabel":
+    "TextLabel":
     {
-      "fontStyle":"Regular",
+      "fontStyle":{"weight":"normal"},
       "pointSize":18
     },
-    "textlabelFontSize0":
+    "TextLabelFontSize0":
     {
       "pointSize":8
     },
-    "textlabelFontSize1":
+    "TextLabelFontSize1":
     {
       "pointSize":10
     },
-    "textlabelFontSize2":
+    "TextLabelFontSize2":
     {
       "pointSize":15
     },
-    "textlabelFontSize3":
+    "TextLabelFontSize3":
     {
       "pointSize":19
     },
-    "textlabelFontSize4":
+    "TextLabelFontSize4":
     {
       "pointSize":25
     },
 
-    "launcherlabel":
+    "Launcherlabel":
     {
       "pointSize":8
     },
 
-    "toolbarlabel":
+    "ToolbarLabel":
     {
       "pointSize":10
     },
 
-    "builderlabel":
+    "BuilderLabel":
     {
       "pointSize":10
     },
 
-    "scrollview":
+    "ScrollView":
     {
       "overshootEffectColor":"B018"
     },
 
-    "grouplabel":
+    "GroupLabel":
     {
       "pointSize":6
     },
 
-    "buttonlabel":
+    "ButtonLabel":
     {
       "pointSize":8
     },
 
-    "launcherbackground":
+    "LauncherBackground":
     {
       "background":
       {
diff --git a/resources/style/mobile/images/radio-button-selected.png b/resources/style/mobile/images/radio-button-selected.png
new file mode 100644
index 00000000..96411bcd
--- /dev/null
+++ b/resources/style/mobile/images/radio-button-selected.png
diff --git a/resources/style/mobile/images/radio-button-unselected-disabled.png b/resources/style/mobile/images/radio-button-unselected-disabled.png
new file mode 100644
index 00000000..d2d8d24c
--- /dev/null
+++ b/resources/style/mobile/images/radio-button-unselected-disabled.png
diff --git a/resources/style/mobile/images/radio-button-unselected.png b/resources/style/mobile/images/radio-button-unselected.png
new file mode 100644
index 00000000..bdf4abd8
--- /dev/null
+++ b/resources/style/mobile/images/radio-button-unselected.png
diff --git a/resources/style/mobile/images/slider-skin-progress-blue.9.png b/resources/style/mobile/images/slider-skin-progress-blue.9.png
new file mode 100644
index 00000000..94772807
--- /dev/null
+++ b/resources/style/mobile/images/slider-skin-progress-blue.9.png
diff --git a/resources/style/mobile/images/slider-skin-progress-green.9.png b/resources/style/mobile/images/slider-skin-progress-green.9.png
new file mode 100644
index 00000000..6738075d
--- /dev/null
+++ b/resources/style/mobile/images/slider-skin-progress-green.9.png
diff --git a/resources/style/mobile/images/slider-skin-progress-red.9.png b/resources/style/mobile/images/slider-skin-progress-red.9.png
new file mode 100644
index 00000000..6c8cdbbe
--- /dev/null
+++ b/resources/style/mobile/images/slider-skin-progress-red.9.png
diff --git a/resources/style/mobile/style-example-theme-one.json.in b/resources/style/mobile/style-example-theme-one.json.in
new file mode 100644
index 00000000..8d185892
--- /dev/null
+++ b/resources/style/mobile/style-example-theme-one.json.in
@@ -0,0 +1,115 @@
+{
+  "styles":
+  {
+    "Title":{
+      "textColor":"#0000ff",
+      "background":
+      {
+        "visualType":"COLOR",
+        "mixColor": [ 1.0, 1.0, 1.0, 1.0 ]
+      }
+    },
+    "TableView":{
+      "background":
+      {
+        "visualType":"COLOR",
+        "mixColor": [ 1.0, 1.0, 1.0, 0.03 ]
+      }
+    },
+    "FlexContainer":{
+      "background":
+      {
+        "visualType":"COLOR",
+        "mixColor": [ 1.0, 1.0, 1.0, 0.1 ]
+      }
+    },
+    "RadioButton":{
+      "label":{
+        "textColor": [1,1,1,1]
+      }
+    },
+    "CheckBoxButton":{
+      "label":{
+        "textColor": [1,1,1,1]
+      }
+    },
+    "ColorLabel1":{
+      "textColor": [1,0,0,1]
+    },
+    "ColorLabel2":{
+      "textColor": [0,1,0,1]
+    },
+    "ColorLabel3":{
+      "textColor": [0.3,0.3,1,1]
+    },
+    "ThemeLabel":{
+      "textColor":[0,1,1,1]
+    },
+    "PopupTitle":{
+      "textColor":[1,1,1,1]
+    },
+    "PopupBody":{
+      "textColor":[1,1,0,1]
+    },
+    "TextLabel":{
+      "textColor":[0,0,0,1]
+    },
+    "ColorSlider1":{
+      "styles":["Slider"]
+    },
+    "ColorSlider2":{
+      "styles":["slider"]
+    },
+    "ColorSlider3":{
+      "styles":["slider"]
+    },
+    "ImageChannelControl":
+    {
+      "enableVisibilityTransition":
+      [
+        {
+          "target":"imageVisual",
+          "property":"colorAlpha",
+          "initialValue":0,
+          "targetValue":1,
+          "animator":
+          {
+            "alphaFunction":"EASE_IN_OUT",
+            "timePeriod":
+            {
+              "duration":0.25,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"imageVisual",
+          "property":"scale",
+          "targetValue":[1,1,1]
+        }
+      ],
+      "disableVisibilityTransition":
+      [
+        {
+          "target":"imageVisual",
+          "property":"colorAlpha",
+          "targetValue":0,
+          "animator":
+          {
+            "alphaFunction":"EASE_IN_OUT",
+            "timePeriod":
+            {
+              "duration":0.25,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"imageVisual",
+          "property":"scale",
+          "targetValue":[1,1,1]
+        }
+      ]
+    }
+  }
+}
diff --git a/resources/style/mobile/style-example-theme-three.json.in b/resources/style/mobile/style-example-theme-three.json.in
new file mode 100644
index 00000000..88aad449
--- /dev/null
+++ b/resources/style/mobile/style-example-theme-three.json.in
@@ -0,0 +1,109 @@
+{
+  "styles":
+  {
+    "Title":{
+      "textColor":"#0000ff",
+      "background":
+      {
+        "visualType":"COLOR",
+        "mixColor": [ 1.0, 1.0, 1.0, 1.0 ]
+      }
+    },
+    "TableView":{
+      "background":
+      {
+        "visualType":"COLOR",
+        "mixColor": [ 1.0, 1.0, 1.0, 0.03 ]
+      }
+    },
+    "RadioButton":{
+      "label":{
+        "textColor": [1,1,1,1]
+      }
+    },
+    "CheckboxButton":{
+      "label":{
+        "textColor": [1,1,1,1]
+      }
+    },
+    "ColorLabel1":{
+      "textColor": [1,0,0,1]
+    },
+    "ColorLabel2":{
+      "textColor": [0,1,0,1]
+    },
+    "ColorLabel3":{
+      "textColor": [0.3,0.3,1,1]
+    },
+    "ThemeLabel":{
+      "textColor":[0,1,1,1]
+    },
+    "PopupTitle":{
+      "textColor":[1,1,1,1]
+    },
+    "PopupBody":{
+      "textColor":[1,1,0,1]
+    },
+    "TextLabel":{
+      "textColor":[0,0,0,1]
+    },
+    "ImageChannelControl":
+    {
+      "enableVisibilityTransition":
+      [
+        {
+          "target":"imageVisual",
+          "property":"scale",
+          "initialValue":[0.1,0.1,0.1],
+          "targetValue":[1,1,1],
+          "animator":
+          {
+            "alphaFunction":"EASE_IN",
+            "timePeriod":
+            {
+              "duration":0.3,
+              "delay":0.1
+            }
+          }
+        },
+        {
+          "target":"imageVisual",
+          "property":"colorAlpha",
+          "targetValue":1
+        }
+      ],
+      "disableVisibilityTransition":
+      [
+        {
+          "target":"imageVisual",
+          "property":"scale",
+          "initialValue":[1,1,1],
+          "targetValue":[0.1,0.1,0.1],
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT",
+            "timePeriod":
+            {
+              "duration":0.3,
+              "delay":0.0
+            }
+          }
+        },
+        {
+          "target":"imageVisual",
+          "property":"colorAlpha",
+          "targetValue":0,
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT",
+            "timePeriod":
+            {
+              "duration":0.3,
+              "delay":0.0
+            }
+          }
+        }
+      ]
+    }
+  }
+}
diff --git a/resources/style/mobile/style-example-theme-two.json.in b/resources/style/mobile/style-example-theme-two.json.in
new file mode 100644
index 00000000..9a999880
--- /dev/null
+++ b/resources/style/mobile/style-example-theme-two.json.in
@@ -0,0 +1,140 @@
+{
+  "constants":
+  {
+    "STYLE_DIR":"{APPLICATION_RESOURCE_PATH}/style"
+  },
+  "styles":
+  {
+    "Title":{
+      "textColor":"#0000ff",
+      "background":
+      {
+        "visualType":"COLOR",
+        "mixColor": [ 1.0, 1.0, 1.0, 1.0 ]
+      }
+    },
+    "TableView":{
+      "background":
+      {
+        "visualType":"GRADIENT",
+        "startPosition": [0,-1],
+        "endPosition": [0,1],
+        "stopColor": [ [ 1.0, 0.0, 1.0, 0.03 ], [1.0,0.0,1.0,0.15] ]
+      }
+    },
+
+    // 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,
+      "label":{
+        "textColor": [0.1,1,1,1]
+      }
+    },
+    "checkboxbutton":{
+      "label":{
+        "textColor": [1,1,1,1]
+      }
+    },
+    "colorLabel1":{
+      "textColor": [1,0,0,1]
+    },
+    "colorLabel2":{
+      "textColor": [0,1,0,1]
+    },
+    "colorLabel3":{
+      "textColor": [0.3,0.3,1,1]
+    },
+    "themelabel":{
+      "textColor":[0,1,1,1]
+    },
+    "popupTitle":{
+      "textColor":[1,1,1,1]
+    },
+    "popupBody":{
+      "textColor":[1,1,0,1]
+    },
+
+    // Note, this overrides any non-renamed label styles, e.g. those in a button.
+    "TextLabel":{
+      //"textColor":[0,0,0,1]
+    },
+
+    "ThinSlider":{
+      "styles": ["slider"],
+      "showPopup":true,
+      "showValue":false,
+      "valuePrecision":0,
+      "handleVisual":{
+        "size":[48,48]
+      },
+      "trackVisual":{
+        "size":[10, 10]
+      },
+      "enabled":true
+    },
+    "ColorSlider1":{
+      "styles":["ThinSlider"],
+      "progressVisual":{
+        "url":"{STYLE_DIR}/images/slider-skin-progress-red.9.png"
+      }
+    },
+    "ColorSlider2":{
+      "styles":["ThinSlider"],
+      "progressVisual":{
+        "url":"{STYLE_DIR}/images/slider-skin-progress-green.9.png"
+      }
+    },
+    "ColorSlider3":{
+      "styles":["thinslider"],
+      "progressVisual":{
+        "url":"{STYLE_DIR}/images/slider-skin-progress-blue.9.png"
+      }
+    },
+    "ImageChannelControl":
+    {
+      "enableVisibilityTransition":
+      [
+        {
+          "target":"imageVisual",
+          "property":"colorAlpha",
+          "initialValue":0,
+          "targetValue":1,
+          "animator":
+          {
+            "alphaFunction":"EASE_IN_OUT",
+            "timePeriod":
+            {
+              "duration":0.4,
+              "delay":0
+            }
+          }
+        }
+      ],
+      "disableVisibilityTransition":
+      [
+        {
+          "target":"imageVisual",
+          "property":"colorAlpha",
+          "targetValue":0,
+          "animator":
+          {
+            "alphaFunction":"EASE_IN_OUT",
+            "timePeriod":
+            {
+              "duration":0.4,
+              "delay":0.2
+            }
+          }
+        },
+        {
+          "target":"imageVisual",
+          "property":"scale",
+          "targetValue":[1,1,1]
+        }
+      ]
+    }
+  }
+}
diff --git a/resources/style/style-example-theme-one.json.in b/resources/style/style-example-theme-one.json.in
new file mode 100644
index 00000000..8d185892
--- /dev/null
+++ b/resources/style/style-example-theme-one.json.in
@@ -0,0 +1,115 @@
+{
+  "styles":
+  {
+    "Title":{
+      "textColor":"#0000ff",
+      "background":
+      {
+        "visualType":"COLOR",
+        "mixColor": [ 1.0, 1.0, 1.0, 1.0 ]
+      }
+    },
+    "TableView":{
+      "background":
+      {
+        "visualType":"COLOR",
+        "mixColor": [ 1.0, 1.0, 1.0, 0.03 ]
+      }
+    },
+    "FlexContainer":{
+      "background":
+      {
+        "visualType":"COLOR",
+        "mixColor": [ 1.0, 1.0, 1.0, 0.1 ]
+      }
+    },
+    "RadioButton":{
+      "label":{
+        "textColor": [1,1,1,1]
+      }
+    },
+    "CheckBoxButton":{
+      "label":{
+        "textColor": [1,1,1,1]
+      }
+    },
+    "ColorLabel1":{
+      "textColor": [1,0,0,1]
+    },
+    "ColorLabel2":{
+      "textColor": [0,1,0,1]
+    },
+    "ColorLabel3":{
+      "textColor": [0.3,0.3,1,1]
+    },
+    "ThemeLabel":{
+      "textColor":[0,1,1,1]
+    },
+    "PopupTitle":{
+      "textColor":[1,1,1,1]
+    },
+    "PopupBody":{
+      "textColor":[1,1,0,1]
+    },
+    "TextLabel":{
+      "textColor":[0,0,0,1]
+    },
+    "ColorSlider1":{
+      "styles":["Slider"]
+    },
+    "ColorSlider2":{
+      "styles":["slider"]
+    },
+    "ColorSlider3":{
+      "styles":["slider"]
+    },
+    "ImageChannelControl":
+    {
+      "enableVisibilityTransition":
+      [
+        {
+          "target":"imageVisual",
+          "property":"colorAlpha",
+          "initialValue":0,
+          "targetValue":1,
+          "animator":
+          {
+            "alphaFunction":"EASE_IN_OUT",
+            "timePeriod":
+            {
+              "duration":0.25,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"imageVisual",
+          "property":"scale",
+          "targetValue":[1,1,1]
+        }
+      ],
+      "disableVisibilityTransition":
+      [
+        {
+          "target":"imageVisual",
+          "property":"colorAlpha",
+          "targetValue":0,
+          "animator":
+          {
+            "alphaFunction":"EASE_IN_OUT",
+            "timePeriod":
+            {
+              "duration":0.25,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"imageVisual",
+          "property":"scale",
+          "targetValue":[1,1,1]
+        }
+      ]
+    }
+  }
+}
diff --git a/resources/style/style-example-theme-three.json.in b/resources/style/style-example-theme-three.json.in
new file mode 100644
index 00000000..88aad449
--- /dev/null
+++ b/resources/style/style-example-theme-three.json.in
@@ -0,0 +1,109 @@
+{
+  "styles":
+  {
+    "Title":{
+      "textColor":"#0000ff",
+      "background":
+      {
+        "visualType":"COLOR",
+        "mixColor": [ 1.0, 1.0, 1.0, 1.0 ]
+      }
+    },
+    "TableView":{
+      "background":
+      {
+        "visualType":"COLOR",
+        "mixColor": [ 1.0, 1.0, 1.0, 0.03 ]
+      }
+    },
+    "RadioButton":{
+      "label":{
+        "textColor": [1,1,1,1]
+      }
+    },
+    "CheckboxButton":{
+      "label":{
+        "textColor": [1,1,1,1]
+      }
+    },
+    "ColorLabel1":{
+      "textColor": [1,0,0,1]
+    },
+    "ColorLabel2":{
+      "textColor": [0,1,0,1]
+    },
+    "ColorLabel3":{
+      "textColor": [0.3,0.3,1,1]
+    },
+    "ThemeLabel":{
+      "textColor":[0,1,1,1]
+    },
+    "PopupTitle":{
+      "textColor":[1,1,1,1]
+    },
+    "PopupBody":{
+      "textColor":[1,1,0,1]
+    },
+    "TextLabel":{
+      "textColor":[0,0,0,1]
+    },
+    "ImageChannelControl":
+    {
+      "enableVisibilityTransition":
+      [
+        {
+          "target":"imageVisual",
+          "property":"scale",
+          "initialValue":[0.1,0.1,0.1],
+          "targetValue":[1,1,1],
+          "animator":
+          {
+            "alphaFunction":"EASE_IN",
+            "timePeriod":
+            {
+              "duration":0.3,
+              "delay":0.1
+            }
+          }
+        },
+        {
+          "target":"imageVisual",
+          "property":"colorAlpha",
+          "targetValue":1
+        }
+      ],
+      "disableVisibilityTransition":
+      [
+        {
+          "target":"imageVisual",
+          "property":"scale",
+          "initialValue":[1,1,1],
+          "targetValue":[0.1,0.1,0.1],
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT",
+            "timePeriod":
+            {
+              "duration":0.3,
+              "delay":0.0
+            }
+          }
+        },
+        {
+          "target":"imageVisual",
+          "property":"colorAlpha",
+          "targetValue":0,
+          "animator":
+          {
+            "alphaFunction":"EASE_OUT",
+            "timePeriod":
+            {
+              "duration":0.3,
+              "delay":0.0
+            }
+          }
+        }
+      ]
+    }
+  }
+}
diff --git a/resources/style/style-example-theme-two.json.in b/resources/style/style-example-theme-two.json.in
new file mode 100644
index 00000000..f5b194d7
--- /dev/null
+++ b/resources/style/style-example-theme-two.json.in
@@ -0,0 +1,145 @@
+{
+  "constants":
+  {
+    "STYLE_DIR":"{APPLICATION_RESOURCE_PATH}/style"
+  },
+  "styles":
+  {
+    "Title":{
+      "textColor":"#0000ff",
+      "background":
+      {
+        "visualType":"COLOR",
+        "mixColor": [ 1.0, 1.0, 1.0, 1.0 ]
+      }
+    },
+    "TableView":{
+      "background":
+      {
+        "visualType":"GRADIENT",
+        "startPosition": [0,-1],
+        "endPosition": [0,1],
+        "stopColor": [ [ 1.0, 0.0, 1.0, 0.03 ], [1.0,0.0,1.0,0.15] ]
+      }
+    },
+
+    // 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,
+      "label":{
+        "textColor": [0.1,1,1,1]
+      }
+    },
+    "checkboxbutton":{
+      "label":{
+        "textColor": [1,1,1,1]
+      }
+    },
+    "colorLabel1":{
+      "textColor": [1,0,0,1]
+    },
+    "colorLabel2":{
+      "textColor": [0,1,0,1]
+    },
+    "colorLabel3":{
+      "textColor": [0.3,0.3,1,1]
+    },
+    "themelabel":{
+      "textColor":[0,1,1,1]
+    },
+    "popupTitle":{
+      "textColor":[1,1,1,1]
+    },
+    "popupBody":{
+      "textColor":[1,1,0,1]
+    },
+
+    // Note, this overrides any non-renamed label styles, e.g. those in a button.
+    "TextLabel":{
+      //"textColor":[0,0,0,1]
+    },
+
+    "ThinSlider":{
+      "styles": ["slider"],
+      "showPopup":true,
+      "showValue":false,
+      "valuePrecision":0,
+      "handleVisual":{
+        "size":[48,48]
+      },
+      "trackVisual":{
+        "size":[10, 10]
+      },
+      "enabled":true
+    },
+    "ColorSlider1":{
+      "styles":["ThinSlider"],
+      "progressVisual":{
+        "url":"{STYLE_DIR}/images/slider-skin-progress-red.9.png"
+      }
+    },
+    "ColorSlider2":{
+      "styles":["ThinSlider"],
+      "progressVisual":{
+        "url":"{STYLE_DIR}/images/slider-skin-progress-green.9.png"
+      }
+    },
+    "ColorSlider3":{
+      "styles":["thinslider"],
+      "progressVisual":{
+        "url":"{STYLE_DIR}/images/slider-skin-progress-blue.9.png"
+      }
+    },
+    "ImageChannelControl":
+    {
+      "enableVisibilityTransition":
+      [
+        {
+          "target":"imageVisual",
+          "property":"colorAlpha",
+          "initialValue":0,
+          "targetValue":1,
+          "animator":
+          {
+            "alphaFunction":"EASE_IN_OUT",
+            "timePeriod":
+            {
+              "duration":0.4,
+              "delay":0
+            }
+          }
+        },
+        {
+          "target":"imageVisual",
+          "property":"scale",
+          "targetValue":[1,1,1]
+        }
+      ],
+      "disableVisibilityTransition":
+      [
+        {
+          "target":"imageVisual",
+          "property":"colorAlpha",
+          "targetValue":0,
+          "animator":
+          {
+            "alphaFunction":"EASE_IN_OUT",
+            "timePeriod":
+            {
+              "duration":0.4,
+              "delay":0.2
+            }
+          }
+        },
+        {
+          "target":"imageVisual",
+          "property":"scale",
+          "targetValue":[1,1,1]
+        }
+      ]
+    }
+  }
+}
diff --git a/resources/videos/big_buck_bunny.mp4 b/resources/videos/big_buck_bunny.mp4
deleted file mode 100644
index a7c42282..00000000
--- a/resources/videos/big_buck_bunny.mp4
+++ /dev/null
diff --git a/resources/videos/demoVideo.mp4 b/resources/videos/demoVideo.mp4
new file mode 100755
index 00000000..cd7dcd0b
--- /dev/null
+++ b/resources/videos/demoVideo.mp4
diff --git a/shared/dali-demo-strings.h b/shared/dali-demo-strings.h
index b1320c2a..750fd847 100644
--- a/shared/dali-demo-strings.h
+++ b/shared/dali-demo-strings.h
@@ -16,8 +16,8 @@
  */
 
 /* This header file includes all multi language strings which need display */
-#ifndef __DALI_DEMO_STRINGS_H__
-#define __DALI_DEMO_STRINGS_H__
+#ifndef DALI_DEMO_STRINGS_H
+#define DALI_DEMO_STRINGS_H
 
 #include <libintl.h>
 
@@ -32,10 +32,12 @@ extern "C"
 
 #ifdef INTERNATIONALIZATION_ENABLED
 
+#define DALI_DEMO_STR_TITLE_ANIMATED_SHAPES             dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_ANIMATED_SHAPES")
 #define DALI_DEMO_STR_TITLE_BLOCKS                      dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_BLOCKS")
 #define DALI_DEMO_STR_TITLE_BUBBLES                     dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_BUBBLES")
 #define DALI_DEMO_STR_TITLE_BUTTONS                     dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_BUTTONS")
 #define DALI_DEMO_STR_TITLE_COLOR_GRADIENT              dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_COLOR_GRADIENT")
+#define DALI_DEMO_STR_TITLE_CONTACT_CARDS               dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_CONTACT_CARDS")
 #define DALI_DEMO_STR_TITLE_CUBE_TRANSITION             dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_CUBE_TRANSITION")
 #define DALI_DEMO_STR_TITLE_DISSOLVE_TRANSITION         dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_DISSOLVE_TRANSITION")
 #define DALI_DEMO_STR_TITLE_EFFECTS_VIEW                dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_EFFECTS_VIEW")
@@ -62,12 +64,14 @@ extern "C"
 #define DALI_DEMO_STR_TITLE_NEGOTIATE_SIZE              dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_NEGOTIATE_SIZE")
 #define DALI_DEMO_STR_TITLE_PAGE_TURN_VIEW              dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_PAGE_TURN_VIEW")
 #define DALI_DEMO_STR_TITLE_POPUP                       dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_POPUP")
+#define DALI_DEMO_STR_TITLE_PROGRESS_BAR                dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_PROGRESS_BAR")
 #define DALI_DEMO_STR_TITLE_PRIMITIVE_SHAPES            dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_PRIMITIVE_SHAPES")
-#define DALI_DEMO_STR_TITLE_RADIAL_MENU                 dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_RADIAL_MENU")
 #define DALI_DEMO_STR_TITLE_REFRACTION                  dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_REFRACTION")
 #define DALI_DEMO_STR_TITLE_RENDERER_STENCIL            dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_RENDERER_STENCIL")
 #define DALI_DEMO_STR_TITLE_SCRIPT_BASED_UI             dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_SCRIPT_BASED_UI")
 #define DALI_DEMO_STR_TITLE_SCROLL_VIEW                 dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_SCROLL_VIEW")
+#define DALI_DEMO_STR_TITLE_SPARKLE                     dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_SPARKLE")
+#define DALI_DEMO_STR_TITLE_STYLING                     dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_STYLING")
 #define DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM            dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM")
 #define DALI_DEMO_STR_TITLE_TEXTURED_MESH               dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_TEXTURED_MESH")
 #define DALI_DEMO_STR_TITLE_TEXT_EDITOR                 dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_TEXT_EDITOR")
@@ -79,10 +83,12 @@ extern "C"
 
 #else // !INTERNATIONALIZATION_ENABLED
 
+#define DALI_DEMO_STR_TITLE_ANIMATED_SHAPES             "Animated Shapes"
 #define DALI_DEMO_STR_TITLE_BLOCKS                      "Blocks"
 #define DALI_DEMO_STR_TITLE_BUBBLES                     "Bubbles"
 #define DALI_DEMO_STR_TITLE_BUTTONS                     "Buttons"
 #define DALI_DEMO_STR_TITLE_COLOR_GRADIENT              "Color Gradient"
+#define DALI_DEMO_STR_TITLE_CONTACT_CARDS               "Contact Cards"
 #define DALI_DEMO_STR_TITLE_CUBE_TRANSITION             "Cube Effect"
 #define DALI_DEMO_STR_TITLE_DISSOLVE_TRANSITION         "Dissolve Effect"
 #define DALI_DEMO_STR_TITLE_EFFECTS_VIEW                "Effects View"
@@ -110,11 +116,12 @@ extern "C"
 #define DALI_DEMO_STR_TITLE_PAGE_TURN_VIEW              "Page Turn View"
 #define DALI_DEMO_STR_TITLE_POPUP                       "Popup"
 #define DALI_DEMO_STR_TITLE_PRIMITIVE_SHAPES            "Primitive Shapes"
-#define DALI_DEMO_STR_TITLE_RADIAL_MENU                 "Radial Menu"
 #define DALI_DEMO_STR_TITLE_REFRACTION                  "Refract Effect"
 #define DALI_DEMO_STR_TITLE_RENDERER_STENCIL            "Renderer Stencils"
 #define DALI_DEMO_STR_TITLE_SCRIPT_BASED_UI             "Script Based UI"
 #define DALI_DEMO_STR_TITLE_SCROLL_VIEW                 "Scroll View"
+#define DALI_DEMO_STR_TITLE_SPARKLE                     "Sparkle"
+#define DALI_DEMO_STR_TITLE_STYLING                     "Styling"
 #define DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM            "Super Blur and Bloom"
 #define DALI_DEMO_STR_TITLE_TEXTURED_MESH               "Mesh Texture"
 #define DALI_DEMO_STR_TITLE_TEXT_EDITOR                 "Text Editor"
@@ -123,6 +130,7 @@ extern "C"
 #define DALI_DEMO_STR_TITLE_TEXT_LABEL_MULTI_LANGUAGE   "Text Scripts"
 #define DALI_DEMO_STR_TITLE_TEXT_SCROLLING              "Text Scrolling"
 #define DALI_DEMO_STR_TITLE_TILT_SENSOR                 "Tilt Sensor"
+#define DALI_DEMO_STR_TITLE_PROGRESS_BAR                "Progress Bar"
 
 #endif
 
@@ -130,4 +138,4 @@ extern "C"
 }
 #endif // __cplusplus
 
-#endif // __DALI_DEMO_STRINGS_H__
+#endif // DALI_DEMO_STRINGS_H
diff --git a/shared/utility.h b/shared/utility.h
index 294e6f45..ece33270 100644
--- a/shared/utility.h
+++ b/shared/utility.h
@@ -37,17 +37,15 @@ Dali::PixelData LoadPixelData( const char* imagePath,
   return loader.GetPixelData();
 }
 
-
-Dali::Atlas LoadImage( const char* imagePath,
+/**
+ * @deprecated, dont use this anymore
+ */
+Dali::Image LoadImage( const char* imagePath,
                        Dali::ImageDimensions size = Dali::ImageDimensions(),
                        Dali::FittingMode::Type fittingMode = Dali::FittingMode::DEFAULT,
                        Dali::SamplingMode::Type samplingMode = Dali::SamplingMode::DEFAULT )
 {
-  Dali::PixelData pixelData = LoadPixelData(imagePath, size, fittingMode, samplingMode);
-  Dali::Atlas image  =Dali:: Atlas::New( pixelData.GetWidth(), pixelData.GetHeight(), pixelData.GetPixelFormat() );
-  image.Upload( pixelData, 0u, 0u );
-
-  return image;
+  return Dali::ResourceImage::New( imagePath, size, fittingMode, samplingMode );
 }
 
 Dali::Texture LoadTexture( const char* imagePath,
@@ -67,6 +65,7 @@ Dali::Texture LoadTexture( const char* imagePath,
 
 /**
  * @brief Load an bitmap resource.
+ * @deprecated, dont use this anymore
  *
  * If it is required to scaled-down to no more than the stage dimensions,
  * uses image scaling mode FittingMode::SCALE_TO_FILL to resize the image at
@@ -75,7 +74,7 @@ Dali::Texture LoadTexture( const char* imagePath,
  * maximum quality.
  */
 
-Dali::Atlas LoadStageFillingImage( const char* imagePath )
+Dali::Image LoadStageFillingImage( const char* imagePath )
 {
   Dali::Vector2 stageSize = Dali::Stage::GetCurrent().GetSize();
   return LoadImage( imagePath, Dali::ImageDimensions( stageSize.x, stageSize.y ), Dali::FittingMode::SCALE_TO_FILL, Dali::SamplingMode::BOX_THEN_LINEAR );
diff --git a/shared/view.h b/shared/view.h
index cc7ca8f0..6ec55d0f 100644
--- a/shared/view.h
+++ b/shared/view.h
@@ -46,7 +46,6 @@ struct ViewStyle
 const ViewStyle DEFAULT_VIEW_STYLE( 0.1f, 0.7f, 80.f, 4.f );
 
 const char*                   DEFAULT_TEXT_STYLE_FONT_FAMILY("HelveticaNue");
-const char*                   DEFAULT_TEXT_STYLE_FONT_STYLE("Regular");
 const float                   DEFAULT_TEXT_STYLE_POINT_SIZE( 8.0f );
 
 const Dali::Toolkit::Alignment::Padding DEFAULT_PLAY_PADDING(12.0f, 12.0f, 12.0f, 12.0f);
@@ -94,7 +93,7 @@ Dali::Layer CreateToolbar( Dali::Toolkit::ToolBar& toolBar,
   {
     Dali::Toolkit::TextLabel label = Dali::Toolkit::TextLabel::New();
     label.SetAnchorPoint( Dali::AnchorPoint::TOP_LEFT );
-    label.SetProperty( Dali::Toolkit::Control::Property::STYLE_NAME, "toolbarlabel" );
+    label.SetStyleName( "ToolbarLabel" );
     label.SetProperty( Dali::Toolkit::TextLabel::Property::TEXT, title );
     label.SetProperty( Dali::Toolkit::TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" );
     label.SetProperty( Dali::Toolkit::TextLabel::Property::VERTICAL_ALIGNMENT, "CENTER" );
@@ -168,7 +167,7 @@ Dali::Layer CreateView( Dali::Application& application,
 Dali::Toolkit::TextLabel CreateToolBarLabel( const std::string& text )
 {
   Dali::Toolkit::TextLabel label = Dali::Toolkit::TextLabel::New( text );
-  label.SetProperty( Dali::Toolkit::Control::Property::STYLE_NAME, "toolbarlabel" );
+  label.SetStyleName( "ToolbarLabel" );
   label.SetProperty( Dali::Toolkit::TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" );
   label.SetProperty( Dali::Toolkit::TextLabel::Property::VERTICAL_ALIGNMENT, "CENTER" );
   label.SetResizePolicy( Dali::ResizePolicy::FILL_TO_PARENT, Dali::Dimension::HEIGHT );