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

Change-Id: I304ec82bd26456c8594387ab1bf704bb658b1e65

[dali_1.3.36] Merge branch 'devel/master'
Change-Id: I304ec82bd26456c8594387ab1bf704bb658b1e65
György Straub
2 parents abfe3367 f75cc82b
Showing 14 changed files with 466 additions and 37 deletions
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/grid-example.cpp
examples/layouting/grid-example.h
examples/layouting/layout-utilities.cpp
examples/layouting/layout-utilities.h
examples/layouting/layouting-examples.cpp
examples/layouting/linear-example.cpp
examples/layouting/padding-example.cpp
examples/layouting/padding-example.h
packaging/com.samsung.dali-demo.spec
@@ -17,6 +17,7 @@
 #include <string>
 #include "absolute-example.h"
+#include "layout-utilities.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>
@@ -28,6 +29,7 @@ using namespace Dali::Toolkit;
 namespace
 {
+const char* const TITLE = "Absolute Example";
 struct ImageDetails
 {
@@ -67,7 +69,8 @@ namespace Demo
 {
 AbsoluteExample::AbsoluteExample()
-: mRootLayoutControl(),
+: Example( TITLE ),
+  mRootLayoutControl(),
   mAbsoluteLayoutContainer(),
   mLayoutSizeToggleStatus( true ),
   mToggleButton()
@@ -77,16 +80,9 @@ AbsoluteExample::AbsoluteExample()
 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 );
+  // This layout will be the size of the stage but allows subsequent layouts to be any size.
+  mRootLayoutControl = LayoutUtilities::CreateRootContainer();
   stage.Add( mRootLayoutControl );
   // Create an Absolute Layout to show ImageViews at explictly provided positions.
@@ -34,11 +34,12 @@ namespace Demo
  * @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
+class AbsoluteExample final: public ConnectionTracker, public Example
 {
 public:
   static const unsigned int NUMBER_OF_IMAGE_VIEWS = 4;
+  // Constructor
   AbsoluteExample();
   // Creates a Absolute Layout Example and displays it.
@@ -49,7 +50,6 @@ public:
 private:
-
   // Callback when change size button is pressed
   bool ChangeSizeClicked( Toolkit::Button button );
@@ -18,6 +18,9 @@
  *
  */
+// EXTERNAL INCLUDES
+#include <string>
+
 namespace Demo
 {
@@ -35,6 +38,28 @@ public:
   /// Virtual destructor
   virtual ~Example() = default;
+
+  /**
+   * Gets the title set for this example
+   * @return title
+   */
+  const std::string& GetExampleTitle() const
+  {
+    return mTitle;
+  }
+
+protected:
+  /**
+   * Constructor for Example
+   * @param[in] title Title to be used for the example
+   */
+  Example( const std::string& title )
+  : mTitle( title )
+  {
+  }
+
+private:
+  const std::string mTitle;
 };
 } // namespace Demo
@@ -26,6 +26,7 @@ using namespace Dali::Toolkit;
 namespace
 {
+const char* const TITLE = "Flex Example";
 // Button file names
 const char* LTR_IMAGE( DEMO_IMAGE_DIR "icon-play.png" );
@@ -81,7 +82,8 @@ namespace Demo
 {
 FlexExample::FlexExample()
-: mLTRDirection(true)
+: Example( TITLE ),
+  mLTRDirection(true)
 {
 }
@@ -37,6 +37,8 @@ namespace Demo
 class FlexExample final: public ConnectionTracker, public Example
 {
 public:
+
+  // Constructor
   FlexExample();
   // Creates a Flex Layout Example and displays it.
+/*
+ * 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 "grid-example.h"
+#include "layout-utilities.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/grid.h>
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+namespace
+{
+const char* const TITLE = "Grid Example";
+
+// 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 );
+}
+
+enum CurrentExample
+{
+  GRID_EXACT_WIDTH = 0,
+  ITEMS_WITH_MARGINS,
+  GRID_MATCH_PARENT,
+  GRID_WRAP_CONTENT,
+  ADD_ITEMS,
+  CHANGE_TO_3_COLUMNS
+};
+
+}
+
+namespace Demo
+{
+
+GridExample::GridExample()
+: Example( TITLE )
+{
+}
+
+void GridExample::Create()
+{
+  // The Init signal is received once (only) during the Application lifetime
+  mToggleStatus = 0;
+  auto stage = Stage::GetCurrent();
+
+  // This layout will be the size of the stage but allow the Grid layout to be any size.
+  mRootLayoutControl = LayoutUtilities::CreateRootContainer();
+  stage.Add( mRootLayoutControl );
+
+  // Create a table view to show a pair of buttons above each image.
+  mGridContainer = Control::New();
+
+  // Create LinearLayout for this control.
+  auto gridLayout = Grid::New();
+  gridLayout.SetAnimateLayout(true);
+  gridLayout.SetNumberOfColumns( 2 );
+  DevelControl::SetLayout( mGridContainer, gridLayout );
+  mGridContainer.SetName("GridContainer");
+  mGridContainer.SetBackgroundColor( Color::WHITE );
+  mGridContainer.SetProperty( LayoutItem::ChildProperty::WIDTH_SPECIFICATION, ChildLayoutData::WRAP_CONTENT );
+  mGridContainer.SetProperty( LayoutItem::ChildProperty::HEIGHT_SPECIFICATION,  ChildLayoutData::WRAP_CONTENT );
+  mGridContainer.SetProperty( Toolkit::Control::Property::PADDING, Extents( 20,20,20,20 ) );
+  mGridContainer.SetParentOrigin( ParentOrigin::CENTER );
+
+  mRootLayoutControl.Add( mGridContainer );
+
+  for( unsigned int x = 0; x < INITIAL_NUMBER_OF_IMAGE_VIEWS; x++ )
+  {
+    ImageView imageView;
+    CreateChildImageView( imageView, DEMO_IMAGE_DIR "gallery-small-23.jpg" , Size(100.0f, 100.0f) );
+    mImageViews.push_back( imageView );
+    mGridContainer.Add( mImageViews[x] );
+  }
+
+  // Button toggles the size of the layout
+  mToggleButton = PushButton::New();
+  mToggleButton.SetProperty( Toolkit::Button::Property::LABEL, "Set Width 300" );
+  mToggleButton.SetParentOrigin( ParentOrigin::BOTTOM_CENTER );
+  mToggleButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
+  mToggleButton.ClickedSignal().Connect( this, &Demo::GridExample::ToggleButtonClicked );
+  mToggleButton.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+  mToggleButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
+
+  stage.Add( mToggleButton );
+}
+
+void GridExample::Remove()
+{
+  mImageViews.clear();
+  UnparentAndReset( mGridContainer );
+  UnparentAndReset( mRootLayoutControl );
+  UnparentAndReset( mToggleButton );
+}
+
+void GridExample::ChangeTo3Columns()
+{
+  Grid gridLayout = Grid::DownCast( DevelControl::GetLayout(mGridContainer) );
+  if ( gridLayout )
+  {
+    gridLayout.SetNumberOfColumns( 3 );
+  }
+}
+
+void GridExample::AddItemsInteractively()
+{
+  if( mImageViews.size() < MAX_NUMBER_OF_IMAGE_VIEWS )
+  {
+    ImageView imageView;
+    CreateChildImageView( imageView, DEMO_IMAGE_DIR "gallery-small-23.jpg" , Size(100.0f, 100.0f) );
+    mImageViews.push_back( imageView );
+    mGridContainer.Add( imageView);
+
+    // Add item button shows how many items left to add.
+    unsigned int numberOfAdditonalImageViews = MAX_NUMBER_OF_IMAGE_VIEWS-INITIAL_NUMBER_OF_IMAGE_VIEWS;
+    unsigned int remainingImageViews = numberOfAdditonalImageViews - ( ( mImageViews.size() - INITIAL_NUMBER_OF_IMAGE_VIEWS) );
+    std::string buttonLabel( "Add item["+ std::to_string( numberOfAdditonalImageViews-remainingImageViews ) +"/"+
+                                          std::to_string( numberOfAdditonalImageViews)+"]" );
+    mToggleButton.SetProperty( Toolkit::Button::Property::LABEL, buttonLabel );
+  }
+}
+
+void GridExample::AddMarginToItems()
+{
+  for( unsigned int x = 0; x < INITIAL_NUMBER_OF_IMAGE_VIEWS; x++ )
+  {
+    mImageViews[x].SetProperty(Toolkit::Control::Property::MARGIN, Extents( 20,20,20,10));
+  }
+}
+
+void GridExample::RemoveMarginsFromItems()
+{
+  for( unsigned int x = 0; x < INITIAL_NUMBER_OF_IMAGE_VIEWS; x++ )
+  {
+    mImageViews[x].SetProperty(Toolkit::Control::Property::MARGIN, Extents());
+  }
+}
+
+void GridExample::MatchParentOnWidth()
+{
+  mGridContainer.SetProperty( LayoutItem::ChildProperty::WIDTH_SPECIFICATION,ChildLayoutData::MATCH_PARENT );
+}
+
+void GridExample::WrapContentOnWidth()
+{
+  mGridContainer.SetProperty( LayoutItem::ChildProperty::WIDTH_SPECIFICATION,  ChildLayoutData::WRAP_CONTENT );
+}
+
+void GridExample::SetExactWidth()
+{
+  mGridContainer.SetProperty( LayoutItem::ChildProperty::WIDTH_SPECIFICATION,  300 );
+}
+
+bool GridExample::ToggleButtonClicked( Toolkit::Button button )
+{
+  switch( mToggleStatus )
+  {
+    case GRID_EXACT_WIDTH :
+    {
+      SetExactWidth();
+      mToggleButton.SetProperty( Toolkit::Button::Property::LABEL, "Set Child Margin" );
+      mToggleStatus = ITEMS_WITH_MARGINS;
+      break;
+    }
+    case ITEMS_WITH_MARGINS :
+    {
+      AddMarginToItems();
+      mToggleStatus = GRID_MATCH_PARENT;
+      mToggleButton.SetProperty( Toolkit::Button::Property::LABEL, "Set width MATCH_PARENT" );
+      break;
+    }
+    case GRID_MATCH_PARENT :
+    {
+      RemoveMarginsFromItems();
+      MatchParentOnWidth();
+      mToggleButton.SetProperty( Toolkit::Button::Property::LABEL, "Set width WRAP_CONTENT" );
+      mToggleStatus = GRID_WRAP_CONTENT;
+      break;
+    }
+    case GRID_WRAP_CONTENT :
+    {
+      WrapContentOnWidth();
+      mToggleButton.SetProperty( Toolkit::Button::Property::LABEL, "Add item" );
+      mToggleStatus = ADD_ITEMS;
+      break;
+    }
+    case ADD_ITEMS :
+    {
+      if( mGridContainer.GetChildCount() < MAX_NUMBER_OF_IMAGE_VIEWS )
+      {
+        AddItemsInteractively();
+      }
+
+      if( mGridContainer.GetChildCount() == MAX_NUMBER_OF_IMAGE_VIEWS )
+      {
+        // Remove button when no more items to add
+        mToggleStatus= CHANGE_TO_3_COLUMNS;
+        mToggleButton.SetProperty( Toolkit::Button::Property::LABEL, "Change Columns" );
+      }
+      break;
+    }
+    case CHANGE_TO_3_COLUMNS :
+    {
+      ChangeTo3Columns();
+      mToggleStatus = GRID_EXACT_WIDTH;
+      UnparentAndReset( mToggleButton );
+      break;
+    }
+    default :
+    {
+      mToggleStatus = GRID_EXACT_WIDTH;
+    }
+  }
+  return true;
+}
+
+} // namespace Demo
+#ifndef DALI_DEMO_GRID_EXAMPLE_H
+#define DALI_DEMO_GRID_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 grid-example.hcpp
+ * @brief Example of a Grid Layout
+ */
+class GridExample final: public ConnectionTracker, public Example
+{
+public:
+
+  // Constructor
+  GridExample();
+
+  static const unsigned int MAX_NUMBER_OF_IMAGE_VIEWS = 9;
+  static const unsigned int INITIAL_NUMBER_OF_IMAGE_VIEWS = 5;
+
+  // Create a Grid layout of ImagesViews
+  void Create() override;
+
+  // Remove created Layout
+  void Remove() override;
+
+private:
+
+  // Callback for button pressed
+  bool ToggleButtonClicked( Toolkit::Button button );
+
+  // Actions to perform in this example
+  void ChangeTo3Columns();
+  void AddItemsInteractively();
+  void AddMarginToItems();
+  void RemoveMarginsFromItems();
+  void MatchParentOnWidth();
+  void WrapContentOnWidth();
+  void SetExactWidth();
+
+private:
+
+  Toolkit::Control                mRootLayoutControl;
+  Toolkit::Control                mGridContainer;
+  std::vector<Toolkit::ImageView> mImageViews;
+  Toolkit::PushButton             mToggleButton;
+  unsigned int                    mToggleStatus;
+};
+
+} // namespace Demo
+
+#endif // DALI_DEMO_GRID_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-toolkit/devel-api/controls/control-devel.h>
+#include <dali-toolkit/devel-api/layouting/absolute-layout.h>
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+namespace LayoutUtilities
+{
+Toolkit::Control CreateRootContainer()
+{
+  Control rootLayoutControl = Control::New();
+  rootLayoutControl.SetName( "AbsoluteLayout");
+  auto rootLayout = AbsoluteLayout::New();
+  DevelControl::SetLayout( rootLayoutControl, rootLayout );
+  rootLayoutControl.SetAnchorPoint( AnchorPoint::CENTER );
+  rootLayoutControl.SetParentOrigin( ParentOrigin::CENTER );
+
+  return rootLayoutControl;
+}
+
+} // namespace LayoutUtilities
 \ No newline at end of file
+/*
+ * 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.
+ *
+ */
+
+#ifndef DALI_DEMO_LAYOUT_UTILITIES_H
+#define DALI_DEMO_LAYOUT_UTILITIES_H
+
+#include <dali-toolkit/public-api/controls/control.h>
+
+namespace LayoutUtilities
+{
+/**
+ * @brief
+ * 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.
+ * @return resulting root layout
+ */
+Dali::Toolkit::Control CreateRootContainer();
+} // namespace LayoutUtilities
+
+#endif // DALI_DEMO_LAYOUT_UTILITIES_H
 \ No newline at end of file
@@ -27,6 +27,7 @@
 #include "linear-example.h"
 #include "padding-example.h"
 #include "flex-example.h"
+#include "grid-example.h"
 #include "example.h"
 #include "absolute-example.h"
@@ -39,18 +40,18 @@ 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 ) );
+  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) ) ;
+  container.push_back( ExamplePointer(new Demo::GridExample) ) ;
 }
 } // anonymous namespace
@@ -86,12 +87,12 @@ private:
     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 );
+    mToolbarTitle = TextLabel::New( "");
+    mToolbarTitle.SetParentOrigin( ParentOrigin::CENTER );
+    mToolbarTitle.SetAnchorPoint( AnchorPoint::CENTER );
+    mToolbarTitle.SetProperty( TextLabel::Property::TEXT_COLOR, Color::BLUE );
+    mToolbarTitle.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, HorizontalAlignment::LEFT );
+    toolbar.Add( mToolbarTitle );
     mNextLayout = PushButton::New();
     mNextLayout.SetProperty( Toolkit::Button::Property::LABEL, "change layout");
@@ -105,6 +106,7 @@ private:
     if( ! mLayoutingExamples.empty() )
     {
       mLayoutingExamples[ mLayoutIndex ]->Create();
+      mToolbarTitle.SetProperty(Toolkit::TextLabel::Property::TEXT, mLayoutingExamples[ mLayoutIndex ]->GetExampleTitle() );
     }
   }
@@ -115,6 +117,7 @@ private:
       mLayoutingExamples[ mLayoutIndex ]->Remove();
       mLayoutIndex = ( mLayoutIndex + 1 ) % mLayoutingExamples.size();
       mLayoutingExamples[ mLayoutIndex ]->Create();
+      mToolbarTitle.SetProperty(Toolkit::TextLabel::Property::TEXT, mLayoutingExamples[ mLayoutIndex ]->Example::GetExampleTitle() );
     }
     return true;
   }
@@ -139,6 +142,7 @@ private:
   ExampleContainer mLayoutingExamples;
   PushButton mNextLayout;
   unsigned int mLayoutIndex;
+  TextLabel mToolbarTitle;
 };
 int DALI_EXPORT_API main( int argc, char **argv )
@@ -27,6 +27,7 @@ using namespace Dali::Toolkit;
 namespace
 {
+const char* const TITLE = "Linear Example";
 // Button file names
 const char* LTR_IMAGE( DEMO_IMAGE_DIR "icon-play.png" );
@@ -69,7 +70,8 @@ namespace Demo
 {
 LinearExample::LinearExample()
-: mLTRDirection(true)
+: Example( TITLE ),
+  mLTRDirection(true)
 {
 }
@@ -17,6 +17,7 @@
 #include <string>
 #include "padding-example.h"
+#include "layout-utilities.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>
@@ -29,6 +30,7 @@ using namespace Dali::Toolkit;
 namespace
 {
+const char* const TITLE = "Padding Example";
 // Helper function to create ImageViews with given filename and size.
 void CreateChildImageView( ImageView& imageView, const char* filename, Size size )
@@ -50,21 +52,17 @@ void CreateChildImageView( ImageView&amp; imageView, const char* filename, Size size
 namespace Demo
 {
+PaddingExample::PaddingExample()
+: Example( TITLE )
+{}
+
 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 );
+
+  Control rootLayoutControl = LayoutUtilities::CreateRootContainer();
   stage.Add( rootLayoutControl );
   // Create a table view to show a pair of buttons above each image.
@@ -41,6 +41,9 @@ public:
   static const unsigned int NUMBER_OF_IMAGE_VIEWS = 3;
+  // Constructor
+  PaddingExample();
+
   // Create a Linear layout of ImagesViews, one with a Margin, One with padding.
   void Create() override;
@@ -2,7 +2,7 @@
 Name:       com.samsung.dali-demo
 Summary:    The OpenGLES Canvas Core Demo
-Version:    1.3.35
+Version:    1.3.36
 Release:    1
 Group:      System/Libraries
 License:    Apache-2.0