implement capture options animation

bug: 13100962
Change-Id: I1baf64693d0e01e99bfa19d0bd8699fd33d5812a

9 files changed, 507 insertions, 104 deletions

diff --git a/res/drawable/button_background_pressed_dark.xml b/res/drawable/button_background_pressed_dark.xml
index 44ecc4cc6..110576d86 100644
--- a/res/drawable/button_background_pressed_dark.xml
+++ b/res/drawable/button_background_pressed_dark.xml
@@ -17,8 +17,8 @@
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval">
     <size
-        android:width="48dp"
-        android:height="48dp" />
+        android:width="@dimen/option_button_circle_size"
+        android:height="@dimen/option_button_circle_size" />
     <solid
         android:color="#4d000000" />
 </shape>
diff --git a/res/drawable/button_background_pressed_light.xml b/res/drawable/button_background_pressed_light.xml
index 52e606896..5ad76ae70 100644
--- a/res/drawable/button_background_pressed_light.xml
+++ b/res/drawable/button_background_pressed_light.xml
@@ -17,8 +17,8 @@
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval">
     <size
-        android:width="48dp"
-        android:height="48dp" />
+        android:width="@dimen/option_button_circle_size"
+        android:height="@dimen/option_button_circle_size" />
     <solid
         android:color="#20000000" />
 </shape>
diff --git a/res/layout-land/mode_options_bottombar.xml b/res/layout-land/mode_options_bottombar.xml
new file mode 100644
index 000000000..e97bc561f
--- /dev/null
+++ b/res/layout-land/mode_options_bottombar.xml
@@ -0,0 +1,97 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2013 The Android Open Source Project
+
+     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.
+-->
+<!-- This layout is shared by phone and tablet in landscape orientation. -->
+<merge xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:camera="http://schemas.android.com/apk/res/com.android.camera2"
+    android:layout_height="match_parent"
+    android:layout_width="match_parent">
+
+    <com.android.camera.ui.RotatableLinearLayout
+        android:id="@+id/indicator_bottombar_wrapper"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:orientation="vertical" >
+
+        <com.android.camera.widget.ModeOptionsOverlay
+            android:id="@+id/mode_options_overlay"
+            android:layout_width="match_parent"
+            android:layout_height="0px"
+            android:layout_weight="1"
+            android:layout_gravity="center">
+            <com.android.camera.widget.ModeOptions
+                android:id="@+id/mode_options"
+                android:layout_width="@dimen/mode_options_height"
+                android:layout_height="match_parent"
+                android:layout_gravity="right"
+                android:visibility="visible"
+                android:background="#00000000" >
+                <com.android.camera.ui.TopRightWeightedLayout
+                    android:id="@+id/mode_options_buttons"
+                    android:layout_width="match_parent"
+                    android:layout_height="match_parent"
+                    android:orientation="vertical"
+                    android:gravity="center"
+                    android:layout_gravity="top"
+                    android:visibility="visible"
+                    android:background="@null"
+                    android:alpha="0.0" >
+                    <com.android.camera.MultiToggleImageButton
+                        android:id="@+id/camera_toggle_button"
+                        style="@style/ModeOption"
+                        camera:imageIds="@array/camera_id_icons"
+                        camera:contentDescriptionIds="@array/camera_id_descriptions" />
+                    <com.android.camera.MultiToggleImageButton
+                        android:id="@+id/flash_toggle_button"
+                        style="@style/ModeOption"
+                        camera:imageIds="@array/camera_flashmode_icons"
+                        camera:contentDescriptionIds="@array/camera_flash_descriptions" />
+                    <com.android.camera.MultiToggleImageButton
+                        android:id="@+id/hdr_plus_toggle_button"
+                        style="@style/ModeOption"
+                        camera:imageIds="@array/pref_camera_hdr_plus_icons"
+                        camera:contentDescriptionIds="@array/hdr_plus_descriptions" />
+                    <com.android.camera.MultiToggleImageButton
+                        android:id="@+id/grid_lines_toggle_button"
+                        style="@style/ModeOption"
+                        camera:imageIds="@array/grid_lines_icons"
+                        camera:contentDescriptionIds="@array/grid_lines_descriptions" />
+                    <!-- pano image ids and descriptions are added at runtime -->
+                    <com.android.camera.MultiToggleImageButton
+                        android:id="@+id/pano_orientation_toggle_button"
+                        style="@style/ModeOption" />
+                </com.android.camera.ui.TopRightWeightedLayout>
+            </com.android.camera.widget.ModeOptions>
+            <FrameLayout
+                android:id="@+id/mode_options_toggle"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:padding="12dp"
+                android:layout_gravity="top|right" >
+                <ImageView
+                    android:id="@+id/three_dots"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:scaleType="matrix"
+                    android:src="@drawable/ic_options_active"
+                    android:background="@null" />
+                <include layout="@layout/indicators" />
+            </FrameLayout>
+        </com.android.camera.widget.ModeOptionsOverlay>
+
+        <include layout="@layout/bottom_bar" />
+    </com.android.camera.ui.RotatableLinearLayout>
+
+</merge>
diff --git a/res/layout-port/mode_options_bottombar.xml b/res/layout-port/mode_options_bottombar.xml
new file mode 100644
index 000000000..1ef889c53
--- /dev/null
+++ b/res/layout-port/mode_options_bottombar.xml
@@ -0,0 +1,98 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2013 The Android Open Source Project
+
+     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.
+-->
+<!-- This layout is shared by phone and tablet in landscape orientation. -->
+<merge xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:camera="http://schemas.android.com/apk/res/com.android.camera2"
+    android:layout_height="match_parent"
+    android:layout_width="match_parent">
+
+    <com.android.camera.ui.RotatableLinearLayout
+        android:id="@+id/indicator_bottombar_wrapper"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:orientation="vertical" >
+
+        <com.android.camera.widget.ModeOptionsOverlay
+            android:id="@+id/mode_options_overlay"
+            android:layout_width="match_parent"
+            android:layout_height="0px"
+            android:layout_weight="1"
+            android:layout_gravity="center" >
+            <com.android.camera.widget.ModeOptions
+                android:id="@+id/mode_options"
+                android:layout_width="match_parent"
+                android:layout_height="@dimen/mode_options_height"
+                android:layout_gravity="bottom"
+                android:visibility="visible"
+                android:background="#00000000" >
+                <com.android.camera.ui.TopRightWeightedLayout
+                    android:id="@+id/mode_options_buttons"
+                    android:layout_width="match_parent"
+                    android:layout_height="match_parent"
+                    android:orientation="horizontal"
+                    android:gravity="center"
+                    android:layout_gravity="right"
+                    android:visibility="visible"
+                    android:background="@null"
+                    android:alpha="0.0" >
+                    <!-- pano image ids and descriptions are added at runtime -->
+                    <com.android.camera.MultiToggleImageButton
+                        android:id="@+id/pano_orientation_toggle_button"
+                        style="@style/ModeOption" />
+                    <com.android.camera.MultiToggleImageButton
+                        android:id="@+id/grid_lines_toggle_button"
+                        style="@style/ModeOption"
+                        camera:imageIds="@array/grid_lines_icons"
+                        camera:contentDescriptionIds="@array/grid_lines_descriptions" />
+                    <com.android.camera.MultiToggleImageButton
+                        android:id="@+id/hdr_plus_toggle_button"
+                        style="@style/ModeOption"
+                        camera:imageIds="@array/pref_camera_hdr_plus_icons"
+                        camera:contentDescriptionIds="@array/hdr_plus_descriptions" />
+                    <com.android.camera.MultiToggleImageButton
+                        android:id="@+id/flash_toggle_button"
+                        style="@style/ModeOption"
+                        camera:imageIds="@array/camera_flashmode_icons"
+                        camera:contentDescriptionIds="@array/camera_flash_descriptions" />
+                    <com.android.camera.MultiToggleImageButton
+                        android:id="@+id/camera_toggle_button"
+                        style="@style/ModeOption"
+                        camera:imageIds="@array/camera_id_icons"
+                        camera:contentDescriptionIds="@array/camera_id_descriptions" />
+                </com.android.camera.ui.TopRightWeightedLayout>
+            </com.android.camera.widget.ModeOptions>
+
+            <FrameLayout
+                android:id="@+id/mode_options_toggle"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:padding="@dimen/mode_options_toggle_padding"
+                android:layout_gravity="bottom|right" >
+                <ImageView
+                    android:id="@+id/three_dots"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:scaleType="matrix"
+                    android:src="@drawable/ic_options_active"
+                    android:background="@null" />
+                <include layout="@layout/indicators" />
+            </FrameLayout>
+        </com.android.camera.widget.ModeOptionsOverlay>
+
+        <include layout="@layout/bottom_bar" />
+    </com.android.camera.ui.RotatableLinearLayout>
+
+</merge>
diff --git a/res/layout/mode_options_bottombar.xml b/res/layout/mode_options_bottombar.xml
deleted file mode 100644
index 055895f25..000000000
--- a/res/layout/mode_options_bottombar.xml
+++ /dev/null
@@ -1,89 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright (C) 2013 The Android Open Source Project
-
-     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.
--->
-<!-- This layout is shared by phone and tablet in landscape orientation. -->
-<merge xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:camera="http://schemas.android.com/apk/res/com.android.camera2"
-    android:layout_height="match_parent"
-    android:layout_width="match_parent">
-
-    <com.android.camera.ui.RotatableLinearLayout
-        android:id="@+id/indicator_bottombar_wrapper"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:orientation="vertical" >
-
-      <com.android.camera.widget.ModeOptionsOverlay
-          android:id="@+id/mode_options_overlay"
-          android:layout_width="match_parent"
-          android:layout_height="0px"
-          android:layout_weight="1"
-          android:layout_gravity="center">
-        <com.android.camera.ui.TopRightWeightedLayout
-            android:id="@+id/mode_options"
-            android:layout_width="match_parent"
-            android:layout_height="@dimen/mode_options_height"
-            android:orientation="horizontal"
-            android:layout_gravity="bottom"
-            android:gravity="center"
-            android:visibility="invisible"
-            android:background="#4C000000" >
-          <!-- pano image ids and descriptions are added at runtime -->
-          <com.android.camera.MultiToggleImageButton
-              android:id="@+id/pano_orientation_toggle_button"
-              style="@style/ModeOption" />
-          <com.android.camera.MultiToggleImageButton
-              android:id="@+id/grid_lines_toggle_button"
-              style="@style/ModeOption"
-              camera:imageIds="@array/grid_lines_icons"
-              camera:contentDescriptionIds="@array/grid_lines_descriptions" />
-          <com.android.camera.MultiToggleImageButton
-              android:id="@+id/hdr_plus_toggle_button"
-              style="@style/ModeOption"
-              camera:imageIds="@array/pref_camera_hdr_plus_icons"
-              camera:contentDescriptionIds="@array/hdr_plus_descriptions" />
-          <com.android.camera.MultiToggleImageButton
-              android:id="@+id/flash_toggle_button"
-              style="@style/ModeOption"
-              camera:imageIds="@array/camera_flashmode_icons"
-              camera:contentDescriptionIds="@array/camera_flash_descriptions" />
-          <com.android.camera.MultiToggleImageButton
-              android:id="@+id/camera_toggle_button"
-              style="@style/ModeOption"
-              camera:imageIds="@array/camera_id_icons"
-              camera:contentDescriptionIds="@array/camera_id_descriptions" />
-        </com.android.camera.ui.TopRightWeightedLayout>
-
-        <FrameLayout
-            android:id="@+id/mode_options_toggle"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:padding="12dp"
-            android:layout_gravity="bottom|right" >
-          <ImageView
-              android:id="@+id/three_dots"
-              android:layout_width="wrap_content"
-              android:layout_height="wrap_content"
-              android:scaleType="matrix"
-              android:src="@drawable/ic_options_active"
-              android:background="@null" />
-          <include layout="@layout/indicators" />
-        </FrameLayout>
-      </com.android.camera.widget.ModeOptionsOverlay>
-
-      <include layout="@layout/bottom_bar" />
-    </com.android.camera.ui.RotatableLinearLayout>
-
-</merge>
diff --git a/res/values/colors.xml b/res/values/colors.xml
index 5c87344a6..c78c2bc80 100644
--- a/res/values/colors.xml
+++ b/res/values/colors.xml
@@ -91,6 +91,7 @@
 
     <color name="bottombar_unpressed">#191919</color>
     <color name="bottombar_pressed">#262626</color>
+    <color name="mode_options_background">#4C000000</color>
 
     <color name="filmstrip_background">#000000</color>
 
diff --git a/res/values/dimens.xml b/res/values/dimens.xml
index 32720d7dc..eb32f8040 100644
--- a/res/values/dimens.xml
+++ b/res/values/dimens.xml
@@ -192,4 +192,6 @@
     <dimen name="focus_outer_ring_size">104dp</dimen>
     <dimen name="focus_inner_ring_size">38dp</dimen>
 
+    <dimen name="option_button_circle_size">48dp</dimen>
+    <dimen name="mode_options_toggle_padding">12dp</dimen>
 </resources>
diff --git a/src/com/android/camera/widget/ModeOptions.java b/src/com/android/camera/widget/ModeOptions.java
new file mode 100644
index 000000000..3233d196d
--- /dev/null
+++ b/src/com/android/camera/widget/ModeOptions.java
@@ -0,0 +1,295 @@
+/*
+ * Copyright (C) 2014 The Android Open Source Project
+ *
+ * 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.
+ */
+package com.android.camera.widget;
+
+import android.animation.Animator;
+import android.animation.AnimatorListenerAdapter;
+import android.animation.AnimatorSet;
+import android.animation.ObjectAnimator;
+import android.animation.ValueAnimator;
+import android.content.Context;
+import android.content.res.Configuration;
+import android.graphics.Canvas;
+import android.graphics.Path;
+import android.graphics.Paint;
+import android.graphics.RectF;
+import android.view.Gravity;
+import android.view.View;
+import android.widget.FrameLayout;
+import android.widget.LinearLayout;
+import android.util.AttributeSet;
+
+import com.android.camera.util.Gusterpolator;
+import com.android.camera2.R;
+
+public class ModeOptions extends FrameLayout {
+    private int mBackgroundColor;
+    private final Paint mPaint = new Paint();
+    private final Path mPath = new Path();
+    private boolean mIsHidden;
+    private RectF mAnimateFrom = new RectF();
+    private View mViewToShowHide;
+    private View mModeOptionsButtons;
+
+    private AnimatorSet mVisibleAnimator;
+    private AnimatorSet mHiddenAnimator;
+    private boolean mDrawCircle;
+    private boolean mFill;
+    private static final int RADIUS_ANIMATION_TIME = 250;
+    private static final int SHOW_ALPHA_ANIMATION_TIME = 350;
+    private static final int HIDE_ALPHA_ANIMATION_TIME = 200;
+    private static final int PADDING_ANIMATION_TIME = 90;
+
+    private int mParentSize;
+    private boolean mIsPortrait;
+
+    public ModeOptions(Context context, AttributeSet attrs) {
+        super(context, attrs);
+    }
+
+    public void setViewToShowHide(View v) {
+        mViewToShowHide = v;
+    }
+
+    @Override
+    public void onFinishInflate() {
+        mBackgroundColor = getResources().getColor(R.color.mode_options_background);
+        mPaint.setAntiAlias(true);
+        mPaint.setColor(mBackgroundColor);
+        mModeOptionsButtons = findViewById(R.id.mode_options_buttons);
+    }
+
+    @Override
+    public void onConfigurationChanged(Configuration config) {
+        super.onConfigurationChanged(config);
+
+        FrameLayout.LayoutParams params =
+            (FrameLayout.LayoutParams) mModeOptionsButtons.getLayoutParams();
+
+        if (config.orientation == Configuration.ORIENTATION_PORTRAIT) {
+            params.gravity = Gravity.RIGHT;
+        } else {
+            params.gravity = Gravity.TOP;
+        }
+
+        mVisibleAnimator.end();
+        mHiddenAnimator.end();
+
+        mModeOptionsButtons.setLayoutParams(params);
+    }
+
+
+    @Override
+    public void onLayout(boolean changed, int left, int top, int right, int bottom) {
+        if (changed) {
+            mIsPortrait = (getResources().getConfiguration().orientation ==
+                           Configuration.ORIENTATION_PORTRAIT);
+
+            int buttonSize = getResources()
+                .getDimensionPixelSize(R.dimen.option_button_circle_size);
+            int buttonPadding = getResources()
+                .getDimensionPixelSize(R.dimen.mode_options_toggle_padding);
+
+            float rLeft, rRight, rTop, rBottom;
+            View parent = (View) getParent();
+            if (mIsPortrait) {
+                rLeft = getWidth() - buttonPadding - buttonSize;
+                rTop = (getHeight() - buttonSize) / 2.0f;
+
+                mParentSize = parent.getWidth();
+            } else {
+                rLeft = buttonPadding;
+                rTop = buttonPadding;
+
+                mParentSize = parent.getHeight();
+            }
+            rRight = rLeft + buttonSize;
+            rBottom = rTop + buttonSize;
+            mAnimateFrom.set(rLeft, rTop, rRight, rBottom);
+
+            setupAnimators();
+        }
+
+        super.onLayout(changed, left, top, right, bottom);
+    }
+
+    public boolean isHidden() {
+        return mIsHidden;
+    }
+
+    @Override
+    public void onDraw(Canvas canvas) {
+        if (mDrawCircle) {
+            canvas.drawPath(mPath, mPaint);
+        } else if (mFill) {
+            canvas.drawPaint(mPaint);
+        }
+        super.onDraw(canvas);
+    }
+
+    private void setupAnimators() {
+        final float fullSize = (mIsPortrait ? (float) getWidth() : (float) getHeight());
+
+        // show
+        {
+            final ValueAnimator radiusAnimator =
+                ValueAnimator.ofFloat(mAnimateFrom.width()/2.0f,
+                    fullSize-mAnimateFrom.width()/2.0f);
+            radiusAnimator.setDuration(RADIUS_ANIMATION_TIME);
+            radiusAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
+                @Override
+                public void onAnimationUpdate(ValueAnimator animation) {
+                    mPath.reset();
+                    mPath.addCircle(mAnimateFrom.centerX(),
+                        mAnimateFrom.centerY(),
+                        (Float) animation.getAnimatedValue(),
+                        Path.Direction.CW);
+                    mDrawCircle = true;
+                    mFill = false;
+                    invalidate();
+                }
+            });
+            radiusAnimator.addListener(new AnimatorListenerAdapter() {
+                @Override
+                public void onAnimationEnd(Animator animation) {
+                    mPath.reset();
+                    mDrawCircle = false;
+                    mFill = true;
+                    invalidate();
+                }
+            });
+
+            final ValueAnimator alphaAnimator = ValueAnimator.ofFloat(1.0f, 1.0f);
+            alphaAnimator.setDuration(SHOW_ALPHA_ANIMATION_TIME);
+            alphaAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
+                @Override
+                public void onAnimationUpdate(ValueAnimator animation) {
+                    mModeOptionsButtons.setAlpha((Float) animation.getAnimatedValue());
+                    invalidate();
+                }
+            });
+            alphaAnimator.addListener(new AnimatorListenerAdapter() {
+                @Override
+                public void onAnimationEnd(Animator animation) {
+                    mModeOptionsButtons.setAlpha(1.0f);
+                    invalidate();
+                }
+            });
+
+            final ValueAnimator paddingAnimator = ValueAnimator.ofInt(mParentSize, 0);
+            paddingAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
+                @Override
+                public void onAnimationUpdate(ValueAnimator animation) {
+                    if (mIsPortrait) {
+                        mModeOptionsButtons
+                            .setPadding((Integer) animation.getAnimatedValue(), 0, 0, 0);
+                    } else {
+                        mModeOptionsButtons
+                            .setPadding(0, 0, 0, (Integer) animation.getAnimatedValue());
+                    }
+                    requestLayout();
+                    invalidate();
+                }
+            });
+            paddingAnimator.setDuration(PADDING_ANIMATION_TIME);
+            paddingAnimator.addListener(new AnimatorListenerAdapter() {
+                @Override
+                public void onAnimationEnd(Animator animation) {
+                    mModeOptionsButtons
+                        .setPadding(0, 0, 0, 0);
+
+                    requestLayout();
+                    invalidate();
+                }
+            });
+
+            mVisibleAnimator = new AnimatorSet();
+            mVisibleAnimator.setInterpolator(Gusterpolator.INSTANCE);
+            mVisibleAnimator.playTogether(radiusAnimator, alphaAnimator, paddingAnimator);
+        }
+
+        // hide
+        {
+            final ValueAnimator radiusAnimator =
+                ValueAnimator.ofFloat(fullSize-mAnimateFrom.width()/2.0f,
+                    mAnimateFrom.width()/2.0f);
+            radiusAnimator.setDuration(RADIUS_ANIMATION_TIME);
+            radiusAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
+                @Override
+                public void onAnimationUpdate(ValueAnimator animation) {
+                    mPath.reset();
+                    mPath.addCircle(mAnimateFrom.centerX(),
+                        mAnimateFrom.centerY(),
+                        (Float) animation.getAnimatedValue(),
+                        Path.Direction.CW);
+                    mDrawCircle = true;
+                    mFill = false;
+                    invalidate();
+                }
+            });
+            radiusAnimator.addListener(new AnimatorListenerAdapter() {
+                @Override
+                public void onAnimationEnd(Animator animation) {
+                    if (mViewToShowHide != null) {
+                        mPath.reset();
+                        mViewToShowHide.setVisibility(View.VISIBLE);
+                        mDrawCircle = false;
+                        mFill = false;
+                        invalidate();
+                    }
+                }
+            });
+
+            final ValueAnimator alphaAnimator = ValueAnimator.ofFloat(1.0f, 0.0f);
+            alphaAnimator.setDuration(HIDE_ALPHA_ANIMATION_TIME);
+            alphaAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
+                @Override
+                public void onAnimationUpdate(ValueAnimator animation) {
+                    mModeOptionsButtons.setAlpha((Float) animation.getAnimatedValue());
+                    invalidate();
+                }
+            });
+            alphaAnimator.addListener(new AnimatorListenerAdapter() {
+                @Override
+                public void onAnimationEnd(Animator animation) {
+                    mModeOptionsButtons.setAlpha(0.0f);
+                    invalidate();
+                }
+            });
+
+            mHiddenAnimator = new AnimatorSet();
+            mHiddenAnimator.setInterpolator(Gusterpolator.INSTANCE);
+            mHiddenAnimator.playTogether(radiusAnimator, alphaAnimator);
+        }
+    }
+
+    public void animateVisible() {
+        mIsHidden = false;
+        if (mViewToShowHide != null) {
+            mViewToShowHide.setVisibility(View.INVISIBLE);
+        }
+        mHiddenAnimator.cancel();
+        mVisibleAnimator.end();
+        mVisibleAnimator.start();
+    }
+
+    public void animateHidden() {
+        mIsHidden = true;
+        mVisibleAnimator.cancel();
+        mHiddenAnimator.end();
+        mHiddenAnimator.start();
+    }
+}
\ No newline at end of file
diff --git a/src/com/android/camera/widget/ModeOptionsOverlay.java b/src/com/android/camera/widget/ModeOptionsOverlay.java
index b7bb681d3..bd988dab2 100644
--- a/src/com/android/camera/widget/ModeOptionsOverlay.java
+++ b/src/com/android/camera/widget/ModeOptionsOverlay.java
@@ -56,7 +56,7 @@ public class ModeOptionsOverlay extends FrameLayout
     private int mPreviewWidth;
     private int mPreviewHeight;
 
-    private TopRightWeightedLayout mModeOptions;
+    private ModeOptions mModeOptions;
 
     // The mode options toggle can be either a default image, or a
     // group of on screen indicators.
@@ -72,7 +72,7 @@ public class ModeOptionsOverlay extends FrameLayout
 
     @Override
     public void onFinishInflate() {
-        mModeOptions = (TopRightWeightedLayout) findViewById(R.id.mode_options);
+        mModeOptions = (ModeOptions) findViewById(R.id.mode_options);
         mModeOptions.setClickable(true);
         mModeOptions.setOnClickListener(new View.OnClickListener() {
                 @Override
@@ -83,12 +83,12 @@ public class ModeOptionsOverlay extends FrameLayout
 
         mModeOptionsToggle = (FrameLayout) findViewById(R.id.mode_options_toggle);
         mModeOptionsToggle.setOnClickListener(new View.OnClickListener() {
-                @Override
-                public void onClick(View v) {
-                    mModeOptionsToggle.setVisibility(View.INVISIBLE);
-                    mModeOptions.setVisibility(View.VISIBLE);
-                }
-            });
+            @Override
+            public void onClick(View v) {
+                mModeOptions.animateVisible();
+            }
+        });
+        mModeOptions.setViewToShowHide(mModeOptionsToggle);
 
         mThreeDots = (ImageView) findViewById(R.id.three_dots);
         mIndicators = (LinearLayout) findViewById(R.id.indicator_icons);
@@ -121,11 +121,10 @@ public class ModeOptionsOverlay extends FrameLayout
      */
     private void closeModeOptions() {
         // Check that the bottom bar options are visible.
-        if (mModeOptions.getVisibility() != View.VISIBLE) {
+        if (mModeOptions.isHidden()) {
             return;
         }
-        mModeOptions.setVisibility(View.INVISIBLE);
-        mModeOptionsToggle.setVisibility(View.VISIBLE);
+        mModeOptions.animateHidden();
     }
 
     @Override