diff --git a/res/layout/quickcontact_content.xml b/res/layout/quickcontact_content.xml
index bab8b6d..b72340b 100644
--- a/res/layout/quickcontact_content.xml
+++ b/res/layout/quickcontact_content.xml
@@ -18,65 +18,36 @@
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:fillViewport="true"
-    android:id="@+id/content_scroller">
+    android:id="@+id/content_scroller"
+    android:background="@color/card_margin_color">
 
     <!-- All the cards should be inserted into this LinearLayout -->
     <LinearLayout
         android:layout_width="match_parent"
-        android:layout_height="match_parent"
+        android:layout_height="wrap_content"
         android:orientation="vertical"
-        android:id="@+id/card_container"
         android:paddingTop="@dimen/first_card_marginTop"
-        android:background="@color/card_margin_color"  >
+        android:id="@+id/card_container" >
 
-        <!-- We cannot set the border directly on ExpandingEntryCardView without it looking
-             funny because of the card's elevation value. So we need a parent FrameLayout -->
-        <FrameLayout
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:background="@drawable/quickcontact_card_border">
-            <com.android.contacts.quickcontact.ExpandingEntryCardView
-                style="@style/ExpandingEntryCardStyle"
-                android:id="@+id/no_contact_data_card"
-                android:visibility="gone" />
-        </FrameLayout>
+        <com.android.contacts.quickcontact.ExpandingEntryCardView
+            style="@style/ExpandingEntryCardStyle"
+            android:id="@+id/no_contact_data_card"
+            android:visibility="gone" />
 
-        <FrameLayout
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:background="@drawable/quickcontact_card_border">
-            <com.android.contacts.quickcontact.ExpandingEntryCardView
-                style="@style/ExpandingEntryCardStyle"
-                android:id="@+id/communication_card"
-                android:visibility="gone" />
-        </FrameLayout>
+        <com.android.contacts.quickcontact.ExpandingEntryCardView
+            style="@style/ExpandingEntryCardStyle"
+            android:id="@+id/communication_card"
+            android:visibility="gone" />
 
-        <FrameLayout
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:background="@drawable/quickcontact_card_border">
-            <com.android.contacts.quickcontact.ExpandingEntryCardView
-                style="@style/ExpandingEntryCardStyle"
-                android:id="@+id/recent_card"
-                android:visibility="gone" />
-        </FrameLayout>
+        <com.android.contacts.quickcontact.ExpandingEntryCardView
+            style="@style/ExpandingEntryCardStyle"
+            android:id="@+id/recent_card"
+            android:visibility="gone" />
 
-        <FrameLayout
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:background="@drawable/quickcontact_card_border">
-            <com.android.contacts.quickcontact.ExpandingEntryCardView
-                style="@style/ExpandingEntryCardStyle"
-                android:id="@+id/about_card"
-                android:visibility="gone" />
-        </FrameLayout>
-
-        <!-- Fill the rest of the LinearLayout with the correct background color -->
-        <View
-            android:id="@+id/card_empty_space"
-            android:layout_width="match_parent"
-            android:layout_height="match_parent"
-            android:background="@color/card_margin_color" />
+        <com.android.contacts.quickcontact.ExpandingEntryCardView
+            style="@style/ExpandingEntryCardStyle"
+            android:id="@+id/about_card"
+            android:visibility="gone" />
 
     </LinearLayout>
 
diff --git a/src/com/android/contacts/quickcontact/ExpandingEntryCardView.java b/src/com/android/contacts/quickcontact/ExpandingEntryCardView.java
index 2063c51..0ec1bac 100644
--- a/src/com/android/contacts/quickcontact/ExpandingEntryCardView.java
+++ b/src/com/android/contacts/quickcontact/ExpandingEntryCardView.java
@@ -15,11 +15,6 @@
  */
 package com.android.contacts.quickcontact;
 
-import com.android.contacts.R;
-
-import android.animation.Animator;
-import android.animation.AnimatorListenerAdapter;
-import android.animation.ValueAnimator;
 import android.content.Context;
 import android.content.Intent;
 import android.content.res.Resources;
@@ -27,18 +22,25 @@
 import android.graphics.Rect;
 import android.graphics.drawable.Drawable;
 import android.text.TextUtils;
+import android.transition.ChangeBounds;
+import android.transition.ChangeScroll;
+import android.transition.Fade;
+import android.transition.Transition;
+import android.transition.Transition.TransitionListener;
+import android.transition.TransitionManager;
+import android.transition.TransitionSet;
 import android.util.AttributeSet;
 import android.util.Log;
 import android.view.LayoutInflater;
 import android.view.TouchDelegate;
 import android.view.View;
 import android.view.ViewGroup;
-import android.view.ViewTreeObserver;
-import android.view.ViewTreeObserver.OnPreDrawListener;
 import android.widget.ImageView;
 import android.widget.LinearLayout;
 import android.widget.TextView;
 
+import com.android.contacts.R;
+
 import java.util.ArrayList;
 import java.util.List;
 
@@ -48,6 +50,11 @@
 public class ExpandingEntryCardView extends LinearLayout {
 
     private static final String TAG = "ExpandingEntryCardView";
+    private static final int DURATION_EXPAND_ANIMATION_FADE_IN = 200;
+    private static final int DELAY_EXPAND_ANIMATION_FADE_IN = 100;
+
+    public static final int DURATION_EXPAND_ANIMATION_CHANGE_BOUNDS = 300;
+    public static final int DURATION_COLLAPSE_ANIMATION_CHANGE_BOUNDS = 300;
 
     /**
      * Entry data.
@@ -150,6 +157,7 @@
 
     public interface ExpandingEntryCardViewListener {
         void onCollapse(int heightDelta);
+        void onExpand(int heightDelta);
     }
 
     private View mExpandCollapseButton;
@@ -171,6 +179,8 @@
     private int mThemeColor;
     private ColorFilter mThemeColorFilter;
     private boolean mIsAlwaysExpanded;
+    /** The ViewGroup to run the expand/collapse animation on */
+    private ViewGroup mAnimationViewGroup;
 
     private final OnClickListener mExpandCollapseButtonListener = new OnClickListener() {
         @Override
@@ -214,7 +224,7 @@
      */
     public void initialize(List<List<Entry>> entries, int numInitialVisibleEntries,
             boolean isExpanded, boolean isAlwaysExpanded,
-            ExpandingEntryCardViewListener listener) {
+            ExpandingEntryCardViewListener listener, ViewGroup animationViewGroup) {
         LayoutInflater layoutInflater = LayoutInflater.from(getContext());
         mIsExpanded = isExpanded;
         mIsAlwaysExpanded = isAlwaysExpanded;
@@ -235,6 +245,7 @@
             mCollapsedEntriesCount = mEntries.size();
         }
         mListener = listener;
+        mAnimationViewGroup = animationViewGroup;
 
         if (mIsExpanded) {
             updateExpandCollapseButton(getCollapseButtonText());
@@ -300,37 +311,41 @@
 
     private void addEntry(View entry) {
         if (mEntriesViewGroup.getChildCount() > 0) {
-            View separator = new View(getContext());
-            separator.setBackgroundColor(getResources().getColor(
-                    R.color.expanding_entry_card_item_separator_color));
-            LayoutParams layoutParams = generateDefaultLayoutParams();
-            Resources resources = getResources();
-            layoutParams.height = resources.getDimensionPixelSize(
-                    R.dimen.expanding_entry_card_item_separator_height);
-            // The separator is aligned with the text in the entry. This is offset by a default
-            // margin. If there is an icon present, the icon's width and margin are added
-            int marginStart = resources.getDimensionPixelSize(
-                    R.dimen.expanding_entry_card_item_padding_start);
-            ImageView entryIcon = (ImageView) entry.findViewById(R.id.icon);
-            if (entryIcon.getDrawable() != null) {
-                int imageWidthAndMargin =
-                        resources.getDimensionPixelSize(
-                                R.dimen.expanding_entry_card_item_icon_width) +
-                        resources.getDimensionPixelSize(
-                                R.dimen.expanding_entry_card_item_image_spacing);
-                marginStart += imageWidthAndMargin;
-            }
-            if (getLayoutDirection() == View.LAYOUT_DIRECTION_RTL) {
-                layoutParams.rightMargin = marginStart;
-            } else {
-                layoutParams.leftMargin = marginStart;
-            }
-            separator.setLayoutParams(layoutParams);
-            mEntriesViewGroup.addView(separator);
+            mEntriesViewGroup.addView(createSeparator(entry));
         }
         mEntriesViewGroup.addView(entry);
     }
 
+    private View createSeparator(View entry) {
+        View separator = new View(getContext());
+        separator.setBackgroundColor(getResources().getColor(
+                R.color.expanding_entry_card_item_separator_color));
+        LayoutParams layoutParams = generateDefaultLayoutParams();
+        Resources resources = getResources();
+        layoutParams.height = resources.getDimensionPixelSize(
+                R.dimen.expanding_entry_card_item_separator_height);
+        // The separator is aligned with the text in the entry. This is offset by a default
+        // margin. If there is an icon present, the icon's width and margin are added
+        int marginStart = resources.getDimensionPixelSize(
+                R.dimen.expanding_entry_card_item_padding_start);
+        ImageView entryIcon = (ImageView) entry.findViewById(R.id.icon);
+        if (entryIcon.getDrawable() != null) {
+            int imageWidthAndMargin =
+                    resources.getDimensionPixelSize(
+                            R.dimen.expanding_entry_card_item_icon_width) +
+                    resources.getDimensionPixelSize(
+                            R.dimen.expanding_entry_card_item_image_spacing);
+            marginStart += imageWidthAndMargin;
+        }
+        if (getLayoutDirection() == View.LAYOUT_DIRECTION_RTL) {
+            layoutParams.rightMargin = marginStart;
+        } else {
+            layoutParams.leftMargin = marginStart;
+        }
+        separator.setLayoutParams(layoutParams);
+        return separator;
+    }
+
     private CharSequence getExpandButtonText() {
         if (!TextUtils.isEmpty(mExpandButtonText)) {
             return mExpandButtonText;
@@ -543,77 +558,102 @@
     }
 
     private void expand() {
-        final int startingHeight = mEntriesViewGroup.getHeight();
+        ChangeBounds boundsTransition = new ChangeBounds();
+        boundsTransition.setDuration(DURATION_EXPAND_ANIMATION_CHANGE_BOUNDS);
+
+        Fade fadeIn = new Fade(Fade.IN);
+        fadeIn.setDuration(DURATION_EXPAND_ANIMATION_FADE_IN);
+        fadeIn.setStartDelay(DELAY_EXPAND_ANIMATION_FADE_IN);
+
+        TransitionSet transitionSet = new TransitionSet();
+        transitionSet.addTransition(boundsTransition);
+        transitionSet.addTransition(fadeIn);
+
+        final ViewGroup transitionViewContainer = mAnimationViewGroup == null ?
+                this : mAnimationViewGroup;
+
+        transitionSet.addListener(new TransitionListener() {
+            @Override
+            public void onTransitionStart(Transition transition) {
+                // The listener is used to turn off suppressing, the proper delta is not necessary
+                mListener.onExpand(0);
+            }
+
+            @Override
+            public void onTransitionEnd(Transition transition) {
+            }
+
+            @Override
+            public void onTransitionCancel(Transition transition) {
+            }
+
+            @Override
+            public void onTransitionPause(Transition transition) {
+            }
+
+            @Override
+            public void onTransitionResume(Transition transition) {
+            }
+        });
+
+        TransitionManager.beginDelayedTransition(transitionViewContainer, transitionSet);
 
         mIsExpanded = true;
         // In order to insert new entries, we may need to inflate them for the first time
         inflateAllEntries(LayoutInflater.from(getContext()));
         insertEntriesIntoViewGroup();
         updateExpandCollapseButton(getCollapseButtonText());
-
-        // When expanding, all the TextViews haven't been laid out yet. Therefore,
-        // calling measure() would return an incorrect result. Therefore, we need a pre draw
-        // listener.
-        final ViewTreeObserver observer = mEntriesViewGroup.getViewTreeObserver();
-        observer.addOnPreDrawListener(new OnPreDrawListener() {
-            @Override
-            public boolean onPreDraw() {
-                if (observer.isAlive()) {
-                    mEntriesViewGroup.getViewTreeObserver().removeOnPreDrawListener(this);
-                }
-                createExpandAnimator(startingHeight, mEntriesViewGroup.getHeight()).start();
-                // Do not draw the final frame of the animation immediately.
-                return false;
-            }
-        });
     }
 
     private void collapse() {
-        int startingHeight = mEntriesViewGroup.getHeight();
-        int finishHeight = measureCollapsedViewGroupHeight();
-        mListener.onCollapse(startingHeight - finishHeight);
-
+        final int startingHeight = mEntriesViewGroup.getMeasuredHeight();
         mIsExpanded = false;
         updateExpandCollapseButton(getExpandButtonText());
-        createExpandAnimator(startingHeight, finishHeight).start();
-    }
 
-    private int measureCollapsedViewGroupHeight() {
-        if (mCollapsedEntriesCount == 0) {
-            return 0;
-        }
-        final View bottomCollapsedView = mEntryViews.get(mCollapsedEntriesCount - 1).get(0);
-        return bottomCollapsedView.getTop() + bottomCollapsedView.getHeight();
-    }
+        final ChangeBounds boundsTransition = new ChangeBounds();
+        boundsTransition.setDuration(DURATION_COLLAPSE_ANIMATION_CHANGE_BOUNDS);
 
-    /**
-     * Create ValueAnimator that performs an expand animation on the content LinearLayout.
-     *
-     * The animation needs to be performed manually using a ValueAnimator, since LinearLayout
-     * doesn't have a single set-able height property (ie, no setHeight()).
-     */
-    private ValueAnimator createExpandAnimator(int start, int end) {
-        ValueAnimator animator = ValueAnimator.ofInt(start, end);
-        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
+        final ChangeScroll scrollTransition = new ChangeScroll();
+        scrollTransition.setDuration(DURATION_COLLAPSE_ANIMATION_CHANGE_BOUNDS);
+
+        TransitionSet transitionSet = new TransitionSet();
+        transitionSet.addTransition(boundsTransition);
+        transitionSet.addTransition(scrollTransition);
+
+        final ViewGroup transitionViewContainer = mAnimationViewGroup == null ?
+                this : mAnimationViewGroup;
+
+        boundsTransition.addListener(new TransitionListener() {
             @Override
-            public void onAnimationUpdate(ValueAnimator valueAnimator) {
-                int value = (Integer) valueAnimator.getAnimatedValue();
-                ViewGroup.LayoutParams layoutParams = mEntriesViewGroup.getLayoutParams();
-                layoutParams.height = value;
-                mEntriesViewGroup.setLayoutParams(layoutParams);
+            public void onTransitionStart(Transition transition) {
+                /*
+                 * onTransitionStart is called after the view hierarchy has been changed but before
+                 * the animation begins.
+                 */
+                int finishingHeight = mEntriesViewGroup.getMeasuredHeight();
+                mListener.onCollapse(startingHeight - finishingHeight);
+            }
+
+            @Override
+            public void onTransitionEnd(Transition transition) {
+            }
+
+            @Override
+            public void onTransitionCancel(Transition transition) {
+            }
+
+            @Override
+            public void onTransitionPause(Transition transition) {
+            }
+
+            @Override
+            public void onTransitionResume(Transition transition) {
             }
         });
-        animator.addListener(new AnimatorListenerAdapter() {
-            @Override
-            public void onAnimationEnd(Animator animation) {
-                insertEntriesIntoViewGroup();
-                // Now that the animation is done, stop using a fixed height.
-                ViewGroup.LayoutParams layoutParams = mEntriesViewGroup.getLayoutParams();
-                layoutParams.height = ViewGroup.LayoutParams.MATCH_PARENT;
-                mEntriesViewGroup.setLayoutParams(layoutParams);
-            }
-        });
-        return animator;
+
+        TransitionManager.beginDelayedTransition(transitionViewContainer, transitionSet);
+
+        insertEntriesIntoViewGroup();
     }
 
     /**
diff --git a/src/com/android/contacts/quickcontact/QuickContactActivity.java b/src/com/android/contacts/quickcontact/QuickContactActivity.java
index 06622b6..669b460 100644
--- a/src/com/android/contacts/quickcontact/QuickContactActivity.java
+++ b/src/com/android/contacts/quickcontact/QuickContactActivity.java
@@ -77,6 +77,7 @@
 import android.view.View.OnClickListener;
 import android.view.WindowManager;
 import android.widget.ImageView;
+import android.widget.LinearLayout;
 import android.widget.Toast;
 import android.widget.Toolbar;
 
@@ -320,6 +321,11 @@
         public void onCollapse(int heightDelta) {
             mScroller.prepareForShrinkingScrollChild(heightDelta);
         }
+
+        @Override
+        public void onExpand(int heightDelta) {
+            mScroller.prepareForExpandingScrollChild();
+        }
     };
 
     /**
@@ -493,11 +499,12 @@
 
         mMaterialColorMapUtils = new MaterialColorMapUtils(getResources());
 
+        mScroller = (MultiShrinkScroller) findViewById(R.id.multiscroller);
+
         mContactCard = (ExpandingEntryCardView) findViewById(R.id.communication_card);
         mNoContactDetailsCard = (ExpandingEntryCardView) findViewById(R.id.no_contact_data_card);
         mRecentCard = (ExpandingEntryCardView) findViewById(R.id.recent_card);
         mAboutCard = (ExpandingEntryCardView) findViewById(R.id.about_card);
-        mScroller = (MultiShrinkScroller) findViewById(R.id.multiscroller);
 
         mNoContactDetailsCard.setOnClickListener(mEntryClickHandler);
         mContactCard.setOnClickListener(mEntryClickHandler);
@@ -808,7 +815,8 @@
                     /* numInitialVisibleEntries = */ MIN_NUM_CONTACT_ENTRIES_SHOWN,
                     /* isExpanded = */ mContactCard.isExpanded(),
                     /* isAlwaysExpanded = */ false,
-                    mExpandingEntryCardViewListener);
+                    mExpandingEntryCardViewListener,
+                    mScroller);
             mContactCard.setVisibility(View.VISIBLE);
         } else {
             mContactCard.setVisibility(View.GONE);
@@ -840,7 +848,8 @@
                 /* numInitialVisibleEntries = */ 1,
                 /* isExpanded = */ true,
                 /* isAlwaysExpanded = */ true,
-                mExpandingEntryCardViewListener);
+                mExpandingEntryCardViewListener,
+                mScroller);
 
         if (contactCardEntries.size() == 0 && aboutCardEntries.size() == 0) {
             initializeNoContactDetailCard();
@@ -888,7 +897,7 @@
         final PorterDuffColorFilter greyColorFilter =
                 new PorterDuffColorFilter(subHeaderTextColor, PorterDuff.Mode.SRC_ATOP);
         mNoContactDetailsCard.initialize(promptEntries, 2, /* isExpanded = */ true,
-                /* isAlwaysExpanded = */ true, mExpandingEntryCardViewListener);
+                /* isAlwaysExpanded = */ true, mExpandingEntryCardViewListener, mScroller);
         mNoContactDetailsCard.setVisibility(View.VISIBLE);
         mNoContactDetailsCard.setEntryHeaderColor(subHeaderTextColor);
         mNoContactDetailsCard.setColorAndFilter(subHeaderTextColor, greyColorFilter);
@@ -1525,7 +1534,7 @@
             mRecentCard.initialize(interactionsWrapper,
                     /* numInitialVisibleEntries = */ MIN_NUM_COLLAPSED_RECENT_ENTRIES_SHOWN,
                     /* isExpanded = */ mRecentCard.isExpanded(), /* isAlwaysExpanded = */ false,
-                    mExpandingEntryCardViewListener);
+                    mExpandingEntryCardViewListener, mScroller);
             mRecentCard.setVisibility(View.VISIBLE);
         }
 
diff --git a/src/com/android/contacts/widget/MultiShrinkScroller.java b/src/com/android/contacts/widget/MultiShrinkScroller.java
index 23481a7..22f1a9d 100644
--- a/src/com/android/contacts/widget/MultiShrinkScroller.java
+++ b/src/com/android/contacts/widget/MultiShrinkScroller.java
@@ -1,6 +1,7 @@
 package com.android.contacts.widget;
 
 import com.android.contacts.R;
+import com.android.contacts.quickcontact.ExpandingEntryCardView;
 import com.android.contacts.test.NeededForReflection;
 import com.android.contacts.util.SchedulingUtils;
 
@@ -86,7 +87,6 @@
     private MultiShrinkScrollerListener mListener;
     private TextView mLargeTextView;
     private View mPhotoTouchInterceptOverlay;
-    private View mLeftOverSpaceView;
     /** Contains desired location/size of the title, once the header is fully compressed */
     private TextView mInvisiblePlaceholderTextView;
     private View mTitleGradientView;
@@ -243,7 +243,6 @@
         mTransparentView = findViewById(R.id.transparent_view);
         mLargeTextView = (TextView) findViewById(R.id.large_title);
         mInvisiblePlaceholderTextView = (TextView) findViewById(R.id.placeholder_textview);
-        mLeftOverSpaceView = findViewById(R.id.card_empty_space);
         mListener = listener;
         mIsOpenContactSquare = isOpenContactSquare;
 
@@ -436,6 +435,7 @@
             final ObjectAnimator animator = ObjectAnimator.ofInt(this, "headerHeight",
                     mMaximumHeaderHeight);
             animator.addListener(mHeaderExpandAnimationListener);
+            animator.setDuration(ExpandingEntryCardView.DURATION_EXPAND_ANIMATION_CHANGE_BOUNDS);
             animator.start();
             // Scroll nested scroll view to its top
             if (mScrollView.getScrollY() != 0) {
@@ -787,8 +787,7 @@
      * Returns the amount of mScrollViewChild that doesn't fit inside its parent.
      */
     private int getOverflowingChildViewSize() {
-        final int usedScrollViewSpace = mScrollViewChild.getHeight()
-                - mLeftOverSpaceView.getHeight();
+        final int usedScrollViewSpace = mScrollViewChild.getHeight();
         return -getHeight() + usedScrollViewSpace + mToolbar.getLayoutParams().height;
     }
 
@@ -1098,11 +1097,26 @@
      * space at the bottom of this ViewGroup.
      */
     public void prepareForShrinkingScrollChild(int heightDelta) {
+        // The Transition framework may suppress layout on the scene root and its children. If
+        // mScrollView has its layout suppressed, user scrolling interactions will not display
+        // correctly. By turning suppress off for mScrollView, mScrollView properly adjusts its
+        // graphics as the user scrolls during the transition.
+        mScrollView.suppressLayout(false);
+
         final int newEmptyScrollViewSpace = -getOverflowingChildViewSize() + heightDelta;
         if (newEmptyScrollViewSpace > 0 && !mIsTwoPanel) {
             final int newDesiredToolbarHeight = Math.min(mToolbar.getLayoutParams().height
                     + newEmptyScrollViewSpace, getMaximumScrollableHeaderHeight());
-            ObjectAnimator.ofInt(this, "toolbarHeight", newDesiredToolbarHeight).start();
+            ObjectAnimator.ofInt(this, "toolbarHeight", newDesiredToolbarHeight).setDuration(
+                    ExpandingEntryCardView.DURATION_COLLAPSE_ANIMATION_CHANGE_BOUNDS).start();
         }
     }
+
+    public void prepareForExpandingScrollChild() {
+        // The Transition framework may suppress layout on the scene root and its children. If
+        // mScrollView has its layout suppressed, user scrolling interactions will not display
+        // correctly. By turning suppress off for mScrollView, mScrollView properly adjusts its
+        // graphics as the user scrolls during the transition.
+        mScrollView.suppressLayout(false);
+    }
 }