Weird Button & Label Heights On Nexus 10

[Rigsby]

I'm guessing that it's to do with the Google Nexus 10" having a res of 2560x1600 whereas my 10" have both got 1280x800.

And I'm guessing that its to do with the fact that the label heights and font sizes and button heights are set in the designer - and just left at what they are - not set in dips.

Not having a Nexus 10 - and before I start buying one and messing with the code - does it sound reasonable that it's a dip thing ? Or could it be something else. The widths work out OK because the are x%

Cheers.

Attached Nexus and Acer 10"

 

[Stulish]

I'm not sure if this is the same problem but i have had a report that my app Say No To 0870 does not display correctly on the S4, it has been ok on everything else.

if i find anything out i will let you know, if anyone out there with an S4 could install and take screen shots it would be appreciated.

Regards

Stu

 

[Erel]

Designer values are automatically scaled (similar to dips). Can you upload your layout file?

 

[Rigsby]

Designer values are automatically scaled (similar to dips). Can you upload your layout file?

attached - no doubt it will be something daft I have done

And then I use this sub just to move everything about.

Thanks for the help.

Sub sizeWindow

  Dim buttonHeight As Int, fontsize As Int,  lands As Boolean
  
  ' depends on res & if connected
  
  enoughResolution = False
  
  buttonHeight = 70
  fontsize = 12

  Panel3.Left = 0
  Panel3.Top = 0
  Panel3.Width = 100%x
  
  lands = GetDeviceLayoutValues.width > GetDeviceLayoutValues.Height
  
  If lands = False Then
    If GetDeviceLayoutValues.Height > 800 Then enoughResolution = True
  Else
    If GetDeviceLayoutValues.width > 800 Then enoughResolution = True
  End If
  
  
  Panel1.Width = Panel3.Width
  Panel1.top = Panel3.Top  + Panel3.Height
  Panel1.Left = Panel3.Left
  
  tglConnect.Left = 2
  tglConnect.Top = 2
  tglConnect.Width = Panel3.Width * 0.67
  tglConnect.Height = buttonHeight - 2
    
  btnQuit.Left = tglConnect.Left + tglConnect.Width + 2
  btnQuit.Width = Panel3.Width - tglConnect.Width - 4
  btnQuit.Top = tglConnect.top - 1
  btnQuit.Height = buttonHeight
  
  lblStatus.TextSize = fontsize
  lblMyIP.TextSize = fontsize
  lblDNCstatus.TextSize = fontsize
  
  lblStatus.Top = tglConnect.Top + tglConnect.Height + 5
  lblStatus.height = fontsize + 8
 
  lblMyIP.Top = lblStatus.Top + lblStatus.height + 5
  lblMyIP.height = fontsize + 8
  
  lblDNCstatus.Top = lblMyIP.Top + lblMyIP.height + 5
  lblDNCstatus.height = fontsize + 8
  
  lblDNCStatusSmall.TextSize = fontsize
  lblDNCStatusSmall.Top =lblStatus.Top
  lblDNCStatusSmall.height = fontsize + 12
  lblDNCStatusSmall.Left = lblStatus.Left
  lblDNCStatusSmall.width = lblStatus.width
  
  btnLoopIP.Visible = enoughResolution  
  lblNickname.Visible = enoughResolution  
  txtNickname.Visible = enoughResolution
  btnNickname.Visible = enoughResolution  
  lblServerTime.Visible = enoughResolution
  txtPingTime.Visible = enoughResolution
  btnFilterList.Visible = enoughResolution
  
  lblPort.Width = 60
  lblPort.Text = "Port"
  lblPort.TextSize = fontsize
  lblPort.height = fontsize + 8
  lblPort.top=lblStatus.Top
  
  lblIP.Width = 100
  lblIP.text = "IP"
  lblIP.height = fontsize + 8
  lblIP.TextSize = fontsize
  lblIP.top=lblStatus.Top
  
  txtPort.Top = lblPort.top+lblPort.height + 5
  txtPort.width = 50
  txtPort.Left = Panel1.Width - txtPort.width - 2
  txtPort.TextSize = fontsize
  lblPort.Left = txtPort.Left +2
  
  txtIP.Top = lblIP.top+lblIP.height + 5
  txtIP.width = 140
  txtIP.Left = txtPort.Left - txtIP.width - 1   
  txtIP.TextSize = fontsize
  lblIP.Left = txtIP.Left +2
  
  btnLoopIP.Left = txtIP.Left - btnLoopIP.Width
  btnLoopIP.Top = txtIP.top
  
  txtPingTime.Left = btnLoopIP.Left - txtPingTime.width - 1
  txtPingTime.top = txtIP.Top
  txtPingTime.TextSize = fontsize
  
  lblServerTime.Top = lblStatus.Top
  lblServerTime.TextSize = fontsize
  lblServerTime.text = "S Time"
  lblServerTime.Left = txtPingTime.Left +2
  lblServerTime.height = fontsize + 8
  
  txtNickname.top = txtIP.Top
  txtNickname.TextSize = fontsize
  txtNickname.Left = txtPingTime.Left - txtNickname.width - 1
  
  lblNickname.height = fontsize + 8
  lblNickname.TextSize = fontsize
  lblNickname.top=lblStatus.Top
  lblNickname.text = "Name"
  lblNickname.Left = txtNickname.Left +2
  
  btnNickname.Top = txtIP.top
  btnNickname.Left = txtNickname.Left - btnNickname.Width - 1

  If enoughResolution = True Then
  
        Panel3.Height = lblDNCstatus.top + lblDNCstatus.height + 15
      lblDNCStatusSmall.Visible = False
      lblStatus.Visible = True
      lblDNCstatus.Visible = True
      
      btnRefreshList2.width = 80 
      
        btnRefreshList.width =btnRefreshList2.width
      
        btnInfo.width = btnRefreshList2.width
      lblFolderSmall.visible = False
      lblFolder.visible = True
     
  Else 
  
        If isSocketConnected = False Then
    
            Panel3.Height = lblDNCstatus.top + lblDNCstatus.height + 15
         lblPort.Visible = True
         lblIP.Visible = True
         txtPort.Visible = True
         txtIP.Visible = True
         lblMyIP.Visible = True
   
        Else
  
           Panel3.Height = lblDNCStatusSmall.top + lblDNCStatusSmall.height + 12
         lblPort.Visible = False
         lblIP.Visible = False
         txtPort.Visible = False
         txtIP.Visible = False
         lblMyIP.Visible = False
  
        End If
      
      lblDNCStatusSmall.Visible = True
      lblStatus.Visible = False
      lblDNCstatus.Visible = False
      btnRefreshList2.width = 70 
        btnRefreshList.width =btnRefreshList2.width
        btnInfo.width = btnRefreshList2.width
      lblFileInfo.width=100
      panel4.Width = 50%x
      btnRefreshList2.text = "Rcv"
      btnRefreshList.Text = "Snd"
      btnInfo.text = "Inf"
      lblFolderSmall.visible = True
      lblFolder.visible = False
  
  End If
  
  Panel1.Height = GetDeviceLayoutValues.Height - Panel3.Height
  Panel1.top = Panel3.Top  + Panel3.Height
  
   spinCNC.Width = Panel3.Width/2
   If spinCNC.Width > 400 Then spinCNC.Width = 400
   spinCNC.TextSize= fontsize
   
   btnRefreshList2.Left = Panel1.Width - btnRefreshList2.width - 2  ' receive 
   btnRefreshList.Left = btnRefreshList2.Left - btnRefreshList2.width
   btnInfo.Left = btnRefreshList.Left - btnRefreshList.width 
   
   btnUp.visible = False   
   
   btnInfo.top = spinCNC.Top   
   btnUp.top = btnInfo.top
   btnRefreshList.top = btnInfo.top
   btnRefreshList2.top = btnInfo.top
   
   Panel2.Left = 5
   Panel2.Top = spinCNC.Top + spinCNC.Height
   Panel2.width = Panel1.Width - (2 * Panel2.Left)
   Panel2.Height = Panel1.Height - spinCNC.height -5
   
   lblFolder.TextSize= fontsize
   lblFolder.Height = fontsize + 15
   lblFolder.Left = 5
   lblFolder.Width = Panel2.Width - lblFileInfo.width
   
   lblFolderSmall.TextSize= fontsize
   lblFolderSmall.height = fontsize + 15
   lblFolderSmall.Left = 5
   lblFolderSmall.Width = Panel2.Width - lblFileInfo.width
   lblFolderSmall.top=lblFolder.top
   
   lblFileCount.Top = lblFolder.Top
   lblFileCount.TextSize= fontsize
   lblFileCount.Height = fontsize + 15
   lblFileCount.Left = Panel2.Width - lblFileCount.width - 5
   
   ListView1.Left = 0
   ListView1.Width = Panel2.Width
   defaultListWidth = ListView1.Width
   
   
   panelDNCbuttons.height= btnQuit.Height
   
   ListView1.Top = lblFolder.Height + lblFolder.top + 10   
   '   ListView1.SingleLineLayout.Label.TextSize = fontsize
   ' ListView1.FastScrollEnabled = True
   ' ListView1.SingleLineLayout.ItemHeight = fontsize+20
   ' ListView1.SingleLineLayout.Label.TextColor = Colors.Yellow
   panel4.Top = ListView1.Top
   panel4.Width = btnNext.width

   lblFile.Left = 5
   lblFile.width = 70
   lblFile.TextSize= fontsize
   
   selectedFile.Left = lblFile.Left + lblFile.width + 10
   
   If enoughResolution Then
   
      selectedFile.width = Panel2.Width - selectedFile.Left - 10 '- btnFilterList.width
   
   Else
   
      selectedFile.width = Panel2.Width - selectedFile.Left - 10
   
   End If
   
   selectedFile.height = txtIP.height
   selectedFile.TextSize= fontsize
   lblFile.Height = txtIP.height
   
   panelDNCbuttons.Left =0
   panelDNCbuttons.height= btnQuit.Height-5
   panelDNCbuttons.width = Panel2.Width
   
   ListView1.height = Panel2.Height - panelDNCbuttons.height - selectedFile.Height - lblFile.Height
    selectedFile.top = ListView1.Top + ListView1.Height+3
    lblFile.Top = selectedFile.top
   panelDNCbuttons.Top = selectedFile.top + selectedFile.height-2

   btnSend.Height = btnQuit.Height
   btnSend.top=0
   
   btnAbort.top=0
   btnAbort.height = btnQuit.Height
   btnReceive.top=0
   btnReceive.height = btnQuit.Height
   
   btnSend.Width = Panel2.Width/3
   btnAbort.Width = Panel2.Width/3
   btnReceive.Width = Panel2.Width/3
   
   btnSend.Left=0
   btnAbort.Left = Panel2.Width - btnAbort.Width
   btnReceive.Left = Panel2.Width/2 - btnReceive.Width/2
   
   btnFilterList.Left = selectedFile.Left + selectedFile.Width + 9
   btnFilterList.top = selectedFile.top-1

End Sub

 

[yttrium]

Do you use designer scripts?

 

[Erel]

I recommend you to use the designer script instead of all this code (if it is really required). This way you will be able to test it with the abstract designer / UI cloud.

There are several problems in your current code.

See the "supporting multiple screens" link in my signature.

 

[Rigsby]

Do you use designer scripts?

No I didn't. I have tried it now though. Problem is there is conditional stuff, position & size of stuff depends on res. It looks exactly the same using the script as having it in the code - so in this instance it makes no odds.

It did not get round the fundamental question I asked, that it looks weird in Nexus 10.

I mean it looks OK on my 10", it looks OK if I use the designer script and it looks OK if I have it in the main code.

So still don't know why the labels & text looked scrunched up on Nexus 10

Thanks anyway!

 

[Rigsby]

I recommend you to use the designer script instead of all this code (if it is really required). This way you will be able to test it with the abstract designer / UI cloud.
There are several problems in your current code.
See the "supporting multiple screens" link in my signature.

Thanks, but look at the UI cloud images - the first toggle "OFF" button height - all sizes are OK.

And the three labels underneath with "..." all vertically spaced perfect. But the Nexus 10 - scrunched up - weird.

Thanks anyway.

 

[Erel]

Not sure that I see the problem:

 

[Rigsby]

Not sure that I see the problem:

The problem is the first attached thumbnail in my original initial post#1 - the second attached image in my first post is how I would have expected it to look - and that is how it looks on my acer iconia 10" & motorola xoom 10" - looks perfect. It also looks OK on a smartphone 5" screen as I move stuff about - no squashed labels or command buttons.

All the stuff sent to the cloud looks OK like I say. It is the nexus 10 that is the problem.

Attached image of the offending portion again. The toggle button is shrunk. The 3 labels are shrunk. Since I get the top of the panel below from the heights of these labels, that is in the wrong place too.

I have tried it using the UI cloud. I have tried it on an online emulator. I have tried it with my own desktop emulator.

They all look reasonably OK. Just the customer sent me a screen shot from his nexus 10.

So I am guessing its a dip thing as the nexus 10 has high density screen.

P.S. I did use the script editor. It's very good - didn't solve any problems though. Plus I don't want to use the script editor as there is a lot of conditional code that moves stuff around, depending on various things, so I want the positioning code within my main code.

 

[Erel]

Do you have access to a Nexus 10? I'm pretty sure that the problem is somewhere in your layout code.

 

[Rigsby]

Do you have access to a Nexus 10? I'm pretty sure that the problem is somewhere in your layout code.

I agree, it usually is my code that's the problem - so nothing new there

Thanks for the advice anyway...

R.