MSMaterialDrawer

thedesolatesoul

Expert
Licensed User
Longtime User
This is a port of library from here: https://github.com/mikepenz/MaterialDrawer
Its an amazing library by Mike Penz and it simplifies most of the Navigation Drawer setup and theming.

screenshot4_small.png

1zyj41w.jpg

2h5tgus.jpg


Library Setup
1. Copy the MSMaterialDrawer.jar and xml files to your AdditionalLibs folder.
2. This is also dependent on AppCompat v7 Support library, so copy that to AdditionalLibs or use AdditionalJar.
3. Make sure your android.jar in B4A > ConfigurePaths is set to point to android-22 at least.
4. There are 3 resource zip files. Unzip them in your desired area, and use #AdditionalRes to point to them.
5. If you want to use your own theme in styles.xml, you can also point to that with #AdditionalRes.
6. Depending on how you want to use it, (for e.g. with AppCompat Toolbar) you can set #Extends: with extending to ActionbarActivity. You can also specify the theme in the manifest.
7. If you want to use Iconics (Icon fonts), you also need to copy the font files in your files directory in a folder called fonts/ (lowercase).

Library Usage

Creating a simple drawer
Making a simple drawer is amazingly easy. There are two drawer objects:
- MaterialDrawerBuilder: Used to set all the params and build the drawer
- MaterialDrawer: This is the result when you build the drawer from the MaterialDrawerBuilder.

B4X:
Dim MDB As MSMaterialDrawerBuilder
Dim MD As MSMaterialDrawer

MDB.Initialize("MD")
MDB.withAccountHeader(MaterialHeaderResult)
MDB.AddPrimaryDrawerItem  ("Weather"  , p1.Drawable ,Null ,"99+" ,True,1, "Shows the weather")
MDB.AddPrimaryDrawerItem  ("Insanity" , p2.Drawable ,Null ,"2"   ,True,2, "")
MDB.AddPrimaryDrawerItem  ("Awesome"  , p3.Drawable ,Null ,""    ,True,2, "")
MDB.AddSectionDrawerItem  ("Section"  ,True)
MDB.AddSecondaryDrawerItem("Settings" ,s1.Drawable ,Null ,""    ,True ,3)
MDB.AddSecondaryDrawerItem("Help"     ,s2.Drawable ,Null ,""    ,True ,4)
MDB.AddSecondaryDrawerItem("Donate"   ,s3.Drawable ,Null ,""    ,False,5)
MDB.AddSecondaryDrawerItem("Yo"       ,Null        ,Null ,""    ,False,6)

MD = MDB.Build

There are many other options like actionbar/toolbar/statusbar options. Customising the header/footer.
The theming and color can only be changed via styles.xml.

Events
The drawer can raise the following events:
- Closed
- Opened
- ItemClick
- ItemLongClick

In order to know which item was clicked/longclicked you need to assign them an 'identifier' when adding to the drawer, so you can check it later in the click event.

Theming the Drawer
The main way to customize the looks of the drawer is via a theme.
The theme is applied on the activity, and the drawer inherits its properties from that theme.
The library already comes with the following built-in themes that you can set. These built-in themes all depend on the AppCompat library and resources, so make sure you have those linked and copied as well.
  • MaterialDrawerTheme (extends Theme.AppCompat.NoActionBar)
  • MaterialDrawerTheme.TranslucentStatus
  • MaterialDrawerTheme.ActionBar (extends Theme.AppCompat)
  • MaterialDrawerTheme.ActionBar.TranslucentStatus
  • MaterialDrawerTheme.Light (extends Theme.AppCompat.Light.NoActionBar)
  • MaterialDrawerTheme.Light.TranslucentStatus
  • MaterialDrawerTheme.Light.ActionBar (extends Theme.AppCompat.Light)
  • MaterialDrawerTheme.Light.ActionBar.TranslucentStatus
  • MaterialDrawerTheme.Light.DarkToolbar (extends Theme.AppCompat.DarkActionBar) (disabled the ActionBar)
  • MaterialDrawerTheme.Light.DarkToolbar.TranslucentStatus
  • MaterialDrawerTheme.Light.DarkToolbar.ActionBar (extends Theme.AppCompat.DarkActionBar)
  • MaterialDrawerTheme.Light.DarkToolbar.ActionBar.TranslucentStatus

To further theme, you can either inherit from one of these themes and override the colors.
You can also create your own custom style, but be sure to add the style attributes requires by the Material Drawer. An example is available for this.


Using Icon Fonts
The library contains a class called MSIconicDrawable which is a port of this library: https://github.com/mikepenz/Android-Iconics

Basically it allows you to use an Icon Font as a drawable.
What is the advantage of this?
- You cant tint/color the drawable by code which is insanely cool.
- They scale well, and you can set the size according to your needs.
- The ttf files are generally small enough, so you can pack a large number of icons into a manageable file.

Currently there is support for font-awesome and google-material-icons fonts. Others can be added (but missing some features).

How to use:
You must copy the font ttf file in your projects Files/fonts/<fontname>
Here is a link to the fonts used in the project. Download fonts
Then in code:
B4X:
Dim s2 As MSIconicDrawable
s2.Initialize("gmd_help")    'Load a google material design icon
s2.Color = 0xffff4081         'Change the color of icon
Dim s3 As MSIconicDrawable
s3.Initialize("faw_google_wallet") 'Load a font awesome icon
s3.Color = 0xffff4081                 'Change the icon color

'List all icons available in a font
Log(s2.ListDrawables("gmd")) 'List Google material design icons
Log(s2.ListDrawables("faw"))  'List Font awesome icons

'Use the Drawable as
button.Background = s2.Drawable

Demo apk + Source: See here

More information about the icon fonts:
http://fontawesome.io/icons/
http://google.github.io/material-design-icons/
 
Last edited:

thedesolatesoul

Expert
Licensed User
Longtime User
Objects:______________________

Drawer:
  • MSMaterialDrawerBuilder
  • MSMaterialDrawer
MSMaterialDrawerBuilder
Events:

  • Closed
  • ItemClick (Position as Int , Identifier as Int )
  • ItemLongClick (Position as Int , Identifier as Int )
  • Opened
Methods:
  • AddDividerItem As MSMaterialDrawerBuilder
  • AddPrimaryDrawerItem (name As String, icon As Drawable, selectedIcon As Drawable, badge As String, enabled As Boolean, identifier As Int, description As String) As MSMaterialDrawerBuilder
  • AddSecondaryDrawerItem (name As String, icon As Drawable, selectedIcon As Drawable, badge As String, enabled As Boolean, identifier As Int) As MSMaterialDrawerBuilder
  • AddSectionDrawerItem (name As String, divider As Boolean) As MSMaterialDrawerBuilder
  • Build As MSMaterialDrawer
  • Initialize (eventName As String)
  • IsInitialized As Boolean
  • withAccountHeader (accountHeader As Result) As MSMaterialDrawerBuilder
  • withActionbarToggle (toggle As Boolean) As MSMaterialDrawerBuilder
  • withActionbarToggleAnimated (actionBarDrawerToggleAnimated As Boolean) As MSMaterialDrawerBuilder
  • withCloseOnClick (closeOnClick As Boolean) As MSMaterialDrawerBuilder
  • withDrawerGravity (gravity As Int) As MSMaterialDrawerBuilder
  • withDrawerWidthDp (drawerWidthDp As Int) As MSMaterialDrawerBuilder
  • withFooter (footerView As View, width As Int, height As Int) As MSMaterialDrawerBuilder
  • withHeader (headerView As View, width As Int, height As Int) As MSMaterialDrawerBuilder
  • withHeaderClickable (headerClickable As Boolean) As MSMaterialDrawerBuilder
  • withHeaderDivider (enable As Boolean) As MSMaterialDrawerBuilder
  • withSelectedItem (Position As Int) As MSMaterialDrawerBuilder
  • withToolbar (toolbar As Toolbar) As MSMaterialDrawerBuilder
  • withTransluscentStatusbar (translucentStatusBar As Boolean) As MSMaterialDrawerBuilder
MSMaterialDrawer
Methods:

  • CloseDrawer
  • GetFooter As View
  • GetHeader As View
  • IsDrawerOpen As Boolean
  • IsInitialized As Boolean
  • OpenDrawer
  • getPositionFromIdentifier (identifier As Int) As Int
  • updateBadge (position As Int, badge As String)
  • updateIcon (position As Int, icon As Drawable)
  • updateName (position As Int, name As String)
Properties:
  • Selection As Int
  • SelectionByIdentifier As Int [write only]

Profiles:
  • MSAccountHeaderBuilder
  • MSProfile
MSAccountHeaderBuilder
Events:

  • ProfileChanged (Profile as MSProfile As )
  • ProfileClicked (Profile as MSProfile As )
Methods:
  • Initialize (eventName As String)
  • IsInitialized As Boolean
  • addProfiles (profiles() As IProfile) As MSAccountHeaderBuilder
  • build As Result
  • withAccountHeader (accountHeader As View) As MSAccountHeaderBuilder
  • withAlternativeProfileHeaderSwitching (alternativeProfileHeaderSwitching As Boolean) As MSAccountHeaderBuilder
  • withCompactStyle (compactStyle As Boolean) As MSAccountHeaderBuilder
  • withDrawer (drawer As Result) As MSAccountHeaderBuilder
  • withHeaderBackground (headerBackground As Drawable) As MSAccountHeaderBuilder
  • withHeaderBackgroundScaleType (headerBackgroundScaleType As ScaleType) As MSAccountHeaderBuilder
  • withHeightDp (heightDp As Int) As MSAccountHeaderBuilder
  • withOnAccountHeaderListener (onAccountHeaderListener As OnAccountHeaderListener) As MSAccountHeaderBuilder
  • withOnAccountHeaderSelectionViewClickListener (onAccountHeaderSelectionViewClickListener As OnAccountHeaderSelectionViewClickListener) As MSAccountHeaderBuilder
  • withProfile (profile As IProfile) As MSAccountHeaderBuilder
  • withProfileImagesClickable (profileImagesClickable As Boolean) As MSAccountHeaderBuilder
  • withProfileImagesVisible (profileImagesVisible As Boolean) As MSAccountHeaderBuilder
  • withProfiles (profiles As ArrayList) As MSAccountHeaderBuilder
  • withSelectionFirstLine (selectionFirstLine As String) As MSAccountHeaderBuilder
  • withSelectionFistLineShown (selectionFirstLineShown As Boolean) As MSAccountHeaderBuilder
  • withSelectionListEnabled (selectionListEnabled As Boolean) As MSAccountHeaderBuilder
  • withSelectionListEnabledForSingleProfile (selectionListEnabledForSingleProfile As Boolean) As MSAccountHeaderBuilder
  • withSelectionSecondLine (selectionSecondLine As String) As MSAccountHeaderBuilder
  • withSelectionSecondLineShown (selectionSecondLineShown As Boolean) As MSAccountHeaderBuilder
  • withTextColor (textColor As Int) As MSAccountHeaderBuilder
  • withThreeSmallProfileImages (threeSmallProfileImages As Boolean) As MSAccountHeaderBuilder
  • withTranslucentStatusBar (translucentStatusBar As Boolean) As MSAccountHeaderBuilder
MSProfile
Methods:

  • isSelectable As Boolean
  • setSelectable (selectable As Boolean) As MSProfile
  • withEmail (email As String) As MSProfile
  • withIcon (icon As Drawable) As MSProfile
  • withIdentifier (identifier As Int) As MSProfile
  • withName (name As String) As MSProfile
  • withSelectable (selectable As Boolean) As MSProfile

Properties:
  • Email As String
  • Icon As Drawable
  • IconUri As Uri [read only]
  • Identifier As Int
  • Name As String
DrawerItems:
  • MSPrimaryDrawerItem
  • MSSecondaryDrawerItem
  • MSSectionedDrawerItem
  • MSDividerDrawerItem
MSPrimaryDrawerItem
Methods:

  • Initialize
  • IsInitialized As Boolean
  • isEnabled As Boolean
Properties:
  • Badge As String
  • Description As String
  • Enabled As Boolean [write only]
  • Icon As Drawable
  • Identifier As Int
  • Name As String
  • Tag As Object
  • Type As String [read only]
MSSecondaryDrawerItem
Methods:

  • Initialize
  • IsInitialized As Boolean
  • isEnabled As Boolean
Properties:
  • Badge As String
  • Enabled As Boolean [write only]
  • Icon As Drawable
  • Identifier As Int
  • Name As String
  • Tag As Object
  • Type As String [read only]

IconFonts:
  • MSIconicDrawable
MSIconicDrawable
Methods:

  • Initialize (icon As String) As Drawable
  • ListDrawables (typeface As String) As List
  • actionBarSize
  • paddingDp (iconPadding As Int)
  • sizeDp (size As Int)
Properties:
  • Alpha As Int
  • BackgroundColor As Int [write only]
  • Color As Int [write only]
  • Drawable As Drawable [read only]
 
Last edited:

thedesolatesoul

Expert
Licensed User
Longtime User
Frequently Asked Questions_________________

Q1. Where can when can I download this library?
A1. See Post 4.
Q2. Can you add toggle/switch buttons in the drawer?
A2. Yes, this is not implemented. Convince me to do it with some incentive.
Q3. The github source has a lot more features, has been updated, when will you update the library?
A3. I wont update it unless there is a good reason to.
Q4. Can I have the source?
A4. Send me a PM and I will need to link you to the GitLab Repo.

Q5. I see errors like this:
B4X:
C:\Users\Giuseppe\Desktop\Extra\lib\res\values-v21\styles.xml:8: error: Error: No resource found that matches the given name: attr 'android:colorAccent'.
A5. Make sure in B4A > Configure paths > android.jar is pointing towards the android-22 or later jar.
Make sure you have the appcompat support libraries referenced (by copying to AdditionalLibs or by using AdditionalJar). (from: C:\android-sdk\extras\android\support\v7\appcompat\libs)

Q6. I initialized the MSIconicDrawable, but I dont see any drawable or icons when i run the app?
A6. Make sure you actually copied and added the font files in the Files directory of the project. These must be under Files/fonts/ directory with the fonts being in lowecase.

List of Files, Examples and Demos
Demos and Examples:
Main demo
Theming
Using with AppCompat/Toolbar
Custom Header

Files:
MSMaterialDrawer/AdditionalResources/appcompat.zip
MSMaterialDrawer/AdditionalResources/md-app.zip
MSMaterialDrawer/AdditionalResources/md-lib.zip
MSMaterialDrawer/B4A Samples/AppCompatDrawer
MSMaterialDrawer/B4A Samples/MSMaterialDrawerSample.zip
MSMaterialDrawer/Demo/AppCompatDrawer.apk
MSMaterialDrawer/Demo/MSMaterialDrawer.apk
MSMaterialDrawer/Demo/MSMaterialDrawerCustom.apk
MSMaterialDrawer/Library/MSMaterialDrawer.zip

Demo thread: https://www.b4x.com/android/forum/threads/msmaterialdrawer-build-navigation-drawers-fast.52972/
 
Last edited:

thedesolatesoul

Expert
Licensed User
Longtime User
Current Status
Current Version:
0.93
What is not implemented:
  • Having toggles and switches in the drawer
  • Using MSPrimaryDrawerItem, MSSecondaryDrawerItem (they exist as objects but the builder does not yet accept them as arguments) mainly due to duplication and inheritance

Changelog:
0.93:
Added _Slide event.
Added withDisplayUnderToolbar method.
Updated to the latest Repo code.

Known Bugs:
None, although im shaky on the header click and AccountBuilder

Download and licence
Before you download make sure you read every single line in the above posts!
You should not re-distribute any of these files unless compiled to apk.
The files are too big for the forum so need to be downloaded off a link.
Download here Donate here
 
Last edited:

DonManfred

Expert
Licensed User
Longtime User
#AdditionalRes: C:\Users\Giuseppe\Desktop\Extra\appcompat\res
change it to
B4X:
#AdditionalRes: C:\Users\Giuseppe\Desktop\Extra\appcompat\res, android.support.v7.appcompat
like described in the AppCompat tutorials.

And maybe you are missing this line?
B4X:
#AdditionalRes: E:\Android\android-sdk\extras\android\support\v7\appcompat\res, android.support.v7.appcompat
 

thedesolatesoul

Expert
Licensed User
Longtime User
My application start so:
I got this error

Can you help me? I miss something?
Please see Q5 of the Frequently asked questions. (updated)

Hi.Thank you DonMantred this library can be best library in material scope.
I get error when execute your example
What's problem?

sample 1



sample 2
Please post logs as text (in code/spoiler tags) so I can copy/paste into google.
I've seen this before, i cant remember how i fixed it. It is not an issue with the sample or code.
 

thedesolatesoul

Expert
Licensed User
Longtime User
I've got the same problem @thedesolatesoul, there is a report:
Thank you, your bug report helped me. I have uploaded a fix to the same link, please try it again.
I had a hardcoded resource value in the R.java, which is why it always worked for me and not for others.
 

omidaghakhani1368

Well-Known Member
Licensed User
Longtime User
Please see Q5 of the Frequently asked questions. (updated)


Please post logs as text (in code/spoiler tags) so I can copy/paste into google.
I've seen this before, i cant remember how i fixed it. It is not an issue with the sample or code.
Sorry
 

Peter Simpson

Expert
Licensed User
Longtime User
This is great stuff @thedesolatesoul, well one is :).
I got MSMaterialDrawer working 1st time out with no issues whatsoever, what a great drawer. But app AppCompatToolbar1, well that was another matter completely. Anyway I've deleted AppCompatToolbar1 now as I just could not get it to run. The most annoying things was there was no error log messages, the app just starts and crashes straight away with only this in the log screen.
B4X:
Installing file.
PackageAdded: package:de.amberhome.appcompat.toolbarexample1
I tried in both Debug modes and I'm using android-22\android.jar. MSMaterialDrawer is truly awesome though, I'm definitely going to use it, cheers...
 
Last edited:

wes58

Active Member
Licensed User
Longtime User
This is great stuff @thedesolatesoul, well one is :).
I got MSMaterialDrawer working 1st time out with no issues whatsoever, what a great drawer. But app AppCompatToolbar1, well that was another matter completely. Anyway I've deleted AppCompatToolbar1 now as I just could not get it to run. The most annoying things was there was no error log messages, the app just starts and crashes straight away with only this in the log screen.
B4X:
Installing file.
PackageAdded: package:de.amberhome.appcompat.toolbarexample1
I tried in both Debug modes and I'm using android-22\android.jar. MSMaterialDrawer is truly awesome though, I'm definitely going to use it, cheers...
If it crashes you have to check themes.xml file in project resource/values/ folder and change it as shown below. After that it should be working fine.
B4X:
change line:
        <item name="android:windowNoTitle">true</item>
 to:
        <item name="windowNoTitle">true</item>
 

bluedude

Well-Known Member
Licensed User
Longtime User
Awesome. However, I think I found a problem in combination with the appcompat toolbar.

I get this error when combining both:

java.lang.IllegalStateException: This Activity already has an action bar supplied by the window decor. Do not request Window.FEATURE_ACTION_BAR and set windowActionBar to false in your theme to
use a Toolbar instead.

Any suggestions?
 

thedesolatesoul

Expert
Licensed User
Longtime User
I have compiled an ran it with API21 and support library 21.0.3
I am going to update and see how it goes (but lets all take a moment to thank Google for their crappy appcompat support).
EDIT1: Still works as-is with API21. Will now try with updated appcompat-support lib.

EDIT2: Updated appcompat support lib, now fails with:
B4X:
java.lang.NoSuchFieldError: android.support.v7.appcompat.R$styleable.Theme_windowNoTitle
but only in unfiltered logs.

EDIT3: I was pointing to the wrong res files (had 2 SDKs installed in different drives). That solved the issue.
The second thing I fixed in the theme was from android:windowNoTitle to just windowNoTitle.
 
Last edited:

Peter Simpson

Expert
Licensed User
Longtime User
@thedesolatesoul I tried AppCompatToolbar1 again this morning (I took it out of the recycle bin) and just like last night it didn't work on my test S4. I then decided to swap to my N5 and bingo, it worked first time. I then uninstalled the app from my S4, I then used clean master and used ccleaner and then I did a Windows (restarted the S4 phone). I then reinstalled the app and it worked fine. Nothing had changed from last night except for the cleans and restart on the S4.

Thank you Google for the SL 22.1 update ;)
 
Top