MSMaterialDrawer

BarryW · Jan 27, 2016

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

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/

Where is link for the library? Tnx...

johndb · Jan 27, 2016

BarryW said:
Where is link for the library? Tnx...

Have you read the postings of this thread? Read post #4

bermooda · Jan 28, 2016

Prosg said:
B4X:

Sub menuBurger_Opened Log("open") End Sub Sub menuBurger_ItemClick(Position As Int, Identifier As Int)

I don't have problem with _itemClick but _Opened have an error :

java.lang.Exception: Sub menuburger_opened signature does not match expected signature.

idea ?

just pass a parameter of type Object. like this:
Sub MD_Opened(p As Object)
...
End Sub

phukol · Jan 29, 2016

Hi there guys, i seem to have issues in showing the msicondrawable? im trying to run the example in MSMaterialDrawer example but all i get is this. No icon is shown? what could be the issue? Also is it possible if i just use a typeface for the drawable instead of using msiconic?

I already copied them under Files/fonts folders. The filename were fontawesome-webfont-4.3.0.ttf and google_material_design.ttf

bermooda · Jan 29, 2016

AFAIK you can not use just a typeface as drawable because it does not provide any drawable object by default and this is why you need to use MSIconic.
are you using SDK 23 or higher? and double check your additional resource pathes.

BarryW · Jan 30, 2016

Can we set the pressed and selected drawable? Tnx...

phukol · Jan 30, 2016

bermooda said:
AFAIK you can not use just a typeface as drawable because it does not provide any drawable object by default and this is why you need to use MSIconic.
are you using SDK 23 or higher? and double check your additional resource pathes.

Thank you. Yes i am using sdk 23 and the example included in MSMAterialDrawer is working. However when i try to follow my own example. its not working anymore. The icons are not showing.

Jut want to say that the icons will only show if i use Release or Release(Obfuscated). So far thats the only thing i did that worked. Can anyone confirm it also. Im using b4a 5.5

bermooda · Jan 30, 2016

phukol said:
Thank you. Yes i am using sdk 23 and the example included in MSMAterialDrawer is working. However when i try to follow my own example. its not working anymore. The icons are not showing. Jut want to say that the icons will only show if i use Release or Release(Obfuscated). So far thats the only thing i did that worked. Can anyone confirm it also. Im using b4a 5.5

i had this kind of problem with iconic fonts. creating a copy of original example fonts folder and pasting it inside your project's Files folder may solve the problem.
Yes, i'm using B4A 5.5 too and also when i was using Release, fonts were fine.

eSolution · Feb 4, 2016

@thedesolatesoul
How can I set an image as a background for the drawer instead of a color? I know that the color is sett up here: "material_drawer_background" but I have no idea how to make this load an image

Thank you

joneden · Feb 16, 2016

@@thedesolatesoul

I've tried to add some functionality to the jar where I could add my own ttf file (with icons from Icomoon). I wanted to then simply pass the character reference of the relevant icon. In my app I would have a lookup to give me a nice name for the icons. I managed to get the font changed over easily enough but am not good enough at java to add in a mechanism to do the character bit. So how much would you charge to add this functionality in, something like:
Dim icon As MSIconicDrawable
icon.Initialize("cic_f042")

cic would indicate that the customicons.ttf font should be used and the part after the underscore would correspond to the font code. Then ANY font file (well if it was renamed to customicons.ttf) could be used with this library...

Anyway, as said I'd be interested in knowing what you'd charge to modify for this purpose.

Regards

Jon

jazzzzzzz · Feb 22, 2016

how can i remove msmaterialdrawer from activity after starting it?

Chris Lee · Mar 4, 2016

phukol said:
Thank you. Yes i am using sdk 23 and the example included in MSMAterialDrawer is working. However when i try to follow my own example. its not working anymore. The icons are not showing.

Jut want to say that the icons will only show if i use Release or Release(Obfuscated). So far thats the only thing i did that worked. Can anyone confirm it also. Im using b4a 5.5

Using b4a 5.8, SDK 23 and I get the same. I'm using the MSMaterialDraw example and Icons only show in release compilation mode. I can live with this, since the icons are not fundamental to the debug process. Still would be nice to get em showing.

Chris Lee · Mar 12, 2016

Hi all, wondering if anyone can help with a small issue I'm having. I've been attempting to splice the MSMaterialDrawer project with the appcompat tutorials.
I've managed to do this, but I'm having some trouble with the material drawer ending up white and the appcompat example not displaying checkboxes, possibly due to mixing themes.

In the manifest I have:

SetApplicationAttribute(android:theme, "@style/MaterialDrawerTheme.ActionBar")

But I also have the following line to handle the appcompat theming:

SetApplicationAttribute(android:theme, "@style/MyAppTheme")

This theme file in the resources folder is:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyAppTheme" parent="Theme.AppCompat">
<item name="colorPrimary">#b70d1d</item>
<item name="colorPrimaryDark">#b70d1d</item>
<item name="colorAccent">#b70d1d</item>
</style>
</resources>

Everything runs fine, my demo project will display dark material colors with red accents as desired. However the draw itself which was previously dark, is now light. In the main activity the checkboxes don't display.

If I don't build the draw with:

MD = MDB.Build

Then the main activity will now display fine.

White background with appcompat theme added:

Main activity with missing checkboxes when drawer is enabled:

Without building drawer:

Chris Lee · Mar 14, 2016

OK, resolved these myself. Actually two issues. I was loading the main layout

Activity.LoadLayout("b4a4lay1")

After calling:

MD = MDB.Build

Which appears to remove the controls on the main form some reason.
By swapping these around, namely loading the main layout first, and then running MDB.build, it works fine.

As for the theme problem, I read around the subject a little more and found that I could use the custom theme provided in the resources.

In my case I altered

resource\md-app\res\values\styles.xml

Inside styles.xml I modified this section. The style name "CustomTheme" is important.

<style name="CustomTheme" parent="MaterialDrawerTheme.TranslucentStatus">

<item name="colorPrimary">#b70d1d</item>
<item name="colorPrimaryDark">#b70d1d</item>
<item name="colorAccent">#b70d1d</item>

Then I re-pointed to the custom style by going to the manifest and changing

SetApplicationAttribute(android:theme, "@style/MaterialDrawerTheme.ActionBar")

to

SetApplicationAttribute(android:theme, "@style/CustomTheme")

And removing the second style.

SetApplicationAttribute(android:theme, "@style/MyAppTheme")

This stuff is obvious now I understand it, just takes my brain a while.

Chris Lee · Mar 18, 2016

I like the use of the MSIconicDrawable, it takes the pain out of creating icons. Also I was looking at the material design actionbar tutorial by Corwin. That uses bitmaps and I was wondering if I could use the MSIconicDrawable. I found a nice example on the forum that does it and turned it into a function.

pubic Sub MSIconicDrawableToBitmap(Icon as MSIconicDrawable) as Bitmap

Dim jo as JavaObject = Icon.Drawable
Dim bmp as Bitmap = job. RunMethod("toBitmap",null)

Return bmp

End Sub

You need to include the JavaObject library.

Now when adding menu items in the Corwin tutorial you can do things like

Dim s1 as MSIconicDrawable : s1.Initialize("gmd_settings") : s1.Color = 0xFFFF0018

Activity.AddMenuItem3("Plus one", "Menu", MSIconicDrawableToBitmap(s1), True)

Which I thought was useful.

I just wish now that I could solve the problem of the icons not appearing, marked with a cross, when in debug mode. I have read everything several times and my font files are correctly copied to project/Files/fonts
Works fine in release mode. Got to be some reason for it but I can't figure it.

DonManfred · Mar 18, 2016

Chris Lee said:
Works fine in release mode. Got to be some reason for it but I can't figure it.

Have you tried using the following two commands in you main activity

B4X:

#DebuggerForceFullDeployment: true
#DebuggerForceStandardAssets: true

Chris Lee · Mar 18, 2016

DonManfred said:
Have you tried using the following two commands in you main activity

B4X:

#DebuggerForceFullDeployment: true #DebuggerForceStandardAssets: true

Thanks DonManfred, that fixed it. You are officially elevated to god like status! I can now make use of the icons whenever a bitmap it needed, this makes things a lot easier.

encolo · Mar 22, 2016

it is possibile to change the profile icon, if yes how. Help em

somed3v3loper · Mar 26, 2016

Hello thedesolatesole ,
Can you please check this thread ?
https://www.b4x.com/android/forum/threads/panel-height-issue-when-using-msmaterialdrawer.65082/

MarcoRome · Apr 3, 2016

Hi all
I have this picture ( Figure 2 ):

As you see i have icon on the left, i would like the central (as shown in figure 1):

This is my code:

B4X:

.....
Dim p1 As MSIconicDrawable : p1.Initialize("faw-sign-out"): p1.Color = Colors.ARGB(255, 255, 255, 255): p1.BackgroundColor = Colors.ARGB(255, 89,89,89 )
    Dim p2 As MSIconicDrawable : p2.Initialize("faw-comments-o"): p2.Color = Colors.ARGB(255, 255, 255, 255): p2.BackgroundColor = Colors.ARGB(255, 89,89,89 )
    Dim p3 As MSIconicDrawable : p3.Initialize("faw-users"):  p3.Color = Colors.ARGB(255, 255, 255, 255): p3.BackgroundColor = Colors.ARGB(255, 89,89,89 )
    Dim p4 As MSIconicDrawable : p4.Initialize("faw-newspaper-o"):  p4.Color = Colors.ARGB(255, 255, 255, 255): p4.BackgroundColor = Colors.ARGB(255, 89,89,89 )
    Dim p5 As MSIconicDrawable : p5.Initialize("faw-youtube-play"):  p5.Color = Colors.ARGB(255, 255, 255, 255): p5.BackgroundColor = Colors.ARGB(255, 89,89,89 )
    Dim p6 As MSIconicDrawable : p6.Initialize("faw-book"):  p6.Color = Colors.ARGB(255, 255, 255, 255): p6.BackgroundColor = Colors.ARGB(255, 89,89,89 )
    Dim p7 As MSIconicDrawable : p7.Initialize("faw-cogs"):  p7.Color = Colors.ARGB(255, 255, 255, 255): p7.BackgroundColor = Colors.ARGB(255, 89,89,89 )
    Dim p8 As MSIconicDrawable : p8.Initialize("faw-user-plus"): p8.Color = Colors.ARGB(255, 255, 255, 255): p8.BackgroundColor = Colors.ARGB(255, 89,89,89 )
.....

is there a way to centralize the same ??
Thank you
Marco

MSMaterialDrawer

Active Member

Active Member

Member

Active Member

Member

Active Member

Active Member

Member

Member

Active Member

Active Member

Member

Member

Member

Member

Expert

Member

Member

Well-Known Member

Expert