Android Example Snaptchat Slide Panels + Camera

Douglas Farias

Expert
Licensed User
Hi all.
I had nothing to do at home, so I decided to code a little.
i made a snapchat panels example, on snapchat app you can slide the finger to any direction, right, left, up and down.

i made the same on B4A, using no especial libs, just a panel with touch event and b4a animation using setlayoutanimated.

Here is the video example using a camera


i will post here 2 examples, one with camera like snapchat and one without camera, only panels slidings.

Note: you can slide any panel, to open and to close, you can use back key to close panels too (like snapchat).

The panels are created on code by the designer.
example.png



NOTE 2: in the example if the user not scroll the panel more then 30% of screen this will back to original position.


thx
 

Attachments

Alexander Stolte

Expert
Licensed User
If you want to controll the panel with your finger then change this in the "Case Activity.ACTION_MOVE" part:

B4X:
 If y > yM1 Then 'UP TO DOWN
                    pDown.Top = pDown.Top + 1%y
                    Else
                    pDown.Top = pDown.Top - 1%y
                End If
add a "Else" and the same code as on top with a minus plus change the 2%y to 1%y.


B4X:
Sub pDown_Touch (Action As Int, X As Float, Y As Float)
    Select Action
        Case Activity.ACTION_DOWN
            yM1 = y
        Case Activity.ACTION_MOVE
            yM2 = y
            Private deltaMovey As Float = yM2 - yM1
            If Abs(deltaMovey) > distanciaMinima Then
                If y > yM1 Then 'UP TO DOWN
                    pDown.Top = pDown.Top + 1%y
                    Else
                    pDown.Top = pDown.Top - 1%y
                End If
            End If
        Case Activity.ACTION_UP
            If pDown.Top >= 30%x Then
                pDown.SetLayoutAnimated(500,pCamera.Left,pCamera.Top + pCamera.Height,pCamera.Width,pCamera.Height)
                MoveDirection = "none"
                LockMove = False
            Else 'CANCELED THE MOVIMENT, RETURN THE PANEL TO ORIGINAL POSITION
                pDown.SetLayoutAnimated(500,pCamera.Left,pCamera.Top,pCamera.Width,pCamera.Height)
            End If
    End Select
End Sub
Have Fun.
 
Top