Android Question DesignSupport NavigationDrawer Help

Anser

Well-Known Member
Licensed User
Longtime User
Hi,

I am trying to use the NaviagationDrawer by Corwin.

I would like to get done the following using the NavigationDrawer

  1. How to put a Section header ?
  2. How to put a Second line of text on the PrimaryDrawer Item ?

Here is the screen snapshot of what I am asking done on the MSMaterial Drawer

MsMaterialDrawer.png



How do I get the same done using the NavigationDrawer included in the DesignSupport Lib by our friend Corwin.

Any help will be appreciated

Sample code used on MSMaterialDrawer
B4X:
'The following code creates a menu with texts on 2 different lines
' For eg "Weather" on the 1st line and "Shows the weather" on the 2nd line
MDB.AddPrimaryDrawerItem  ("Weather"  , p1.Drawable ,Null ,"" ,True,1, "Shows the weather")

'The following code would create a section header with heading "Section"
'This will draw a divider line with a heading
MDB.AddSectionDrawerItem  ("Section"  ,True)

To show a section header using DesignSupport NavigationDrawer, I tried the following code. Unfortunately, only the Icon is avoided and the Section header is not left aligned, it is shown just like a menu item. I am sure that there should be some other trick to get this done using NavigationDrawer.

B4X:
#Region  Activity Attributes
   #FullScreen: False
   #IncludeTitle: True
#End Region
#Extends: android.support.v7.app.AppCompatActivity

Sub Globals
   'These global variables will be redeclared each time the activity is created.
   'These variables can only be accessed from this module.

   Private ActionBar As ACToolBarDark
   Private NavDrawer As DSNavigationDrawer

End Sub

Sub Activity_Create(FirstTime As Boolean)

   NavDrawer.Initialize2("NavDrawer", Activity, NavDrawer.DefaultDrawerWidth, NavDrawer.GRAVITY_START)


  Activity.LoadLayout("GenScrWithActionBar")

   ActionBar.SetAsActionBar
   ActionBar.Title = "Anser"
   ActionBar.InitMenuListener

   BuildNavDrawer

End Sub

Sub BuildNavDrawer
  NavDrawer.InitDrawerToggle
  NavDrawer.NavigationView.LoadLayout( "NavHeaderLayout", NavDrawer.DefaultHeaderHeight)

  'How do I add a second line to the menu here. ie just below "Weather" another line "Shows weather"
  NavDrawer.NavigationView.Menu.AddWithGroup2(1, 1, 1, "Weather", IconHome.Drawable).Checked = True
  NavDrawer.NavigationView.Menu.SetGroupCheckable(1, True, True)

  'How to draw a section header ?
  NavDrawer.NavigationView.Menu.AddWithGroup2(2, 5, 5, "Section 1", Null)
  NavDrawer.NavigationView.Menu.AddWithGroup2(2, 6, 6, "Menu 2 under Section", IconVehDtls.Drawable)
  NavDrawer.NavigationView.Menu.SetGroupCheckable(2, True, True)
End Sub

Sub Activity_KeyPress (KeyCode As Int) As Boolean 'Return True to consume the event
   If KeyCode = KeyCodes.KEYCODE_BACK Then
     Log("Close the drawers on back key press")
     If NavDrawer.IsDrawerOpen2(NavDrawer.GRAVITY_START) Or NavDrawer.IsDrawerOpen2(NavDrawer.GRAVITY_END) Then
       NavDrawer.CloseDrawers
      Return True
     End If
   End If
 
   Return False
End Sub

'Event sub that handles the case if a navigation item is selected.
Sub NavDrawer_NavigationItemSelected (MenuItem As ACMenuItem, DrawerGravity As Int)
   LogColor("NavItem selected: " & MenuItem.Title, Colors.Green)

   ToastMessageShow(MenuItem.Id,False)
 
   NavDrawer.NavigationView.CheckedItem = MenuItem.Id
 
   NavDrawer.CloseDrawer2(DrawerGravity)
End Sub

'Open or Close the drawer if the Toolbar HomeButton is clicked.
Sub ActionBar_NavigationItemClick
   If NavDrawer.IsDrawerOpen Then
     NavDrawer.CloseDrawer
   Else
     NavDrawer.OpenDrawer
   End If
End Sub

I could not find anything related to the above said requirement in the NavigationView Sample provided along with the DesignSupport Lib.

Any help will be appreciated.

Thanks & Regards

Anser
 
Last edited:

asales

Expert
Licensed User
Longtime User
How to draw a section header ?

B4X:
    Dim subMenu1 As ACSubMenu
subMenu1 = NavDrawer.NavigationView.Menu.AddSubMenu(3, 30, 30, "Section Header")
subMenu1.AddWithGroup2(3, 100, 100, "Sub Menu Item 1", xml.GetDrawable("ic_bookmark_black_24dp"))
subMenu1.AddWithGroup2(3, 101, 101, "Sub Menu Item 2", xml.GetDrawable("ic_bookmark_black_24dp"))
 
Upvote 0

Anser

Well-Known Member
Licensed User
Longtime User
Hi,

When I click on any of the Menu on the NavigationDrawer, I get the following error. Can anybody point me where I have gone wrong.

NavDrawer Slide: 1
NavDrawer opened
java.lang.NullPointerException: Attempt to invoke virtual method 'android.view.Menu android.support.design.widget.NavigationView.getMenu()' on a null object reference
at de.amberhome.objects.NavigationDrawerWrapper$1.onNavigationItemSelected(NavigationDrawerWrapper.java:114)
at android.support.design.widget.NavigationView$1.onMenuItemSelected(NavigationView.java:153)
at android.support.v7.view.menu.MenuBuilder.dispatchMenuItemSelected(MenuBuilder.java:810)
at android.support.v7.view.menu.SubMenuBuilder.dispatchMenuItemSelected(SubMenuBuilder.java:85)
at android.support.v7.view.menu.MenuItemImpl.invoke(MenuItemImpl.java:152)
at android.support.v7.view.menu.MenuBuilder.performItemAction(MenuBuilder.java:957)
at android.support.design.internal.NavigationMenuPresenter$1.onClick(NavigationMenuPresenter.java:328)
at android.view.View.performClick(View.java:5697)
at android.view.View$PerformClick.run(View.java:22534)
at android.os.Handler.handleCallback(Handler.java:739)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:158)
at android.app.ActivityThread.main(ActivityThread.java:7229)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1230)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1120)


I am using the code that I have given in the 1st post of this thread.

Regards
Anser
 
Last edited:
Upvote 0

Anser

Well-Known Member
Licensed User
Longtime User
I am not able to find a solution for the error that I reported in my previous post on this thread. Expecting help from someone who has already used DesignSupport NavigationDrawer.

Meanwhile, I would like to know how to get the following done using DesignSupport NavigationDrawer. Any help will be appreciated. The below given picture is self explanatory.

Screenshot_20160831-092719.png


Regards
Anser
 
Upvote 0

asales

Expert
Licensed User
Longtime User
Upvote 0

Anser

Well-Known Member
Licensed User
Longtime User
I had the same problem and I posted my solution in this post:
https://www.b4x.com/android/forum/t...al-design-components.58893/page-7#post-457701

You need to create a secondary drawer (invisible) to work.
Thank you. That trick resolved the issue and now it is working fine.

Any idea on how to resolve the requirements that I mentioned in the Post #1 and #4 on this thread

1. How to create a section without a header, just a separation line (Image available on Post #4)
2. How to show the 99+ like text on the extreme right side of the menu item (Image available on Post #4)
3. How to show a second line on the Menu Text ie the (Image available on Post #1)

Or is it so that it is not possible with this lib ?

Regards

Anser
 
Upvote 0

asales

Expert
Licensed User
Longtime User
1. How to create a section without a header, just a separation line (Image available on Post #4)
Create a new Group item with different ID:
NavDrawer.NavigationView.Menu.AddWithGroup2(4, 401, 401, "Menu in Group 4 with separator", xml.GetDrawable("ic_bookmark_black_24dp"))

2. How to show the 99+ like text on the extreme right side of the menu item (Image available on Post #4)
I don't know.

3. How to show a second line on the Menu Text ie the (Image available on Post #1)
I don't know.
 
Upvote 0

JordiCP

Expert
Licensed User
Longtime User
2. How to show the 99+ like text on the extreme right side of the menu item (Image available on Post #4)
A way to do this:
  • You need to get the ACMenuItem where you want the number.
  • Declare an ACFlatButton and assign it as the ACMenuitem ActionView (as it is done with the ACSwitch in the example)
  • Declare a counter and assign ACFlatButton.Text=myCounter&"+"
  • On the NavDrawer_NavigationItemSelected Sub, update that counter and refresh the button text
B4X:
Sub Globals
    '....
    Dim myACFlatButton As ACFlatButton
    Dim myCounter As Int=0
End Sub

Sub BuildNavDrawer
   '...
  Dim myActionViewItem As ACMenuItem
   myActionViewItem =NavDrawer.NavigationView.Menu.AddWithGroup2(1, 3, 3, "Test", xml.GetDrawable("ic_home_black_24dp"))

   myACFlatButton.Initialize("myACFlatButton")
   myACFlatButton.Gravity=Gravity.CENTER_VERTICAL+Gravity.RIGHT  'Result seems better
   myACFlatButton.Text=myCounter&"+"
   myActionViewItem.ActionView=myACFlatButton
   myActionViewItem.Checkable = False

   '...
End Sub
Sub myACFlatButton_Click
   myCounter=myCounter+1
   myACFlatButton.Text=myCounter&"+"
End Sub

Sub NavDrawer_NavigationItemSelected (MenuItem As ACMenuItem, DrawerGravity As Int)

   '...
   If MenuItem.Id=3 Then  '<-- "3" must correspond to the ItemId of the menu
     CallSubDelayed(Me,"myACFLatButton_Click")
     Return
   End If
   '...

End Sub




Now only (3) is missing an answer ;)
 
Upvote 0

Anser

Well-Known Member
Licensed User
Longtime User
Create a new Group item with different ID:
NavDrawer.NavigationView.Menu.AddWithGroup2(4, 401, 401, "Menu in Group 4 with separator", xml.GetDrawable("ic_bookmark_black_24dp"))

1. How to create a section without a header, just a separation line (Image available on Post #4)
2. How to show the 99+ like text on the extreme right side of the menu item (Image available on Post #4)
3. How to show a second line on the Menu Text ie the (Image available on Post #1)


Resolved issues no 1 and 2.
Now ONLY 3 is to be resolved
 
Last edited:
Upvote 0

corwin42

Expert
Licensed User
Longtime User
The only way to create a two lines item for a NavigationView is to use a CustomView (like the Switch or 99+ indicator mentioned above).

It is not directly supported by the library and it is not mentioned in the material design guidelines at all.
 
Upvote 0
Top