Android Tutorial Android SlidingPanels - Simple way to create sliding layouts

This is an old tutorial. There are now simpler and better ways to achieve this effect.

For example: https://www.b4x.com/android/forum/threads/tabstripviewpager-better-viewpager.63975/

Sliding layouts are cool.

Using the Animation library it is not difficult to animate single views and panels that hold other views.
The following code module and example project makes it even simpler to create a layout that is made of a number of panels. Whenever the current visible panel is changed, the current panel slides out and the new panel slides in.
As Panels can load layout files, you can create complex layouts by loading a layout file to each panel.

slidingpanels_1.png


The project is made of two components. The Main activity and the SlidingPanels code module.
You should add the SlidingPanels code module to your project and add a reference to the Animation library.

The main activity code is commented and explains the several integration points required.

Animations look much better on real devices than on the slow emulator.
Even if you are not interested in sliding layouts it is recommended to go over the code. It demonstrates the power of custom types which enable you to easily group many objects.
As code modules cannot hold references to Activity objects (like views), the calling activity passes the type with all the required data each time it calls a method (passing the data is done by passing a single pointer, there is no overhead here).

Questions and comments are always welcomed.
 

Attachments

  • SlidingPanels.zip
    6.9 KB · Views: 9,816
Last edited:

Beja

Expert
Licensed User
Longtime User
Hello friends,

Please someone help!

I didn't know how to add a layout. please show me the steps to be able to use the graphical designer to add views to each panel.
Erel gave me a line of code (panel1.loadlayout) but I need a little more detailed steps (headstart)

thanks in advance!
 

sagt3k

Member
Licensed User
Longtime User
Other example to create sliding layouts with other events

Ok fine example,

Just what I need for the next project. I would, however, integrated the movement from top to bottom and vice versa. A single click event and double click event. Could someone help me? So I think that all the possibilities have been implemented.

Thanks
Antonio
 

sagt3k

Member
Licensed User
Longtime User
Other example to create sliding layouts with other events

Hi Erel

please a small example. would be of great help ...

Pllllleeeeaasseee
:) :sign0104:

by Antonio
 

realblue

Member
Licensed User
Longtime User
Hi Erel,

I have a button inside the panel and when I click on the button I am changing the background image of the button. But somehow I cannot see the background image changed even though both button and parent panel is invalidated.

Here is the code :

B4X:
Sub btnSad_Click
    If sd.Panels.Length > 0 Then
        SetButtonMode(sd.Panels(sd.currentPanel),btnSad,"sad_selected.png")
        SetButtonMode(sd.Panels(sd.currentPanel),btnSmile,"smile.png")
        VT.Execute("UPDATE SIKAYETLER SET MEMNUNIYET=59 WHERE SNO=" & sd.Panels(sd.currentPanel).tag)
    End If
End Sub

Sub SetButtonMode(p As Panel,this As Button,mode As String)
    Dim v As View
    For i = 0 To p.NumberOfViews - 1
        v = p.GetView(i)
        If v Is Button Then
            If this.tag = v.Tag Then
                this.SetBackgroundImage(LoadBitmap(File.DirAssets,mode))
                this.Invalidate
                p.Invalidate
                Exit
            End If
        End If
    Next
End Sub

How can I force to redraw a panel inside slidingdata object?
 

realblue

Member
Licensed User
Longtime User
It should redraw automatically. What is 'this' ?

B4X:
Sub SetButtonMode(p AsPanel,this AsButton,mode AsString)

this is the button which I am trying to change its background image. When I click the button "btnSad" which has faded sad face image on it I am changing it with the colored one that will reflect that the user didn't feel right about it.

Please take a look at the screenshot. When I click the button the database gets updated but the image not.
 

Attachments

  • cf.jpg
    cf.jpg
    187.3 KB · Views: 404

Erel

B4X founder
Staff member
Licensed User
Longtime User
Try this:
B4X:
Sub btnSad_Click
 CallSubDelayed(me, "btnSadClickHelper")
End Sub


Sub btnSadClickHelper


If sd.Panels.Length > 0Then
 SetButtonMode(sd.Panels(sd.currentPanel),btnSad,"sad_selected.png")
 SetButtonMode(sd.Panels(sd.currentPanel),btnSmile,"smile.png")
 VT.Execute("UPDATE SIKAYETLER SET MEMNUNIYET=59 WHERE SNO=" & sd.Panels(sd.currentPanel).tag)

EndIf

End Sub
 

mjtaryan

Active Member
Licensed User
Longtime User
Hi Erel,

I'm in the midst of creating a UI that includes a main menu with several buttons. Each of the buttons causes a corresponding submenu to slide out. When a button on the submenu is tapped, the submenu slides closed. This is all working. However, now I want to refine this so the user has to slide the main menu out before a submenu can be opened (this gives more real estate for the main workarea and allows for larger buttons). When a submenu button is tapped both the submenu and the main menu are to slide closed. The user will be able to set preferences as to the location of the menu (top, bottom, or either side) and whether the menus are text or graphic. On my own I've not been able to get the touch to work. Therefore, I want to use your code module and the animation library to accomplish the main menu's sliding out.

What, if anything, will I need to modify in your SlidingPanels code module to get the main menu to slide out from any of the four locations (depending on the current prefs)? Thanks.
 

realblue

Member
Licensed User
Longtime User
Try this:
B4X:
Sub btnSad_Click
CallSubDelayed(me, "btnSadClickHelper")
End Sub


Sub btnSadClickHelper


If sd.Panels.Length > 0Then
SetButtonMode(sd.Panels(sd.currentPanel),btnSad,"sad_selected.png")
SetButtonMode(sd.Panels(sd.currentPanel),btnSmile,"smile.png")
VT.Execute("UPDATE SIKAYETLER SET MEMNUNIYET=59 WHERE SNO=" & sd.Panels(sd.currentPanel).tag)

EndIf

End Sub

Hi Erel,

Using CallSubDelayed didn't make any difference. Still the database gets updated but the icon remains unchanged.

Just to test I tried to change panel's color that worked OK.

I also tried
B4X:
                Dim b As Bitmap = LoadBitmap(File.DirAssets,mode),d As BitmapDrawable
                d.Initialize(b)               
                this.Background=d
                this.Invalidate
instead of
B4X:
this.SetBackgroundImage(LoadBitmap(File.DirAssets,mode))

didn't work either.
 
Last edited:

realblue

Member
Licensed User
Longtime User
Hi Erel,

I got it worked.

B4X:
Sub SetButtonMode(p As Panel,this As Button,mode As String)
    Dim v As View
    For i = 0 To p.NumberOfViews - 1
        v = p.GetView(i)
        If v Is Button Then
            If this.tag = v.Tag Then
                v.SetBackgroundImage(LoadBitmap(File.DirAssets,mode))       'I used v
                'this.SetBackgroundImage(LoadBitmap(File.DirAssets,mode))   'instead of this
                v.Invalidate
                p.Invalidate
                Exit 
            End If
        End If
    Next
End Sub
 

mjtaryan

Active Member
Licensed User
Longtime User
It will probably be easier to use a different solution for a sliding menu.

See these libraries:
http://www.b4x.com/search?query=drawer menu


Thanks, Erel. After posting I came to the same conclusion. Thanks for the link. Another quick question related to the same problem: In the IDE Designer, how do I get to the colorpicker itself so I can enter the RGB values rather than using the spinner? Thanks.
 

wizard699

Active Member
Licensed User
Longtime User
Erel, is it possible to make something like facebook sliding window, to show a menu or a list view, with the primary window that remain visibile to a side? An activity over another activity... o something like.
 

PABLO2013

Well-Known Member
Licensed User
Longtime User
Analyzing the project "sliding panels" I make you the following query:
How i could be done so that instead of sliding ...> panel1...> panel2 ...., the project there will be open the activity1 and this in turn open and sliding panel1 ... activity2 and this in turn open and sliding panel2 ..... and keep the format of sliding panels? My point with this, is to use the entire life cycle of activity for each panel, Initial way , I find it very difficult to put all the code in one activity (..."main"), tks and a pleasure to meet you. Might as me show you could do?
excuse my inlges.
 

PierPaduan

Active Member
Licensed User
Longtime User
Thanks for this tutorial Erel.

Question:
Once one of the panels is selected, how can I change by code the text of the label inside the panel?
For example I need to show a time counter in the label. I don't know how to address that label.
Thanks to everyone.

Pier
 
Top