Android Question (Solved) Visual designer question. Square layouts.

[JordiCP]

Up to now I have nearly always designed my layouts in code. They work ok and I feel comfortable with them. I know that the designer is a great tool but simply got used to do it by code..

Now I want to design several different layouts for some kind of square cards and I would like to use the designer. They should scale totally to the panel that will load the layout (it will always be square, but can be of any size). I don't mind now text sizes, I am refering to the views inside. What I want is that everything, positions and sizes, get scaled proportionally inside, as if it was a zoom.

Must I design it for different variants? Or should I define just a square variant?
I made a first test with a square variant, and the first thing that appears is a not-square recipient. So I am confused

 

[tigrot]

I'm curious as well...

 

[klaus]

How did you define the layout variant?

I tryed this new variant:

Click on OK and you get this:

The recipient is not square because of Show Title checked and Full Screen not checked.

If you uncheck Show Title and check Full Screen you get a square recipient.

Then it depends on what exactly you want to do and show.

One square layout would be enough and should use Anchors, AutoScale and Designer Scripts.

 

[JordiCP]

Thanks Klaus

I had generated the variant as you say, but I had not set it to full screen and unset Show Title --> so now it is square!

With this, I have tested 4 variations. In all of them horizontal anchors are set to BOTH for simplicity, looking only for effect in vertical anchors/scaling

This is my layout

Spoiler

a)) Vertical anchors set to TOP and AutoScaleAll enabled

Spoiler

b)) Vertical anchors set to BOTH and AutoScaleAll enabled

Spoiler

c)) Vertical anchors set to TOP and AutoScaleAll disabled

Spoiler

d)) Vertical anchors set to BOTH and AutoScaleAll disabled

Spoiler

The objective is that, as the layout is square and also is the final recipient (a panel), everything (positions and dimensions) gets accordingly scaled.
Will have to study more about it...

Thanks again.

 

[stevel05]

How about adding everything to a panel and using the designer script to set the panel height the same as the width (or width to height if it's displayed in landscape).

That should constrain the items to a square.

 

[JordiCP]

I have tried with a panel and all the views inside anchored to it.
Panel1.Height = Panel1.Width in designer scripts but no luck

Will come back later since now I am a bit obfuscated and I am sure that I am making some error somewhere

 

[klaus]

What exactly do you want to do ?
You want a square layout but display it on a rectangular screen ?
Or have the square layout been loaded somewhere on a screen ?
Can you upload a small project showing the problem?

 

[JordiCP]

I want to design some square layouts, in order to load them to different square panels (which will be placed in the activity, for instance in a scrollview)

In the attached example (without without scrollview, just a panel centered in the activity): I design a square layout. This layout is loaded to the Panel. I would like it to be 'simply' scaled to the Panel's dimensions. But I never get it to fit.
As suggested by stevel05, I have added a background Panel in the design which holds the other elements and force Panel.width=Panel.Height, but result is more or less the same.

Any help is welcome, or perhaps the answer is that in such 'non-standard' cases it is better to work by code.

Thanks!

 

[Erel]

1. You are not using the BOTH anchors correctly. In any given horizontal or vertical line, there could only be one view (belonging to the same parent) with anchors set to BOTH.
See this tutorial: https://www.b4x.com/android/forum/threads/b4x-anchors-demonstrated.64112/#content

Start with this:

2. Create a main layout and then load the second layout to the panel.
The main layout could look like:

The important part is in the designer script which forces the panel to be a square.

3. Code:

Sub Globals
   Private pnlBase As Panel
End Sub


Sub Activity_Create(FirstTime As Boolean)
   Activity.LoadLayout("1")
   pnlBase.LoadLayout("layoutCPE")
End Sub

The result is:

 

[LucaMs]

I tried in the same way (and in many others ) but the result is not what he wants.
Mainly the two buttons remain spaced from the label above them (because they are anchorated to the bottom, what I did too).
I tried also without the base panel of the "child layout".

 

[Erel]

What is the desired layout? The rows should be spread equally? This requires a bit more work:

 h = (95%y - Label1.Bottom) / 6
 g = Label1.Bottom + 5dip
lbVersionSoftware.Top = 0 * h + g
lbTipoDispositivo.Top = 1 * h + g
lbVersionHardware.Top = 2 * h + g
lbNumCPE.Top = 3 * h + g
spNumCPE.Top = lbNumCPE.Top
lbFechaHora.Top = 4 * h + g
btnLeerPerfil.Top = 5 * h + g
btnGrabarPerfil.Top = btnLeerPerfil.Top

Project is attached.

 

[LucaMs]

I tried your project.

It looks perferct on my smartphone:

but not so much on my tablet:

It's seems to be different from what @JordiCP is trying to get:

What I want is that everything, positions and sizes, get scaled proportionally inside, as if it was a zoom.

(BTW: looks the layout in your Designer, without running the script, the same as mine, the two buttons out of panel?)

 

[LucaMs]

(BTW: looks the layout in your Designer, without running the script, the same as mine, the two buttons out of panel?)

If I close and open again the Designer the two buttons "change" their position (the second time they are correctly entirely inside the panel).
(Windows 7 - Net Framework 4.6.1)

 

[klaus]

Any help is welcome, or perhaps the answer is that in such 'non-standard' cases it is better to work by code.

In your case, as you want it like a zoom, you need to reposition everything by code.
Calculate a scale factor and set everything according to this factor.
This could be done in the DesignerScript, the main code, a code module or better in a Class.
I would use a Class or a code module if there were several different layouts.

 

[LucaMs]

In your case, as you want it like a zoom, you need to reposition everything by code.
Calculate a scale factor and set everything according to this factor.
This could be done in the DesignerScript, the main code, a code module or better in a Class.
I would use a Class or a code module if there were several different layouts.

or... use your module Scale, Klaus?

 

[klaus]

or... use your module Scale, Klaus?

No, not in this case. The Scale Module calculates the scale factor according to the screen size not the parent view size.
But, the principle is the same.

 

[JordiCP]

What is the desired layout? The rows should be spread equally? This requires a bit more work:

Your example is ok for some sizes. But as LucaMS tested, if the scale factor (either of the screen or the holding panel) is very different, also width and height need to be scaled in the designer script.

This could be done in the DesignerScript, the main code, a code module or better in a Class.
I would use a Class or a code module if there were several different layouts.

At the end I am using the designer scripts (scaling left,top,width,height against the holding panel dimensions) and everything works ok. Each layout will be loaded from a class since there will be multiple instances of the same.

It would be a nice feature if the designer could scale against the final container (or there was an option to), as it will not always be an activity. But as it can be achieved with scripts, everything is ok.

Thanks all for your help