1

I'm playing around Watch Faces for Wear OS

Currently, I have created

  • Background 320x320
  • Tick Circle 320x320
  • Hours, Minutes and Seconds Hands 320x40

Everything works fine on round devices with the screen size 320x320

enter image description here

Things are getting complicated when I am using devices with screen sizes 360x360. As you can see from the screenshot below the size of Tick Circle is not automatically adjusted.

enter image description here

Question

As I am new to developing Watch Faces and there is not much information about that on the Official Documentation Website, I want to understand how I should handle these cases?

Should I create for each size separate image with the correct size and put it in the correct folder like:

  • drawable-round-320dpi
  • drawable-round-360dpi
  • drawable-round-390dpi

Or is there some other way of doing this, I would prefer not to resize images programmatically from the code, but if it is the only solution I can try.

Here is my playground project source code

P.S. Any documentation, source code will be very useful.

Community
  • 1
  • 1
Viktor Apoyan
  • 10,655
  • 22
  • 85
  • 147

1 Answers1

1

In your example above, both devices fall into the hdpi density bucket, but the screen size still differs slightly. You could target them individually by using the minimum width qualifier. However, this would require a number of extra assets to make sure you cover all available screen sizes.

Personally I prefer to just do a simple scaling operation on the asset in code. Check the screen size at runtime and use that as the bounds for your drawable (or bitmap). It could look something like this:

DisplayMetrics displayMetrics = new DisplayMetrics();
context.getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
int width = displayMetrics.widthPixels;
int height = displayMetrics.heightPixels;
Rect screenBounds = new Rect(0, 0, width, height);

Drawable faceMarkers = context.getDrawable(R.drawable.face_markers);
faceMarkers.setBounds(screenBounds);

faceMarkers.draw(canvas);

Make sure that you provide an asset that's large enough for the largest screen in each density bucket. As long as you scale down your asset just a little bit it shouldn't be noticeable.

TofferJ
  • 4,678
  • 1
  • 37
  • 49