When creating a watch face for Android Wear devices, you may want to include a phone app for configuration. A preview of the watch face in the configuration app provides immediate feedback of the changes and makes it more comfortable for users to change settings.

To achieve this, you have to put the drawing code in a separate class, which can be reused in the phone app and the watch face service. First, create a separate Android Library module, where you put the common classes and resources for drawing the watch face. In this module, create an interface IWatchFaceConfig, which exposes your configuration options.

1 2 3 4 5 6 7 8 9 public interface IWatchFaceConfig { Calendar getCalendar ( ) ; boolean isAmbient ( ) ; boolean isLowBitAmbient ( ) ; boolean isRound ( ) ; // put your watch face options here boolean isLightTheme ( ) ; }

In your phone app and watch face service, you can now either choose to directly implement IWatchFaceConfig, or you can make a WatchFaceConfig class, if you prefer to have a separate configuration object. When you directly implement the interface, you have to be careful to avoid memory leaks (for example if your Activity implements the interface).

With the configuration interface, you can start implementing your WatchFaceDrawer, which is used by both the phone app and the watch face service.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 public class WatchFaceDrawer { private boolean mIsMobilePreview = false ; // put your resources here (Paint objects, dimensions, colors, ...) public WatchFaceDrawer ( Context context ) { Resources res = context . getResources ( ) ; // initialize your resources } public void setMobilePreview ( Context context , boolean isMobilePreview ) { mIsMobilePreview = isMobilePreview ; Resources res = context . getResources ( ) ; // change resources here, which are different when the watch face // is drawn in the phone app or on the watch } public void onAmbientModeChanged ( Context context , IWatchFaceConfig config ) { Resources res = context . getResources ( ) ; // adapt watch face to ambient mode changes } public void onDraw ( Context context , IWatchFaceConfig config , Canvas canvas , Rect bounds ) { final Calendar calendar = config . getCalendar ( ) ; final boolean isAmbient = config . isAmbient ( ) ; final boolean isRound = config . isRound ( ) ; final boolean useLightTheme = ! isAmbient && config . isLightTheme ( ) ; // draw your watch face here, using the provided canvas and bounds } }

In your watch face engine, you can now use the WatchFaceDrawer class. This also has the effect of reducing the complexity of your engine class, since you delegate the drawing functionality to another class.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 public class ExampleWatchFace extends CanvasWatchFaceService { @ Override public Engine onCreateEngine ( ) { return new Engine ( ) ; } private class Engine extends CanvasWatchFaceService . Engine implements IWatchFaceConfig { WatchFaceDrawer mWatchfaceDrawer ; boolean mAmbient = false ; boolean mLowBitAmbient = false ; boolean mIsRound = false ; GregorianCalendar mCalendar = new GregorianCalendar ( ) ; boolean mLightTheme = true ; @ Override public void onCreate ( SurfaceHolder holder ) { super . onCreate ( holder ) ; mWatchfaceDrawer = new WatchFaceDrawer ( getApplicationContext ( ) ) ; } @ Override public void onApplyWindowInsets ( WindowInsets insets ) { super . onApplyWindowInsets ( insets ) ; mIsRound = insets . isRound ( ) ; } @ Override public void onPropertiesChanged ( Bundle properties ) { super . onPropertiesChanged ( properties ) ; mLowBitAmbient = properties . getBoolean ( PROPERTY_LOW_BIT_AMBIENT , false ) ; } @ Override public void onTimeTick ( ) { super . onTimeTick ( ) ; invalidate ( ) ; } @ Override public void onAmbientModeChanged ( boolean inAmbientMode ) { super . onAmbientModeChanged ( inAmbientMode ) ; if ( mAmbient != inAmbientMode ) { mAmbient = inAmbientMode ; mWatchfaceDrawer . onAmbientModeChanged ( getApplicationContext ( ) , this ) ; invalidate ( ) ; } } @ Override public void onDraw ( Canvas canvas , Rect bounds ) { mCalendar . setTimeInMillis ( System . currentTimeMillis ( ) ) ; mWatchfaceDrawer . onDraw ( getApplicationContext ( ) , this , canvas , bounds ) ; } // IWatchfaceConfig @ Override public Calendar getCalendar ( ) { return mCalendar ; } @ Override public boolean isLightTheme ( ) { return mLightTheme ; } @ Override public boolean isAmbient ( ) { return mAmbient ; } @ Override public boolean isLowBitAmbient ( ) { return mLowBitAmbient ; } @ Override public boolean isRound ( ) { return mIsRound ; } } }

In your phone app, you can use the WatchFaceDrawer to draw in a Bitmap via a Canvas, which can then be shown in an ImageView.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 public class MainActivity extends AppCompatActivity implements IWatchFaceConfig { ImageView mWatchfaceImage ; WatchFaceDrawer mWatchfaceDrawer ; Calendar mCalendar = new GregorianCalendar ( ) ; Runnable mUpdateWatchfaceImageRunnable = new Runnable ( ) { @ Override public void run ( ) { updateWatchfaceImage ( ) ; } } ; int mSize = 0 ; @ Override protected void onCreate ( Bundle savedInstanceState ) { super . onCreate ( savedInstanceState ) ; setContentView ( R . layout . activity_main ) ; mWatchfaceImage = ( ImageView ) findViewById ( R . id . iv_watchface ) ; mWatchfaceDrawer = new WatchFaceDrawer ( this ) ; mWatchfaceDrawer . setMobilePreview ( this , true ) ; mSize = Math . round ( 320 / 1.5f * getResources ( ) . getDisplayMetrics ( ) . density ) ; } @ Override protected void onStart ( ) { super . onStart ( ) ; updateWatchfaceImage ( ) ; } @ Override protected void onStop ( ) { super . onStop ( ) ; mWatchfaceImage . removeCallbacks ( mUpdateWatchfaceImageRunnable ) ; } private void updateWatchfaceImage ( ) { mCalendar . setTimeInMillis ( System . currentTimeMillis ( ) ) ; Bitmap bmp = Bitmap . createBitmap ( mSize , mSize , Bitmap . Config . ARGB_8888 ) ; Canvas canvas = new Canvas ( bmp ) ; mWatchfaceDrawer . onDraw ( getApplicationContext ( ) , this , canvas , canvas . getClipBounds ( ) ) ; mWatchfaceImage . setImageBitmap ( bmp ) ; mWatchfaceImage . postDelayed ( mUpdateWatchfaceImageRunnable , 1000 ) ; } // IWatchFaceConfig @ Override public Calendar getCalendar ( ) { return mCalendar ; } @ Override public boolean isAmbient ( ) { return false ; } @ Override public boolean isLowBitAmbient ( ) { return false ; } @ Override public boolean isRound ( ) { return true ; } @ Override public boolean isLightTheme ( ) { return true ; } }

Now you have a watch face with a preview in the phone app, both using the same class for drawing. When preferences are changed, you just have to update the IWatchFaceConfig fields and call onDraw() again to update the watch face.

You can clone an example app with a simple watch face from GitHub. My watch face Airli was also created using this idea, if you want to see a more complex example in action.