Android Question [SOLVED] - Anchors seem to be ignored when using SetLayoutAnimated

[rleiman]

Greetings,

I started to experiment with B4XPages and really like them. I also used SetLayoutAnimated to slide a layout called pnlWhiteDialog into view. It slides into view as expected but the alignment of the views on the layout are not being displayed as expected. For example I have a Label for the layout title to display the text "New Account" horizontal centred but its being displayed more to the left side of the layout. This layout also has a button but its also is displayed even though they have both horizontal edges anchored. I was expect them to be centred on the layout just like I have on my Main Page screen. The horizontal size of the button also was also shortened. The attached photos will show the views not being centred correctly and the associated coding I was using for the white layout that slides up.

Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("MainPage")

    ' Setup the black cover panel.
    '-----------------------------
    cdBackgroundColour.Initialize(Colors.ARGB(150, 0, 0, 0), 0) ' Transparent background.
    pnlBlackCover.Background = cdBackgroundColour ' Assign the transparent colour to panel.
    pnlBlackCover.Visible = False
    pnlBlackCover.SetElevationAnimated(0, 3dip) ' Make the animation cover more.
    Root.AddView(pnlBlackCover, 0, 0, Root.Width, Root.Height) ' Add the panel.
 
    ' Setup the white dialog panel.
    '------------------------------
    cdBackgroundColour.Initialize(Colors.White, 50dip) ' White rounded background.
    pnlWhiteDialog.SetElevationAnimated(0, 3dip) ' Make the animation cover more.
    pnlWhiteDialog.LoadLayout("NewAccount") ' Layout with new account entry fields.
    pnlWhiteDialog.Background = cdBackgroundColour ' Assign the white colour to panel.
    pnlWhiteDialog.Width = Root.Width
 
    ' Add a panel with the top of it at half the height of the activity (root).
    ' It's height will go to the bottom of the activity (root) which is also half the
    ' height of the activity (root) plus some extra height (.7) so the rounded bottom
    ' is hidden when it's displayed.
    ' It's also placed out of site (the "top" parameter is at Root.Height) to be slid
    ' into view later with SetLayoutAnimated.
    '---------------------------------------------------------------------------------
    Root.AddView(pnlWhiteDialog, 0, Root.Height, Root.Width, Root.Height * .7)
End Sub

' New account button click.
'--------------------------
Sub Button1_Click
    pnlBlackCover.SetVisibleAnimated(300, True) ' Make panel fade in.
    Sleep(200)
 
    ' Make panel slide up on from the bottom of the screen.
    '------------------------------------------------------
    pnlWhiteDialog.SetLayoutAnimated(300, 0, Root.Height * .5, Root.Width, Root.Height)
End Sub


Sub pnlBlackCover_click
 
    PhoneLibrary.HideKeyboard(Root)
    pnlBlackCover.SetVisibleAnimated(300, False) ' Make panel fade out.

    ' Make panel slide down out of sight.
    '-----------------------------------
    pnlWhiteDialog.SetLayoutAnimated(300, 0, Root.Height, Root.Width, Root.Height)
End Sub

Sub B4XFloatTextField1_TextChanged (Old As String, New As String)
 
    ' Hide hint when the user has text in the text field.
    '----------------------------------------------------
    B4XFloatTextField1.mBase.GetView(1).Visible = New.Trim.Length = 0
End Sub

Sub B4XFloatTextField2_TextChanged (Old As String, New As String)
 
    ' Hide hint when the user has text in the text field.
    '----------------------------------------------------
    B4XFloatTextField2.mBase.GetView(1).Visible = New.Trim.Length = 0
End Sub

Sub B4XFloatTextField3_TextChanged (Old As String, New As String)
 
    ' Hide hint when the user has text in the text field.
    '----------------------------------------------------
    B4XFloatTextField3.mBase.GetView(1).Visible = New.Trim.Length = 0
End Sub

 

[Erel]

Anchors, in B4A, are applied when the layout is loaded and right before the script runs.

If you change the layout at runtime then you will need to do it programmatically.

 

[rleiman]

Anchors, in B4A, are applied when the layout is loaded and right before the script runs.

If you change the layout at runtime then you will need to do it programmatically.

Thanks for the reply. I was going to change it programmatically but couldn't find the anchors in the list. How do I access it?

 

[Marvel]

I usually just calculate the position. Something like;

Label1.left = 20%x

'Or use the position of other views to show it.
Label2.top = Label1.top + Label1.height + 10dip. '10dip to give space between views.

 

[Erel]

The large images make the post less readable.

Anchors is a designer feature.

It slides into view as expected but the alignment of the views on the layout are not being displayed as expected.

Create a separate layout and load it into this panel. No need to modify the layout at runtime.

 

[rleiman]

The large images make the post less readable.

Anchors is a designer feature.


Create a separate layout and load it into this panel. No need to modify the layout at runtime.

Sorry about the large image.

In my original coding, the layout is a separate layout file called "NewAccount.bal" that's loaded into the panel but some of the views are not aligned as expected. Is the position of my LoadLayout statement in the correct sequence?

    ' Setup the white dialog panel.
    '------------------------------
    cdBackgroundColour.Initialize(Colors.White, 50dip) ' White rounded background.
    pnlWhiteDialog.SetElevationAnimated(0, 3dip) ' Make the animation cover more.
    pnlWhiteDialog.LoadLayout("NewAccount") ' Layout with new account entry fields.
    pnlWhiteDialog.Background = cdBackgroundColour ' Assign the white colour to panel.
    pnlWhiteDialog.Width = Root.Width

 

[rleiman]

I was able to do a work-around by changing the anchors in the designer to "Left" and adding this coding. Now the label and the button are centred and the button width was not shortened but it's now the correct width.

    ' Setup the white dialog panel.
    '------------------------------
    cdBackgroundColour.Initialize(Colors.White, 50dip) ' White rounded background.
    pnlWhiteDialog.SetElevationAnimated(0, 3dip) ' Make the animation cover more.
    pnlWhiteDialog.LoadLayout("NewAccount") ' Layout with new account entry fields.
    pnlWhiteDialog.Background = cdBackgroundColour ' Assign the white colour to panel.
    pnlWhiteDialog.Width = Root.Width

    ' Put these in the centre horizontally.
    '-----------------------------------------
    Label1.Left = (pnlWhiteDialog.Width / 2) - (Label1.Width / 2)
    ButtonSignIn.Left = (pnlWhiteDialog.Width / 2) - (ButtonSignIn.Width / 2)

 

[rleiman]

This is the result I was able to get which is what I needed.