Android Question ImageViews same size in different devices

[GiovanniO]

Hi everyone. I have a question. I need to load some images into ImageViews to create image overlays. The problem arises when working with different devices. Even if I assign values to the ImageViews in %x and %y or in DIP, when I switch devices, the ImageViews don't remain in the same position or aren't the correct size (especially the ratio). Has anyone worked with this issue? I appreciate any help.

Gretings.

 

[Sagenut]

Please post an example project that show the issue to test.
In this way it will be possible to check what you are doing and eventually correct or explain the issue.

 

[LucaMs]

the ImageViews don't remain in the same position or aren't the correct size (especially the ratio)

You must use dips and remove AutoScaleAll from the Designer script.
Even if you haven't used Designer, you must use dips to obtain a fixed size and position for the ImageView.

 

[GiovanniO]

Thank you for your answers.

@Sagenut , It's something as simple as a panel and two imageviews, the panel is at 100% (I want to do a "screenshoot" of the panel), i use this code in the designer:

pBase.Width = 100%x
pBase.Height = 100%y

iv1.Width = 220dip  '61.3%x
iv1.Height = 220dip   '30.4%y
iv2.Height = iv1.Height
iv2.Width = iv1.Width

iv1.Left = 15dip
iv1.Top = 240dip

iv2.Left = 120dip
iv2.Top = 360dip

pMask.Width = 100%x
pMask.Height = 100%y

@LucaMs i don't have AutoScallAll and i put the ImageViews in dip, however, depending on the device, the ImageView becomes wider, so it doesn't maintain the image's proportions within it. Worse, I want to put a background image in the base panel, and I'd like to align the ImageViews so that when the screenshot is taken, the entire contents appear as a single image.

Thanks again for your help.

 

[BlueVision]

I think your problem is created by different form factors of the devices.
Very old smartphones tend to use old tv ratio of 4:3, newer using 16:9, nowadays it tends more and more to 2:1.
So your value of X% is never the same like Y% from the point of a given distance on the screen.
The more the length of displays increases, the more increases the value of 1%y compared to 1%x.
So if you want to draw a square and not a rectangle, using percentages is more or less following the form factor of the display or it's screen ratio. It will not work only with the percentages.
I personally don't like using dips, because this fails in another way. Imagine you want to move an object by shifting in absolute dips behind another object. This may work on one device, but also not on a second device. Never figured out how this is done perfectly.

But how are you able to solve this problem, especially if you do not know the screen ratio on the final device?
(believe me, it will drive you nuts when trying to draw a circle on several devices)

When using the designer, you have to calculate the ratio for the designer script (ratio = 100%x / 100%y). With this value ratio you are able to draw an exact square on multiple devices independing their form factor. It's all about defining the x-axis or y-axis of that object with a given value depending surrounding objects und calculating the other axis with the value of ratio and centering it correctly based on it's final size within the given view.

The two pictures below demonstrate a little bit better what I try to explain. Watch the different form factors of the devices and then the circle of the compass rose.
This is the way I solve that problem. Sure, depending on the limits of the given space, the compass rose will "pump" with this procedure. A circle is a circle...

 

[Sagenut]

@GiovanniO
Are you saying that on different screen the Imageview become rectangular instead that square?
Eventually try this

pBase.Width = 100%x
pBase.Height = 100%y

iv1.Width = 220dip  '61.3%x
iv1.Height = iv1.Width
iv2.Height = iv1.Width
iv2.Width = iv1.Width

iv1.Left = 15dip
iv1.Top = 240dip

iv2.Left = 120dip
iv2.Top = 360dip

pMask.Width = 100%x
pMask.Height = 100%y

 

[LucaMs]

Thank you for your answers.

@Sagenut , It's something as simple as a panel and two imageviews, the panel is at 100% (I want to do a "screenshoot" of the panel), i use this code in the designer:

pBase.Width = 100%x
pBase.Height = 100%y

iv1.Width = 220dip  '61.3%x
iv1.Height = 220dip   '30.4%y
iv2.Height = iv1.Height
iv2.Width = iv1.Width

iv1.Left = 15dip
iv1.Top = 240dip

iv2.Left = 120dip
iv2.Top = 360dip

pMask.Width = 100%x
pMask.Height = 100%y

@LucaMs i don't have AutoScallAll and i put the ImageViews in dip, however, depending on the device, the ImageView becomes wider, so it doesn't maintain the image's proportions within it. Worse, I want to put a background image in the base panel, and I'd like to align the ImageViews so that when the screenshot is taken, the entire contents appear as a single image.

Thanks again for your help.

Using that code should ensure that the size and position of the two ImageViews remain fixed on any display.

Perhaps your real problem is the displayed images; if they don't have the same width/height ratio as the ImageViews, they'll obviously be displayed distorted.