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,424
Last edited:

Ciclope3160

Member
Licensed User
Longtime User
How I can do to make the background color of the line of the menu it down change color and remain so until you press another line? thx
 

thedesolatesoul

Expert
Licensed User
Longtime User
How I can do to make the background color of the line of the menu it down change color and remain so until you press another line? thx
I am not 100% sure what you mean.
Firstly are you putting it in the Actionbar? The actionbar automatically changes the background color when it is pressed.
Can you explain more about how you are using it?
 

Ciclope3160

Member
Licensed User
Longtime User
Hi, i´m working with migrec´s example, SLIDE MATERIAL.ZIP.
This my code:

Main
B4X:
Sub Process_Globals

End Sub

Sub Globals
        Dim NavigationBar As StdActionBar                                  
    NavigationBar.Initialize("NavigationBar") 
    Dim NavBarHelper As StdActionBarHelper                                
    NavBarHelper.Initialize
    Dim MaterialMenu As MSMaterialMenu
    MaterialMenu.Initialize("MaterialMenu")
    Dim SlidingMenu As SlideMenu
    SlidingMenu.Initialize(Activity, Me, "SlidingMenu", 0, 75%x)  
    Dim imagenfondo As ImageView
    Dim orientacion As Int
    End Sub

Sub Activity_Create(FirstTime As Boolean)
    If FirstTime = True Then 
    orientacion = 0
    End If
    Dim ancho As Int
    ancho = Activity.Width
    If ancho > 300 Then
    Activity.Title = "MENU"
    Else
    Activity.Title = "MENU"
    End If
       
    NavigationBarEvents
    MaterialMenuEvents
    SlidingMenuEvents
   
End Sub

Sub NavigationBarEvents
    Activity.Title = "MENU"
    NavigationBar.NavigationMode = NavigationBar.NAVIGATION_MODE_STANDARD
    'NavigationBar.Icon = LoadBitmap(File.DirAssets, "logo.png")
    Activity.AddMenuItem3("", "buscar", LoadBitmap(File.DirAssets, "search.png"), True)
End Sub

Sub MaterialMenuEvents
    MaterialMenu.setScaleAndStroke(2,2)
    MaterialMenu.Color = Colors.White
    NavBarHelper.Icon = MaterialMenu.Drawable
    MaterialMenu.TransformationDuration = 1000
End Sub

Sub SlidingMenuEvents
    SlidingMenu.AddItem("Item 1", Null, 1)
    SlidingMenu.AddItem("Item 2" Null, 2)
    SlidingMenu.AddItem("Item 3", Null, 3)
    SlidingMenu.AddItem("Item 4", Null, 4)
    SlidingMenu.AddItem("Item 5", Null, 5)
    SlidingMenu.AddItem("Item 6", Null, 6)
    SlidingMenu.AddItem("Item 7", Null, 7)
End Sub

Sub SlidingMenu_Click(Item As Object)
    MaterialMenu.animatePressedState("BURGER") 
   
    If Item = 1 Then
    ToastMessageShow("item 1 is MONDAY", False)
   
    End If
   
    If Item = 2 Then
    ToastMessageShow("item 2 is TUESDAY", False)
    End If

End Sub

Sub NavigationBar_ButtonClicked
    Dim alto As Int
    Dim ancho As Int
    ancho = Activity.Width
    Dim left As Int
    Dim left1 As Int
   
   
    If orientacion = 0 Then
        left = ancho / 4
        left1 = left * 3
        Dim imagenfondo As ImageView
        imagenfondo.Initialize ("Imagenfondo")
        Activity.AddView (imagenfondo, left1, 0, 25%x, 100%y)
   
    Else If orientacion = 1 Then
        left = ancho / 4
        left1 = left * 2
        Dim imagenfondo As ImageView
        imagenfondo.Initialize ("Imagenfondo")
        Activity.AddView (imagenfondo, left1, 0, 60%x, 100%y)
   
    End If
   
   
    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
       MaterialMenu.animatePressedState("BURGER")
        SlidingMenu.Hide
        imagenfondo.SendToBack
    End If
End Sub

Sub Activity_Resume
If Activity.Width > Activity.Height Then

SlidingMenu.Initialize(Activity, Me, "SlidingMenu", 0, 60%x)
orientacion = 1
Else If Activity.Width < Activity.Height Then

SlidingMenu.Initialize(Activity, Me, "SlidingMenu", 0, 75%x)
orientacion = 0
End If
SlidingMenuEvents

Dim ancho As Int
    ancho = Activity.Width
    If ancho > 300 Then
    Activity.Title = "MENU"
    Else
    Activity.Title = "MENU"
    End If
End Sub

SlideMenu Module
B4X:
'SlideMenu Class module
'
'Author:  Markus Stipp
'Version: 1.0

'Class module
Private Sub Class_Globals
    Type ActionItem (Text As String, Image As Bitmap, Value As Object)
   
    Private mSlidePanel As Panel
    Private mBackPanel As Panel
   
    Private mModule As Object
    Private mEventName As String
   
    Private mListView As ListView

    Private mInAnimation As Animation
    Private mOutAnimation As Animation
End Sub

'Initializes the SlideMenu object
' Activity - Pass a reference to the Activity here where the Slidemenu should be added to.
' Module - The calling Module. Pass the "Me" reference here
' EventNAme - EventName for the Click event
' Top - Top position of the Menu.
' Width - Width of the menu
Sub Initialize(Activity As Activity, Module As Object, EventName As String, Top As Int, Width As Int)
    'Calcula el ancho
    Dim ancho As Int
    ancho = Activity.Width
    'fin
   
    mModule = Module
    mEventName = EventName

    mSlidePanel.Initialize("mSlidePanel")

    mListView.Initialize("mListView")
    mListView.TwoLinesAndBitmap.SecondLabel.Visible = False
    mListView.TwoLinesAndBitmap.ItemHeight = 50dip
    mListView.TwoLinesAndBitmap.Label.Gravity = Gravity.CENTER_VERTICAL
    mListView.TwoLinesAndBitmap.Label.Height = mListView.TwoLinesAndBitmap.ItemHeight
    mListView.TwoLinesAndBitmap.Label.Top = 0
   
    'escoje el tamaño de la letra
    If ancho >=240 AND ancho <=480 Then
    mListView.TwoLinesAndBitmap.Label.TextSize = 12
    Else If ancho >= 481 AND ancho <= 721 Then
    mListView.TwoLinesAndBitmap.Label.TextSize = 14
    Else If ancho >=721 AND ancho <=1024 Then
    mListView.TwoLinesAndBitmap.Label.TextSize = 16
    Else If ancho >=1025 AND ancho <=1280 Then
    mListView.TwoLinesAndBitmap.Label.TextSize = 16
    Else If ancho >=1281 AND ancho <=1536 Then
    mListView.TwoLinesAndBitmap.Label.TextSize = 20
    Else If ancho >=1537 AND ancho <=1920 Then
    mListView.TwoLinesAndBitmap.Label.TextSize = 20
    End If
    'fin escoje letra
    mListView.TwoLinesAndBitmap.ImageView.SetLayout(13dip, 13dip, 24dip, 24dip)
    mListView.Color = Colors.White
    mListView.TwoLinesAndBitmap.Label.TextColor = Colors.black
   
   
    mInAnimation.InitializeTranslate("", -Width, 0, 0, 0)
    mInAnimation.Duration = 200
    mOutAnimation.InitializeTranslate("Out", Width, 0, 0, 0)
    mOutAnimation.Duration = 200
   
    Activity.AddView(mSlidePanel, 0, Top, Width, 100%y - Top)
   
    mBackPanel.Initialize("mBackPanel")
    mBackPanel.Color = Colors.Transparent
    Activity.AddView(mBackPanel, -100%x, 0, 100%x, 100%y)

    mSlidePanel.AddView(mListView, 0, 0, mSlidePanel.Width, mSlidePanel.Height)
    mSlidePanel.Visible = False
End Sub

'Adds an item to the SlideMenu
' Text - Text to show in menu
' Image - Image to show
' ReturnValue - The value that will be returned in the Click event
Public Sub AddItem(Text As String, Image As Bitmap, ReturnValue As Object)
    Dim item As ActionItem
    item.Initialize
    item.Text = Text
    item.Image = Image
    item.Value = ReturnValue
   
    If Not(Image.IsInitialized) Then
        mListView.AddTwoLinesAndBitmap2(Text, "", Null, ReturnValue)
    Else
        mListView.AddTwoLinesAndBitmap2(Text, "", Image, ReturnValue)
    End If
End Sub

'Show the SlideMenu
Public Sub Show
    If isVisible = True Then Return
   
    mBackPanel.BringToFront
    mSlidePanel.BringToFront
    mBackPanel.Left = 0
    mSlidePanel.Left = 0
   
    mSlidePanel.Visible = True
    mInAnimation.Start(mSlidePanel)
End Sub

'Hide the SlideMenu
Public Sub Hide
    If isVisible = False Then Return
   
    mBackPanel.Left = -mBackPanel.Width
    mSlidePanel.Left = -mSlidePanel.Width
    mOutAnimation.Start(mSlidePanel)
End Sub

Private Sub Out_AnimationEnd
    mSlidePanel.Visible = False
End Sub

Private Sub mBackPanel_Touch (Action As Int, X As Float, Y As Float)
    If Action = 1 Then
        Hide
    End If
End Sub

Private Sub mListView_ItemClick (Position As Int, Value As Object)
    Dim subname As String
    Hide   
    subname = mEventName & "_Click"
   
    If SubExists(mModule, subname) Then
        CallSub2(mModule, subname, Value)
    End If
End Sub

'Check if the menu is currently visible
Public Sub isVisible As Boolean
    Return mSlidePanel.Visible
End Sub

I would like something like this:
upload_2015-1-9_21-0-14.png
 

migrec

Member
Licensed User
Longtime User
hey @thedesolatesoul,
I tried this with the navigation drawer too and everything woks fine except that i have just one question, how do i animate the drawable when user is sliding the navigationdrawer with the gesture and not the button?
 

migrec

Member
Licensed User
Longtime User
@Peter Simpson I had missed that, I got this though:

B4X:
Occurred on line: 115
    MaterialIcon.setTransformationOffset("BURGER_ARROW", slideOffset)
Word: settransformationoffset

That seem to not be a member of the materialmenu? :confused:
 

thedesolatesoul

Expert
Licensed User
Longtime User

SCIS

Active Member
Licensed User
Longtime User
Hello, could someone help me on how to get the AHNavigationDrawer to work? I've been spending a couple of hours trying to just get it to work but even the examples that are given by the creator keep crashing for me... I really want this to work like @migrec , so that the animation also works when the user slides the menu open.
 

migrec

Member
Licensed User
Longtime User
If you want you can send me your project, I can fix it for you, I got nothing to do right now :D
 
Top