Android Question [SOLVED] Help Needed: Organizing Landscape Layout in B4A Designer

[jroriz]

I have two layouts for my app: portrait and landscape.

The portrait layout is fine, but I’m struggling to organize the landscape layout. Using just the Designer hasn’t worked for me so far.

I tried using panels, but the issue is that I end up with different panels for portrait and landscape. When I move a view from one panel to another, the change applies to both layouts, which isn’t the intended behavior.

Is it necessary to use Designer Script to fix this?

Here are the layout variants:

• 360 x 640, scale = 1 (160 dpi)
• 640 x 360, scale = 1 (160 dpi)

Any advice or suggestions would be greatly appreciated!

 

[emexes]

When I go in and look at the 2 layouts in your main.bal, they look like the ones you posted. Isn't that what you want? Is there a problem? If so, what is it?

You do have one minor issue coming up, to do autoscaling to different aspect ratios, but it can be solved using designer scripts.

 

[MicroDrie]

Perhaps the approach described [B4A] AndroidPages - B4XPages alternative with orientation support will be of use to you.

 

[jroriz]

When I go in and look at the 2 layouts in your main.bal, they look like the ones you posted. Isn't that what you want? Is there a problem? If so, what is it?

You do have one minor issue coming up, to do autoscaling to different aspect ratios, but it can be solved using designer scripts.

The layouts appear correctly in the Designer, but when running the app, they become misaligned in landscape mode due to anchoring issues.
It seems the only way to achieve the desired layout in landscape is by using Designer Script.

 

[jroriz]

Perhaps the approach described [B4A] AndroidPages - B4XPages alternative with orientation support will be of use to you.

Due to significant differences between portrait and landscape layouts (and with additional layouts still to be created), I chose not to use B4XPages, as it is locked to portrait orientation.

 

[Lucas Siqueira]

you need to use the script in your case

'All variants script
AutoScaleAll

If Portrait Then

    btnComprar.Right = 50%x - 10dip
    btnToken.Left = 50%x + 10dip
  
    btnIniciar.Right = 50%x - 10dip
    btnURL.Left = 50%x + 10dip
  
    btnConfig.Right = 50%x - 10dip
    btnRotacao.Left = 50%x + 10dip
  
Else 'Landscape

    midia_indoor.HorizontalCenter = 25%x
    habilitar.HorizontalCenter = 50%x
    configuracoes.HorizontalCenter = 75%x
  
    btnComprar.HorizontalCenter = 25%x
    btnIniciar.HorizontalCenter = 50%x
    btnConfig.HorizontalCenter = 75%x
  
    btnToken.HorizontalCenter = 25%x
    btnURL.HorizontalCenter = 50%x
    btnRotacao.HorizontalCenter = 75%x
  
End If

 

[MicroDrie]

Due to significant differences between portrait and landscape layouts (and with additional layouts still to be created), I chose not to use B4XPages, as it is locked to portrait orientation.

You are absolutely right about B4XPages . That is why Spavlyuk came up with the solution he calls AndroidPages to get around that restriction. Of course, there is nothing wrong with taking the educational route of reinventing the wheel yourself

 

[LucaMs]

View attachment 161083

View attachment 161082

you need to use the script in your case

'All variants script
AutoScaleAll

If Portrait Then

    btnComprar.Right = 50%x - 10dip
    btnToken.Left = 50%x + 10dip
 
    btnIniciar.Right = 50%x - 10dip
    btnURL.Left = 50%x + 10dip
 
    btnConfig.Right = 50%x - 10dip
    btnRotacao.Left = 50%x + 10dip
 
Else 'Landscape

    midia_indoor.HorizontalCenter = 25%x
    habilitar.HorizontalCenter = 50%x
    configuracoes.HorizontalCenter = 75%x
 
    btnComprar.HorizontalCenter = 25%x
    btnIniciar.HorizontalCenter = 50%x
    btnConfig.HorizontalCenter = 75%x
 
    btnToken.HorizontalCenter = 25%x
    btnURL.HorizontalCenter = 50%x
    btnRotacao.HorizontalCenter = 75%x
 
End If

There is a problem in the variant landscape script:

    habilitar.HorizontalCenter = 50%x
    midia_indoor.Right = habilitar.Right - 10dip - midia_indoor.Width
    configuracoes.Left = habilitar.Right + 10dip

Also, you should make sure that the 3 labels are not too wide.

 

[jroriz]

You are absolutely right about B4XPages . That is why Spavlyuk came up with the solution he calls AndroidPages to get around that restriction. Of course, there is nothing wrong with taking the educational route of reinventing the wheel yourself

I did not know about AndroidPages. Of course, I want the easiest route...

 

[jroriz]

View attachment 161083

View attachment 161082

you need to use the script in your case

'All variants script
AutoScaleAll

If Portrait Then

    btnComprar.Right = 50%x - 10dip
    btnToken.Left = 50%x + 10dip
 
    btnIniciar.Right = 50%x - 10dip
    btnURL.Left = 50%x + 10dip
 
    btnConfig.Right = 50%x - 10dip
    btnRotacao.Left = 50%x + 10dip
 
Else 'Landscape

    midia_indoor.HorizontalCenter = 25%x
    habilitar.HorizontalCenter = 50%x
    configuracoes.HorizontalCenter = 75%x
 
    btnComprar.HorizontalCenter = 25%x
    btnIniciar.HorizontalCenter = 50%x
    btnConfig.HorizontalCenter = 75%x
 
    btnToken.HorizontalCenter = 25%x
    btnURL.HorizontalCenter = 50%x
    btnRotacao.HorizontalCenter = 75%x
 
End If

One amazing thing about the B4X community is that every time a question arises, besides receiving help and gaining new knowledge, friends often provide a ready-made solution as well! Thanks!