Spinning wheel half way off screen android

Question

I have a requirement for a spinning wheel graphic that is half-off the bottom of the screen and then animates (spins) when users take action.

I can place the wheel graphic off the screen by calling:

    Animation animation = new TranslateAnimation(Animation.ABSOLUTE,0,Animation.ABSOLUTE, 0,Animation.ABSOLUTE,wheelPos, Animation.ABSOLUTE, wheelPos);
    animation.setDuration(1);
    animation.setFillAfter(true);
    wheel.startAnimation(animation);

That is fine, I can set the width to whatever I want via LayoutParams.

But how can I make the wheel the same size for different screen sizes? For example, I need to place the wheel Y pixels off the screen (wheelPos variable) above, but on a Nexus S versus Nexus 7 how can I calculate an appropriate Y value?

The same goes for width, how can I calculate a width so that it appears exactly the same size?

I note the Catch android app https://catch.com/ - if I expand their wheel menu, it's size is identical on the Nexus S versus Nexus 7 - how might they have achieved that?

Answer 1

Developer of Catch here. Thanks for the email pointing us to your question here.

For our wheel menu, its width and positioning are specified within XML layout files, using dp / dip (density-independent pixels). For a given dimension, say, 300dp , it will appear the same size on any Android device; the system will scale that value depending on whether the device's screen is low, medium, high, xhigh, etc. density.

So, set your width and Y offset using dp and you should be good to go. You can do it completely programmatically if you wish:

final int wheelWidth = 300;
final int wheelYoffset = 64;

DisplayMetrics dm = getResources().getDisplayMetrics();

final float scaledWheelWidth = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, wheelWidth, dm);
final float scaledWheelYoffset = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, wheelYoffset, dm);

I personally find it much easier to maintain all of my UI dimensions as resources. In res/values/dimens.xml I'd add:

<dimen name="wheel_width">300dp</dimen>
<dimen name="wheel_y_offset">64dp</dimen>

and then if I needed to use those dimensions in code, I can grab them with a one-liner:

final float scaledWheelWidth = getResources().getDimensionPixelSize(R.dimen.wheel_width);
final float scaledWheelYoffset = getResources().getDimensionPixelOffset(R.dimen.wheel_y_offset);

Using dp for layout is one of the keystone principles of making an Android UI that scales nicely to different devices, and is especially critical for anything you expect your user to touch/interact with, since you can size your hit targets during development and rest assured that they will be physically similarly-sized no matter what device your app is running on.