Android Question Frustrated with scaling. Need help.

uorhun

Member
Licensed User
Longtime User
I have a perfectly square image 100 px x 100 px created in Photoshop that contains a perfect circle placed totally symmetrically inside the square. This displays distorted, i.e. like an ellipse, along x or y axis depending on the device. Tried everything. %x, %y, dip, etc. What do you have to do to get things to display as they do anywhere else?
 

klaus

Expert
Licensed User
Longtime User
When you scale you must take care that, in your case, the Height/Width ratio remains the same.
If you scale with %x and %y you must set either the width with %x and then set the height = width
or set the height with %y and the set the width = height.
If you set width and height with the same dip value you won't get any distirsion.
 
Upvote 0

uorhun

Member
Licensed User
Longtime User
When you scale you must take care that, in your case, the Height/Width ratio remains the same.
If you scale with %x and %y you must set either the width with %x and then set the height = width
or set the height with %y and the set the width = height.
If you set width and height with the same dip value you won't get any distirsion.

My image is 100 x 100 pix in Photoshop and I set width and height at 100dip both. It looks different size wise on different devices, maybe that's OK, but on some devices when I rotate it certainly becomes an ellipse and that's not OK. I am thinking going back to %x %y that seemed to be a bit more consistent. Thanks for the reply though.
 
Upvote 0

klaus

Expert
Licensed User
Longtime User
It looks different size wise on different devices,...
How much is the difference?
An object with dip values has almost the same size on all devices!
That's exactly the purpose of density independant pixels.
With 100dip the width and height will be about 0.625 inch or 15.9 mm, on all devices.
There are slight differences because small differences in the pixel densities on different devices compared to the Android standard densities (120, 160, 240, 320 480 pixels/inch) 160 pixels/inch is the reference denisty with scale 1.
You should set the Gravity to Fill.
Then, if you want the image become bigger on bigger screens you can use AutoScale or %x or %y values but, in your case for a square,
the Width and Height MUST have the same dimension. The Width/Height ratio must be respected to avoid distorsion.

Can you show us an example on what you have done and how it looks?
 
Upvote 0

uorhun

Member
Licensed User
Longtime User
How much is the difference?
An object with dip values has almost the same size on all devices!
That's exactly the purpose of density independant pixels.
With 100dip the width and height will be about 0.625 inch or 15.9 mm, on all devices.
There are slight differences because small differences in the pixel densities on different devices compared to the Android standard densities (120, 160, 240, 320 480 pixels/inch) 160 pixels/inch is the reference denisty with scale 1.
You should set the Gravity to Fill.
Then, if you want the image become bigger on bigger screens you can use AutoScale or %x or %y values but, in your case for a square,
the Width and Height MUST have the same dimension. The Width/Height ratio must be respected to avoid distorsion.

Can you show us an example on what you have done and how it looks?
Quite different. I am preparing couple of screenshots.
 
Upvote 0

uorhun

Member
Licensed User
Longtime User
Quite different. I am preparing couple of screenshots.
Here are two screenshot sections from 2 devices. The size difference is huge and that makes me wonder what dip is for. As for the stretch it is hard to see but it is there on the smaller image. The code is:

MainButtons(0).SetBackgroundImage (LoadBitmap(File.DirAssets, "commons/startflag.png"))

Activity.AddView (MainButtons(0),34%x,31%y,130dip, 130dip). MainButtons is a Label.

Also I do not use the designer at all. I try to do all programmatically. Thanks for your help.

BTW both images are whole screen-wide sections in portrait mode.
 

Attachments

  • stretched_and_small.png
    stretched_and_small.png
    205.3 KB · Views: 335
  • big_and _symetrical.png
    big_and _symetrical.png
    325.7 KB · Views: 351
Upvote 0

uorhun

Member
Licensed User
Longtime User
Can you post a small project showing the problem.

Here it is. I just removed everything else and tested to confirm the oddness is still there. It is just 1 label with a png background
 

Attachments

  • ScreenIssues.zip
    269.8 KB · Views: 254
Upvote 0

klaus

Expert
Licensed User
Longtime User
It works as expected here!

upload_2017-3-25_18-11-30.png
upload_2017-3-25_18-13-22.png


On both my devices: Samsung S6 phone, Samsung Tab S2 tablet.

You should not add the views in Activity_Resume, but in Activity_Create!
Then, no need to remove all views in Activity_Pause!
 
Last edited:
Upvote 0

uorhun

Member
Licensed User
Longtime User
It works as expected here!

View attachment 54108 View attachment 54109

On both my devices: Samsung S6 phone, Samsung Tab S2 tablet.

You should not add the views in Activity_Resume, but in Activity_Create!
Then, no need to remove all views in Activity_Pause!

Thanks, but that makes it just weirder. I don't know what else to do. I have a Samsung Tab 10.1 and a vanilla 7" tablet and they both show small and distorted. When I use the AVD some devices work one way, some the other way.

Thanks for the tip for the Activity_Resume vs Create.
 
Last edited:
Upvote 0

klaus

Expert
Licensed User
Longtime User
There must be something wrong in your complete code!?
I don't really understand what exactly you are expecting.
In your pictures in post#9 the flag is not distorded, it is a circle.
Then, with setting the same dip values for all devices, the circle looks small on big screens and big on small screens compared to the screen size.
 
Upvote 0

uorhun

Member
Licensed User
Longtime User
There must be something wrong in your complete code!?
I don't really understand what exactly you are expecting.
In your pictures in post#9 the flag is not distorded, it is a circle.
Then, with setting the same dip values for all devices, the circle looks small on big screens and big on small screens compared to the screen size.

With dip, I thought things would display proportionally. Yes things would be larger on a small screen and smaller on a large screen, proportionally, but that's all. I thought it would be similar to %x and %y. This is not what I am seeing. I have the flag showing very small (too small) on some screens and almost 3 times bigger on some other devices that are not necessarily smaller. Certainly not that smaller. I guess there is something about dip that I don't get. I'll revert back to %x and %y usage. Thanks!
 
Upvote 0
Top