Added an example which shows a layout containing animating contact cards

Change-Id: Ic59f2e05275694ed1730628b9a1ac4950a759e3f

Added an example which shows a layout containing animating contact cards
Change-Id: Ic59f2e05275694ed1730628b9a1ac4950a759e3f
Adeel Kazmi
1 parent acad6b41
Showing 29 changed files with 1226 additions and 1 deletions
.gitignore
build/tizen/CMakeLists.txt
com.samsung.dali-demo.xml
demo/dali-demo.cpp
examples/contact-cards/README.md
examples/contact-cards/clipped-image.cpp
examples/contact-cards/clipped-image.h
examples/contact-cards/contact-card-layout-info.h
examples/contact-cards/contact-card-layouter.cpp
examples/contact-cards/contact-card-layouter.h
examples/contact-cards/contact-card.cpp
examples/contact-cards/contact-card.h
examples/contact-cards/contact-cards-example.cpp
examples/contact-cards/contact-data.cpp
examples/contact-cards/contact-data.h
resources/po/as.po
resources/po/de.po
resources/po/en_GB.po
resources/po/en_US.po
resources/po/es.po
@@ -39,3 +39,7 @@ dali-builder
 demo-theme.json
 simple-image-wall.js
 /shared/resources-location.cpp
+/build/tizen/documentation.list
+/debugfiles.list
+/debuglinks.list
+/debugsources.list
@@ -93,6 +93,7 @@ CONFIGURE_FILE( resources-location.in ${DEMO_SHARED}/resources-location.cpp )
  
 #Replace @DEMO_STYLE_IMAGE_DIR@ in following files
 CONFIGURE_FILE( ${LOCAL_STYLE_DIR}/demo-theme.json.in ${LOCAL_STYLE_DIR}/demo-theme.json )
+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 )
@@ -169,4 +169,7 @@
 	<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>
@@ -83,6 +83,7 @@ int DALI_EXPORT_API main(int argc, char **argv)
   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 );
  
+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.
+/*
+ * 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
+#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
+#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
+
+/*
+ * 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;
+}
+#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
+/*
+ * 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();
+  }
+}
+#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
+/*
+ * 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;
+}
+/*
+ * 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
+#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
@@ -13,6 +13,9 @@ msgstr &quot;ক্লিক্&quot;
 msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
 msgstr "ঝুৰ্"
  
+msgid "DALI_DEMO_STR_TITLE_CONTACT_CARDS"
+msgstr "অঁপইতা "
+
 msgid "DALI_DEMO_STR_TITLE_CUBE_TRANSITION"
 msgstr "ঘনক পৰিৱৰ্তনীয় প্ৰভাৱ"
  
@@ -11,7 +11,10 @@ msgid &quot;DALI_DEMO_STR_TITLE_BUTTONS&quot;
 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"
@@ -13,6 +13,9 @@ msgstr &quot;Buttons&quot;
 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"
  
@@ -13,6 +13,9 @@ msgstr &quot;Buttons&quot;
 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"
  
@@ -13,6 +13,9 @@ msgstr &quot;Botones&quot;
 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"
  
@@ -13,6 +13,9 @@ msgstr &quot;Painikkeet&quot;
 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"
  
@@ -13,6 +13,9 @@ msgstr &quot;버튼&quot;
 msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
 msgstr "색상 그라디언트"
  
+msgid "DALI_DEMO_STR_TITLE_CONTACT_CARDS"
+msgstr "접촉"
+
 msgid "DALI_DEMO_STR_TITLE_CUBE_TRANSITION"
 msgstr "입방체 전환"
  
@@ -13,6 +13,9 @@ msgstr &quot;ബട്ടണുകൾ&quot;
 msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
 msgstr "വർണ്ണ ഗ്രേഡിയന്റ്"
  
+msgid "DALI_DEMO_STR_TITLE_CONTACT_CARDS"
+msgstr "ബന്ധങ്ങൾ"
+
 msgid "DALI_DEMO_STR_TITLE_CUBE_TRANSITION"
 msgstr "സമചതുരക്കട്ട സംക്രമണ ഇഫക്ട്"
  
@@ -13,6 +13,9 @@ msgstr &quot;بٹنوں&quot;
 msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
 msgstr "رنگ میلان"
  
+msgid "DALI_DEMO_STR_TITLE_CONTACT_CARDS"
+msgstr "لوگ"
+
 msgid "DALI_DEMO_STR_TITLE_CUBE_TRANSITION"
 msgstr "کیوب منتقلی"
  
@@ -13,6 +13,9 @@ msgstr &quot;按钮&quot;
 msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
 msgstr "颜色梯度"
  
+msgid "DALI_DEMO_STR_TITLE_CONTACT_CARDS"
+msgstr "往来"
+
 msgid "DALI_DEMO_STR_TITLE_CUBE_TRANSITION"
 msgstr "方块切换效果"
  
 demo-theme.json
+contact-cards-example-theme.json
 style-example-theme-three.json
 style-example-theme-two.json
 style-example-theme-one.json
+/*
+ * 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
+    }
+  }
+}
+/*
+ * 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
+    }
+  }
+}
@@ -37,6 +37,7 @@ extern &quot;C&quot;
 #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")
@@ -87,6 +88,7 @@ extern &quot;C&quot;
 #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"