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

Change-Id: I314f6254a032a9bdf0907fe2173ee6231f6987fa

[dali_1.3.29] Merge branch 'devel/master'
Change-Id: I314f6254a032a9bdf0907fe2173ee6231f6987fa
Victor Cebollada
2 parents 34294f1b 195649d7
Showing 22 changed files with 1188 additions and 6 deletions
com.samsung.dali-demo.xml
examples-reel/dali-examples-reel.cpp
examples/layouting/absolute-example.cpp
examples/layouting/absolute-example.h
examples/layouting/example.h
examples/layouting/flex-example.cpp
examples/layouting/flex-example.h
examples/layouting/layouting-examples.cpp
examples/layouting/linear-example.cpp
examples/layouting/linear-example.h
examples/layouting/padding-example.cpp
examples/layouting/padding-example.h
examples/simple-layout/simple-layout-example.cpp
packaging/com.samsung.dali-demo.spec
resources/images/icon-reverse-selected.png
resources/images/icon-reverse.png
resources/images/icon-rotate-anticlockwise-selected.png
resources/images/icon-rotate-anticlockwise.png
resources/po/en_GB.po
resources/po/en_US.po
@@ -248,8 +248,13 @@
 		<label>Card Active App</label>
 	</ui-application>
 	<ui-application appid="image-policies.example" exec="/usr/apps/com.samsung.dali-demo/bin/image-policies.example" nodisplay="true" multiple="false" taskmanage="true" type="c++app">
-		<label>Image Policies</label></ui-application>
-	<privileges>
+    <label>Image Policies</label>
+  </ui-application>
+	<ui-application appid="layouting.example" exec="/usr/apps/com.samsung.dali-demo/bin/layouting.example" nodisplay="true" multiple="false" taskmanage="true" type="c++app">
+    <label>Layouting</label>
+  </ui-application>
+
+  <privileges>
 		<privilege>http://tizen.org/privilege/mediastorage</privilege>
 		<privilege>http://tizen.org/privilege/externalstorage</privilege>
 		<privilege>http://tizen.org/privilege/externalstorage.appdata</privilege>
 /*
- * Copyright (c) 2017 Samsung Electronics Co., Ltd.
+ * Copyright (c) 2018 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.
@@ -56,6 +56,7 @@ int DALI_EXPORT_API main(int argc, char **argv)
   demo.AddExample(Example("image-view-pixel-area.example", DALI_DEMO_STR_TITLE_IMAGE_VIEW_PIXEL_AREA));
   demo.AddExample(Example("image-view-svg.example", DALI_DEMO_STR_TITLE_IMAGE_VIEW_SVG));
   demo.AddExample(Example("image-view-url.example", DALI_DEMO_STR_TITLE_IMAGE_VIEW_URL));
+  demo.AddExample(Example("layouting.example", DALI_DEMO_STR_TITLE_LAYOUTING));
   demo.AddExample(Example("line-mesh.example", DALI_DEMO_STR_TITLE_LINE_MESH));
   demo.AddExample(Example("magnifier.example", DALI_DEMO_STR_TITLE_MAGNIFIER));
   demo.AddExample(Example("mesh-morph.example", DALI_DEMO_STR_TITLE_MESH_MORPH));
+/*
+ * Copyright (c) 2017 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+#include <string>
+#include "absolute-example.h"
+#include <dali-toolkit/devel-api/visuals/image-visual-properties-devel.h>
+#include <dali-toolkit/devel-api/visual-factory/visual-factory.h>
+#include <dali-toolkit/devel-api/controls/control-devel.h>
+#include <dali-toolkit/devel-api/layouting/absolute-layout.h>
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+
+namespace
+{
+
+struct ImageDetails
+{
+  const char * name;
+  Vector2 position;
+  Size size;
+};
+
+ImageDetails IMAGES[] =
+{
+  { DEMO_IMAGE_DIR "gallery-small-23.jpg", Vector2( 0.0f,   0.0f ), Size( 100.0f, 100.0f ) },
+  { DEMO_IMAGE_DIR "gallery-small-23.jpg", Vector2( 100.0f,   0.0f ), Size( 100.0f, 100.0f ) },
+  { DEMO_IMAGE_DIR "gallery-small-23.jpg", Vector2( 0.0f, 100.0f ), Size( 100.0f, 100.0f ) },
+  { DEMO_IMAGE_DIR "gallery-small-23.jpg", Vector2( 200.0f, 200.0f ), Size( 100.0f, 100.0f ) },
+};
+unsigned int IMAGE_COUNT=sizeof(IMAGES)/sizeof(IMAGES[0]);
+
+// Helper function to create ImageViews with given filename and size.
+void CreateChildImageView( ImageView& imageView, unsigned imageIndex )
+{
+  imageView = ImageView::New();
+  Property::Map imagePropertyMap;
+  imagePropertyMap[ Visual::Property::TYPE ] = Toolkit::Visual::IMAGE;
+  imagePropertyMap[ ImageVisual::Property::URL ] = IMAGES[imageIndex].name;
+  imagePropertyMap[ ImageVisual::Property::DESIRED_WIDTH ] = IMAGES[imageIndex].size.width ;
+  imagePropertyMap[ ImageVisual::Property::DESIRED_HEIGHT ] = IMAGES[imageIndex].size.height;
+  imageView.SetProperty( ImageView::Property::IMAGE , imagePropertyMap );
+  imageView.SetName("ImageView");
+  imageView.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+  imageView.SetResizePolicy( ResizePolicy::FIXED, Dimension::ALL_DIMENSIONS );
+  imageView.SetProperty( Dali::Actor::Property::POSITION, Vector3( IMAGES[imageIndex].position ) );
+}
+
+} // namespace
+
+namespace Demo
+{
+
+AbsoluteExample::AbsoluteExample()
+: mRootLayoutControl(),
+  mAbsoluteLayoutContainer(),
+  mLayoutSizeToggleStatus( true ),
+  mToggleButton()
+{
+
+}
+
+void AbsoluteExample::Create()
+{
+  // Create a root layout, ideally Dali would have a default layout in the root layer.
+  // Without this root layer the mAbsoluteLayout (or any other layout) will not
+  // honour WIDTH_SPECIFICATION or HEIGHT_SPECIFICATION settings.
+  // It uses the default stage size and ideally should have a layout added to it.
+  auto stage = Stage::GetCurrent();
+  mRootLayoutControl = Control::New();
+  auto rootLayout = AbsoluteLayout::New();
+  DevelControl::SetLayout( mRootLayoutControl, rootLayout );
+  mRootLayoutControl.SetAnchorPoint( AnchorPoint::CENTER );
+  mRootLayoutControl.SetParentOrigin( ParentOrigin::CENTER );
+  stage.Add( mRootLayoutControl );
+
+  // Create an Absolute Layout to show ImageViews at explictly provided positions.
+  mAbsoluteLayoutContainer = Control::New();
+  mAbsoluteLayoutContainer.SetBackgroundColor( Color::WHITE );
+  auto absoluteLayout = AbsoluteLayout::New();
+  DevelControl::SetLayout( mAbsoluteLayoutContainer, absoluteLayout );
+  mAbsoluteLayoutContainer.SetName("AbsoluteLayout");
+
+  mAbsoluteLayoutContainer.SetAnchorPoint( AnchorPoint::CENTER );
+  mAbsoluteLayoutContainer.SetParentOrigin( ParentOrigin::CENTER );
+
+  // Initially absolute layout to use these specifications, toggle button will alter them.
+  mAbsoluteLayoutContainer.SetProperty( LayoutItem::ChildProperty::WIDTH_SPECIFICATION, ChildLayoutData::WRAP_CONTENT );
+  mAbsoluteLayoutContainer.SetProperty( LayoutItem::ChildProperty::HEIGHT_SPECIFICATION,  ChildLayoutData::WRAP_CONTENT );
+
+  mRootLayoutControl.Add( mAbsoluteLayoutContainer );
+
+  for( unsigned int x = 0; x < NUMBER_OF_IMAGE_VIEWS; x++ )
+  {
+    CreateChildImageView( mImageViews[x], x%IMAGE_COUNT );
+    mAbsoluteLayoutContainer.Add( mImageViews[x] );
+  }
+
+  // Button toggles the size of the layout
+  mToggleButton = PushButton::New();
+  mToggleButton.SetProperty( Toolkit::Button::Property::LABEL, "Change layout size" );
+  mToggleButton.SetParentOrigin( ParentOrigin::BOTTOM_CENTER );
+  mToggleButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
+  mToggleButton.ClickedSignal().Connect( this, &Demo::AbsoluteExample::ChangeSizeClicked );
+  mToggleButton.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+  mToggleButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
+
+  stage.Add( mToggleButton );
+
+}
+
+void AbsoluteExample::Remove()
+{
+  UnparentAndReset( mAbsoluteLayoutContainer );
+  UnparentAndReset( mToggleButton );
+  UnparentAndReset( mRootLayoutControl );
+}
+
+bool AbsoluteExample::ChangeSizeClicked( Toolkit::Button button )
+{
+  if ( true == mLayoutSizeToggleStatus )
+  {
+    mAbsoluteLayoutContainer.SetProperty( LayoutItem::ChildProperty::WIDTH_SPECIFICATION, 480 );
+    mAbsoluteLayoutContainer.SetProperty( LayoutItem::ChildProperty::HEIGHT_SPECIFICATION,  700 );
+    mLayoutSizeToggleStatus = false;
+  }
+  else
+  {
+    mAbsoluteLayoutContainer.SetProperty( LayoutItem::ChildProperty::WIDTH_SPECIFICATION, ChildLayoutData::WRAP_CONTENT );
+    mAbsoluteLayoutContainer.SetProperty( LayoutItem::ChildProperty::HEIGHT_SPECIFICATION,  ChildLayoutData::WRAP_CONTENT );
+    mLayoutSizeToggleStatus = true;
+  }
+
+  return true;
+}
+
+} // namespace Demo
 \ No newline at end of file
+#ifndef DALI_DEMO_ABSOLUTE_EXAMPLE_H
+#define DALI_DEMO_ABSOLUTE_EXAMPLE_H
+
+/*
+ * Copyright (c) 2017 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+#include <string>
+#include <dali/dali.h>
+#include <dali-toolkit/dali-toolkit.h>
+#include "example.h"
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+namespace Demo
+{
+
+/**
+ * @file absolute-example.hcpp
+ * @brief Example of a Linear Layout with padding applied, enables updating of padding values for
+ * one of the children.
+ */
+class AbsoluteExample: public ConnectionTracker, public Example
+{
+public:
+  static const unsigned int NUMBER_OF_IMAGE_VIEWS = 4;
+
+  AbsoluteExample();
+
+  // Creates a Absolute Layout Example and displays it.
+  virtual void Create() override;
+
+  // Remove and destroy this layout
+  virtual void Remove() override;
+
+private:
+
+
+  // Callback when change size button is pressed
+  bool ChangeSizeClicked( Toolkit::Button button );
+
+private:
+
+  Toolkit::Control           mRootLayoutControl;
+  Toolkit::Control           mAbsoluteLayoutContainer;
+  Toolkit::ImageView         mImageViews[ NUMBER_OF_IMAGE_VIEWS ];
+  bool                       mLayoutSizeToggleStatus;
+  Toolkit::PushButton        mToggleButton;
+};
+
+} // namespace Demo
+
+#endif // DALI_DEMO_ABSOLUTE_EXAMPLE_H
+#ifndef DALI_DEMO_LAYOUTING_EXAMPLE_H
+#define DALI_DEMO_LAYOUTING_EXAMPLE_H
+
+/*
+ * Copyright (c) 2018 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.
+ *
+ */
+
+namespace Demo
+{
+
+/**
+ * @brief Abstract base class for layouting examples.
+ */
+class Example
+{
+public:
+  /// Should be overridden by deriving classes to create the required Layouting example
+  virtual void Create() = 0;
+
+  /// Should be overridden by deriving classes to remove their layouting example from stage
+  virtual void Remove() = 0;
+
+  /// Virtual destructor
+  virtual ~Example() = default;
+};
+
+} // namespace Demo
+
+#endif // DALI_DEMO_LAYOUTING_EXAMPLE_H
+/*
+ * Copyright (c) 2018 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 "flex-example.h"
+#include <dali-toolkit/devel-api/visuals/image-visual-properties-devel.h>
+#include <dali-toolkit/devel-api/visual-factory/visual-factory.h>
+#include <dali-toolkit/devel-api/controls/control-devel.h>
+#include <dali-toolkit/devel-api/layouting/flex-layout.h>
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+namespace
+{
+
+// Button file names
+const char* LTR_IMAGE( DEMO_IMAGE_DIR "icon-play.png" );
+const char* LTR_SELECTED_IMAGE( DEMO_IMAGE_DIR "icon-play-selected.png" );
+
+const char* RTL_IMAGE( DEMO_IMAGE_DIR "icon-reverse.png" );
+const char* RTL_SELECTED_IMAGE( DEMO_IMAGE_DIR "icon-reverse-selected.png" );
+
+const char* ROTATE_CLOCKWISE_IMAGE( DEMO_IMAGE_DIR "icon-reset.png" );
+const char* ROTATE_CLOCKWISE_SELECTED_IMAGE( DEMO_IMAGE_DIR "icon-reset-selected.png" );
+
+const char* WRAP_IMAGE( DEMO_IMAGE_DIR "icon-replace.png" );
+const char* WRAP_SELECTED_IMAGE( DEMO_IMAGE_DIR "icon-replace-selected.png" );
+
+const char* JUSTIFY_IMAGE( DEMO_IMAGE_DIR "icon-item-view-layout-grid.png" );
+const char* JUSTIFY_SELECTED_IMAGE( DEMO_IMAGE_DIR "icon-item-view-layout-grid-selected.png" );
+
+// Child image filenames
+const char* IMAGE_PATH[] = {
+  DEMO_IMAGE_DIR "application-icon-101.png",
+  DEMO_IMAGE_DIR "application-icon-102.png",
+  DEMO_IMAGE_DIR "application-icon-103.png",
+  DEMO_IMAGE_DIR "application-icon-104.png",
+  DEMO_IMAGE_DIR "application-icon-105.png",
+  DEMO_IMAGE_DIR "application-icon-106.png",
+  DEMO_IMAGE_DIR "application-icon-107.png",
+  DEMO_IMAGE_DIR "application-icon-108.png",
+  DEMO_IMAGE_DIR "application-icon-109.png",
+  DEMO_IMAGE_DIR "application-icon-110.png"
+
+};
+
+const unsigned int NUMBER_OF_RESOURCES = sizeof(IMAGE_PATH) / sizeof(char*);
+
+// Helper function to create ImageViews with given filename and size.
+void CreateChildImageView( ImageView& imageView, const char* filename, Size size )
+{
+  imageView = ImageView::New();
+  Property::Map imagePropertyMap;
+  imagePropertyMap[ Toolkit::Visual::Property::TYPE ] = Toolkit::Visual::IMAGE;
+  imagePropertyMap[ Toolkit::ImageVisual::Property::URL ] = filename;
+  imagePropertyMap[ ImageVisual::Property::DESIRED_WIDTH ] = size.width;
+  imagePropertyMap[ ImageVisual::Property::DESIRED_HEIGHT ] = size.height;
+  imageView.SetProperty( Toolkit::ImageView::Property::IMAGE , imagePropertyMap );
+  imageView.SetName("ImageView");
+  imageView.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+  imageView.SetResizePolicy( ResizePolicy::FIXED, Dimension::ALL_DIMENSIONS );
+}
+
+}  // namespace
+
+namespace Demo
+{
+
+FlexExample::FlexExample()
+: mLTRDirection(true)
+{
+
+}
+
+void FlexExample::Create()
+{
+  // The Init signal is received once (only) during the Application lifetime
+  auto stage = Stage::GetCurrent();
+
+  mDirectionButton = PushButton::New();
+  mDirectionButton.SetProperty( PushButton::Property::UNSELECTED_ICON, RTL_IMAGE );
+  mDirectionButton.SetProperty( PushButton::Property::SELECTED_ICON, RTL_SELECTED_IMAGE );
+  mDirectionButton.ClickedSignal().Connect( this, &FlexExample::OnDirectionClicked );
+  mDirectionButton.SetParentOrigin( Vector3(0.2f, 1.0f, 0.5f ) );
+  mDirectionButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
+  mDirectionButton.SetSize(75, 75);
+  stage.Add( mDirectionButton );
+
+  mWrapButton = Toolkit::PushButton::New();
+  mWrapButton.SetProperty( PushButton::Property::UNSELECTED_ICON, WRAP_IMAGE );
+  mWrapButton.SetProperty( PushButton::Property::SELECTED_ICON, WRAP_SELECTED_IMAGE );
+  mWrapButton.ClickedSignal().Connect( this, &FlexExample::OnWrapClicked );
+  mWrapButton.SetParentOrigin( Vector3(0.4f, 1.0f, 0.5f ));
+  mWrapButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
+  mWrapButton.SetSize(75, 75);
+  stage.Add( mWrapButton );
+
+  mJustifyButton = Toolkit::PushButton::New();
+  mJustifyButton.SetProperty( PushButton::Property::UNSELECTED_ICON, JUSTIFY_IMAGE );
+  mJustifyButton.SetProperty( PushButton::Property::SELECTED_ICON, JUSTIFY_SELECTED_IMAGE );
+  mJustifyButton.ClickedSignal().Connect( this, &FlexExample::OnJustifyClicked );
+  mJustifyButton.SetParentOrigin( Vector3(0.6f, 1.0f, 0.5f ));
+  mJustifyButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
+  mJustifyButton.SetSize(75, 75);
+  stage.Add( mJustifyButton );
+
+  mRotateButton = PushButton::New();
+  mRotateButton.SetProperty( PushButton::Property::UNSELECTED_ICON, ROTATE_CLOCKWISE_IMAGE );
+  mRotateButton.SetProperty( PushButton::Property::SELECTED_ICON, ROTATE_CLOCKWISE_SELECTED_IMAGE );
+  mRotateButton.ClickedSignal().Connect( this, &FlexExample::OnRotateClicked );
+  mRotateButton.SetParentOrigin( Vector3(0.8f, 1.0f, 0.5f ));
+  mRotateButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
+  mRotateButton.SetSize(75, 75);
+  stage.Add( mRotateButton );
+
+  // Create a flex container
+  mFlexContainer = Control::New();
+
+  auto layout = FlexLayout::New();
+  layout.SetAnimateLayout( true );
+  layout.SetFlexDirection( Toolkit::FlexLayout::FlexDirection::ROW );
+  layout.SetFlexWrap( Toolkit::FlexLayout::WrapType::NO_WRAP );
+  layout.SetFlexJustification( Toolkit::FlexLayout::Justification::FLEX_START );
+  layout.SetFlexAlignment( Toolkit::FlexLayout::Alignment::FLEX_START );
+
+  DevelControl::SetLayout( mFlexContainer, layout );
+
+  mFlexContainer.SetParentOrigin( ParentOrigin::CENTER );
+  mFlexContainer.SetAnchorPoint( AnchorPoint::CENTER );
+  mFlexContainer.SetName( "FlexExample" );
+  mFlexContainer.SetProperty( Toolkit::LayoutItem::ChildProperty::WIDTH_SPECIFICATION, ChildLayoutData::MATCH_PARENT );
+  mFlexContainer.SetProperty( Toolkit::LayoutItem::ChildProperty::HEIGHT_SPECIFICATION, ChildLayoutData::MATCH_PARENT );
+  mFlexContainer.SetAnchorPoint( AnchorPoint::CENTER );
+  mFlexContainer.SetProperty( Actor::Property::LAYOUT_DIRECTION, LayoutDirection::LEFT_TO_RIGHT );
+
+  for( unsigned int x = 0; x < NUMBER_OF_RESOURCES; ++x )
+  {
+    Toolkit::ImageView imageView;
+    CreateChildImageView( imageView, IMAGE_PATH[ x ], Size(100.0f, 100.0f) );
+    imageView.SetProperty( Toolkit::Control::Property::PADDING, Extents(0.f, 0.f, 0.f, 0.f) );
+    imageView.SetProperty( Toolkit::Control::Property::MARGIN, Extents(2.0f, 2.0f, 2.0f, 2.0f) );
+    imageView.SetProperty( Toolkit::FlexLayout::ChildProperty::ALIGN_SELF, Toolkit::FlexLayout::Alignment::CENTER );
+    imageView.SetProperty( Toolkit::FlexLayout::ChildProperty::FLEX, 0.f );
+    mFlexContainer.Add( imageView );
+  }
+  stage.Add( mFlexContainer );
+}
+
+// Remove controls added by this example from stage
+void FlexExample::Remove()
+{
+  if ( mFlexContainer )
+  {
+    UnparentAndReset( mDirectionButton );
+    UnparentAndReset( mWrapButton );
+    UnparentAndReset( mJustifyButton );
+    UnparentAndReset( mRotateButton );
+    UnparentAndReset( mFlexContainer);
+  }
+}
+
+// Mirror items in layout
+bool FlexExample::OnDirectionClicked( Button button )
+{
+  mLTRDirection = !mLTRDirection;
+  if( mLTRDirection )
+  {
+    mDirectionButton.SetProperty( PushButton::Property::UNSELECTED_ICON, LTR_IMAGE );
+    mDirectionButton.SetProperty( PushButton::Property::SELECTED_ICON, LTR_SELECTED_IMAGE );
+    mFlexContainer.SetProperty( Actor::Property::LAYOUT_DIRECTION, LayoutDirection::LEFT_TO_RIGHT );
+  }
+  else
+  {
+    mDirectionButton.SetProperty( PushButton::Property::UNSELECTED_ICON, RTL_IMAGE );
+    mDirectionButton.SetProperty( PushButton::Property::SELECTED_ICON, RTL_SELECTED_IMAGE );
+    mFlexContainer.SetProperty( Actor::Property::LAYOUT_DIRECTION, LayoutDirection::RIGHT_TO_LEFT );
+  }
+  return true;
+}
+
+// Rotate layout by changing layout
+bool FlexExample::OnRotateClicked( Button button )
+{
+  auto layout = FlexLayout::DownCast(DevelControl::GetLayout( mFlexContainer ));
+  if( layout.GetFlexDirection() == Toolkit::FlexLayout::FlexDirection::COLUMN )
+  {
+    layout.SetFlexDirection( Toolkit::FlexLayout::FlexDirection::ROW );
+  }
+  else
+  {
+    layout.SetFlexDirection( Toolkit::FlexLayout::FlexDirection::COLUMN );
+  }
+  return true;
+}
+
+// Alternates the layout wrapping from wrapping to none
+bool FlexExample::OnWrapClicked( Button button )
+{
+  auto layout = FlexLayout::DownCast(DevelControl::GetLayout( mFlexContainer ));
+  if ( layout.GetFlexWrap() == Toolkit::FlexLayout::WrapType::NO_WRAP )
+  {
+    layout.SetFlexWrap( Toolkit::FlexLayout::WrapType::WRAP );
+    layout.SetFlexAlignment( Toolkit::FlexLayout::Alignment::CENTER );
+    mFlexContainer.SetProperty( Toolkit::Control::Property::PADDING, Extents(0.0f, 0.0f, 45.0f, 75.0f) );
+  }
+  else
+  {
+    layout.SetFlexWrap( Toolkit::FlexLayout::WrapType::NO_WRAP );
+    layout.SetFlexAlignment( Toolkit::FlexLayout::Alignment::FLEX_START );
+    mFlexContainer.SetProperty( Toolkit::Control::Property::PADDING, Extents(0.0f, 0.0f, 0.0f, 0.0f) );
+  }
+  return true;
+}
+
+// Alternates the layout to justify space between items or not
+bool FlexExample::OnJustifyClicked( Button button )
+{
+   auto layout = FlexLayout::DownCast(DevelControl::GetLayout( mFlexContainer ));
+   if ( layout.GetFlexJustification() == Toolkit::FlexLayout::Justification::FLEX_START )
+   {
+     layout.SetFlexJustification( Toolkit::FlexLayout::Justification::SPACE_BETWEEN);
+   }
+   else
+   {
+     layout.SetFlexJustification( Toolkit::FlexLayout::Justification::FLEX_START );
+   }
+   return true;
+}
+
+} // namespace Demo
+#ifndef DALI_DEMO_FLEX_EXAMPLE_H
+#define DALI_DEMO_FLEX_EXAMPLE_H
+
+/*
+ * Copyright (c) 2018 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 "example.h"
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+namespace Demo
+{
+
+/**
+ * @file flex-example.hcpp
+ * @brief Example of a Flex Layout with mirror feature and
+ * transition from horizontal to vertical.
+ */
+class FlexExample final: public ConnectionTracker, public Example
+{
+public:
+  FlexExample();
+
+  // Creates a Flex Layout Example and displays it.
+  virtual void Create() override;
+
+  // Remove and destroy this layout
+  virtual void Remove() override;
+
+private:
+
+  // Changes the direction of the items.
+  bool OnDirectionClicked( Button button );
+
+  // Alternates the layout from horizontal to vertical
+  bool OnRotateClicked( Button button );
+
+  // Alternates the layout wrapping from wrapping to none
+  bool OnWrapClicked( Button button );
+
+  // Alternates the layout to justify space between items or not
+  bool OnJustifyClicked( Button button );
+
+private:
+  PushButton mDirectionButton;
+  PushButton mRotateButton;
+  PushButton mWrapButton;
+  PushButton mJustifyButton;
+  Control mFlexContainer;
+  bool mLTRDirection;
+}; // class FlexExample
+
+} // namespace Demo
+
+#endif //DALI_DEMO_FLEX_EXAMPLE_H
+/*
+ * Copyright (c) 2018 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 <memory>
+#include <string>
+#include <dali/dali.h>
+#include <dali-toolkit/dali-toolkit.h>
+#include <dali-toolkit/devel-api/controls/control-devel.h>
+
+// INTERNAL INCLUDES
+#include "shared/view.h"
+#include "linear-example.h"
+#include "padding-example.h"
+#include "flex-example.h"
+#include "example.h"
+#include "absolute-example.h"
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+namespace
+{
+
+const char* BACKGROUND_IMAGE( DEMO_IMAGE_DIR "lake_front.jpg" );
+const char* TOOLBAR_IMAGE( DEMO_IMAGE_DIR "top-bar.png" );
+
+const char* APPLICATION_TITLE( "Layout Tester" );
+
+typedef std::unique_ptr< Demo::Example > ExamplePointer;
+typedef std::vector< ExamplePointer > ExampleContainer;
+
+/// All layouting examples to be shown should be added to this method
+void CreateExamples( ExampleContainer& container )
+{
+  container.push_back( ExamplePointer( new Demo::LinearExample ) );
+  container.push_back( ExamplePointer( new Demo::PaddingExample ) );
+  container.push_back( ExamplePointer( new Demo::AbsoluteExample ) );
+  container.push_back( ExamplePointer( new Demo::FlexExample ) );
+}
+
+} // anonymous namespace
+
+class LayoutingExample: public ConnectionTracker
+{
+ public:
+
+  LayoutingExample( Application& application )
+  : mApplication( application ),
+    mLayoutingExamples(),
+    mLayoutIndex( 0 )
+  {
+    // Connect to the Application's Init signal
+    mApplication.InitSignal().Connect( this, &LayoutingExample::Create );
+  }
+
+private:
+
+  void Create( Application& application )
+  {
+    auto stage = Stage::GetCurrent();
+    stage.KeyEventSignal().Connect( this, &LayoutingExample::OnKeyEvent );
+
+    auto bg = ImageView::New( BACKGROUND_IMAGE );
+    bg.SetParentOrigin( ParentOrigin::CENTER );
+    stage.Add( bg );
+    auto toolbar = ImageView::New( TOOLBAR_IMAGE );
+    toolbar.SetParentOrigin( ParentOrigin::TOP_CENTER );
+    toolbar.SetAnchorPoint( AnchorPoint::TOP_CENTER );
+    toolbar.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+    toolbar.SetProperty( Actor::Property::SIZE_HEIGHT, 50.0f);
+
+    stage.Add( toolbar );
+
+    auto title = TextLabel::New( APPLICATION_TITLE );
+    title.SetParentOrigin( ParentOrigin::CENTER );
+    title.SetAnchorPoint( AnchorPoint::CENTER );
+    title.SetProperty( TextLabel::Property::TEXT_COLOR, Color::BLUE );
+    title.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, HorizontalAlignment::LEFT );
+    toolbar.Add( title );
+
+    mNextLayout = PushButton::New();
+    mNextLayout.SetProperty( Toolkit::Button::Property::LABEL, "change layout");
+    mNextLayout.ClickedSignal().Connect( this, &LayoutingExample::ChangeLayout );
+    mNextLayout.SetParentOrigin( ParentOrigin::TOP_RIGHT );
+    mNextLayout.SetAnchorPoint( AnchorPoint::TOP_RIGHT );
+    mNextLayout.SetSize(175, 50);
+    toolbar.Add( mNextLayout );
+
+    CreateExamples( mLayoutingExamples );
+    if( ! mLayoutingExamples.empty() )
+    {
+      mLayoutingExamples[ mLayoutIndex ]->Create();
+    }
+  }
+
+  bool ChangeLayout( Button button )
+  {
+    if( ! mLayoutingExamples.empty() )
+    {
+      mLayoutingExamples[ mLayoutIndex ]->Remove();
+      mLayoutIndex = ( mLayoutIndex + 1 ) % mLayoutingExamples.size();
+      mLayoutingExamples[ mLayoutIndex ]->Create();
+    }
+    return true;
+  }
+
+  /**
+   * Main key event handler
+   */
+  void OnKeyEvent(const KeyEvent& event)
+  {
+    if(event.state == KeyEvent::Down)
+    {
+      if( IsKey( event, DALI_KEY_ESCAPE) || IsKey( event, DALI_KEY_BACK ) )
+      {
+        mApplication.Quit();
+      }
+    }
+  }
+
+
+private:
+  Application& mApplication;
+  ExampleContainer mLayoutingExamples;
+  PushButton mNextLayout;
+  unsigned int mLayoutIndex;
+};
+
+int DALI_EXPORT_API main( int argc, char **argv )
+{
+  Application application = Application::New( &argc, &argv, DEMO_THEME_PATH );
+  LayoutingExample test( application );
+  application.MainLoop();
+  return 0;
+};
+/*
+ * Copyright (c) 2018 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 <string>
+#include "linear-example.h"
+#include <dali-toolkit/devel-api/visuals/image-visual-properties-devel.h>
+#include <dali-toolkit/devel-api/visual-factory/visual-factory.h>
+#include <dali-toolkit/devel-api/controls/control-devel.h>
+#include <dali-toolkit/devel-api/layouting/linear-layout.h>
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+namespace
+{
+
+// Button file names
+const char* LTR_IMAGE( DEMO_IMAGE_DIR "icon-play.png" );
+const char* LTR_SELECTED_IMAGE( DEMO_IMAGE_DIR "icon-play-selected.png" );
+
+const char* RTL_IMAGE( DEMO_IMAGE_DIR "icon-reverse.png" );
+const char* RTL_SELECTED_IMAGE( DEMO_IMAGE_DIR "icon-reverse-selected.png" );
+
+const char* ROTATE_CLOCKWISE_IMAGE( DEMO_IMAGE_DIR "icon-reset.png" );
+const char* ROTATE_CLOCKWISE_SELECTED_IMAGE( DEMO_IMAGE_DIR "icon-reset-selected.png" );
+
+// Child image filenames
+const char* IMAGE_PATH[] = {
+  DEMO_IMAGE_DIR "application-icon-101.png",
+  DEMO_IMAGE_DIR "application-icon-102.png",
+  DEMO_IMAGE_DIR "application-icon-103.png",
+  DEMO_IMAGE_DIR "application-icon-104.png"
+};
+
+const unsigned int NUMBER_OF_RESOURCES = sizeof(IMAGE_PATH) / sizeof(char*);
+
+// Helper function to create ImageViews with given filename and size.
+void CreateChildImageView( ImageView& imageView, const char* filename, Size size )
+{
+  imageView = ImageView::New();
+  Property::Map imagePropertyMap;
+  imagePropertyMap[ Toolkit::Visual::Property::TYPE ] = Toolkit::Visual::IMAGE;
+  imagePropertyMap[ Toolkit::ImageVisual::Property::URL ] = filename;
+  imagePropertyMap[ ImageVisual::Property::DESIRED_WIDTH ] = size.width;
+  imagePropertyMap[ ImageVisual::Property::DESIRED_HEIGHT ] = size.height;
+  imageView.SetProperty(Toolkit::ImageView::Property::IMAGE , imagePropertyMap );
+  imageView.SetName("ImageView");
+  imageView.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+  imageView.SetResizePolicy( ResizePolicy::FIXED, Dimension::ALL_DIMENSIONS );
+}
+
+}  // namespace
+
+namespace Demo
+{
+
+LinearExample::LinearExample()
+: mLTRDirection(true)
+{
+}
+
+void LinearExample::Create()
+{
+  auto stage = Stage::GetCurrent();
+
+  mDirectionButton = PushButton::New();
+  mDirectionButton.SetProperty( PushButton::Property::UNSELECTED_ICON, RTL_IMAGE );
+  mDirectionButton.SetProperty( PushButton::Property::SELECTED_ICON, RTL_SELECTED_IMAGE );
+  mDirectionButton.ClickedSignal().Connect( this, &LinearExample::OnDirectionClicked );
+  mDirectionButton.SetParentOrigin( Vector3(0.33f, 1.0f, 0.5f ) );
+  mDirectionButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
+  mDirectionButton.SetSize(75, 75);
+  stage.Add( mDirectionButton );
+
+  mRotateButton = PushButton::New();
+  mRotateButton.SetProperty( PushButton::Property::UNSELECTED_ICON, ROTATE_CLOCKWISE_IMAGE );
+  mRotateButton.SetProperty( PushButton::Property::SELECTED_ICON, ROTATE_CLOCKWISE_SELECTED_IMAGE );
+  mRotateButton.ClickedSignal().Connect( this, &LinearExample::OnRotateClicked );
+  mRotateButton.SetParentOrigin( Vector3(0.66f, 1.0f, 0.5f ));
+  mRotateButton.SetAnchorPoint( Vector3(0.5f, 1.0f, 0.5f));
+  mRotateButton.SetSize(75, 75);
+  stage.Add( mRotateButton );
+
+  // Create a linear layout
+  mLinearContainer = Control::New();
+  auto layout = LinearLayout::New();
+  layout.SetAnimateLayout(true);
+  layout.SetOrientation( LinearLayout::Orientation::VERTICAL );
+  DevelControl::SetLayout( mLinearContainer, layout );
+
+  mLinearContainer.SetParentOrigin( ParentOrigin::CENTER );
+  mLinearContainer.SetAnchorPoint( AnchorPoint::CENTER );
+  mLinearContainer.SetName( "LinearExample" );
+  stage.Add( mLinearContainer );
+  mLinearContainer.SetProperty( Toolkit::LayoutItem::ChildProperty::WIDTH_SPECIFICATION, ChildLayoutData::MATCH_PARENT );
+  mLinearContainer.SetProperty( Toolkit::LayoutItem::ChildProperty::HEIGHT_SPECIFICATION, ChildLayoutData::MATCH_PARENT );
+  mLinearContainer.SetProperty( Actor::Property::LAYOUT_DIRECTION, LayoutDirection::LEFT_TO_RIGHT );
+
+  for( unsigned int x = 0; x < NUMBER_OF_RESOURCES; ++x )
+  {
+    Toolkit::ImageView imageView;
+    CreateChildImageView( imageView, IMAGE_PATH[ x ], Size(100.0f, 100.0f) );
+    mLinearContainer.Add( imageView );
+  }
+}
+
+// Remove controls added by this example from stage
+void LinearExample::Remove()
+{
+  if ( mLinearContainer )
+  {
+    UnparentAndReset( mDirectionButton );
+    UnparentAndReset( mRotateButton );
+    UnparentAndReset( mLinearContainer);
+  }
+}
+
+// Mirror items in layout
+bool LinearExample::OnDirectionClicked( Button button )
+{
+  if( !mLTRDirection )
+  {
+    mDirectionButton.SetProperty( PushButton::Property::UNSELECTED_ICON, LTR_IMAGE );
+    mDirectionButton.SetProperty( PushButton::Property::SELECTED_ICON, LTR_SELECTED_IMAGE );
+    mLinearContainer.SetProperty( Actor::Property::LAYOUT_DIRECTION, LayoutDirection::LEFT_TO_RIGHT );
+  }
+  else
+  {
+    mDirectionButton.SetProperty( PushButton::Property::UNSELECTED_ICON, RTL_IMAGE );
+    mDirectionButton.SetProperty( PushButton::Property::SELECTED_ICON, RTL_SELECTED_IMAGE );
+    mLinearContainer.SetProperty( Actor::Property::LAYOUT_DIRECTION, LayoutDirection::RIGHT_TO_LEFT );
+  }
+  mLTRDirection = !mLTRDirection;
+  return true;
+}
+
+// Rotate layout by changing layout
+bool LinearExample::OnRotateClicked( Button button )
+{
+  auto layout = LinearLayout::DownCast( DevelControl::GetLayout( mLinearContainer ) );
+  if( layout.GetOrientation() == LinearLayout::Orientation::VERTICAL )
+  {
+    layout.SetOrientation( LinearLayout::Orientation::HORIZONTAL );
+  }
+  else
+  {
+    layout.SetOrientation( LinearLayout::Orientation::VERTICAL );
+  }
+  return true;
+}
+
+} // namespace Demo
+#ifndef DALI_DEMO_LINEAR_EXAMPLE_H
+#define DALI_DEMO_LINEAR_EXAMPLE_H
+
+/*
+ * Copyright (c) 2018 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 "example.h"
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+namespace Demo
+{
+
+/**
+ * @file linear-example.hcpp
+ * @brief Example of a Linear Layout with mirror feature and
+ * transition from horizontal to vertical.
+ */
+class LinearExample final: public ConnectionTracker, public Example
+{
+public:
+  LinearExample();
+
+  // Creates a Linear Layout Example and displays it.
+  virtual void Create() override;
+
+  // Remove and destroy this layout
+  virtual void Remove() override;
+
+private:
+
+  // Changes the direction of the items.
+  bool OnDirectionClicked( Button button );
+
+  // Alternates the linear layout from horizontal to vertical
+  bool OnRotateClicked( Button button );
+
+private:
+  PushButton mDirectionButton;
+  PushButton mRotateButton;
+  Control mLinearContainer;
+  bool mLTRDirection;
+}; // class LinearContainer
+
+} // namespace Demo
+
+#endif //DALI_DEMO_LINEAR_CONTAINER_H
+/*
+ * Copyright (c) 2018 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 <string>
+#include "padding-example.h"
+#include <dali-toolkit/devel-api/visuals/image-visual-properties-devel.h>
+#include <dali-toolkit/devel-api/visual-factory/visual-factory.h>
+#include <dali-toolkit/devel-api/controls/control-devel.h>
+#include <dali-toolkit/devel-api/layouting/absolute-layout.h>
+#include <dali-toolkit/devel-api/layouting/linear-layout.h>
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+
+namespace
+{
+
+// Helper function to create ImageViews with given filename and size.
+void CreateChildImageView( ImageView& imageView, const char* filename, Size size )
+{
+  imageView = ImageView::New();
+  Property::Map imagePropertyMap;
+  imagePropertyMap[ Toolkit::Visual::Property::TYPE ] = Toolkit::Visual::IMAGE;
+  imagePropertyMap[ Toolkit::ImageVisual::Property::URL ] = filename;
+  imagePropertyMap[ ImageVisual::Property::DESIRED_WIDTH ] = size.width;
+  imagePropertyMap[ ImageVisual::Property::DESIRED_HEIGHT ] = size.height;
+  imageView.SetProperty(Toolkit::ImageView::Property::IMAGE , imagePropertyMap );
+  imageView.SetName("ImageView");
+  imageView.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+  imageView.SetResizePolicy( ResizePolicy::FIXED, Dimension::ALL_DIMENSIONS );
+}
+
+}
+
+namespace Demo
+{
+
+void PaddingExample::Create()
+{
+  // The Init signal is received once (only) during the Application lifetime
+
+  // Create a root layout, ideally Dali would have a default layout in the root layer.
+  // Without this root layer the mAbsoluteLayout (or any other layout) will not
+  // honour WIDTH_SPECIFICATION or HEIGHT_SPECIFICATION settings.
+  // It uses the default stage size and ideally should have a layout added to it.
+  auto stage = Stage::GetCurrent();
+  auto rootLayoutControl = Control::New();
+  rootLayoutControl.SetName( "AbsoluteLayout");
+  auto rootLayout = AbsoluteLayout::New();
+  DevelControl::SetLayout( rootLayoutControl, rootLayout );
+  rootLayoutControl.SetAnchorPoint( AnchorPoint::CENTER );
+  rootLayoutControl.SetParentOrigin( ParentOrigin::CENTER );
+  stage.Add( rootLayoutControl );
+
+  // Create a table view to show a pair of buttons above each image.
+  mHorizontalBox = Control::New();
+
+  // Create LinearLayout for this control.
+  auto hboxLayout = LinearLayout::New();
+  DevelControl::SetLayout( mHorizontalBox, hboxLayout );
+  mHorizontalBox.SetName("HBox");
+  mHorizontalBox.SetBackgroundColor( Color::WHITE );
+  mHorizontalBox.SetProperty( LayoutItem::ChildProperty::WIDTH_SPECIFICATION, 480 );
+  mHorizontalBox.SetProperty( LayoutItem::ChildProperty::HEIGHT_SPECIFICATION,  700 );
+  mHorizontalBox.SetAnchorPoint( AnchorPoint::CENTER );
+  mHorizontalBox.SetParentOrigin( ParentOrigin::CENTER );
+
+  rootLayoutControl.Add( mHorizontalBox );
+
+  mToggleButton = Toolkit::PushButton::New();
+  mToggleButton.SetProperty( Toolkit::Button::Property::LABEL, "Toggle Padding on #2" );
+  mToggleButton.SetParentOrigin( ParentOrigin::BOTTOM_CENTER );
+  mToggleButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
+  mToggleButton.ClickedSignal().Connect( this, &Demo::PaddingExample::ChangePaddingClicked );
+  mToggleButton.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+  mToggleButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
+
+  stage.Add( mToggleButton );
+
+  for( unsigned int x = 0; x < NUMBER_OF_IMAGE_VIEWS; x++ )
+  {
+    CreateChildImageView( mImageViews[x], DEMO_IMAGE_DIR "gallery-small-23.jpg" , Size(100.0f, 100.0f) );
+
+    // Set Padding for second ImageView
+    if( 1 == x )
+    {
+      mImageViews[x].SetProperty(Toolkit::Control::Property::PADDING, Extents( 10.0f,10.0f,5.0f, 5.0f));
+    }
+
+    // Set margin for first ImageView
+    if( 0 == x )
+    {
+      mImageViews[x].SetProperty(Toolkit::Control::Property::MARGIN, Extents( 10.0f,10.0f,0.0f, 0.0f));
+    }
+
+    mHorizontalBox.Add( mImageViews[x] );
+
+    mImageViewToggleStatus[ x ] = true;
+  }
+}
+
+void PaddingExample::Remove()
+{
+  UnparentAndReset( mToggleButton );
+  UnparentAndReset( mHorizontalBox );
+}
+
+bool PaddingExample::ChangePaddingClicked( Toolkit::Button button )
+{
+  if ( true == mImageViewToggleStatus[ 1 ] )
+  {
+    mImageViews[1].SetProperty(Toolkit::Control::Property::PADDING, Extents( .0f, .0f, .0f, .0f));
+    mImageViews[1].SetProperty(Actor::Property::COLOR_ALPHA, 0.5f);
+    mImageViewToggleStatus[ 1 ] = false;
+  }
+  else
+  {
+    mImageViews[1].SetProperty(Toolkit::Control::Property::PADDING, Extents( 10.0f, 10.0f, 5.0f, 5.0f));
+    mImageViews[1].SetProperty(Actor::Property::COLOR_ALPHA, 1.0f);
+    mImageViewToggleStatus[ 1 ] = true;
+  }
+
+  return true;
+}
+
+} // namespace Demo
+#ifndef DALI_DEMO_PADDING_EXAMPLE_H
+#define DALI_DEMO_PADDING_EXAMPLE_H
+
+/*
+ * Copyright (c) 2018 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 <string>
+#include <dali/dali.h>
+#include <dali-toolkit/dali-toolkit.h>
+
+#include "example.h"
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+namespace Demo
+{
+
+/**
+ * @file padding-example.hcpp
+ * @brief Example of a Linear Layout with padding applied, enables updating of padding values for
+ * one of the children.
+ */
+class PaddingExample final: public ConnectionTracker, public Example
+{
+public:
+
+  static const unsigned int NUMBER_OF_IMAGE_VIEWS = 3;
+
+  // Create a Linear layout of ImagesViews, one with a Margin, One with padding.
+  void Create() override;
+
+  // Remove created Layout
+  void Remove() override;
+
+private:
+
+  // Change Paddding callback
+  bool ChangePaddingClicked( Toolkit::Button button );
+
+private:
+
+  Toolkit::Control           mHorizontalBox;
+  Toolkit::ImageView         mImageViews[ NUMBER_OF_IMAGE_VIEWS ];
+  bool                       mImageViewToggleStatus[ NUMBER_OF_IMAGE_VIEWS ];
+  Toolkit::PushButton        mToggleButton;
+
+};
+
+} // namespace Demo
+
+#endif // DALI_DEMO_PADDING_EXAMPLE_H
@@ -18,7 +18,6 @@
 #include <dali-toolkit/dali-toolkit.h>
 #include <dali-toolkit/devel-api/controls/control-devel.h>
-#include <dali-toolkit/devel-api/layouting/hbox-layout.h>
 #include <dali-toolkit/devel-api/layouting/layout-item-impl.h>
 #include "custom-layout.h"
@@ -2,7 +2,7 @@
 Name:       com.samsung.dali-demo
 Summary:    The OpenGLES Canvas Core Demo
-Version:    1.3.28
+Version:    1.3.29
 Release:    1
 Group:      System/Libraries
 License:    Apache-2.0
@@ -82,6 +82,9 @@ msgstr &quot;Item View&quot;
 msgid "DALI_DEMO_STR_TITLE_LIGHTS_AND_SHADOWS"
 msgstr "Lights and Shadows"
+msgid "DALI_DEMO_STR_TITLE_LAYOUTING"
+msgstr "Layouting"
+
 msgid "DALI_DEMO_STR_TITLE_LINE_MESH"
 msgstr "Mesh Line"
@@ -85,6 +85,9 @@ msgstr &quot;Item View&quot;
 msgid "DALI_DEMO_STR_TITLE_LIGHTS_AND_SHADOWS"
 msgstr "Lights and Shadows"
+msgid "DALI_DEMO_STR_TITLE_LAYOUTING"
+msgstr "Layouting"
+
 msgid "DALI_DEMO_STR_TITLE_LINE_MESH"
 msgstr "Mesh Line"
@@ -64,6 +64,9 @@ msgstr &quot;چیزوں کی فہرست&quot;
 msgid "DALI_DEMO_STR_TITLE_LIGHTS_AND_SHADOWS"
 msgstr "روشنی اور سائے"
+msgid "DALI_DEMO_STR_TITLE_LAYOUTING"
+msgstr "تَرتيب"
+
 msgid "DALI_DEMO_STR_TITLE_LINE_MESH"
 msgstr "لکیریں"
 /*
- * Copyright (c) 2017 Samsung Electronics Co., Ltd.
+ * Copyright (c) 2018 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.
@@ -63,6 +63,7 @@ extern &quot;C&quot;
 #define DALI_DEMO_STR_TITLE_IMAGE_VIEW_URL              dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_IMAGE_VIEW_URL")
 #define DALI_DEMO_STR_TITLE_ITEM_VIEW                   dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_ITEM_VIEW")
 #define DALI_DEMO_STR_TITLE_LIGHTS_AND_SHADOWS          dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_LIGHTS_AND_SHADOWS")
+#define DALI_DEMO_STR_TITLE_LAYOUTING                   dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_LAYOUTING")
 #define DALI_DEMO_STR_TITLE_LINE_MESH                   dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_LINE_MESH")
 #define DALI_DEMO_STR_TITLE_MAGNIFIER                   dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_MAGNIFIER")
 #define DALI_DEMO_STR_TITLE_MESH_MORPH                  dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_MESH_MORPH")
@@ -137,6 +138,7 @@ extern &quot;C&quot;
 #define DALI_DEMO_STR_TITLE_IMAGE_VIEW_URL              "Image View URL"
 #define DALI_DEMO_STR_TITLE_ITEM_VIEW                   "Item View"
 #define DALI_DEMO_STR_TITLE_LIGHTS_AND_SHADOWS          "Lights and shadows"
+#define DALI_DEMO_STR_TITLE_LAYOUTING                   "Layouting"
 #define DALI_DEMO_STR_TITLE_LINE_MESH                   "Mesh Line"
 #define DALI_DEMO_STR_TITLE_MAGNIFIER                   "Magnifier"
 #define DALI_DEMO_STR_TITLE_MESH_MORPH                  "Mesh Morph"