Designer script giving unexpected layout

[kdgarris]

Clueless newbie here who has had b4a (v2.30) for a week, and has gone through a few tutorials with success, but having trouble with my own test project.

Specifically, I am trying to make a layout for a simple app that does a search on snopes.com. It has a centered label at the top, an edittext and a button below that, and a webview below those.

The issues I am having are:

1) The EditText is not visible against the activity at all, and I don't see how to set its color.

2) The WebView should have the top aligned with the bottom of the EditText, but appears instead to be way below that.

Here's my designer script code:

'All variants script
'AutoScaleAll 'uncomment to scale all views based on the device physical size.
LabelInstructions.Width = 100%x
EditSearchText.Top = LabelInstructions.Bottom
EditSearchText.Width = 75%x
ButtonSubmitSearch.Top = LabelInstructions.Bottom
ButtonSubmitSearch.Left = EditSearchText.Right
ButtonSubmitSearch.Right = 100%x
WebResults.Top = ButtonSubmitSearch.Bottom
WebResults.Bottom = 100%y
WebResults.Width = 100%x

I am also attaching a screenshot of the app running on my Nexus 7, portrait mode (scaled to half).

Any thoughts? Thanks in advance for any advice!

Karl

:sign0104:

 

[klaus]

Could you post your project as a zip file (IDE menu Files / Export As Zip) it would be much easier for us to help you.

Best regards.

 

[kdgarris]

Sure - here it is. Thanks for your help!

 

[klaus]

Here you are.

First you dimed the views in Process_Globals.
They must be dimed in Globals !

I made a few changes in the Designer Scripts.

'All variants script
AutoScaleAll 'uncomment to scale all views based on the device physical size.

LabelInstructions.Width = 100%x
EditSearchText.Top = LabelInstructions.Bottom
EditSearchText.Width = 75%x
ButtonSubmitSearch.Top = LabelInstructions.Bottom
ButtonSubmitSearch.Left = EditSearchText.Right
ButtonSubmitSearch.Right = 100%x
WebResults.SetTopAndBottom(ButtonSubmitSearch.Bottom, 100%y)
WebResults.Width = 100%x

I added AutoScale.
I replaced
WebResults.Bottom = 100%y
by
WebResults.SetTopAndBottom(ButtonSubmitSearch.Bottom, 100%y)
to make sure that WebResults fills the space between ButtonSubmitSearch.Bottom and 100%y.

On Android 4.x EditText views look invisible because their default color is transparent.
If you click on it you'll see that it's there.

Best regards.

 

[kdgarris]

Awesome! Thank you very much; it is working as expected now. I don't understand why setting the top and bottom properties for the WebView separately the way I had done before yields different results than using SetTopAndBottom, but it does indeed for whatever reason.

I understand about the EditText default color being clear, but is there any way to change that default?

Thanks again!

 

[klaus]

The difference is:
- Top sets the top and the bottom is given with the height.
- Bottom sets the bottom and the top is given with the height.
- SetTopAndBottom sets Top, Height and Bottom.

You can change the EditText color in the Code with EditText.Color.

Best regards.