B4A Library MSMaterialMenu - Animating icons

thedesolatesoul · Sep 15, 2014

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

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

Ciclope3160 · Jan 9, 2015

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 · Jan 9, 2015

Ciclope3160 said:
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 · Jan 9, 2015

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:

Peter Simpson · Jan 9, 2015

Ciclope3160 said:
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

So I take it that you want the chosen menu option to stay selected even when the menu is closed. Why would you need it to do that?
The menu isn't designed to do that.

thedesolatesoul · Jan 9, 2015

Ok, I see what you mean.
You want the Listview to show the selection.
It is not part of the MaterialMenu, you will need to use a different listview like the mListview library in the SlidingMenu.

Ciclope3160 · Jan 10, 2015

Thanks, I will try to do it.

alexwekell · Jan 20, 2015

Anyone had any luck getting this to work with Lollipop?

thedesolatesoul · Jan 20, 2015

alexwekell said:
Anyone had any luck getting this to work with Lollipop?

Does it not work with Lollipop?
I believe Peter had got it working and also posted an example in this thread.

Peter Simpson · Jan 20, 2015

This works perfectly fine in Lollipop @alexwekell, what appears to be the problem?

alexwekell · Jan 20, 2015

Peter Simpson said:
This works perfectly fine in Lollipop @alexwekell, what appears to be the problem?

I can't actually open the menu, I try pressing the nav drawer icon and nothing appears to happen on my OPO

thedesolatesoul · Jan 20, 2015

alexwekell said:
I can't actually open the menu, I try pressing the nav drawer icon and nothing appears to happen on my OPO

See this post by Peter. Its something they changed in the Actionbar in 5.

migrec · Mar 4, 2015

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?

Peter Simpson · Mar 5, 2015

@migrec see my post here https://www.b4x.com/android/forum/threads/msmaterialmenu-animating-icons.44735/page-2#post-299013

migrec · Mar 5, 2015

@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?

thedesolatesoul · Mar 5, 2015

migrec said:
@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?

It is on one of the versions I posted. If its not the first post it might be in this one: https://www.b4x.com/android/forum/attachments/msmaterialmenu-zip.29342/

I know this thread is completely disorganised. As is my library.

migrec · Mar 5, 2015

Now it is working perfectly, thanks @Peter Simpson & @thedesolatesoul

SCIS · Mar 5, 2015

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 · Mar 5, 2015

If you want you can send me your project, I can fix it for you, I got nothing to do right now

thedesolatesoul · Mar 5, 2015

Good idea, also without any crash logs I cannot do anything.

SCIS · Mar 5, 2015

If you don't mind.. It's quite a big project we've been working on for school so I only included the activity that's going to include the menu.
Here's the link to the project (filesize was too big): https://www.dropbox.com/s/omzbumq7ea59pj6/StuTrack-Home.zip?dl=0
Thanks for you help in advance.

B4A Library MSMaterialMenu - Animating icons

Attachments

Member

Expert

Member

Expert

Expert

Member

Member

Expert

Expert

Member

Expert

Member

Expert

Member

Expert

Member

Active Member

Member

Expert

Active Member

Similar Threads

Privacy & Transparency

Privacy & Transparency