Android Question Logo size

jayel

Active Member
Licensed User
Hello,

I have a login screen. With the use of designer scripts I managed to get the layout I want for different screen sizes.
I have a panel with an image (size of the image is 703x93).
I want to have the image on top in the middel of the screen.
How can I achieve this? Also the logo has to resize for different screen sizes (small screen--> small logo)
This is my designer script so far, the panel is not working, other controls size ok.µ
B4X:
'All variants script
AutoScaleRate(0.5)
AutoScaleAll
Panel1.HorizontalCenter = 50%y
Panel1.Top = 4dip
Panel1.Width = Min(60%x, 60%y)

Label3.Width = 100%x - 8dip
Label3.Top = Panel1.height + Panel1.top + 4dip
Label3.Left = 4dip
btnCancel.Left = 4dip
btnCancel.Bottom = 100%y - 4dip
btnLogin.Bottom = 100%y - 4dip
btnLogin.Right = 100%x-4dip
Label1.top = Label3.Bottom + 4dip
Label1.Width = 50%x
Label1.Left = 4dip
Label2.Width = 50%x
Label2.top = (Label1.top + Label1.Height) + 4dip
Label2.Left = 4dip
txtGebruikersNaam.Top = Label3.bottom + 4dip
txtGebruikersNaam.width = 50%x - 12dip
txtGebruikersNaam.Left = (Label1.left + Label1.width + 4dip)
txtPaswoord.width = 50%x - 12dip
txtPaswoord.Left = (Label2.left + Label2.width + 4dip)
txtPaswoord.Top = (txtGebruikersNaam.Top + txtGebruikersNaam.Height) + 4dip
 

klaus

Expert
Licensed User
You don't say what exactly doesn't work.

I have these comments after looking at your script:
This looks strange to me:
Panel1.HorizontalCenter = 50%y
Why 50%y and not 50%x
You adjust Panel1.Width but you don't adjust its height according to the image width / height ratio.
Panel1.Width = Min(60%x, 60%y) not sure if this is really what you want.
Instead of this btnCancel.Bottom = 100%y - 4dip, you could do the same with the vertical anchor set to BOTTOM and BottomEdgeDistance = 4.
 
Last edited:

jayel

Active Member
Licensed User
Klaus,

The panel1.HorizontalCenter = 50%y, centers my panel in the middle, no?
Panel1.width = Min(60%x, 60%y), I copied this from another example, but there the image width and height was the same.
I dont't know what how to calculate the height to automatically resize when screen size is different.
I want to :
  • put my logo on top of the screen in the middle
  • resize the logo on different screen sizes
?
 

klaus

Expert
Licensed User
The panel1.HorizontalCenter = 50%y, centers my panel in the middle, no?
In the middle of what?
You set the horizontal center to the half of the screen height, why?

... I copied this from another example, ...
It's best practice when you copy code to understand what it's doing.

Panel1.Width = Min(60%x, 60%y) sets the width to 60% of the smallest screen side.
I don't say it's wrong, I just ask the question is this what you want ?

I would use something like this:
B4X:
Panel1.HorizontalCenter = 50%x
Panel1.Width = Min(60%x, 60%y)
Panel1.Height = Panel1.Width / 703 * 93
 

jayel

Active Member
Licensed User
Klaus,

Sorry, I am a newbie when it comes to android programming.

I want my logo to be in the middle and top of my screen, dispate the screen size.
Indeed, the middle should be the half of the screen width so it schould be 50%x.
When I apply your script, it looks like screenshot.
The logo is not in center, and it's height is not right.
 

Attachments

klaus

Expert
Licensed User
Sorry, I missed it.
Change your code to this:
B4X:
Panel1.Width = Min(90%x, 90%y)
Panel1.Height = Panel1.Width / 703 * 193
Panel1.HorizontalCenter = 50%x
You must put HorizontalCenter after Width !
I changed the Height equation according to the image dimensions.
 
Top