Height sizes for Views (programmable)

Jim Brown

Active Member
Licensed User
Longtime User
I am writing a mobile designer for manually creating view layouts. Imagine a mobile version of Designer if you will.
At the moment I plan to save the views layout positions in percentages. The problem is, depending on the display size certain views will either appear as squashed, correct, or stretched.

For example, here is how Seekbars and spinners turn out when using 8%y for the height in different display sizes:


Does anyone know what the correct height values should be for such views, so that they are guaranteed to display correctly?
Should I use dip instead of percentages?

The big advantage of percentages is that I do not need to worry too much about display sizes, since in theory, everything should scale accordingly
 
Last edited:
Sort by date Sort by votes

Jim Brown

Active Member
Licensed User
Longtime User
Yep, what I find is, when I use 8%y I get correct looking SeekBars and Spinners on my Galaxy S. The Galaxy Tab though, with its longer height will show such Views in a stretched manor (as per the 3rd image above)

I wonder then how best to know the correct height of such Views so they appear as expected. Are there any recommended fixed height values? Should I use dip, percent, or pixel values?
 
Upvote 0

Jim Brown

Active Member
Licensed User
Longtime User
Hi B4A users

Could you be so kind as to test whether the following programmed Views appear correctly on your device?

What you should see is equivalent to this image. I am not sure if devices with 160dpi will give the same type of results though
(I am using a combination of percent for horizontal values and dip for vertical values)



The source code
B4X: 
' Testing views appearance with DIP settings
Sub Process_Globals
End Sub

Sub Globals
   Dim bt As Button
   Dim cb As CheckBox
   Dim tb As ToggleButton
   Dim sb As SeekBar
   Dim sp As Spinner
End Sub

Sub Activity_Create(FirstTime As Boolean)
   Activity.Color=Colors.DarkGray
   ' Button
   bt.Initialize("")
   Activity.AddView(bt,10%x,4dip,40%x,40dip) : bt.text="Button"
   ' CheckBox
   cb.Initialize("")
   Activity.AddView(cb,10%x,46dip,40%x,37dip) : cb.text="Check"
   ' ToggleButton
   tb.Initialize("")
   Activity.AddView(tb,10%x,85dip,40%x,48dip) : tb.TextOff="Off"
   ' SeekBar
   sb.Initialize("")
   Activity.AddView(sb,10%x,135dip,40%x,30dip) : sb.Value=30
   ' Spinner
   sp.Initialize("")
   Activity.AddView(sp,10%x,167dip,40%x,48dip) : sp.Add("Spin")
End Sub

Sub Activity_Resume
End Sub

Sub Activity_Pause (UserClosed As Boolean)
End Sub
 
Upvote 0
You must log in or register to reply here.
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…