Android Question screen width in dips, still confused...

[Didier9]

I believe I have read all that I could on this forum about properly scaling the display and I am not yet where I want to be, still thoroughly confused....
My layout is pretty simple (for now) and all I want (for now, baby steps...) is properly spacing and scaling a few buttons and labels across the width of the display on different devices.

I am at the point where all the views, consisting of buttons, labels and listviews, are scaled in dip as a function of a single variable (that I called "width" and is declared in dips) and as long as I manually set the "width" parameter in my program for a given tablet, everything is laid out just fine. I use 3 devices at the moment, two are rated 7" and one is 8".

The two 7" tablets actually have the same physical width (not just the vendor's rating, I measured it and they are exactly the same physical size, height and width) but different DPI, so I assumed they would have the same width in dips but for everything to look the same, in the following code I have to set the "width" parameter to 435dip and 550dip respectively (note that "width" is not the actual full width of the display, I have about 1/4" margin on each side on purpose). That's a big difference! Needless to say, without adjustment, it just looks wrong.

Assuming 1 dip is based on 160DPI, that would mean that one device is 2.7" wide while the other is 3.4". They both are exactly 3.6" wide.

I am not using the "Scale" parameter that I have seen mentioned many times as I have not found where to declare it or how to set it.

Here is an example of what I mean:

    Dim width as Int
    width = 435dip ' use 550dip with other 7" tablet
    lblPage1.Width = width ' label that goes across
    edittxtIP.left = width - edittxtIP.width ' an edittext box that is anchored to the right (fixed size label on left)
    lblSocketStatus.Left = width - lblSocketStatus.Width ' same thing with a label
    ' the next line has a fixed label on the left, a checkbox and a progress bar anchored to the right
    pbADC1.Left = lblADC1.Left + lblADC1.Width + 10dip + chkADC1.Width + 10dip ' width - pbADC1.Width
    pbADC1.Width = width - pbADC1.left

I guess the question is how can I find how wide is my screen in dips?

I also use 100%x to set the width of a ListView and that seems to work, but I saw some strongly worded opinions on this forum against doing that for all views.

It would probably work better if I centered everything, the difference would not be as noticeable as with everything left anchored, but I would prefer that it scaled properly.

Thanks in advance for any suggestion...

 

[NJDude]

I also use 100%x to set the width of a ListView and that seems to work, but I saw some strongly worded opinions on this forum against doing that for all views.

That's not accurate, you can use percentages (%) to size views, in fact, that's the preferred method to get them scaled correctly on any density.

 

[Didier9]

That's not accurate, you can use percentages (%) to size views, in fact, that's the preferred method to get them scaled correctly on any density.

Thanks and glad to hear that, I was reluctant to invest the time doing that because of statements like this or similar that I have found in many postings:

Some developers use %x and %y to specify the views size.
However the result is far from being perfect. The layout will just be stretched.

Button1.Width = 100 'WRONG!
Button1.Width = 100dip 'Good job!

However, using 100%x, we lose any reference to the actual physical size, so it is not a solution that works across the board as it would make controls very small on a phone for instance. I just do not understand why dip returns such widely different results on these two tablets that have the same physical size. Other apps running on these tablets seem to layout just fine, so there has to be a trick that I am missing.

I am very new to this, I got my copy of B4A about a week ago and honestly I have done so much more than I thought I would have after a week!
It is a great tool, congrats to the developers.
Regarding documentation, Google is your friend

I just changed the line from

width = 435dip

to

width = 100%x * 0.9

and it looks great on both 7" tablets!

Wow, I could have saved some time.
Now to try the 8" and the phone...

Thanks

 

[NJDude]

Welcome to B4A!!

Ok, to put it in simple terms, when adding views you always have to use DIP, but, if you are designing layouts for different devices then % is the way to go, to better understand this concept, read the documentation, especially the use of the DESIGNER and DESIGNER SCRIPTS that will help you understand better, it's a piece of cake after you get it, piece of cake.

Regarding documentation, I have links in my signature below.

 

[NJDude]

Actually, this looks prettier:

Width = 90%x

Than

width = 100%x * 0.9

 

[klaus]

Unfortunately there is no miracle solution to solve this subject.
The right solution depends on the kind of application and what you want to display at the same time on the screens, small or big, at the same time.
One solution, used by many users, is to use %x and %y values for the positions and dimensions of the different views.
This means that you have the whole layout displayed reduced on small screens or streched an large screens.
This is the 'easiest' wan but may not look very well on all devices.
The drawback with this solution is that the TextSizes are not adapted. It's up to you adapt them.
You can also use Anchors and AutoScale in the Designer, but this may need some adaptation to center views.
AutoScale adjusts also the TextSize.
Another solution is to display information on panels in two screens on small devices and display two panels at the same time on big screens. This will look better, but needs some more code.

Assuming 1 dip is based on 160DPI, that would mean that one device is 2.7" wide while the other is 3.4". They both are exactly 3.6" wide.

No !
Android admits 'standarized' DPI values, 120, 160, 240, 480 etc DIPs. 160 is the 'standard' value.
Manufacturers can 'play' with this, the pixel sizes can vary for screens with almost the same physical size.
A screen with a size of 4.8'' or a screen with a size of 5'' can have the same resolution 480 * 800 pixels scale 1.5.
Both are admitted having a DIP value of 240, but their physical size is NOT exactly the same.

I have two devices one witha 5'' screen and the other one with a 10'' screen. Bothe have the same number of pixels.
One with 480DPI and the othe with 240DPI.
If you use:
Width = 100, means that the physical dimension is the half on the small screen according to the big screen.
Width = 100dip means that the physical dimension is the same on both devices.
Width = 50%x means that the width is half the screen width on any device.

I am not using the "Scale" parameter that I have seen mentioned many times as I have not found where to declare it or how to set it.

Scale is a code module you can use to scale views in the code, it is explained in the Beginner's Guide.
With this module and Scale.ScaleRate(1) is exactly the same as %x and %y values, including TextSize.

You may have a look at the different chapters on this subject in the Beginner's Guide.

 

[Didier9]

Actually, this looks prettier:

Width = 90%x

Than

width = 100%x * 0.9

Funny, did not occur to me... I thought 100%x was a "thing".

Just for grins, I declared "width = 90%x" and single stepped through it in debug mode. The value reported by the debugger was 720, which seems right since the app starts briefly in landscape mode and 720 is 90% of 800 pixels.

Honestly, I have been doing C on embedded systems for the last 30 years (pretty intensively) and Visual Basic (6.0) on the PC occasionally for almost as much, and statements like "width = 100%x" or "xxx.Width = 80dip" look a little bit too much like magic to me. I am used to being closer to the hardware (except for the VB part...) and numbers being dimensionless until applied to the hardware. I like to understand how these "values" are translated into physical things, pixels or inches.

You have been a great help, thank you! I have more reading to do obviously. Thanks for the links!

 

[Didier9]

Unfortunately there is no miracle solution to solve this subject.

Looks like it

Android admits 'standardized' DPI values, 120, 160, 240, 480 etc DIPs. 160 is the 'standard' value.

Therefore it is anything but a standard. If there are multiple standards and everyone gets to pick the one they like, there might as well be no standard. I understand that is an Android issue, B4A is doing the best it can interfacing with Android, warts and all.

Scale is a code module you can use to scale views in the code, it is explained in the Beginner's Guide.

I have seen AutoScaleRate() and AutoScaleAll used in the samples in the Designer. I have based my app on one of the examples that already had these statements and I have not touched them. I have read about it in the guide and it seems to do the job as far as scaling the text and the size of the buttons pretty well between my 5.2" 1080p phone display and the cheap 7" 480 pixel tablet display (now that I am using 100%x as a reference).

Thanks a lot for the information, it is tremendously helpful. My app now works and looks half way decent. For something I started a week ago with a new tool on a new platform, I could have done a lot worse.

 

[Didier9]

Another solution is to display information on panels in two screens on small devices and display two panels at the same time on big screens. This will look better, but needs some more code.

Yes, I have seen that in some of the examples. I may do that later to support landscape mode. At the moment, the screen is laid out for portrait and the bottom part of it is not visible in landscape. If I were to split it in two, and have the two halves above one another in portrait and side by side in landscape, that would be great.
That will be for version 2.0

Thanks