Android Question Panel Animation (increase and decrease size)

[BlueVision]

The idea was to have a panel appear within an app that ‘grows’ out of a button and then disappears again the other way round.
INFO is defined as a panel in the following code section.
The code also shifts the panel a little during animation, which intensifies the ‘growing effect’ a little.

The problem is that the animation unfortunately only works in one direction (grow). Shrinking the panel does not work, the panel is simply faded out.
There are a few older posts describing the problem in a similar way. Apparently this is due to the way animations are executed by the code or got rendered.
Does anyone have a simple workaround for the problem? I would hate to do without the animation, but it should work in both directions.
Actually, I don't want to integrate a new library or write 50 lines of new code for the effect...

        If Info.Visible = True Then
            'this part does not work
            Info.SetLayoutAnimated(0, 110dip, 300dip, 233dip, 290dip)
            Info.SetLayoutAnimated(1000, 80dip, 400dip, 3dip, 3dip)
            Info.Visible = False
        Else
            'this part works fine
            Info.SetLayoutAnimated(0, 80dip, 400dip, 3dip, 3dip)
            Info.Visible = True
            Info.SetLayoutAnimated(1000, 110dip, 300dip, 233dip, 290dip)
        End If

 

[LucaMs]

Add Sleep(1000) after:

Info.SetLayoutAnimated(1000, 80dip, 400dip, 3dip, 3dip)

You set
Info.Visible = False
before the animation was completed.

 

[BlueVision]

Add Sleep(1000)

Tried already...
Animation works then, but in a strange way. The panel's content is immediately zoomed in extremely. Think there is a kind of re-rendering needed additionally then...

 

[Alexander Stolte]

Does anyone have a simple workaround for the problem?

I had a similar problem when I developed the SubMenu feature for my AS_SelectionList. In B4i and B4J the animation was smooth, but in B4A everything that was in my panel was enlarged during the animation.

I then found the following code here in the forum, unfortunately I can't remember from which thread. I made a B4X function out of it so that I don't have to write anything twice.

Private Sub SetLayoutAnimated(v As B4XView,Duration As Int, Left As Int,Top As Int,Width As Int,Height As Int)
    #If B4A
    v.SetLayoutAnimated(Duration,Left,Top,Width,v.Height)
    Dim startTime As Long = DateTime.Now
    Dim startHeight As Int = v.Height
    Dim deltaHeight As Int = Height - startHeight
    Dim t As Long = DateTime.Now
    Do While t < startTime + Duration
        Dim h As Int = startHeight + deltaHeight * (t - startTime) / Duration
        v.Height = h
        Sleep(10)
        t = DateTime.Now
    Loop
    v.Height = Height
    #Else
    v.SetLayoutAnimated(Duration,Left,Top,Width,Height)
    #End If
End Sub

 

[BlueVision]

Thanks for the code Alexander, but unfortunately it doesn't solve the problem. It may work with B4X code (I haven't tested that), but the app is written entirely in B4A. Changing it now only because of a failing animation (?)...

To illustrate the problem, I have made a small film (with miserable resolution) so that I can upload it here. Opening the panel works as expected, as does closing the panel. But the content of the complete panel as well as the panel itself (recognisable by the missing frame) while closing ‘disappears’. Instead, a white circle is displayed. It could perhaps be an ‘o’ if it is a scaling problem because of rerendering the panels content.

 

[Alexander Stolte]

Please create an example project that shows this behavior, thank you.

 

[teddybear]

The way as LucaMs said at post #2 works.

 

[BlueVision]

This is the failure stripped down in a sample...

Edit:
It is a simple panel defined with the designer, containing some labels, not an Imageview.

Edit 2:
Integrating Alexander's code is changing the problem, but not eliminating. The form of the panel is correct, but it's content is gone.
Attached as TestPanel2

 

[Alexander Stolte]

Private Sub Button1_Click
    If PInfo.Visible = True Then
        SetLayoutAnimated(PInfo,0, 85dip, 170dip, 223dip, 290dip)
        SetLayoutAnimated(PInfo,250, 85dip, 170dip, 3dip, 3dip)
        Sleep(250)
        PInfo.Visible = False
    Else
        SetLayoutAnimated(PInfo,0, 85dip, 170dip, 3dip, 3dip)
        PInfo.Visible = True
        SetLayoutAnimated(PInfo,250, 85dip, 170dip, 223dip, 290dip)
    End If
End Sub

Private Sub SetLayoutAnimated(v As B4XView,Duration As Int, Left As Int,Top As Int,Width As Int,Height As Int)
    #If B4A
    v.SetLayoutAnimated(Duration,Left,Top,v.Width,v.Height)
    Dim startTime As Long = DateTime.Now
    Dim startHeight As Int = v.Height
    Dim deltaHeight As Int = Height - startHeight
    Dim startWidth As Int = v.Width
    Dim deltaHWidth As Int = Width - startWidth
    Dim t As Long = DateTime.Now
    Do While t < startTime + Duration
        Dim h As Int = startHeight + deltaHeight * (t - startTime) / Duration
        Dim w As Int = startWidth + deltaHWidth * (t - startTime) / Duration
        v.Height = h
        v.Width = w
        Sleep(10)
        t = DateTime.Now
    Loop
    v.Height = Height
    v.Width = Width
    #Else
    v.SetLayoutAnimated(Duration,Left,Top,Width,Height)
    #End If
End Sub

 

[BlueVision]

Thank you Alexander, this works also inside a native B4A environment, tested successfully.

I don't want to complain now, I'm glad that people here are taking care of the problem.
With this variant, the scaling of the panel content is not adjusted. In general, the problem may lie more in the way the panel content is rendered, ultimately in how the animation is implemented by the system.

The difference can be seen in comparison to TeddyBear's image view. While the panel content is scaled depending on the size in the image view, your variant basically draws a mask over the existing panel.

Nevertheless, your proposed solution is absolutely acceptable visually.

 

[teddybear]

The SetLayoutAnimated of BALayout has an issue when scaling down the view. and the way which Alexander Stolte posted is a workaround .

Perhaps this is what you want

 

[BlueVision]

Perhaps this is what you want

Thank you too, teddybear. Exactly what I want.
But I am afraid, this will work only inside a B4X environment, not within a native B4A application. Getting errors. Investigating...
I think that would work if I ported the entire application to B4X code. However, this is a mammoth task for an application with approx. 5000 lines of source code.
I can't create a B4XView in a native B4A application or am I wrong?

 

[teddybear]

It's just for B4A. and the method only works on b4a
The pure B4A project is attached. the PInfo has been changed from b4xview to panel, if you don't use xui

 

[klaus]

I can't create a B4XView in a native B4A application or am I wrong?

I can't create a B4XView in a native B4A application or am I wrong?

Sure you can !
Select and Declare the xui Library.

 

[Alexander Stolte]

Perhaps this is what you want

You impress me again, thank you very much. Now I can see where I can incorporate this where I have reached the limits of B4A in the past

 

[BlueVision]

Thanks to all people involved! I think my problem has made us all a bit smarter... (go into the books now...)
Thanks for the valuable code snippets!