Android Question Panel Animation (increase and decrease size)

BlueVision · Thursday at 1:38 PM

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...

Panel increase / decrease:

        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 · Thursday at 1:57 PM

Add Sleep(1000) after:

BlueVision said:
Info.SetLayoutAnimated(1000, 80dip, 400dip, 3dip, 3dip)

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

BlueVision · Thursday at 2:16 PM

LucaMs said:
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 · Friday at 12:55 AM

BlueVision said:
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.

B4X:

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 · Friday at 2:09 PM

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 · Friday at 2:45 PM

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

teddybear · Friday at 3:46 PM

The way as LucaMs said at post #2 works.

BlueVision · Friday at 3:58 PM

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 · Saturday at 11:13 AM

B4X:

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 · Saturday at 11:47 AM

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 · Saturday at 11:56 AM

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 · Saturday at 12:27 PM

teddybear said:
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 · Saturday at 12:37 PM

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 · Saturday at 12:49 PM

BlueVision said:
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 · Saturday at 12:49 PM

teddybear said:
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 · Saturday at 1:13 PM

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!

Android Question Panel Animation (increase and decrease size)

BlueVision

Active Member

LucaMs

Expert

BlueVision

Active Member

Alexander Stolte

Expert

BlueVision

Active Member

Attachments

Alexander Stolte

Expert

teddybear

Well-Known Member

BlueVision

Active Member

Attachments

Alexander Stolte

Expert

Attachments

BlueVision

Active Member

teddybear

Well-Known Member

Attachments

BlueVision

Active Member

teddybear

Well-Known Member

Attachments

klaus

Expert

Alexander Stolte

Expert

BlueVision

Active Member

Similar Threads

Android Question Panel Animation (increase and decrease size)

Active Member

Expert

Active Member

Expert

Active Member

Attachments

Expert

Well-Known Member

Active Member

Attachments

Expert

Attachments

Active Member

Well-Known Member

Attachments

Active Member

Well-Known Member

Attachments

Expert

Expert

Active Member

Similar Threads

Privacy & Transparency

Privacy & Transparency