am 28c85298: am 0321d7dd: am fb3b7240: Revise WatchFace sample\'s AnalogWatchFaceService.java and SweepWatchFaceService.java to include an actual picture background (vs. simple image of w/ fade). Also, refactored w/ better optimizations and to closer match the WatchFa
* commit '28c852981687309ac49c08545f0b41ffab75c925':
Revise WatchFace sample's AnalogWatchFaceService.java and SweepWatchFaceService.java to include an actual picture background (vs. simple image of w/ fade). Also, refactored w/ better optimizations and to closer match the WatchFace codelab (PeekCard support, Palette Color use, etc.).
diff --git a/wearable/wear/WatchFace/Wearable/src/main/java/com/example/android/wearable/watchface/AnalogWatchFaceService.java b/wearable/wear/WatchFace/Wearable/src/main/java/com/example/android/wearable/watchface/AnalogWatchFaceService.java
index 16194b1..fb86ac7 100644
--- a/wearable/wear/WatchFace/Wearable/src/main/java/com/example/android/wearable/watchface/AnalogWatchFaceService.java
+++ b/wearable/wear/WatchFace/Wearable/src/main/java/com/example/android/wearable/watchface/AnalogWatchFaceService.java
@@ -20,16 +20,18 @@
import android.content.Context;
import android.content.Intent;
import android.content.IntentFilter;
-import android.content.res.Resources;
import android.graphics.Bitmap;
+import android.graphics.BitmapFactory;
import android.graphics.Canvas;
+import android.graphics.Color;
+import android.graphics.ColorMatrix;
+import android.graphics.ColorMatrixColorFilter;
import android.graphics.Paint;
import android.graphics.Rect;
-import android.graphics.drawable.BitmapDrawable;
-import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
+import android.support.v7.graphics.Palette;
import android.support.wearable.watchface.CanvasWatchFaceService;
import android.support.wearable.watchface.WatchFaceService;
import android.support.wearable.watchface.WatchFaceStyle;
@@ -50,7 +52,7 @@
public class AnalogWatchFaceService extends CanvasWatchFaceService {
private static final String TAG = "AnalogWatchFaceService";
- /**
+ /*
* Update rate in milliseconds for interactive mode. We update once a second to advance the
* second hand.
*/
@@ -62,55 +64,73 @@
}
private class Engine extends CanvasWatchFaceService.Engine {
- static final int MSG_UPDATE_TIME = 0;
+ private static final int MSG_UPDATE_TIME = 0;
- static final float TWO_PI = (float) Math.PI * 2f;
+ private static final float HOUR_STROKE_WIDTH = 5f;
+ private static final float MINUTE_STROKE_WIDTH = 3f;
+ private static final float SECOND_TICK_STROKE_WIDTH = 2f;
- Paint mHourPaint;
- Paint mMinutePaint;
- Paint mSecondPaint;
- Paint mTickPaint;
- boolean mMute;
- Calendar mCalendar;
+ private static final float CENTER_GAP_AND_CIRCLE_RADIUS = 4f;
- /** Handler to update the time once a second in interactive mode. */
- final Handler mUpdateTimeHandler = new Handler() {
- @Override
- public void handleMessage(Message message) {
- switch (message.what) {
- case MSG_UPDATE_TIME:
- if (Log.isLoggable(TAG, Log.VERBOSE)) {
- Log.v(TAG, "updating time");
- }
- invalidate();
- if (shouldTimerBeRunning()) {
- long timeMs = System.currentTimeMillis();
- long delayMs = INTERACTIVE_UPDATE_RATE_MS
- - (timeMs % INTERACTIVE_UPDATE_RATE_MS);
- mUpdateTimeHandler.sendEmptyMessageDelayed(MSG_UPDATE_TIME, delayMs);
- }
- break;
- }
- }
- };
+ private static final int SHADOW_RADIUS = 6;
- final BroadcastReceiver mTimeZoneReceiver = new BroadcastReceiver() {
+ private Calendar mCalendar;
+ private boolean mRegisteredTimeZoneReceiver = false;
+ private boolean mMuteMode;
+
+ private float mCenterX;
+ private float mCenterY;
+
+ private float mSecondHandLength;
+ private float sMinuteHandLength;
+ private float sHourHandLength;
+
+ /* Colors for all hands (hour, minute, seconds, ticks) based on photo loaded. */
+ private int mWatchHandColor;
+ private int mWatchHandHightlightColor;
+ private int mWatchHandShadowColor;
+
+ private Paint mHourPaint;
+ private Paint mMinutePaint;
+ private Paint mSecondPaint;
+ private Paint mTickAndCirclePaint;
+
+ private Paint mBackgroundPaint;
+ private Bitmap mBackgroundBitmap;
+ private Bitmap mGrayBackgroundBitmap;
+
+ private boolean mAmbient;
+ private boolean mLowBitAmbient;
+ private boolean mBurnInProtection;
+
+ private Rect mPeekCardBounds = new Rect();
+
+ private final BroadcastReceiver mTimeZoneReceiver = new BroadcastReceiver() {
@Override
public void onReceive(Context context, Intent intent) {
mCalendar.setTimeZone(TimeZone.getDefault());
invalidate();
}
};
- boolean mRegisteredTimeZoneReceiver = false;
- /**
- * Whether the display supports fewer bits for each color in ambient mode. When true, we
- * disable anti-aliasing in ambient mode.
- */
- boolean mLowBitAmbient;
+ /* Handler to update the time once a second in interactive mode. */
+ private final Handler mUpdateTimeHandler = new Handler() {
+ @Override
+ public void handleMessage(Message message) {
- Bitmap mBackgroundBitmap;
- Bitmap mBackgroundScaledBitmap;
+ if (Log.isLoggable(TAG, Log.DEBUG)) {
+ Log.d(TAG, "updating time");
+ }
+ invalidate();
+ if (shouldTimerBeRunning()) {
+ long timeMs = System.currentTimeMillis();
+ long delayMs = INTERACTIVE_UPDATE_RATE_MS
+ - (timeMs % INTERACTIVE_UPDATE_RATE_MS);
+ mUpdateTimeHandler.sendEmptyMessageDelayed(MSG_UPDATE_TIME, delayMs);
+ }
+
+ }
+ };
@Override
public void onCreate(SurfaceHolder holder) {
@@ -125,32 +145,61 @@
.setShowSystemUiTime(false)
.build());
- Resources resources = AnalogWatchFaceService.this.getResources();
- Drawable backgroundDrawable = resources.getDrawable(R.drawable.bg, null /* theme */);
- mBackgroundBitmap = ((BitmapDrawable) backgroundDrawable).getBitmap();
+ mBackgroundPaint = new Paint();
+ mBackgroundPaint.setColor(Color.BLACK);
+ mBackgroundBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.bg);
+
+ /* Set defaults for colors */
+ mWatchHandColor = Color.WHITE;
+ mWatchHandHightlightColor = Color.RED;
+ mWatchHandShadowColor = Color.BLACK;
mHourPaint = new Paint();
- mHourPaint.setARGB(255, 200, 200, 200);
- mHourPaint.setStrokeWidth(5.f);
+ mHourPaint.setColor(mWatchHandColor);
+ mHourPaint.setStrokeWidth(HOUR_STROKE_WIDTH);
mHourPaint.setAntiAlias(true);
mHourPaint.setStrokeCap(Paint.Cap.ROUND);
+ mHourPaint.setShadowLayer(SHADOW_RADIUS, 0, 0, mWatchHandShadowColor);
mMinutePaint = new Paint();
- mMinutePaint.setARGB(255, 200, 200, 200);
- mMinutePaint.setStrokeWidth(3.f);
+ mMinutePaint.setColor(mWatchHandColor);
+ mMinutePaint.setStrokeWidth(MINUTE_STROKE_WIDTH);
mMinutePaint.setAntiAlias(true);
mMinutePaint.setStrokeCap(Paint.Cap.ROUND);
+ mMinutePaint.setShadowLayer(SHADOW_RADIUS, 0, 0, mWatchHandShadowColor);
mSecondPaint = new Paint();
- mSecondPaint.setARGB(255, 255, 0, 0);
- mSecondPaint.setStrokeWidth(2.f);
+ mSecondPaint.setColor(mWatchHandHightlightColor);
+ mSecondPaint.setStrokeWidth(SECOND_TICK_STROKE_WIDTH);
mSecondPaint.setAntiAlias(true);
mSecondPaint.setStrokeCap(Paint.Cap.ROUND);
+ mSecondPaint.setShadowLayer(SHADOW_RADIUS, 0, 0, mWatchHandShadowColor);
- mTickPaint = new Paint();
- mTickPaint.setARGB(100, 255, 255, 255);
- mTickPaint.setStrokeWidth(2.f);
- mTickPaint.setAntiAlias(true);
+ mTickAndCirclePaint = new Paint();
+ mTickAndCirclePaint.setColor(mWatchHandColor);
+ mTickAndCirclePaint.setStrokeWidth(SECOND_TICK_STROKE_WIDTH);
+ mTickAndCirclePaint.setAntiAlias(true);
+ mTickAndCirclePaint.setStyle(Paint.Style.STROKE);
+ mTickAndCirclePaint.setShadowLayer(SHADOW_RADIUS, 0, 0, mWatchHandShadowColor);
+
+ /* Extract colors from background image to improve watchface style. */
+ Palette.generateAsync(
+ mBackgroundBitmap,
+ new Palette.PaletteAsyncListener() {
+ @Override
+ public void onGenerated(Palette palette) {
+ if (palette != null) {
+ if (Log.isLoggable(TAG, Log.DEBUG)) {
+ Log.d(TAG, "Palette: " + palette);
+ }
+
+ mWatchHandHightlightColor = palette.getVibrantColor(Color.RED);
+ mWatchHandColor = palette.getLightVibrantColor(Color.WHITE);
+ mWatchHandShadowColor = palette.getDarkMutedColor(Color.BLACK);
+ updateWatchHandStyle();
+ }
+ }
+ });
mCalendar = Calendar.getInstance();
}
@@ -164,18 +213,17 @@
@Override
public void onPropertiesChanged(Bundle properties) {
super.onPropertiesChanged(properties);
- mLowBitAmbient = properties.getBoolean(PROPERTY_LOW_BIT_AMBIENT, false);
if (Log.isLoggable(TAG, Log.DEBUG)) {
Log.d(TAG, "onPropertiesChanged: low-bit ambient = " + mLowBitAmbient);
}
+
+ mLowBitAmbient = properties.getBoolean(PROPERTY_LOW_BIT_AMBIENT, false);
+ mBurnInProtection = properties.getBoolean(PROPERTY_BURN_IN_PROTECTION, false);
}
@Override
public void onTimeTick() {
super.onTimeTick();
- if (Log.isLoggable(TAG, Log.DEBUG)) {
- Log.d(TAG, "onTimeTick: ambient = " + isInAmbientMode());
- }
invalidate();
}
@@ -185,26 +233,57 @@
if (Log.isLoggable(TAG, Log.DEBUG)) {
Log.d(TAG, "onAmbientModeChanged: " + inAmbientMode);
}
- if (mLowBitAmbient) {
- boolean antiAlias = !inAmbientMode;
- mHourPaint.setAntiAlias(antiAlias);
- mMinutePaint.setAntiAlias(antiAlias);
- mSecondPaint.setAntiAlias(antiAlias);
- mTickPaint.setAntiAlias(antiAlias);
- }
- invalidate();
+ mAmbient = inAmbientMode;
- // Whether the timer should be running depends on whether we're in ambient mode (as well
- // as whether we're visible), so we may need to start or stop the timer.
+ updateWatchHandStyle();
+
+ /* Check and trigger whether or not timer should be running (only in active mode). */
updateTimer();
}
+ private void updateWatchHandStyle(){
+ if (mAmbient){
+ mHourPaint.setColor(Color.WHITE);
+ mMinutePaint.setColor(Color.WHITE);
+ mSecondPaint.setColor(Color.WHITE);
+ mTickAndCirclePaint.setColor(Color.WHITE);
+
+ mHourPaint.setAntiAlias(false);
+ mMinutePaint.setAntiAlias(false);
+ mSecondPaint.setAntiAlias(false);
+ mTickAndCirclePaint.setAntiAlias(false);
+
+ mHourPaint.clearShadowLayer();
+ mMinutePaint.clearShadowLayer();
+ mSecondPaint.clearShadowLayer();
+ mTickAndCirclePaint.clearShadowLayer();
+
+ } else {
+ mHourPaint.setColor(mWatchHandColor);
+ mMinutePaint.setColor(mWatchHandColor);
+ mSecondPaint.setColor(mWatchHandHightlightColor);
+ mTickAndCirclePaint.setColor(mWatchHandColor);
+
+ mHourPaint.setAntiAlias(true);
+ mMinutePaint.setAntiAlias(true);
+ mSecondPaint.setAntiAlias(true);
+ mTickAndCirclePaint.setAntiAlias(true);
+
+ mHourPaint.setShadowLayer(SHADOW_RADIUS, 0, 0, mWatchHandShadowColor);
+ mMinutePaint.setShadowLayer(SHADOW_RADIUS, 0, 0, mWatchHandShadowColor);
+ mSecondPaint.setShadowLayer(SHADOW_RADIUS, 0, 0, mWatchHandShadowColor);
+ mTickAndCirclePaint.setShadowLayer(SHADOW_RADIUS, 0, 0, mWatchHandShadowColor);
+ }
+ }
+
@Override
public void onInterruptionFilterChanged(int interruptionFilter) {
super.onInterruptionFilterChanged(interruptionFilter);
boolean inMuteMode = (interruptionFilter == WatchFaceService.INTERRUPTION_FILTER_NONE);
- if (mMute != inMuteMode) {
- mMute = inMuteMode;
+
+ /* Dim display in mute mode. */
+ if (mMuteMode != inMuteMode) {
+ mMuteMode = inMuteMode;
mHourPaint.setAlpha(inMuteMode ? 100 : 255);
mMinutePaint.setAlpha(inMuteMode ? 100 : 255);
mSecondPaint.setAlpha(inMuteMode ? 80 : 255);
@@ -214,92 +293,179 @@
@Override
public void onSurfaceChanged(SurfaceHolder holder, int format, int width, int height) {
- if (mBackgroundScaledBitmap == null
- || mBackgroundScaledBitmap.getWidth() != width
- || mBackgroundScaledBitmap.getHeight() != height) {
- mBackgroundScaledBitmap = Bitmap.createScaledBitmap(mBackgroundBitmap,
- width, height, true /* filter */);
- }
super.onSurfaceChanged(holder, format, width, height);
+
+ /*
+ * Find the coordinates of the center point on the screen, and ignore the window
+ * insets, so that, on round watches with a "chin", the watch face is centered on the
+ * entire screen, not just the usable portion.
+ */
+ mCenterX = width / 2f;
+ mCenterY = height / 2f;
+
+ /*
+ * Calculate lengths of different hands based on watch screen size.
+ */
+ mSecondHandLength = (float) (mCenterX * 0.875);
+ sMinuteHandLength = (float) (mCenterX * 0.75);
+ sHourHandLength = (float) (mCenterX * 0.5);
+
+
+ /* Scale loaded background image (more efficient) if surface dimensions change. */
+ float scale = ((float) width) / (float) mBackgroundBitmap.getWidth();
+
+ mBackgroundBitmap = Bitmap.createScaledBitmap(mBackgroundBitmap,
+ (int) (mBackgroundBitmap.getWidth() * scale),
+ (int) (mBackgroundBitmap.getHeight() * scale), true);
+
+ /*
+ * Create a gray version of the image only if it will look nice on the device in
+ * ambient mode. That means we don't want devices that support burn-in
+ * protection (slight movements in pixels, not great for images going all the way to
+ * edges) and low ambient mode (degrades image quality).
+ *
+ * Also, if your watch face will know about all images ahead of time (users aren't
+ * selecting their own photos for the watch face), it will be more
+ * efficient to create a black/white version (png, etc.) and load that when you need it.
+ */
+ if (!mBurnInProtection && !mLowBitAmbient) {
+ initGrayBackgroundBitmap();
+ }
+ }
+
+ private void initGrayBackgroundBitmap() {
+ mGrayBackgroundBitmap = Bitmap.createBitmap(
+ mBackgroundBitmap.getWidth(),
+ mBackgroundBitmap.getHeight(),
+ Bitmap.Config.ARGB_8888);
+ Canvas canvas = new Canvas(mGrayBackgroundBitmap);
+ Paint grayPaint = new Paint();
+ ColorMatrix colorMatrix = new ColorMatrix();
+ colorMatrix.setSaturation(0);
+ ColorMatrixColorFilter filter = new ColorMatrixColorFilter(colorMatrix);
+ grayPaint.setColorFilter(filter);
+ canvas.drawBitmap(mBackgroundBitmap, 0, 0, grayPaint);
}
@Override
public void onDraw(Canvas canvas, Rect bounds) {
- mCalendar.setTimeInMillis(System.currentTimeMillis());
+ if (Log.isLoggable(TAG, Log.VERBOSE)) {
+ Log.v(TAG, "onDraw");
+ }
+ long now = System.currentTimeMillis();
+ mCalendar.setTimeInMillis(now);
- int width = bounds.width();
- int height = bounds.height();
+ if (mAmbient && (mLowBitAmbient || mBurnInProtection)) {
+ canvas.drawColor(Color.BLACK);
+ } else if (mAmbient) {
+ canvas.drawBitmap(mGrayBackgroundBitmap, 0, 0, mBackgroundPaint);
+ } else {
+ canvas.drawBitmap(mBackgroundBitmap, 0, 0, mBackgroundPaint);
+ }
- // Draw the background, scaled to fit.
- canvas.drawBitmap(mBackgroundScaledBitmap, 0, 0, null);
-
- // Find the center. Ignore the window insets so that, on round watches with a
- // "chin", the watch face is centered on the entire screen, not just the usable
- // portion.
- float centerX = width / 2f;
- float centerY = height / 2f;
-
- // Draw the ticks.
- float innerTickRadius = centerX - 10;
- float outerTickRadius = centerX;
+ /*
+ * Draw ticks. Usually you will want to bake this directly into the photo, but in
+ * cases where you want to allow users to select their own photos, this dynamically
+ * creates them on top of the photo.
+ */
+ float innerTickRadius = mCenterX - 10;
+ float outerTickRadius = mCenterX;
for (int tickIndex = 0; tickIndex < 12; tickIndex++) {
- float tickRot = tickIndex * TWO_PI / 12;
+ float tickRot = (float) (tickIndex * Math.PI * 2 / 12);
float innerX = (float) Math.sin(tickRot) * innerTickRadius;
float innerY = (float) -Math.cos(tickRot) * innerTickRadius;
float outerX = (float) Math.sin(tickRot) * outerTickRadius;
float outerY = (float) -Math.cos(tickRot) * outerTickRadius;
- canvas.drawLine(centerX + innerX, centerY + innerY,
- centerX + outerX, centerY + outerY, mTickPaint);
+ canvas.drawLine(mCenterX + innerX, mCenterY + innerY,
+ mCenterX + outerX, mCenterY + outerY, mTickAndCirclePaint);
}
- float seconds =
- mCalendar.get(Calendar.SECOND) + mCalendar.get(Calendar.MILLISECOND) / 1000f;
- float secRot = seconds / 60f * TWO_PI;
- float minutes = mCalendar.get(Calendar.MINUTE) + seconds / 60f;
- float minRot = minutes / 60f * TWO_PI;
- float hours = mCalendar.get(Calendar.HOUR) + minutes / 60f;
- float hrRot = hours / 12f * TWO_PI;
+ /*
+ * These calculations reflect the rotation in degrees per unit of time, e.g.,
+ * 360 / 60 = 6 and 360 / 12 = 30.
+ */
+ final float seconds =
+ (mCalendar.get(Calendar.SECOND) + mCalendar.get(Calendar.MILLISECOND) / 1000f);
+ final float secondsRotation = seconds * 6f;
- float secLength = centerX - 20;
- float minLength = centerX - 40;
- float hrLength = centerX - 80;
+ final float minutesRotation = mCalendar.get(Calendar.MINUTE) * 6f;
- if (!isInAmbientMode()) {
- float secX = (float) Math.sin(secRot) * secLength;
- float secY = (float) -Math.cos(secRot) * secLength;
- canvas.drawLine(centerX, centerY, centerX + secX, centerY + secY, mSecondPaint);
+ final float hourHandOffset = mCalendar.get(Calendar.MINUTE) / 2f;
+ final float hoursRotation = (mCalendar.get(Calendar.HOUR) * 30) + hourHandOffset;
+
+ /*
+ * Save the canvas state before we can begin to rotate it.
+ */
+ canvas.save();
+
+ canvas.rotate(hoursRotation, mCenterX, mCenterY);
+ canvas.drawLine(
+ mCenterX,
+ mCenterY - CENTER_GAP_AND_CIRCLE_RADIUS,
+ mCenterX,
+ mCenterY - sHourHandLength,
+ mHourPaint);
+
+ canvas.rotate(minutesRotation - hoursRotation, mCenterX, mCenterY);
+ canvas.drawLine(
+ mCenterX,
+ mCenterY - CENTER_GAP_AND_CIRCLE_RADIUS,
+ mCenterX,
+ mCenterY - sMinuteHandLength,
+ mMinutePaint);
+
+ /*
+ * Ensure the "seconds" hand is drawn only when we are in interactive mode.
+ * Otherwise, we only update the watch face once a minute.
+ */
+ if (!mAmbient) {
+ canvas.rotate(secondsRotation - minutesRotation, mCenterX, mCenterY);
+ canvas.drawLine(
+ mCenterX,
+ mCenterY - CENTER_GAP_AND_CIRCLE_RADIUS,
+ mCenterX,
+ mCenterY - mSecondHandLength,
+ mSecondPaint);
+
}
+ canvas.drawCircle(
+ mCenterX,
+ mCenterY,
+ CENTER_GAP_AND_CIRCLE_RADIUS,
+ mTickAndCirclePaint);
- float minX = (float) Math.sin(minRot) * minLength;
- float minY = (float) -Math.cos(minRot) * minLength;
- canvas.drawLine(centerX, centerY, centerX + minX, centerY + minY, mMinutePaint);
+ /* Restore the canvas' original orientation. */
+ canvas.restore();
- float hrX = (float) Math.sin(hrRot) * hrLength;
- float hrY = (float) -Math.cos(hrRot) * hrLength;
- canvas.drawLine(centerX, centerY, centerX + hrX, centerY + hrY, mHourPaint);
+ /* Draw rectangle behind peek card in ambient mode to improve readability. */
+ if (mAmbient) {
+ canvas.drawRect(mPeekCardBounds, mBackgroundPaint);
+ }
}
@Override
public void onVisibilityChanged(boolean visible) {
super.onVisibilityChanged(visible);
- if (Log.isLoggable(TAG, Log.DEBUG)) {
- Log.d(TAG, "onVisibilityChanged: " + visible);
- }
if (visible) {
registerReceiver();
-
- // Update time zone in case it changed while we weren't visible.
+ /* Update time zone in case it changed while we weren't visible. */
mCalendar.setTimeZone(TimeZone.getDefault());
+ invalidate();
} else {
unregisterReceiver();
}
- // Whether the timer should be running depends on whether we're visible (as well as
- // whether we're in ambient mode), so we may need to start or stop the timer.
+ /* Check and trigger whether or not timer should be running (only in active mode). */
updateTimer();
}
+ @Override
+ public void onPeekCardPositionUpdate(Rect rect) {
+ super.onPeekCardPositionUpdate(rect);
+ mPeekCardBounds.set(rect);
+ }
+
private void registerReceiver() {
if (mRegisteredTimeZoneReceiver) {
return;
@@ -318,8 +484,7 @@
}
/**
- * Starts the {@link #mUpdateTimeHandler} timer if it should be running and isn't currently
- * or stops it if it shouldn't be running but currently is.
+ * Starts/stops the {@link #mUpdateTimeHandler} timer based on the state of the watch face.
*/
private void updateTimer() {
if (Log.isLoggable(TAG, Log.DEBUG)) {
@@ -332,12 +497,11 @@
}
/**
- * Returns whether the {@link #mUpdateTimeHandler} timer should be running. The timer should
- * only run when we're visible and in interactive mode.
+ * Returns whether the {@link #mUpdateTimeHandler} timer should be running. The timer
+ * should only run in active mode.
*/
private boolean shouldTimerBeRunning() {
- return isVisible() && !isInAmbientMode();
+ return isVisible() && !mAmbient;
}
-
}
}
diff --git a/wearable/wear/WatchFace/Wearable/src/main/java/com/example/android/wearable/watchface/SweepWatchFaceService.java b/wearable/wear/WatchFace/Wearable/src/main/java/com/example/android/wearable/watchface/SweepWatchFaceService.java
index d547f1c..0ba2ab9 100644
--- a/wearable/wear/WatchFace/Wearable/src/main/java/com/example/android/wearable/watchface/SweepWatchFaceService.java
+++ b/wearable/wear/WatchFace/Wearable/src/main/java/com/example/android/wearable/watchface/SweepWatchFaceService.java
@@ -20,14 +20,16 @@
import android.content.Context;
import android.content.Intent;
import android.content.IntentFilter;
-import android.content.res.Resources;
import android.graphics.Bitmap;
+import android.graphics.BitmapFactory;
import android.graphics.Canvas;
+import android.graphics.Color;
+import android.graphics.ColorMatrix;
+import android.graphics.ColorMatrixColorFilter;
import android.graphics.Paint;
import android.graphics.Rect;
-import android.graphics.drawable.BitmapDrawable;
-import android.graphics.drawable.Drawable;
import android.os.Bundle;
+import android.support.v7.graphics.Palette;
import android.support.wearable.watchface.CanvasWatchFaceService;
import android.support.wearable.watchface.WatchFaceService;
import android.support.wearable.watchface.WatchFaceStyle;
@@ -45,6 +47,7 @@
* {@link AnalogWatchFaceService} is similar but has a ticking second hand.
*/
public class SweepWatchFaceService extends CanvasWatchFaceService {
+
private static final String TAG = "SweepWatchFaceService";
@Override
@@ -53,32 +56,53 @@
}
private class Engine extends CanvasWatchFaceService.Engine {
- static final float TWO_PI = (float) Math.PI * 2f;
- Paint mHourPaint;
- Paint mMinutePaint;
- Paint mSecondPaint;
- Paint mTickPaint;
- boolean mMute;
- Calendar mCalendar;
+ private static final float HOUR_STROKE_WIDTH = 5f;
+ private static final float MINUTE_STROKE_WIDTH = 3f;
+ private static final float SECOND_TICK_STROKE_WIDTH = 2f;
- final BroadcastReceiver mTimeZoneReceiver = new BroadcastReceiver() {
+ private static final float CENTER_GAP_AND_CIRCLE_RADIUS = 4f;
+
+ private static final int SHADOW_RADIUS = 6;
+
+ private Calendar mCalendar;
+ private boolean mRegisteredTimeZoneReceiver = false;
+ private boolean mMuteMode;
+
+ private float mCenterX;
+ private float mCenterY;
+
+ private float mSecondHandLength;
+ private float mMinuteHandLength;
+ private float mHourHandLength;
+
+ /* Colors for all hands (hour, minute, seconds, ticks) based on photo loaded. */
+ private int mWatchHandColor;
+ private int mWatchHandHightlightColor;
+ private int mWatchHandShadowColor;
+
+ private Paint mHourPaint;
+ private Paint mMinutePaint;
+ private Paint mSecondPaint;
+ private Paint mTickAndCirclePaint;
+
+ private Paint mBackgroundPaint;
+ private Bitmap mBackgroundBitmap;
+ private Bitmap mGrayBackgroundBitmap;
+
+ private boolean mAmbient;
+ private boolean mLowBitAmbient;
+ private boolean mBurnInProtection;
+
+ private Rect mPeekCardBounds = new Rect();
+
+ private final BroadcastReceiver mTimeZoneReceiver = new BroadcastReceiver() {
@Override
public void onReceive(Context context, Intent intent) {
mCalendar.setTimeZone(TimeZone.getDefault());
invalidate();
}
};
- boolean mRegisteredTimeZoneReceiver = false;
-
- /**
- * Whether the display supports fewer bits for each color in ambient mode. When true, we
- * disable anti-aliasing in ambient mode.
- */
- boolean mLowBitAmbient;
-
- Bitmap mBackgroundBitmap;
- Bitmap mBackgroundScaledBitmap;
@Override
public void onCreate(SurfaceHolder holder) {
@@ -93,32 +117,61 @@
.setShowSystemUiTime(false)
.build());
- Resources resources = SweepWatchFaceService.this.getResources();
- Drawable backgroundDrawable = resources.getDrawable(R.drawable.bg, null /* theme */);
- mBackgroundBitmap = ((BitmapDrawable) backgroundDrawable).getBitmap();
+ mBackgroundPaint = new Paint();
+ mBackgroundPaint.setColor(Color.BLACK);
+ mBackgroundBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.bg);
+
+ /* Set defaults for colors */
+ mWatchHandColor = Color.WHITE;
+ mWatchHandHightlightColor = Color.RED;
+ mWatchHandShadowColor = Color.BLACK;
mHourPaint = new Paint();
- mHourPaint.setARGB(255, 200, 200, 200);
- mHourPaint.setStrokeWidth(5.f);
+ mHourPaint.setColor(mWatchHandColor);
+ mHourPaint.setStrokeWidth(HOUR_STROKE_WIDTH);
mHourPaint.setAntiAlias(true);
mHourPaint.setStrokeCap(Paint.Cap.ROUND);
+ mHourPaint.setShadowLayer(SHADOW_RADIUS, 0, 0, mWatchHandShadowColor);
mMinutePaint = new Paint();
- mMinutePaint.setARGB(255, 200, 200, 200);
- mMinutePaint.setStrokeWidth(3.f);
+ mMinutePaint.setColor(mWatchHandColor);
+ mMinutePaint.setStrokeWidth(MINUTE_STROKE_WIDTH);
mMinutePaint.setAntiAlias(true);
mMinutePaint.setStrokeCap(Paint.Cap.ROUND);
+ mMinutePaint.setShadowLayer(SHADOW_RADIUS, 0, 0, mWatchHandShadowColor);
mSecondPaint = new Paint();
- mSecondPaint.setARGB(255, 255, 0, 0);
- mSecondPaint.setStrokeWidth(2.f);
+ mSecondPaint.setColor(mWatchHandHightlightColor);
+ mSecondPaint.setStrokeWidth(SECOND_TICK_STROKE_WIDTH);
mSecondPaint.setAntiAlias(true);
mSecondPaint.setStrokeCap(Paint.Cap.ROUND);
+ mSecondPaint.setShadowLayer(SHADOW_RADIUS, 0, 0, mWatchHandShadowColor);
- mTickPaint = new Paint();
- mTickPaint.setARGB(100, 255, 255, 255);
- mTickPaint.setStrokeWidth(2.f);
- mTickPaint.setAntiAlias(true);
+ mTickAndCirclePaint = new Paint();
+ mTickAndCirclePaint.setColor(mWatchHandColor);
+ mTickAndCirclePaint.setStrokeWidth(SECOND_TICK_STROKE_WIDTH);
+ mTickAndCirclePaint.setAntiAlias(true);
+ mTickAndCirclePaint.setStyle(Paint.Style.STROKE);
+ mTickAndCirclePaint.setShadowLayer(SHADOW_RADIUS, 0, 0, mWatchHandShadowColor);
+
+ /* Extract colors from background image to improve watchface style. */
+ Palette.generateAsync(
+ mBackgroundBitmap,
+ new Palette.PaletteAsyncListener() {
+ @Override
+ public void onGenerated(Palette palette) {
+ if (palette != null) {
+ if (Log.isLoggable(TAG, Log.DEBUG)) {
+ Log.d(TAG, "Palette: " + palette);
+ }
+
+ mWatchHandHightlightColor = palette.getVibrantColor(Color.RED);
+ mWatchHandColor = palette.getLightVibrantColor(Color.WHITE);
+ mWatchHandShadowColor = palette.getDarkMutedColor(Color.BLACK);
+ updateWatchHandStyle();
+ }
+ }
+ });
mCalendar = Calendar.getInstance();
}
@@ -126,18 +179,17 @@
@Override
public void onPropertiesChanged(Bundle properties) {
super.onPropertiesChanged(properties);
- mLowBitAmbient = properties.getBoolean(PROPERTY_LOW_BIT_AMBIENT, false);
if (Log.isLoggable(TAG, Log.DEBUG)) {
Log.d(TAG, "onPropertiesChanged: low-bit ambient = " + mLowBitAmbient);
}
+
+ mLowBitAmbient = properties.getBoolean(PROPERTY_LOW_BIT_AMBIENT, false);
+ mBurnInProtection = properties.getBoolean(PROPERTY_BURN_IN_PROTECTION, false);
}
@Override
public void onTimeTick() {
super.onTimeTick();
- if (Log.isLoggable(TAG, Log.DEBUG)) {
- Log.d(TAG, "onTimeTick: ambient = " + isInAmbientMode());
- }
invalidate();
}
@@ -147,22 +199,56 @@
if (Log.isLoggable(TAG, Log.DEBUG)) {
Log.d(TAG, "onAmbientModeChanged: " + inAmbientMode);
}
- if (mLowBitAmbient) {
- boolean antiAlias = !inAmbientMode;
- mHourPaint.setAntiAlias(antiAlias);
- mMinutePaint.setAntiAlias(antiAlias);
- mSecondPaint.setAntiAlias(antiAlias);
- mTickPaint.setAntiAlias(antiAlias);
- }
+ mAmbient = inAmbientMode;
+
+ updateWatchHandStyle();
+
invalidate();
}
+ private void updateWatchHandStyle(){
+ if (mAmbient){
+ mHourPaint.setColor(Color.WHITE);
+ mMinutePaint.setColor(Color.WHITE);
+ mSecondPaint.setColor(Color.WHITE);
+ mTickAndCirclePaint.setColor(Color.WHITE);
+
+ mHourPaint.setAntiAlias(false);
+ mMinutePaint.setAntiAlias(false);
+ mSecondPaint.setAntiAlias(false);
+ mTickAndCirclePaint.setAntiAlias(false);
+
+ mHourPaint.clearShadowLayer();
+ mMinutePaint.clearShadowLayer();
+ mSecondPaint.clearShadowLayer();
+ mTickAndCirclePaint.clearShadowLayer();
+
+ } else {
+ mHourPaint.setColor(mWatchHandColor);
+ mMinutePaint.setColor(mWatchHandColor);
+ mSecondPaint.setColor(mWatchHandHightlightColor);
+ mTickAndCirclePaint.setColor(mWatchHandColor);
+
+ mHourPaint.setAntiAlias(true);
+ mMinutePaint.setAntiAlias(true);
+ mSecondPaint.setAntiAlias(true);
+ mTickAndCirclePaint.setAntiAlias(true);
+
+ mHourPaint.setShadowLayer(SHADOW_RADIUS, 0, 0, mWatchHandShadowColor);
+ mMinutePaint.setShadowLayer(SHADOW_RADIUS, 0, 0, mWatchHandShadowColor);
+ mSecondPaint.setShadowLayer(SHADOW_RADIUS, 0, 0, mWatchHandShadowColor);
+ mTickAndCirclePaint.setShadowLayer(SHADOW_RADIUS, 0, 0, mWatchHandShadowColor);
+ }
+ }
+
@Override
public void onInterruptionFilterChanged(int interruptionFilter) {
super.onInterruptionFilterChanged(interruptionFilter);
boolean inMuteMode = (interruptionFilter == WatchFaceService.INTERRUPTION_FILTER_NONE);
- if (mMute != inMuteMode) {
- mMute = inMuteMode;
+
+ /* Dim display in mute mode. */
+ if (mMuteMode != inMuteMode) {
+ mMuteMode = inMuteMode;
mHourPaint.setAlpha(inMuteMode ? 100 : 255);
mMinutePaint.setAlpha(inMuteMode ? 100 : 255);
mSecondPaint.setAlpha(inMuteMode ? 80 : 255);
@@ -172,13 +258,58 @@
@Override
public void onSurfaceChanged(SurfaceHolder holder, int format, int width, int height) {
- if (mBackgroundScaledBitmap == null
- || mBackgroundScaledBitmap.getWidth() != width
- || mBackgroundScaledBitmap.getHeight() != height) {
- mBackgroundScaledBitmap = Bitmap.createScaledBitmap(mBackgroundBitmap,
- width, height, true /* filter */);
- }
super.onSurfaceChanged(holder, format, width, height);
+
+ /*
+ * Find the coordinates of the center point on the screen, and ignore the window
+ * insets, so that, on round watches with a "chin", the watch face is centered on the
+ * entire screen, not just the usable portion.
+ */
+ mCenterX = width / 2f;
+ mCenterY = height / 2f;
+
+ /*
+ * Calculate lengths of different hands based on watch screen size.
+ */
+ mSecondHandLength = (float) (mCenterX * 0.875);
+ mMinuteHandLength = (float) (mCenterX * 0.75);
+ mHourHandLength = (float) (mCenterX * 0.5);
+
+
+ /* Scale loaded background image (more efficient) if surface dimensions change. */
+ float scale = ((float) width) / (float) mBackgroundBitmap.getWidth();
+
+ mBackgroundBitmap = Bitmap.createScaledBitmap(mBackgroundBitmap,
+ (int) (mBackgroundBitmap.getWidth() * scale),
+ (int) (mBackgroundBitmap.getHeight() * scale), true);
+
+ /*
+ * Create a gray version of the image only if it will look nice on the device in
+ * ambient mode. That means we don't want devices that support burn-in
+ * protection (slight movements in pixels, not great for images going all the way to
+ * edges) and low ambient mode (degrades image quality).
+ *
+ * Also, if your watch face will know about all images ahead of time (users aren't
+ * selecting their own photos for the watch face), it will be more
+ * efficient to create a black/white version (png, etc.) and load that when you need it.
+ */
+ if (!mBurnInProtection && !mLowBitAmbient) {
+ initGrayBackgroundBitmap();
+ }
+ }
+
+ private void initGrayBackgroundBitmap() {
+ mGrayBackgroundBitmap = Bitmap.createBitmap(
+ mBackgroundBitmap.getWidth(),
+ mBackgroundBitmap.getHeight(),
+ Bitmap.Config.ARGB_8888);
+ Canvas canvas = new Canvas(mGrayBackgroundBitmap);
+ Paint grayPaint = new Paint();
+ ColorMatrix colorMatrix = new ColorMatrix();
+ colorMatrix.setSaturation(0);
+ ColorMatrixColorFilter filter = new ColorMatrixColorFilter(colorMatrix);
+ grayPaint.setColorFilter(filter);
+ canvas.drawBitmap(mBackgroundBitmap, 0, 0, grayPaint);
}
@Override
@@ -189,59 +320,95 @@
long now = System.currentTimeMillis();
mCalendar.setTimeInMillis(now);
- int width = bounds.width();
- int height = bounds.height();
+ if (mAmbient && (mLowBitAmbient || mBurnInProtection)) {
+ canvas.drawColor(Color.BLACK);
+ } else if (mAmbient) {
+ canvas.drawBitmap(mGrayBackgroundBitmap, 0, 0, mBackgroundPaint);
+ } else {
+ canvas.drawBitmap(mBackgroundBitmap, 0, 0, mBackgroundPaint);
+ }
- // Draw the background, scaled to fit.
- canvas.drawBitmap(mBackgroundScaledBitmap, 0, 0, null);
-
- // Find the center. Ignore the window insets so that, on round watches with a
- // "chin", the watch face is centered on the entire screen, not just the usable
- // portion.
- float centerX = width / 2f;
- float centerY = height / 2f;
-
- // Draw the ticks.
- float innerTickRadius = centerX - 10;
- float outerTickRadius = centerX;
+ /*
+ * Draw ticks. Usually you will want to bake this directly into the photo, but in
+ * cases where you want to allow users to select their own photos, this dynamically
+ * creates them on top of the photo.
+ */
+ float innerTickRadius = mCenterX - 10;
+ float outerTickRadius = mCenterX;
for (int tickIndex = 0; tickIndex < 12; tickIndex++) {
float tickRot = (float) (tickIndex * Math.PI * 2 / 12);
float innerX = (float) Math.sin(tickRot) * innerTickRadius;
float innerY = (float) -Math.cos(tickRot) * innerTickRadius;
float outerX = (float) Math.sin(tickRot) * outerTickRadius;
float outerY = (float) -Math.cos(tickRot) * outerTickRadius;
- canvas.drawLine(centerX + innerX, centerY + innerY,
- centerX + outerX, centerY + outerY, mTickPaint);
+ canvas.drawLine(mCenterX + innerX, mCenterY + innerY,
+ mCenterX + outerX, mCenterY + outerY, mTickAndCirclePaint);
}
- float seconds =
- mCalendar.get(Calendar.SECOND) + mCalendar.get(Calendar.MILLISECOND) / 1000f;
- float secRot = seconds / 60f * TWO_PI;
- float minutes = mCalendar.get(Calendar.MINUTE) + seconds / 60f;
- float minRot = minutes / 60f * TWO_PI;
- float hours = mCalendar.get(Calendar.HOUR) + minutes / 60f;
- float hrRot = hours / 12f * TWO_PI;
+ /*
+ * These calculations reflect the rotation in degrees per unit of time, e.g.,
+ * 360 / 60 = 6 and 360 / 12 = 30.
+ */
+ final float seconds =
+ (mCalendar.get(Calendar.SECOND) + mCalendar.get(Calendar.MILLISECOND) / 1000f);
+ final float secondsRotation = seconds * 6f;
- float secLength = centerX - 20;
- float minLength = centerX - 40;
- float hrLength = centerX - 80;
+ final float minutesRotation = mCalendar.get(Calendar.MINUTE) * 6f;
- if (!isInAmbientMode()) {
- float secX = (float) Math.sin(secRot) * secLength;
- float secY = (float) -Math.cos(secRot) * secLength;
- canvas.drawLine(centerX, centerY, centerX + secX, centerY + secY, mSecondPaint);
+ final float hourHandOffset = mCalendar.get(Calendar.MINUTE) / 2f;
+ final float hoursRotation = (mCalendar.get(Calendar.HOUR) * 30) + hourHandOffset;
+
+ /*
+ * Save the canvas state before we can begin to rotate it.
+ */
+ canvas.save();
+
+ canvas.rotate(hoursRotation, mCenterX, mCenterY);
+ canvas.drawLine(
+ mCenterX,
+ mCenterY - CENTER_GAP_AND_CIRCLE_RADIUS,
+ mCenterX,
+ mCenterY - mHourHandLength,
+ mHourPaint);
+
+ canvas.rotate(minutesRotation - hoursRotation, mCenterX, mCenterY);
+ canvas.drawLine(
+ mCenterX,
+ mCenterY - CENTER_GAP_AND_CIRCLE_RADIUS,
+ mCenterX,
+ mCenterY - mMinuteHandLength,
+ mMinutePaint);
+
+ /*
+ * Ensure the "seconds" hand is drawn only when we are in interactive mode.
+ * Otherwise, we only update the watch face once a minute.
+ */
+ if (!mAmbient) {
+ canvas.rotate(secondsRotation - minutesRotation, mCenterX, mCenterY);
+ canvas.drawLine(
+ mCenterX,
+ mCenterY - CENTER_GAP_AND_CIRCLE_RADIUS,
+ mCenterX,
+ mCenterY - mSecondHandLength,
+ mSecondPaint);
+
+ }
+ canvas.drawCircle(
+ mCenterX,
+ mCenterY,
+ CENTER_GAP_AND_CIRCLE_RADIUS,
+ mTickAndCirclePaint);
+
+ /* Restore the canvas' original orientation. */
+ canvas.restore();
+
+ /* Draw rectangle behind peek card in ambient mode to improve readability. */
+ if (mAmbient) {
+ canvas.drawRect(mPeekCardBounds, mBackgroundPaint);
}
- float minX = (float) Math.sin(minRot) * minLength;
- float minY = (float) -Math.cos(minRot) * minLength;
- canvas.drawLine(centerX, centerY, centerX + minX, centerY + minY, mMinutePaint);
-
- float hrX = (float) Math.sin(hrRot) * hrLength;
- float hrY = (float) -Math.cos(hrRot) * hrLength;
- canvas.drawLine(centerX, centerY, centerX + hrX, centerY + hrY, mHourPaint);
-
- // Draw every frame as long as we're visible and in interactive mode.
- if (isVisible() && !isInAmbientMode()) {
+ /* Draw every frame as long as we're visible and in interactive mode. */
+ if ((isVisible()) && (!mAmbient)) {
invalidate();
}
}
@@ -252,16 +419,20 @@
if (visible) {
registerReceiver();
-
- // Update time zone in case it changed while we weren't visible.
+ /* Update time zone in case it changed while we weren't visible. */
mCalendar.setTimeZone(TimeZone.getDefault());
-
invalidate();
} else {
unregisterReceiver();
}
}
+ @Override
+ public void onPeekCardPositionUpdate(Rect rect) {
+ super.onPeekCardPositionUpdate(rect);
+ mPeekCardBounds.set(rect);
+ }
+
private void registerReceiver() {
if (mRegisteredTimeZoneReceiver) {
return;
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/bg.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/bg.png
index 5199af2..c83911a 100644
--- a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/bg.png
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/bg.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/preview_analog.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/preview_analog.png
index ed6960d..af43c3d 100644
--- a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/preview_analog.png
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/preview_analog.png
Binary files differ
diff --git a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/preview_analog_circular.png b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/preview_analog_circular.png
index a3affe2..cb93b4e 100644
--- a/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/preview_analog_circular.png
+++ b/wearable/wear/WatchFace/Wearable/src/main/res/drawable-hdpi/preview_analog_circular.png
Binary files differ
diff --git a/wearable/wear/WatchFace/screenshots/analog_and_sweep_face.png b/wearable/wear/WatchFace/screenshots/analog_and_sweep_face.png
index df0820e..af43c3d 100644
--- a/wearable/wear/WatchFace/screenshots/analog_and_sweep_face.png
+++ b/wearable/wear/WatchFace/screenshots/analog_and_sweep_face.png
Binary files differ
diff --git a/wearable/wear/WatchFace/template-params.xml b/wearable/wear/WatchFace/template-params.xml
index d5afe24..fc3a2c7 100644
--- a/wearable/wear/WatchFace/template-params.xml
+++ b/wearable/wear/WatchFace/template-params.xml
@@ -24,6 +24,7 @@
<minSdk>18</minSdk>
+ <dependency_wearable>com.android.support:palette-v7:21.0.0</dependency_wearable>
<dependency>com.google.android.support:wearable:1.3.0</dependency>
<wearable>
