Increase camera preview frame size and other changes.

+ Increase camera preview frame size and align it to the left of the screen.
+ Move thumbnail to the lower left corner of the preview frame.
+ Move GPS indicator to the lower right corner of the preview frame.
+ Replace LinearLayout and negative margin with RelativeLayout.
+ Revise the look of the settings wheel based on new UI mock.
+ Add border to preview frame.
+ Make settings popup windows align with an invisible view in the root view.
  This makes it easier to adjust the location of the popup windows.

Bug: 3156693

Change-Id: I8843fec803f8418699df7e425ea74af708b4ea99

22 files changed, 98 insertions, 59 deletions

diff --git a/res/drawable-hdpi/border_preview.9.png b/res/drawable-hdpi/border_preview.9.png
new file mode 100644
index 0000000..092de2c
--- /dev/null
+++ b/res/drawable-hdpi/border_preview.9.png
diff --git a/res/drawable-hdpi/btn_ic_camera_shutter_large.png b/res/drawable-hdpi/btn_ic_camera_shutter_large.png
new file mode 100644
index 0000000..74d37cb
--- /dev/null
+++ b/res/drawable-hdpi/btn_ic_camera_shutter_large.png
diff --git a/res/drawable-hdpi/btn_shutter_large_normal.png b/res/drawable-hdpi/btn_shutter_large_normal.png
new file mode 100644
index 0000000..b068536
--- /dev/null
+++ b/res/drawable-hdpi/btn_shutter_large_normal.png
diff --git a/res/drawable-hdpi/btn_shutter_large_pressed.png b/res/drawable-hdpi/btn_shutter_large_pressed.png
new file mode 100644
index 0000000..eaed6c5
--- /dev/null
+++ b/res/drawable-hdpi/btn_shutter_large_pressed.png
diff --git a/res/drawable-mdpi/border_preview.9.png b/res/drawable-mdpi/border_preview.9.png
new file mode 100644
index 0000000..092de2c
--- /dev/null
+++ b/res/drawable-mdpi/border_preview.9.png
diff --git a/res/drawable-mdpi/btn_ic_camera_shutter_large.png b/res/drawable-mdpi/btn_ic_camera_shutter_large.png
new file mode 100644
index 0000000..74d37cb
--- /dev/null
+++ b/res/drawable-mdpi/btn_ic_camera_shutter_large.png
diff --git a/res/drawable-mdpi/btn_shutter_large_normal.png b/res/drawable-mdpi/btn_shutter_large_normal.png
new file mode 100644
index 0000000..b068536
--- /dev/null
+++ b/res/drawable-mdpi/btn_shutter_large_normal.png
diff --git a/res/drawable-mdpi/btn_shutter_large_pressed.png b/res/drawable-mdpi/btn_shutter_large_pressed.png
new file mode 100644
index 0000000..eaed6c5
--- /dev/null
+++ b/res/drawable-mdpi/btn_shutter_large_pressed.png
diff --git a/res/drawable/btn_shutter_large.xml b/res/drawable/btn_shutter_large.xml
new file mode 100644
index 0000000..1a8181b
--- /dev/null
+++ b/res/drawable/btn_shutter_large.xml
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2010 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.
+-->
+
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:state_pressed="true" android:drawable="@drawable/btn_shutter_large_pressed" />
+    <item android:drawable="@drawable/btn_shutter_large_normal" />
+</selector>
+
diff --git a/res/layout-xlarge/basic_setting_popup.xml b/res/layout-xlarge/basic_setting_popup.xml
index d26fd06..f366b49 100644
--- a/res/layout-xlarge/basic_setting_popup.xml
+++ b/res/layout-xlarge/basic_setting_popup.xml
@@ -22,7 +22,7 @@
         android:layout_height="wrap_content"
         android:layout_centerVertical="true"
         android:layout_alignParentRight="true"
-        android:layout_marginRight="40dp"
+        android:layout_marginRight="225dp"
         android:orientation="vertical">
     <FrameLayout android:id="@+id/topPanel"
             android:layout_width="match_parent"
@@ -42,4 +42,3 @@
             android:layout_height="wrap_content"
             android:orientation="vertical" />
 </com.android.camera.ui.BasicSettingPopup>
-
diff --git a/res/layout-xlarge/camera.xml b/res/layout-xlarge/camera.xml
index 9367f98..796a033 100644
--- a/res/layout-xlarge/camera.xml
+++ b/res/layout-xlarge/camera.xml
@@ -14,14 +14,13 @@
      limitations under the License.
 -->
 
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
         xmlns:camera="http://schemas.android.com/apk/res/com.android.camera"
-        android:id="@+id/camera"
+        android:id="@+id/app_root"
         android:orientation="horizontal"
         android:layout_width="match_parent"
         android:layout_height="match_parent">
 
-    <include layout="@layout/review_thumbnail"/>
-    <include layout="@layout/preview_frame"/>
     <include layout="@layout/camera_control"/>
-</LinearLayout>
+    <include layout="@layout/preview_frame"/>
+</RelativeLayout>
diff --git a/res/layout-xlarge/camera_control.xml b/res/layout-xlarge/camera_control.xml
index 961ae27..132bcea 100644
--- a/res/layout-xlarge/camera_control.xml
+++ b/res/layout-xlarge/camera_control.xml
@@ -18,20 +18,19 @@
         xmlns:camera="http://schemas.android.com/apk/res/com.android.camera"
         android:id="@+id/control_panel"
         android:layout_height="match_parent"
-        android:layout_width="230dp"
+        android:layout_width="wrap_content"
+        android:layout_alignParentRight="true"
         android:layout_marginTop="40dp"
-        android:layout_marginLeft="-46dp"
         android:layout_marginBottom="40dp">
 
         <ViewStub android:id="@+id/zoom_stub"
                 android:inflatedId="@+id/zoom_picker"
                 android:layout="@layout/zoom_picker"
                 android:layout_alignParentTop="true"
-                android:layout_alignParentLeft="true"
+                android:layout_alignParentRight="true"
                 android:layout_width="45dp"
                 android:layout_height="150dp"
-                android:layout_marginLeft="21dp"
-                android:layout_marginTop="10dp" />
+                android:layout_marginRight="160dp"/>
 
         <TextView android:id="@+id/recording_time"
                 style="@style/RecordingTime"
@@ -63,8 +62,8 @@
                         android:scaleType="center"
                         android:clickable="true"
                         android:focusable="true"
-                        android:src="@drawable/btn_ic_camera_shutter"
-                        android:background="@drawable/btn_shutter" />
+                        android:src="@drawable/btn_ic_camera_shutter_large"
+                        android:background="@drawable/btn_shutter_large" />
         </com.android.camera.ui.IndicatorWheel>
 
         <com.android.camera.SwitcherSet android:id="@+id/camera_switch"
@@ -73,8 +72,8 @@
                 android:layout_height="150dp"
                 android:layout_width="45dp"
                 android:layout_alignParentBottom="true"
-                android:layout_alignParentLeft="true"
-                android:layout_marginLeft="21dp"
+                android:layout_alignParentRight="true"
+                android:layout_marginRight="160dp"
                 android:background="@drawable/mode_switch_bg_v2">
             <RadioButton android:id="@+id/switch_off_button"
                     android:layout_height="wrap_content"
diff --git a/res/layout-xlarge/other_setting_popup.xml b/res/layout-xlarge/other_setting_popup.xml
index b9eb587..7c61d7b 100644
--- a/res/layout-xlarge/other_setting_popup.xml
+++ b/res/layout-xlarge/other_setting_popup.xml
@@ -23,7 +23,7 @@
         android:layout_height="wrap_content"
         android:layout_alignParentRight="true"
         android:layout_centerVertical="true"
-        android:layout_marginRight="40dp"
+        android:layout_marginRight="225dp"
         android:orientation="vertical">
 
     <FrameLayout android:id="@+id/topPanel"
diff --git a/res/layout-xlarge/preview_frame.xml b/res/layout-xlarge/preview_frame.xml
index cba64ce..3e72bc5 100644
--- a/res/layout-xlarge/preview_frame.xml
+++ b/res/layout-xlarge/preview_frame.xml
@@ -15,16 +15,21 @@
 -->
 <com.android.camera.PreviewFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:id="@+id/frame_layout"
-        android:layout_width="match_parent"
+        android:layout_width="1040dp"
         android:layout_height="match_parent"
-        android:layout_marginLeft="2dp"
-        android:layout_weight="1">
+        android:layout_alignParentLeft="true"
+        android:layout_marginLeft="5dp"
+        android:layout_marginTop="5dp">
     <RelativeLayout android:id="@+id/frame"
             android:layout_width="match_parent"
             android:layout_height="match_parent">
         <SurfaceView android:id="@+id/camera_preview"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"/>
+        <ImageView android:id="@+id/preview_border"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:background="@drawable/border_preview"/>
         <com.android.camera.ui.FocusRectangle
                 android:id="@+id/focus_rectangle"
                 android:layout_width="match_parent"
@@ -32,17 +37,18 @@
         <ImageView style="@style/OnScreenGpsIndicator"
                 android:id="@+id/onscreen_gps_indicator_no_signal"
                 android:src="@drawable/ic_viewfinder_gps_no_signal"
-                android:layout_alignParentLeft="true"
+                android:layout_alignParentRight="true"
                 android:layout_alignParentBottom="true"
                 android:layout_margin="10dp"
                 android:visibility="invisible"/>
         <ImageView style="@style/OnScreenGpsIndicator"
                 android:id="@+id/onscreen_gps_indicator_on"
                 android:src="@drawable/ic_viewfinder_gps_on"
-                android:layout_alignParentLeft="true"
+                android:layout_alignParentRight="true"
                 android:layout_alignParentBottom="true"
                 android:layout_margin="10dp"
                 android:visibility="invisible"/>
+        <include layout="@layout/review_thumbnail"/>
     </RelativeLayout>
     <include layout="@layout/camera_picker" />
 </com.android.camera.PreviewFrameLayout>
diff --git a/res/layout-xlarge/preview_frame_video.xml b/res/layout-xlarge/preview_frame_video.xml
index 99bae1f..0996799 100644
--- a/res/layout-xlarge/preview_frame_video.xml
+++ b/res/layout-xlarge/preview_frame_video.xml
@@ -16,20 +16,26 @@
 
 <com.android.camera.PreviewFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:id="@+id/frame_layout"
-        android:layout_width="match_parent"
+        android:layout_width="1040dp"
         android:layout_height="match_parent"
-        android:layout_marginLeft="2dip"
-        android:layout_weight="1">
+        android:layout_alignParentLeft="true"
+        android:layout_marginLeft="5dp"
+        android:layout_marginTop="5dp">
     <RelativeLayout android:id="@+id/frame"
             android:layout_width="match_parent"
             android:layout_height="match_parent">
         <SurfaceView android:id="@+id/camera_preview"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"/>
+        <ImageView android:id="@+id/preview_border"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:background="@drawable/border_preview"/>
         <ImageView android:id="@+id/video_frame"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
                 android:visibility="gone" />
+        <include layout="@layout/review_thumbnail"/>
     </RelativeLayout>
     <include layout="@layout/camera_picker"/>
 </com.android.camera.PreviewFrameLayout>
diff --git a/res/layout-xlarge/review_thumbnail.xml b/res/layout-xlarge/review_thumbnail.xml
index c85d029..708c38e 100644
--- a/res/layout-xlarge/review_thumbnail.xml
+++ b/res/layout-xlarge/review_thumbnail.xml
@@ -18,9 +18,9 @@
         android:id="@+id/review_thumbnail"
         android:layout_width="112dp"
         android:layout_height="112dp"
-        android:layout_gravity="center"
-        android:layout_marginLeft="27dp"
-        android:layout_marginRight="27dp"
+        android:layout_alignParentLeft="true"
+        android:layout_alignParentBottom="true"
+        android:layout_margin="10dp"
         android:clickable="true"
         android:focusable="false"
         android:background="@drawable/border_last_picture"/>
diff --git a/res/layout-xlarge/video_camera.xml b/res/layout-xlarge/video_camera.xml
index a0ae219..8c72cd9 100644
--- a/res/layout-xlarge/video_camera.xml
+++ b/res/layout-xlarge/video_camera.xml
@@ -14,14 +14,13 @@
      limitations under the License.
 -->
 
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
         xmlns:camera="http://schemas.android.com/apk/res/com.android.camera"
-        android:id="@+id/video_camera"
+        android:id="@+id/app_root"
         android:orientation="horizontal"
         android:layout_width="match_parent"
         android:layout_height="match_parent">
 
-    <include layout="@layout/review_thumbnail"/>
-    <include layout="@layout/preview_frame_video"/>
     <include layout="@layout/camera_control"/>
-</LinearLayout>
+    <include layout="@layout/preview_frame_video"/>
+</RelativeLayout>
diff --git a/res/layout/camera.xml b/res/layout/camera.xml
index 6937c76..bc9e313 100644
--- a/res/layout/camera.xml
+++ b/res/layout/camera.xml
@@ -16,7 +16,7 @@
 
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
         xmlns:camera="http://schemas.android.com/apk/res/com.android.camera"
-        android:id="@+id/camera"
+        android:id="@+id/app_root"
         android:orientation="horizontal"
         android:layout_width="match_parent"
         android:layout_height="match_parent">
diff --git a/res/layout/video_camera.xml b/res/layout/video_camera.xml
index f9b6dfa..c8c24c2 100644
--- a/res/layout/video_camera.xml
+++ b/res/layout/video_camera.xml
@@ -16,7 +16,7 @@
 
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
         xmlns:camera="http://schemas.android.com/apk/res/com.android.camera"
-        android:id="@+id/video_camera"
+        android:id="@+id/app_root"
         android:orientation="horizontal"
         android:layout_width="match_parent"
         android:layout_height="match_parent">
diff --git a/src/com/android/camera/PreviewFrameLayout.java b/src/com/android/camera/PreviewFrameLayout.java
index 4ceb58c..982e088 100644
--- a/src/com/android/camera/PreviewFrameLayout.java
+++ b/src/com/android/camera/PreviewFrameLayout.java
@@ -38,6 +38,7 @@ public class PreviewFrameLayout extends RelativeLayout {
 
     private double mAspectRatio = 4.0 / 3.0;
     private View mFrame;
+    private View mBorderView;
     private RadioGroup mCameraPicker;
     private OnSizeChangedListener mSizeListener;
     private final DisplayMetrics mMetrics = new DisplayMetrics();
@@ -61,6 +62,14 @@ public class PreviewFrameLayout extends RelativeLayout {
                     "must provide child with id as \"frame\"");
         }
         mCameraPicker = (RadioGroup) findViewById(R.id.camera_picker);
+
+        View preview = (View) findViewById(R.id.camera_preview);
+        ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams)
+                preview.getLayoutParams();
+        mBorderView = (View) findViewById(R.id.preview_border);
+        View f = mBorderView;
+        params.setMargins(f.getPaddingLeft(), f.getPaddingTop(), f.getPaddingRight(), f.getPaddingBottom());
+        preview.setLayoutParams(params);
     }
 
     public void setAspectRatio(double ratio) {
@@ -77,7 +86,7 @@ public class PreviewFrameLayout extends RelativeLayout {
         int frameWidth = getWidth();
         int frameHeight = getHeight();
 
-        View f = mFrame;
+        View f = mBorderView;
         int horizontalPadding = f.getPaddingLeft() + f.getPaddingRight();
         int verticalPadding = f.getPaddingBottom() + f.getPaddingTop();
         int previewHeight = frameHeight - verticalPadding;
diff --git a/src/com/android/camera/ui/ControlPanel.java b/src/com/android/camera/ui/ControlPanel.java
index f33cae7..575fdef 100644
--- a/src/com/android/camera/ui/ControlPanel.java
+++ b/src/com/android/camera/ui/ControlPanel.java
@@ -31,7 +31,6 @@ import android.view.LayoutInflater;
 import android.view.KeyEvent;
 import android.view.View;
 import android.view.ViewGroup;
-import android.view.ViewGroup.MarginLayoutParams;
 import android.widget.Button;
 import android.widget.LinearLayout;
 import android.widget.ListView;
@@ -89,8 +88,6 @@ public class ControlPanel extends RelativeLayout
         super.onFinishInflate();
         mIndicatorWheel = (IndicatorWheel) findViewById(R.id.indicator_wheel);
         mIndicatorWheel.setListener(this);
-        MarginLayoutParams params = (MarginLayoutParams) getLayoutParams();
-        mIndicatorWheel.setOverlapWidth(-params.leftMargin);
     }
 
     public void initialize(Context context, PreferenceGroup group,
@@ -149,7 +146,7 @@ public class ControlPanel extends RelativeLayout
 
         LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(
                 Context.LAYOUT_INFLATER_SERVICE);
-        ViewGroup root = (ViewGroup) getRootView().findViewById(R.id.frame);
+        ViewGroup root = (ViewGroup) getRootView().findViewById(R.id.app_root);
         BasicSettingPopup popup = (BasicSettingPopup) inflater.inflate(
                 R.layout.basic_setting_popup, root, false);
         mBasicSettingPopups[index] = popup;
@@ -161,7 +158,7 @@ public class ControlPanel extends RelativeLayout
     private void initializeOtherSettingPopup() {
         LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(
                 Context.LAYOUT_INFLATER_SERVICE);
-        ViewGroup root = (ViewGroup) getRootView().findViewById(R.id.frame);
+        ViewGroup root = (ViewGroup) getRootView().findViewById(R.id.app_root);
         mOtherSettingsPopup = (OtherSettingsPopup) inflater.inflate(
                 R.layout.other_setting_popup, root, false);
         mOtherSettingsPopup.setOtherSettingChangedListener(this);
diff --git a/src/com/android/camera/ui/IndicatorWheel.java b/src/com/android/camera/ui/IndicatorWheel.java
index e2ff028..f35334e 100644
--- a/src/com/android/camera/ui/IndicatorWheel.java
+++ b/src/com/android/camera/ui/IndicatorWheel.java
@@ -44,18 +44,19 @@ public class IndicatorWheel extends ViewGroup {
     // The center of the shutter button.
     private int mCenterX, mCenterY;
     // The width of the wheel stroke.
-    private int mStrokeWidth = 40;
-    private final int STROKE_COLOR = 0x50000000;
+    private int mStrokeWidth = 60;
+    private final int STROKE_COLOR = 0x12FFFFFF;
     // The width of the edges on both sides of the wheel, which has less alpha.
-    private final int EDGE_STROKE_WIDTH = 4, EDGE_STROKE_COLOR = 0x30000000;
+    private final int EDGE_STROKE_WIDTH = 6, EDGE_STROKE_COLOR = 0x07FFFFFF;
+    // Leave some space between the settings wheel and the decoration edges.
+    private final int LINE_SPACE = 2;
+    private final int OUTER_EDGE_STROKE_WIDTH = 3, OUTER_EDGE_STROKE_COLOR = 0x07FFFFFF;
     private View mShutterButton;
     private double mShutterButtonRadius;
     private double mWheelRadius;
     private double mSectorInitialRadians[];
     private Paint mBackgroundPaint;
     private RectF mBackgroundRect;
-    // The overlapping width between control panel and indicator wheel.
-    private int mOverlapWidth;
 
     static public interface Listener {
         public void onIndicatorClicked(int index);
@@ -76,10 +77,6 @@ public class IndicatorWheel extends ViewGroup {
         mBackgroundRect = new RectF();
     }
 
-    public void setOverlapWidth(int width) {
-        mOverlapWidth = width;
-    }
-
     @Override
     public boolean onTouchEvent(MotionEvent event) {
         int count = getChildCount();
@@ -94,6 +91,8 @@ public class IndicatorWheel extends ViewGroup {
             double radius = Math.sqrt(dx * dx + dy * dy);
             // Ignore the event if it's too near to the shutter button.
             if (radius < mShutterButtonRadius) return false;
+            // Ignore the event if it's too far from the shutter button.
+            if ((radius - mWheelRadius) > mStrokeWidth) return false;
 
             double intervalDegrees = 180.0 / (count - 2);
             double delta = Math.atan2(dy, dx);
@@ -136,12 +135,12 @@ public class IndicatorWheel extends ViewGroup {
         }
 
         if (childCount > 1) {
-            mStrokeWidth = (int) (getChildAt(1).getMeasuredWidth() * 1.3);
+            mStrokeWidth = (int) (getChildAt(1).getMeasuredWidth() * 2.0);
         }
 
         // Measure myself.
-        int desiredWidth = (int)(mShutterButton.getMeasuredWidth() * 2.5);
-        int desiredHeight = (int)(mShutterButton.getMeasuredHeight() * 4.5);
+        int desiredWidth = (int)(mShutterButton.getMeasuredWidth() * 3);
+        int desiredHeight = (int)(mShutterButton.getMeasuredHeight() * 4.5) + 2;
         int widthMode = MeasureSpec.getMode(widthSpec);
         int heightMode = MeasureSpec.getMode(heightSpec);
         int measuredWidth, measuredHeight;
@@ -170,9 +169,8 @@ public class IndicatorWheel extends ViewGroup {
 
         // Layout the shutter button.
         int shutterButtonWidth = mShutterButton.getMeasuredWidth();
-        mShutterButtonRadius = shutterButtonWidth / 2.0 + 10;
+        mShutterButtonRadius = shutterButtonWidth / 2.0;
         int shutterButtonHeight = mShutterButton.getMeasuredHeight();
-        mCenterX = (right - left + mOverlapWidth) / 2;
         mCenterY = (bottom - top) / 2;
         mShutterButton.layout(mCenterX - shutterButtonWidth / 2,
                 mCenterY - shutterButtonHeight / 2,
@@ -182,8 +180,8 @@ public class IndicatorWheel extends ViewGroup {
         // Layout the settings. The icons are spreaded on the left side of the
         // shutter button. So the angle starts from 90 to 270 degrees.
         if (count == 1) return;
-        mWheelRadius = (right - left - mOverlapWidth) / 2.0
-                + EDGE_STROKE_WIDTH + mStrokeWidth / 2.0;
+        mWheelRadius = mShutterButtonRadius + mStrokeWidth * 1.5;
+        mCenterX = (int) (right - mShutterButtonRadius * 1.2);
         double intervalDegrees = 180.0 / (count - 2);
         double initialDegrees = 90.0;
         int index = 0;
@@ -226,9 +224,15 @@ public class IndicatorWheel extends ViewGroup {
         mBackgroundPaint.setStrokeWidth(EDGE_STROKE_WIDTH);
         mBackgroundPaint.setColor(EDGE_STROKE_COLOR);
         float delta = (mStrokeWidth + EDGE_STROKE_WIDTH) / 2.0f;
-        mBackgroundRect.inset(-delta, -delta);
+        mBackgroundRect.inset(-delta - LINE_SPACE, -delta - LINE_SPACE);
         canvas.drawArc(mBackgroundRect, 0, 360, false, mBackgroundPaint);
-        mBackgroundRect.inset(delta * 2, delta * 2);
+        mBackgroundRect.inset((delta + LINE_SPACE) * 2, (delta + LINE_SPACE) * 2);
+        canvas.drawArc(mBackgroundRect, 0, 360, false, mBackgroundPaint);
+
+        // Draw another thinner, lighter background on the outer circle
+        mBackgroundPaint.setStrokeWidth(OUTER_EDGE_STROKE_WIDTH);
+        mBackgroundPaint.setColor(OUTER_EDGE_STROKE_COLOR);
+        mBackgroundRect.inset(-delta * 4 - EDGE_STROKE_WIDTH, -delta * 4 - EDGE_STROKE_WIDTH);
         canvas.drawArc(mBackgroundRect, 0, 360, false, mBackgroundPaint);
 
         super.onDraw(canvas);