Too many Android screen sizes

[rfresh]

I've made a list of some of the Android screen sizes that I could find on the internet and came to the conclusion there too many to specifically code for. The 480x800 resolution (for example) isn't so bad but when you throw in the DPI/PPI values, then it becomes unmanageable in my opinion.

I'm positioning my UI components on the screen based on %. For example, my title Label is position 0.05% down and centered on the screen. Regardless of the screen size, the title label will always be positioned that way.

The problem is that I've created some basic Emulators using the standard 160 or 240 DPI so I can run a test cycle and figure out exact placement for about 7 Emulators. But the list I've put together shows a lot of other DPI's (I have 67 devices on my list and I'm attaching it for anyone who wants it) and I'm wondering if using dips will allow my % positioning that I've fine tuned for 160 and for 240 to work with those other dips?

 

[joseluis]

Thanks for sharing!

I've dreamt to code a helper module for coherent positioning in any combination of screensize/dpi but haven't had the time yet. I'm very busy lately.

Your compilation will be of great help in any case.

 

[rfresh]

Thanks for sharing!

I've dreamt to code a helper module for coherent positioning in any combination of screensize/dpi but haven't had the time yet. I'm very busy lately.

Your compilation will be of great help in any case.

How would that helper module work? Maybe I can stub up some code to get an initial working module. What kinds of things would it have to do/look for?

 

[joseluis]

Well... I was thinking of keeping track of the abstracted layout, and some subs that will help on the calculations for the best positioning of the views based on those abstractions.

There could be some methods that you call to set up the base of the layout. For example, you may want a main wide body collum and a shorter one for landscape, and a header and a body for portrait, etc. And the module stores that abstractions. In a similiar way that the preferences library works for building the menu.

And in the case of the individual views, they could be positioned conditionally. You call a sub that will modify the view's position based on your premises.

I already do that by code up to some degree (e.g. using things like Min(Parent.Height, Max(30dip,10%x)) for a coordinate or a size) , but a module would be so much cleaner and easier to maintain.

But course it wont built itself

 

[rfresh]

So I think I only need to code for 4 scales:

0.75 == DPI 120
1.00 == DPI 160
1.50 == DPI 240
2.00== DPI 320

My spreadsheet lists 20 devices with 480x800 resolution for example, but they all should fall into one of the above 4 scales, thus if my UI positioning code can work with those 4 scales for that resolution, then all 20 of those devices should position ok.

I was reading this: Designer - Basic4android Wiki

And I'm using this code to detect screen resolution:

Sub Get_Screen_Resolution
   Main.pScreenWidth=GetDeviceLayoutValues.Width
   Main.pScreenHeight=GetDeviceLayoutValues.Height
   Main.pScale=GetDeviceLayoutValues.Scale
   If Main.pScale= 0.75 Then
   Main.pDPI="120"
   End If
   If Main.pScale= 1 Then
   Main.pDPI="160"
   End If
   If Main.pScale= 1.5 Then
   Main.pDPI="240"
   End If
   If Main.pScale=2 Then
   Main.pDPI="320"
   End If
End Sub

So, I don't think there is a need to handle every screen DPI/PPI, right?

 

[joseluis]

That's exatly the purpose: To find a system that suits most cases, with the least number of exceptions.

Android API already tries to do that.

1) There are 4 categories for screen sizes:
- small (at least 426 x 320)
- normal (at least 640 x 480)
- large (at least 470 x 320.)
- xlarge (at least 960 x 720)

2) 4 density categories
- ldpi (~120ppp) (scale 0.75)
- mdpi (~160ppp) (scale 1)
- hdpi (~240ppp) (scale 1.5)
- xhdpi (~320ppp) (scale 2)

It's not perfect, thought. We could add a further division between phones and tablets, but that different is even more shady in some cases.

You should read this:
Supporting Multiple Screens | Android Developers

Sometimes I think this helper module doable, other times I think if it were somebody have had it done it before... I don't know, but I think I'll find out when the time comes.

 

[rfresh]

Hmmm...I read that link but I don't understand a lot of it. It's pretty complex.

That's really a shame because I can see that most of the work in writing an Android app is spent in making sure it handles a variety of screens. Depending on the size of your app and what it does, you can write and finish the functionality of your app in less time than you will spend making sure it will run on most of the device screens. Google should have done a better job on that so developers don't have to spend so much time coding for screens. We should be spending our development time on designing, writing and testing our functionality and the fact of what screen the app will run on should be more transparent.

As I stated, I'm using % to position my UI components and, as an example, I'm using four parameters for all my Labels:

pmain_lbl_TitleWidth = 0.80
pmain_lbl_TitleHeight = 60
pmain_lbl_TitleTextSize = 26
pmain_lbl_TitleTop = 0.05

So while the placement on various screens are 'automatically' handled, the Labels don't scale well on the 4 DPI's (120, 160,240 and 320) so, currently, I must tweak each screen scale. I don't think is the correct way to do this so my % scheme might be the entirely wrong approach.

I would welcome suggestions on what I need to change to allow my objects to scale better. For example I read about using dp and for text sp to allow better scaling but I don't understand how to apply that to my current scheme. My development skills are not the best so I appreciate your patience.

 

[Erel]

By using the 'dip' unit you handle the different scales in a simple way.
For example the following code will set the button physical width to be the same on all devices:

Button1.Width = 100dip

The same is true for layouts created with the designer.

 

[rfresh]

Can I also use dip on the TextSize property?

 

[rfresh]

Well, I tried changing my code to make use of the 'dip' feature but it didn't work...maybe I missed setting something?

I'm attaching 3 screen shots from the 3 emulators I have for 480x800x120 and x160 and x240 (I didn't bother to check x320 since my code obviously isn't scaling correctly). The DPI x160 is the correct size and you can see in the images that it didn't scale well at all for x120 DPI and x240 DPI.

For all 3 DPI's I'm calling the same Sub Set_Portrait_480x800x160_Screen_Resolution

My code:

'-------- Portrait ----------------------------------------------------------------
If aScreenWidth = 480 AND aScreenHeight = 800 AND aDPI = 120 Then '7 Inch Tablet
    CallSub(Main, "Set_Portrait_480x800x160_Screen_Resolution") '7 Inch Tablet Portrait
    CallSub(Main, "Set_Portrait_Screen_Resolution")
End If
If aScreenWidth = 480 AND aScreenHeight = 800 AND aDPI = 160 Then '7 Inch Tablet
    CallSub(Main, "Set_Portrait_480x800x160_Screen_Resolution") '7 Inch Tablet Portrait
    CallSub(Main, "Set_Portrait_Screen_Resolution")
End If
If aScreenWidth = 480 AND aScreenHeight = 800 AND aDPI = 240 Then '7 Inch Tablet
    CallSub(Main, "Set_Portrait_480x800x160_Screen_Resolution") '7 Inch Tablet Portrait
    CallSub(Main, "Set_Portrait_Screen_Resolution")
End If



Sub Set_Portrait_480x800x160_Screen_Resolution '7 Inch Tablet Portrait
'buttons ----------------------------------------------
pmain_btn_NightimeWidth = 320dip
pmain_btn_IndoorWidth = 320dip
pmain_btn_OutdoorWidth = 320dip
pmain_btn_SettingsWidth = 320dip

pmain_btn_NightimeHeight = 100dip
pmain_btn_IndoorHeight = 100dip
pmain_btn_OutdoorHeight = 100dip
pmain_btn_SettingsHeight = 70dip

pmain_btn_NightimeTextSize = 36dip
pmain_btn_IndoorTextSize = 36dip
pmain_btn_OutdoorTextSize = 36dip
pmain_btn_SettingsTextSize = 28dip

pmain_btn_NightimeTop = 16%y
pmain_btn_IndoorTop = 34%y
pmain_btn_OutdoorTop = 51%y
pmain_btn_SettingsTop = 68%y
End Sub


Sub Set_Portrait_Screen_Resolution
        'position the UI components on the target screen
   'labels width
   lbl_main_Title.Width    = pmain_lbl_TitleWidth

   'labels height
   lbl_main_Title.Height    = pmain_lbl_TitleHeight       'Change Screen Brightness

   'labels text size
   lbl_main_Title.TextSize    = pmain_lbl_TitleTextSize       'Change Screen Brightness

   'button height
   btn_Nightime.Height = pmain_btn_NightimeHeight
   btn_Indoor.Height   = pmain_btn_IndoorHeight
   btn_Outdoor.Height  = pmain_btn_OutdoorHeight
   btn_Settings.Height = pmain_btn_SettingsHeight

   'button text size
   btn_Nightime.TextSize = pmain_btn_NightimeTextSize
   btn_Indoor.TextSize   = pmain_btn_IndoorTextSize
   btn_Outdoor.TextSize  = pmain_btn_OutdoorTextSize
   btn_Settings.TextSize = pmain_btn_SettingsTextSize

   'button width
   btn_Nightime.Width = pmain_btn_NightimeWidth
   btn_Indoor.Width   = pmain_btn_IndoorWidth
   btn_Outdoor.Width  = pmain_btn_OutdoorWidth
   btn_Settings.Width = pmain_btn_SettingsWidth

   'top positions
   lbl_main_Title.Top    = pmain_lbl_TitleTop 'Change Screen Brightness
   btn_Nightime.Top      = pmain_btn_NightimeTop
   btn_Indoor.Top        = pmain_btn_IndoorTop
   btn_Outdoor.Top       = pmain_btn_OutdoorTop
   btn_Settings.Top      = pmain_btn_SettingsTop

   'left positions
   btn_Nightime.Left      = (pScreenWidth - btn_Nightime.Width) / 2       '
   btn_Indoor.Left        = (pScreenWidth - btn_Indoor.Width) / 2         '
   btn_Outdoor.Left       = (pScreenWidth - btn_Outdoor.Width) / 2        '
   btn_Settings.Left      = (pScreenWidth - btn_Settings.Width) / 2       '
End Sub

 

[joseluis]

Why don't you start out small?

Create only a button or two, and play with % and dip until you understand how it works in different resolutions and different scales.

For example:

' Horizontally centered button, with a top margin of his height (size 200x80dip)
Button1.Initialize("")
Activity.AddView(Button1, 100%x-200dip/2, 80dip, 200dip, 80dip)

' Expandable button at the bottom, with a margin of 5%
Button2.Initialize("")
Acitivity.AddView(Button2, 5%x, 100%y-5%y-80dip, 100%x-5%x*2, 80dip )

I can't test it right now. I hope I didn't made any typos. But you get the idea.

 

[Erel]

I can promise you that it will be much simpler in the next version with the help of the designer scripts.

 

[klaus]

Hi rfresh,
I find that you are missing one parameter, the physical screen size of the device. I think you should add it to your xls file.

If you have a device with a 3.5'' screen
and a tablett with a 7'' screen
you need to decide what you want to do.
- Strech or shrink a same layout to fit both screens. Here you must take into account the TextSize.
- Display more views on the big screen than on the small screen. Here it depends on what size the views have you should perhaps also need to adapt the TextSize.

Best regards.

 

[rfresh]

I can promise you that it will be much simpler in the next version with the help of the designer scripts.

What's your ETA for the new version?

 

[rfresh]

I took Jose's advice and created a new, small screen test project. It has only one Label and one Button on it. I have the 4 emulators using 4 DPI's: 120, 160, 240 and 320.

I'm attaching my test project here as a zip file. I'm still seeing the same scaling problems so clearly I am doing something wrong!

Here is the main code:

   lbl_Test.Left = 10%x
   lbl_Test.Top = 10%y
   lbl_Test.Height = 30dip
   lbl_Test.Width = 100dip
   lbl_Test.TextSize = 18dip
   lbl_Test.TextColor = Colors.Yellow
   lbl_Test.Color = Colors.ARGB(120, 127, 255, 212)

   btn_Test.Left = 10%x
   btn_Test.Top = 30%y   
   btn_Test.Height = 50dip
   btn_Test.Width = 100dip
   btn_Test.TextSize = 24dip

I'm also attaching my 4 emulators in case someone sees something wrong with the way I configured them.

Thanks for your help...

 

[NJDude]

Change this line

From:

lbl_Test.TextSize = 18dip

To:

lbl_Test.TextSize = 18

The TextSize already uses DIP.

 

[rfresh]

@NJDude that helped a lot.

I'm attaching an image showing the scaling differences between the x160 DPI and the x320 xDPI using the same code.

The scaling on the x320 isn't correct is it? It does not look correct to me.

 

[rfresh]

Can someone opinion if there is a scaling problem between my 320x480x160dpi image (shown above) vs the 320x480x320dpi image? And if so, what I can do in my code to correct it?

Thanks...

 

[Erel]

It is very hard to tell from the pictures as they do not preserve the original scale.

See this thread for more information about the next version: http://www.b4x.com/forum/basic4android-updates-questions/15797-java-runtime-jdk.html

 

[rfresh]

But the idea is that, with the code I posted now using dip, the 4 emulators I created should show the Label and Button approximately the same on all 4 emulator screens?

The x320 and x160 look very different to me on the emulators. So at this point I feel like I am stuck and my project is on hold while I try and figure out what's wrong. I thought adding the dip would solve it but apparently not.