Scale a view and its layered subviews relatively

Question

(This is somewhat a follow-up on Android: How do you scale multiple views together?)

My task is to port an iPhone / iPad app on Android that consists of a simple ima

Answer 1

Well, answering my own question - here is the way I resolved the issue:

1. I placed the background image on the top of my ImageView with ImageView.setScaleType(ScaleType.FIT_START)
2. I calculated the scale factor of my background image like so:

    WindowManager mgr = (WindowManager) context
                .getSystemService(Context.WINDOW_SERVICE);
    DisplayMetrics metrics = new DisplayMetrics();
    mgr.getDefaultDisplay().getMetrics(metrics);
    Drawable image = context.getResources().getDrawable(R.drawables.someImage);
    float scale = metrics.widthPixels / (float) image.getIntrinsicWidth();

1. Finally, I used this scale in a custom ImageView class that loads the overlays to position and scale the view properly:

    public class OverlayImage extends ImageView
    {
        private int imgWidth, imgHeight;
        private final float scale;

        public OverlayImage(Context context, int xPos, int yPos, float scale)
        {
            super(context);
            this.scale = scale;

            LayoutParams animParams = new LayoutParams(LayoutParams.WRAP_CONTENT,
                    LayoutParams.WRAP_CONTENT);
            animParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
            animParams.addRule(RelativeLayout.ALIGN_PARENT_TOP);
            animParams.leftMargin = (int) (scale * xPos);
            animParams.topMargin = (int) (scale * yPos);
            setLayoutParams(animParams);

            Drawable dr = context.getResources().getDrawable(R.id.someImage);
            setBackgroundDrawable(dr);
            imgWidth = dr.getIntrinsicWidth();
            imgHeight = dr.getIntrinsicHeight();
        }

        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
        {
            setMeasuredDimension((int) (scale * imgWidth),
                    (int) (scale * imgHeight));
        }
    }

Answer 2

I lately needed to do something similar, i also had to port a IPad app to android, the screen had many images that had to be in specific locations.

I solved this slightly differently, absolute layout, and run through all the views and set the coordinated and size of each.

//This gets the scale of the screen change:
DisplayMetrics displaymetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
Drawable image = getResources().getDrawable(R.drawable.background_image);
float scaleW = displaymetrics.widthPixels / (float)image.getIntrinsicWidth();
float scaleH = displaymetrics.heightPixels / (float)image.getIntrinsicHeight();

//And this scales each view accordingly:
for(int i = 0; i < mainLayout.getChildCount(); i++)
{
    View v = mainLayout.getChildAt(i);
    v.setLayoutParams(new AbsoluteLayout.LayoutParams(
            Math.round(scaleW * v.getMeasuredWidth()),
            Math.round(scaleH * v.getMeasuredHeight()),
            Math.round(scaleW * ((AbsoluteLayout.LayoutParams)v.getLayoutParams()).x),
            Math.round(scaleH * ((AbsoluteLayout.LayoutParams)v.getLayoutParams()).y)));
}