B4A Library AHNavigationDrawer - Native Google Navigation Drawer

corwin42 · Aug 1, 2013

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 · Mar 4, 2014

socialnetis said:
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 · Apr 12, 2014

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 · Apr 14, 2014

Inman said:
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 · May 7, 2014

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

B4X:

...
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 · May 8, 2014

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

B4X:

... 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 · May 8, 2014

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 · May 8, 2014

You can still use your Layout. Use

B4X:

NavDrawer.ContentPanel.LoadLayout()

brelto85 · May 8, 2014

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 · May 9, 2014

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

brelto85 · May 9, 2014

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:

B4X:

...
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 · May 11, 2014

brelto85 said:
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 · May 14, 2014

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

thedesolatesoul · May 14, 2014

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

corwin42 · May 15, 2014

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

B4X:

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

B4X:

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

corwin42 · May 15, 2014

thedesolatesoul said:
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.

B4X:

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 · May 15, 2014

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

B4X:

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

B4X:

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.

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

B4X:

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 · May 20, 2014

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 · May 26, 2014

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 · May 27, 2014

brelto85 said:
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 · Aug 25, 2014

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

B4A Library AHNavigationDrawer - Native Google Navigation Drawer

Attachments

Expert

Well-Known Member

Expert

Active Member

Expert

Active Member

Expert

Active Member

Expert

Active Member

Expert

Expert

Expert

Attachments

Expert

Expert

Expert

Expert

Active Member

Expert

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency