Add some depth to your WatchFace

0_Add some depth to your WatchFace.gif

1_Add some depth to your WatchFace.md

#Add some depth to your WatchFace

Since the early days of Android wear, I wanted to try to make more interactive faces. I think the various sensors offer a great opportunity to implement realistic light, giving more depth to your watch face.

In case you don't know what this is about, you can give it a try here from the sample I've uploaded to the playstore: https://play.google.com/store/apps/details?id=com.deglise.sensorface

Implement SensorEventListener

The very first thing to do is to implement SensorEventListener, and then declare a SensorManager, sensorX and sensorY as described below.

private class Engine extends CanvasWatchFaceService.Engine implements SensorEventListener{

  SensorManager sensorMgr;
  float sensorX;
  float sensorY;

  ...
}

@Override

Implementing SensorEventListener, requires you to provide onSensorChanged and onAccuracyChanged method as shown below.

@Override
public void onSensorChanged(SensorEvent event) {

  // Reading raw value
  // todo smoothen things
  sensorX=event.values[0];
  sensorY=event.values[1];

}

@Override
public void onAccuracyChanged(Sensor sensor, int accuracy) {
  //You can keep it empty
}

##Register & unregister sensor You want the sensor to be on as soon as your watchface is shown but you also don't want your face to lock the sensor when the screen is off or when another app may need the sensor...

Then onVisibilityChanged seems the best place to achieve that.

@Override
public void onVisibilityChanged(boolean visible) {
  super.onVisibilityChanged(visible);

  if (visible) {
    registerSensor();
  } else {
    unregisterSensor();
  }
}

private void unregisterSensor() {
  sensorMgr.unregisterListener(this);
}

private void registerSensor() {
  sensorMgr = (SensorManager) getSystemService(getBaseContext().SENSOR_SERVICE);
  sensorMgr.registerListener(this, sensorMgr.getDefaultSensor(Sensor.TYPE_ACCELEROMETER), SensorManager.SENSOR_DELAY_NORMAL);
}

##Time to draw! From the onDraw method, you can now, access the sensorX,sensorY to alter position of the element on the canvas.

@Override
public void onDraw(Canvas canvas, Rect bounds) {
  // Draw digital minutes.
  canvas.drawText(minuteString, x+sensorX, mYOffset+sensorY, mShadowPaint);
  canvas.drawText(minuteString, x, mYOffset, mTimePaint);
}

##Conclusion I can already see many use for this, like realistic lightning to make "classic" wtach face even more realistic and shiny, but also more abstract or experimental animated faces, like a spaceship hud...

This is it, you are all set. I can't wait to see the great interactive watch faces you will make and the creative unexpected uses for this.

Feel free to share the result of your experiments with me.