B4A Library AHNavigationDrawer - Native Google Navigation Drawer

This is a wrapper library for the native NavigationDrawer introduced by Google at Google I/O 2013.

It contains two objects:

AHNavigationDrawer - This implements the Navigation Drawer
SlideDrawable - This is a special type of drawable used to create an indicator for the NavigationDrawer
MaterialMenuDrawable - This is a drawable which can be used to create the Material Design burger->arrow->cross->check animation.

This Library uses the android-support-v4.jar library which is part of the Android SDK. You have to install it with the Android SDK Manager. In the SDK Manager please add/download the "Extras/Android Support" package. Then you will need to copy the android-support-v4.jar file from <SDK root folder>\extras\android\support\v4 to your B4A custom libs folder!
You need at least the API17 version of the library!

The MaterialMenuDrawable uses the NineOldAndroid animation library. Download the nineoldandroids-2.4.0.jar from here and place it in your custom libs folder (you don't need an xml file for it)

The example uses the mListView library by icefairy333 and the reflection library by agraham.

Changelog:
V1.0:
- Initial version

V1.1:
WARNING: Signature of the event subs have changed!
- Added support for secondary drawer
- Ability to change drawer edge touch sensitivity size

V1.20:
- Fixed the "glitch" while opening the drawer (Sometimes the drawer got "stuck" while swiping open)

V1.21:
- Fixed bug when using NavDrawer.ContentPanel.LoadLayout()

V1.30:
- Some internal changes which should make it compatible with ULV (Ultimate ListView)
- New MaterialMenuDrawable object for Material Design Burger/Arrow/Cross/Check animation
Attention: The MaterialMenuDrawable needs the NineOldAndroids library. See above.

V1.40:
- changed typo for nineoldandroids jar file (Name change: nineoldandroid-2.4.0.jar to nineoldandroids-2.4.0.jar). If you update from older version just change nineoldandroid-2.4.0.jar in your CustomLibs folder to nineoldandroids-2.4.0.jar

 

[corwin42]

Hi, If I add a Listview to the activity, and then add the navigation drawer, I can't open the navigation drawer with the swipe gesture.
If I first add the navigation drawer and then the listview to the activity, I can't scroll the listview, but the swipe gesture to open the nav drawer does work. It seems that there is a conflict in the touch events, is there any workarround?

EDIT: The solution is to put the listview in the contentPanel of the Navigation Drawer, now everything works!

Yes. Everything you have added to the activity before using the NavigationDrawer now should be added to the ContentPanel. The ContentPanel "replaces" the Activity if you use NavigationDrawer.

 

[Inman]

Will it be possible to implement a "semi-open" state for the NavDrawer? I would like to display a small visible edge of the drawer (like 30 or 40dip) so that the user will know there is a drawer to slide out. This is particularly useful when the drawer is on the right side as such drawers don't have the sliding icon indicator.

There is a discussion at StackOverflow on this topic:
http://stackoverflow.com/questions/6259706/slidingdrawer-semi-opened-on-start

 

[corwin42]

Will it be possible to implement a "semi-open" state for the NavDrawer? I would like to display a small visible edge of the drawer (like 30 or 40dip) so that the user will know there is a drawer to slide out. This is particularly useful when the drawer is on the right side as such drawers don't have the sliding icon indicator.

There is a discussion at StackOverflow on this topic:
http://stackoverflow.com/questions/6259706/slidingdrawer-semi-opened-on-start

In the StackOverflow discussion they talk about the deprecated SlidingDrawer class. AHNavigationDrawer uses the newer NavigationDrawer class so the stackoverflow solution won't work here.

 

[brelto85]

I've added the AHNavigationDrawer into my app
in activity_create i have the follow code:

...
Activity.LoadLayout("LayoutMain")
mNavigationDrawer.Initialize("Drivi - Drive Safely", "logo.png", True, Colors.ARGB(127, 54, 180, 215), "Light", True, True, True, wOverflowItems, "Drawer", Activity, Me)
...

All the views added with the designer doesn't work
I've a button added with designer and the click event not fired

if i delete the NavigationDrawer the click event works fine
where is the problem?

 

[corwin42]

I've added the AHNavigationDrawer into my app
in activity_create i have the follow code:

...
Activity.LoadLayout("LayoutMain")
mNavigationDrawer.Initialize("Drivi - Drive Safely", "logo.png", True, Colors.ARGB(127, 54, 180, 215), "Light", True, True, True, wOverflowItems, "Drawer", Activity, Me)
...

All the views added with the designer doesn't work
I've a button added with designer and the click event not fired

if i delete the NavigationDrawer the click event works fine
where is the problem?

Don't load your layout to the activity.

Add the NavigationDrawer object to the activity.
Load your Layout to the NavigationDrawer.ContentPanel.

See the example of how to add the views correctly.

 

[brelto85]

So, i don't need to use Activity.LoadLayout("LayoutMain")
I must add each views programmatically using the ContentPanel?
With complex views, is not very convenient

In the example you use this:

NavDrawer.ContentPanel.AddView(Pages(i), ...) where the Pages(i) is a list of panels

 

[corwin42]

You can still use your Layout. Use

NavDrawer.ContentPanel.LoadLayout()

 

[brelto85]

Perfect
I add that after the Initialize method
It works but some views are positioned in a incorrect position in relation with the Designer
There are some rules for position?

 

[corwin42]

Can you explain this in more detail or post a screenshot?
Normally it should be no problem.

 

[brelto85]

Now i don't have my pc with me
I can try to explained in more detail

In the designer i've added a ImageView and i positioned it in center screen

Following your suggestions, i write this code:

...
mNavigationDrawer.Initialize("Drivi - Drive Safely", "logo.png", True, Colors.ARGB(127, 54, 180, 215), "Light", True, True, True, wOverflowItems, "Drawer", Activity, Me)
mNavigationDrawer.NavDrawer.ContentPanel.LoadLayout("LayoutMain")
...

when start the application, the ImageView control is positioned in a 0,0 axis

 

[corwin42]

when start the application, the ImageView control is positioned in a 0,0 axis

I see.

Download Version 1.21 in the first post of this thread. This should fix the problem.

 

[thedesolatesoul]

Markus,
Could you please add setScrimColor?
Also, what is the shadow drawable?
Thanks.

 

[thedesolatesoul]

Also, do you know why the NavDrawer is preventing listview scrolling?
Attached is a small example of the problem I see.

 

[corwin42]

Also, do you know why the NavDrawer is preventing listview scrolling?
Attached is a small example of the problem I see.

Don't add your content to the Activity or the Panel that contains the NavDrawer. Add your content to the NavDrawer.ContentPanel like

NavDrawer.ContentPanel.AddView(pContent, 0 ,0, 100%x, 100%y)

You can even add the NavDrawer directly to the Activity so you don't need the pDrawer Panel

NavDrawer.Initialize("NavDrawer", Activity, 240dip)

 

[corwin42]

Could you please add setScrimColor?
Also, what is the shadow drawable?
Thanks.

Will add it to the next version. Until then you can use it with reflection library.

Sub SetScrimColor(Nav As AHNavigationDrawer, Color As Int)
    Dim r As Reflector
    r.Target = Nav
    r.Target = r.GetField("mNavDrawer")
    r.RunMethod4("setScrimColor", Array As Object(Color), Array As String("java.lang.int"))   
End Sub

The shadow drawable is for a small shadow right to the drawer.

 

[thedesolatesoul]

Don't add your content to the Activity or the Panel that contains the NavDrawer. Add your content to the NavDrawer.ContentPanel like

NavDrawer.ContentPanel.AddView(pContent, 0 ,0, 100%x, 100%y)

You can even add the NavDrawer directly to the Activity so you don't need the pDrawer Panel

NavDrawer.Initialize("NavDrawer", Activity, 240dip)

Thank you
It took a while for me to understand in the hierarchy of views, but now I understand the NavDrawer actually attaches inside a panel and takes its gestures. It works now.

Will add it to the next version. Until then you can use it with reflection library.

Sub SetScrimColor(Nav As AHNavigationDrawer, Color As Int)
    Dim r As Reflector
    r.Target = Nav
    r.Target = r.GetField("mNavDrawer")
    r.RunMethod4("setScrimColor", Array As Object(Color), Array As String("java.lang.int"))  
End Sub

The shadow drawable is for a small shadow right to the drawer.

Thank you again
It is working as expected. I didnt know reflection could access private fields as well.

 

[thedesolatesoul]

Just thought to link to this demo using the navigationdrawer slide event to add blurring and descend effects:
http://www.b4x.com/android/forum/threads/blur-effect-demo.40920/

 

[brelto85]

I notice that the views included into the NavDrawer.ContentPanel, doesn't saved from StateManager library
How to handle the state of these views

 

[corwin42]

I notice that the views included into the NavDrawer.ContentPanel, doesn't saved from StateManager library
How to handle the state of these views

You have to handle the state yourself or you can expand statemanager class that it can handle the contentpanel of the NavDrawer.

 

[asales]

How I can set the width of secondary drawer to show like this image: