Créer sa propre watchface Android Wear https://github.com/florent37/WatchFaceSample

1. Android Wear
Créez votre propre Watchface
Florent Champigny
Xebia

2. AndroidManifest
Déclaré en tant que Service de Wallpaper
permission : android.permission.BIND_WALLPAPER
intent-filter : android.service.wallpaper.WallpaperService

3. AndroidManifest
Utilise les permissions
com.google.android.permission.PROVIDE_BACKGROUND
android.permission.WAKE_LOCK

4. AndroidManifest
Déclare les meta-datas
android.service.wallpaper -> xml contenant <wallpaper/>
com.google.android.wearable.watchface.preview -> Drawable
com.google.android.wearable.watchface.preview_circular -> Drawable

5. CanvasWatchFaceService
public class MyWatchFaceService extends CanvasWatchFaceService {
@Override public Engine onCreateEngine() {
}
}

6. CanvasWatchFaceService.Engine
void onCreate(SurfaceHolder holder);
void onDestroy();
void onSurfaceChanged(SurfaceHolder holder, int format, int width, int height);
void onTimeTick();
void onVisibilityChanged(boolean visible);
void onDraw(Canvas canvas, Rect bounds);
void onAmbientModeChanged(boolean inAmbientMode);

7. Ambiant mode
Ambiant

8. Canvas - Paint
Color
StrokeWidth
AntiAlias
StrokeCap
StrokeJoin
ShadowLayer
Style

9. Canvas - Paint
Color
StrokeWidth
AntiAlias
StrokeCap
StrokeJoin
ShadowLayer
Style
(Épaisseur du pinceau)

10. Canvas - Paint
Color
StrokeWidth
AntiAlias
StrokeCap
StrokeJoin
ShadowLayer
Style
(Lissage de la texture)

11. Canvas - Paint
Color
StrokeWidth
AntiAlias
StrokeCap
StrokeJoin
ShadowLayer
Style
BUTT
ROUND
SQUARE

12. Canvas - Paint
Color
StrokeWidth
AntiAlias
StrokeCap
StrokeJoin
ShadowLayer
Style
MITER ROUND BEVEL

13. Canvas - Paint
Color
StrokeWidth
AntiAlias
StrokeCap
StrokeJoin
ShadowLayer
Style
FILL STROKE STROKE & FILL

14. Canvas
canvas.drawBitmap( bitmap, left, top, paint);
canvas.drawRect(left, top, right, bottom, paint);
…
canvas.drawRoundRect(left, top, right, bottom, rx, ry, paint);
canvas.drawLine(startX, startY, stopX, stopY, paint);
canvas.drawOval(rect , paint);
canvas.drawCircle(centerX, centerY, radius, paint);

15. Canvas
canvas.save();
canvas.restore();
canvas.rotate(angle, centerX, centerY);
canvas.translate(dx, dy);
canvas.scale(sx, sy);

16. Canvas
canvas.drawBitmap(background,0,0,p);
canvas.save();
canvas.rotate(90, 0.5f, 0.5f);
canvas.drawRect(0.5f ,0.5f, 1f, 1f, p);
canvas.restore();
0 y 1
0
x
1

17. Canvas
canvas.drawBitmap(background,0,0,p);
canvas.save();
canvas.rotate(90, 0.5f, 0.5f);
canvas.drawRect(0.45f ,0.5f, 0.55f, 1f, p);
canvas.restore();
0 y 1
0
x
1

18. Canvas
canvas.drawBitmap(background,0,0,p);
canvas.save();
canvas.rotate(90, 0.5f, 0.5f);
canvas.drawRect(0.45f ,0.5f, 0.55f, 1f, p);
canvas.restore();
0 y 1
0
x
1

19. Canvas
canvas.drawBitmap(background,0,0,p);
canvas.save();
canvas.rotate(90, 0.5f, 0.5f);
canvas.drawRect(0.45f ,0.5f, 0.55f, 1f, p);
canvas.restore();
0 y 1
0
x
1

20. Canvas
canvas.drawBitmap(background,0,0,p);
canvas.save();
canvas.rotate(90, 0.5f, 0.5f);
canvas.drawRect(0.45f ,0.5f, 0.55f, 1f, p);
canvas.restore();
0 y 1
0
x
1

21. Canvas
canvas.drawBitmap(background,0,0,p);
canvas.save();
canvas.rotate(90, 0.5f, 0.5f);
canvas.drawRect(0.45f ,0.5f, 0.55f, 1f, p);
canvas.restore();
0 y 1
0
x
1

22. Canvas
canvas.drawBitmap(background,0,0,p);
canvas.save();
canvas.rotate(90, 0.5f, 0.5f);
canvas.drawRect(0.45f ,0.5f, 0.55f, 1f, p);
canvas.restore();
0 y 1
0
x
1