B4A Library MSMaterialMenu - Animating icons

This library simulates some animations on the drawer icon on the titlebar that are coming in on the material design.
It comes from this library: https://github.com/balysv/material-menu

68747470733a2f2f7261772e6769746875622e636f6d2f62616c7973762f6d6174657269616c2d6d656e752f6d61737465722f6172742f64656d6f2e676966


Dependencies:
- The NineOldAndroid java package, is included in the zip file.

Credits:
Thanks to Informatix for his NineOldAndroids library and for modifying it for me.

Sample:
B4X:
    Dim StdABHelper As StdActionBarHelper
    Dim MMenu As MSMaterialMenu
    StdABHelper.Initialize
    MMenu.Initialize("MMenu")

    MMenu.setScaleAndStroke(1,2)
    MMenu.Color = Colors.Black
    StdABHelper.Icon = MMenu.Drawable


Sub StdAB_ButtonClicked
    If MMenu.State = "BURGER" Then
        MMenu.animatePressedState("X")
        NavDrawer.OpenDrawer
    Else
        MMenu.animatePressedState("BURGER")
        NavDrawer.CloseDrawer
    End If
End Sub

This will work best with StdActionBar+StdActionBarHelper (wish they were merged).
 

Attachments

  • MSMaterialMenu.zip
    119.5 KB · Views: 2,398
Last edited:

thedesolatesoul

Expert
Licensed User
Longtime User
Not sure if this helps but during my search I came across this library on GitHub

https://github.com/drakeet/MaterialDialog

but I have no idea how to wrap this.
It is helpful, I have seen atleast two libraries that can do this. Unfortunately the one available when I started wrapping a while ago, didnt have this option (and still doesnt). To be honest, this one is fairly easy to wrap, just a lot of dog-work.
 

ac9ts

Active Member
Licensed User
Longtime User
I've been playing with this library and it's pretty slick. Thanks for the effort!

Now for a request (which you knew was coming). Can you add a boolean (?) flag indication that there is an animation in progress?? It would make it easier o synchronize other things that are happening on the screen.
 

thedesolatesoul

Expert
Licensed User
Longtime User
I've been playing with this library and it's pretty slick. Thanks for the effort!

Now for a request (which you knew was coming). Can you add a boolean (?) flag indication that there is an animation in progress?? It would make it easier o synchronize other things that are happening on the screen.
Will be done.
The next update will have it. Will also have a setTransformationOffset method to set the animation to the exact frame you want.
No promises on when I manage to release it.
 

thedesolatesoul

Expert
Licensed User
Longtime User
So what you are waiting for. We need it. :):cool:
I dont know...I went on to try to wrap a Material Switch library.

Anyway, I have released a preview version of the library here.
Please chip in with your suggestions/feedback, missing documentation, argument names, things not working, inconsistent naming etc.

It has 3 useful classes (IIRC):
- MSMaterialMenu (the drawer icon)
- MSMaterialRipple (my implementation of the rippleview required by the dialogs)
- DialogBuilder (inconsistent naming!)

e.g.
B4X:
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
    Dim r As MSMaterialRipple
    r.Initialize
    spanel.AddView(r,  10dip,200dip, 100%x - 20dip, 48dip)
    b.Initialize("b")
    b.Text = "Change Icon"
    r.Panel.AddView(b, 0dip,0dip, r.Width, r.Height)
    r.SetDuration(50)
    r.SetZoom(100,0.9)
    r.SetupChildViewEvents(b)

'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
    Dim builder As DialogBuilder
    builder.Initialize("MyDialog")
    builder.setTitle("Title").setMessage("This is the message").setThemeColor(Colors.Red)
    builder.setButton(-1, "OK")
    'builder.setButtonTextColor(-1, Colors.Green)
    'builder.setButton(-2, "No")
    'builder.setButton(-3, "Cancel")
    builder.setCancelable(True)
    builder.setThemeColor(Colors.Green)
    builder.setDesign(builder.DESIGN_MATERIAL_LIGHT)
    builder.setEditTextStyle("Text","Hint",Colors.Black,Colors.Gray,dumy.INPUT_TYPE_TEXT)
    'builder.setListStyle(Array As String("Yellow","Green","Blue","Red"))
    builder.show

Sub MyDialog_DialogResponse(Buttonclicked As Int) As Boolean 
    Log(Buttonclicked)
    Return True
End Sub

Sub MyDialog_ItemAccepted(SelectedItem As String)
    Log(SelectedItem)   
End Sub

Sub MyDialog_TextAccepted(SelectedText As String)
    Log(SelectedText)
End Sub

'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
    Dim MMenu As MSMaterialMenu 
    MMenu.Initialize("MMenu")
    MMenu.setScaleAndStroke(1,2)
    MMenu.Color = Colors.White
    StdABHelper.Icon = MMenu.Drawable 


Sub NavDrawer_DrawerOpened (DrawerGravity As Int)
    'MMenu.animateState("X")
    isDrawerOpened = True
End Sub

Sub NavDrawer_DrawerClosed (DrawerGravity As Int)
    'MMenu.animateState("BURGER")
    isDrawerOpened = False
End Sub

Sub NavDrawer_DrawerSlide (Position As Float, DrawerGravity As Int)
    Dim slideOffset As Float 
    If isDrawerOpened Then
        slideOffset = 2 - Position
    Else
        slideOffset = Position
    End If
    MMenu.setTransformationOffset("BURGER_ARROW",slideOffset)
End Sub
 

Attachments

  • MSMaterialMenu.zip
    106.3 KB · Views: 896

thedesolatesoul

Expert
Licensed User
Longtime User

Peter Simpson

Expert
Licensed User
Longtime User
Hello world, did you see what I did there :)

Anyway, I decided to try your MSMaterialMenu, that is the first time that I ever used StdActionBar and StdActionBarHelper. I finally got it working this morning when I woke up. To get it working on all my devices, I had to do the following.

MUST BE USED IN CONJUNCTION WITH AHNavigationDrawer

B4X:
'Declared in Globals
    Private StdAB As StdActionBar 
    Private StdABH As StdActionBarHelper
    Private MMenu As MSMaterialMenu

'In Activity_Create
    StdAB.Initialize("StdAB")
    StdAB.Subtitle = "Animate"
    StdAB.ShowUpIndicator = True 
    'StdAB.Icon = LoadBitmap(File.DirAssets, "ic_drawer.png")
    StdAB.Icon = Null

    StdABH.Initialize
    MMenu.Initialize(Null)
    MMenu.setScaleAndStroke(1, 2)
    MMenu.Color = Colors.White
    'StdABH.Icon = MMenu.Drawable
    StdABH.SetHomeAsUpIndicator(MMenu.Drawable)

I also did the following because StdAB_ButtonClick does not work under 5.0 Lollipop.

'Extra code
B4X:
'More code
Sub StdAB_ButtonClicked
    CallSub(Null, ClickCloseDrawer)
End Sub

Sub Activity_ActionBarHomeClick
    CallSub(Null, ClickCloseDrawer)
End Sub

Sub ClickCloseDrawer
    If MMenu.State = "BURGER" Then
        MMenu.animatePressedState("X")
        'MMenu.animateState("X")'Test
        NavDrawer.OpenDrawer
    Else
        MMenu.animatePressedState("BURGER")
        'MMenu.animateState("BURGER") 'Test
        NavDrawer.CloseDrawer
    End If 
End Sub

'The rest is just standard code.
Sub MLVSub_itemclick(Position As Int, Value As Object)
    ToastMessageShow(Value, False) 
    NavDrawer.CloseDrawer
End Sub

Sub NavDrawer_DrawerOpened (DrawerGravity As Int)
    'MMenu.animatePressedState("X")'Test
    MMenu.animateState("X")
    isDrawerOpened = True
End Sub

Sub NavDrawer_DrawerClosed (DrawerGravity As Int)
    'MMenu.animatePressedState("BURGER")'Test
    MMenu.animateState("BURGER")
    isDrawerOpened = False
End Sub

Sub NavDrawer_DrawerSlide (Position As Float, DrawerGravity As Int)
    Dim slideOffset As Float
 
    Log(Position)

    If isDrawerOpened Then
        slideOffset = 2 - Position
    Else
        slideOffset = Position
    End If
 
    MMenu.setTransformationOffset("BURGER_ARROW", slideOffset)
End Sub

Enjoy...
 
Last edited:

Theera

Well-Known Member
Licensed User
Longtime User
This is a fairly stable beta library.

It simulates some animations on the drawer icon on the titlebar that are coming in on the material design.
It comes from this library: https://github.com/balysv/material-menu

Dependencies:
- The NineOldAndroid java package, is included in the zip file.

Issues:
- Docs are not inherited

I might write a sample once I get Material figured out.

Thanks to Informatix for his NineOldAndroids library and for modifying it for me.

Sample:
B4X:
    Dim StdABHelper As StdActionBarHelper
    Dim MMenu As MSMaterialMenu
StdABHelper.Initialize
    MMenu.Initialize("MMenu")
  
    MMenu.setScaleAndStroke(1,2)
    MMenu.Color = Colors.Black
    StdABHelper.Icon = MMenu.Drawable


Sub StdAB_ButtonClicked
    If MMenu.State = "BURGER" Then
        MMenu.animatePressedState("X")
        NavDrawer.OpenDrawer
    Else
        MMenu.animatePressedState("BURGER")
        NavDrawer.CloseDrawer
    End If
End Sub

This will work best with StdActionBar+StdActionBarHelper (wish they were merged).

Hi thedesolatesoul,
Dim NavDrawer as AHNavigationDrawer ? and how to Initialize it?
 

thedesolatesoul

Expert
Licensed User
Longtime User

Ciclope3160

Member
Licensed User
Longtime User
Hi, I'm testing the example of Slide Menu Material, everything works correctly, except when the menu is visible and press the screen, it closes but the "BURGER" icon does not appear until you click on the navigation bar.
Would know how to fix it, I have failed. Thank You.

Sorry for my english....

Ok, All figured out, I paste the code in case you need. thanks
B4X:
Sub NavigationBar_ButtonClicked
    Dim alto As Int
    Dim ancho As Int
    alto = Activity.Height
    ancho = Activity.Width
   
    Dim left As Int
    left = ancho / 4
   
    Dim left1 As Int
    left1 = left * 3
   
    Dim imagenfondo As ImageView
    imagenfondo.Initialize ("Imagenfondo")
    Activity.AddView (imagenfondo, left1, 0, 25%x, 100%y)
    imagenfondo.Color = Colors.Transparent
   
    If MaterialMenu.State = "BURGER" Then
        MaterialMenu.animatePressedState("X") 
        SlidingMenu.Show
   
        imagenfondo.BringToFront  
    Else
        MaterialMenu.animatePressedState("BURGER")
        SlidingMenu.Hide 
        imagenfondo.SendToBack
    End If
End Sub

Sub imagenfondo_click
   
    If MaterialMenu.State= "X" Then
       SlidingMenu.Hide 
        MaterialMenu.animatePressedState("BURGER")
    End If
End Sub
 
Last edited:
Top