MSMaterialDrawer

MarcoRome · Jun 6, 2015

cbc551 said:
I have exactly the same problem. I've updated everything in sdk and copied the files but the issue isn't fixed. I've also updating to version 23 rc and tried with different versions of android-support library but I have not luck. I don't know what am I doing wrong

Which error do you have ?

Deleted member 30048 · Jun 6, 2015

MarcoRome said:
Which error do you have ?

This error

Deleted member 30048 · Jun 6, 2015

Well , I solved the issue using android support r22 and remove the line " <item name =" windowNoTitle "> true < / item> " of themes.xml .

thedesolatesoul · Jun 7, 2015

Overall there is some complex setup invovled. Re-read the docs until you get it right:
1. The SDK jar that B4A points to
2. The support-v7 jars that are either in your additionalibs or additionaljar.
3. The res files from the support libs
4. The res files from this libs (in my link)

I dont have time to fix everyones issues on this, if you cant get it right just keep reading the docs again and again.

Deleted member 30048 · Jun 8, 2015

thedesolatesoul said:
Overall there is some complex setup invovled. Re-read the docs until you get it right:
1. The SDK jar that B4A points to
2. The support-v7 jars that are either in your additionalibs or additionaljar.
3. The res files from the support libs
4. The res files from this libs (in my link)

I dont have time to fix everyones issues on this, if you cant get it right just keep reading the docs again and again.

Ok, I upgraded B4A to version 5.0, tried again and now it works. Maybe the problem was that I was using a beta version.

migrec · Jun 11, 2015

Can't get it working with the appcompat toolbar, I tried all of you themes and it only crashes at startup, any ideas?
I am trying to set a dark theme for the material drawer btw.

thedesolatesoul · Jun 11, 2015

There are too many dependencies and reasons for crash for me to be able to tell you what is wrong.
I am just going to say you have to make sure all the versions are concurrently at the same level, the best way is to update everything.
If you can get the crash log, that will be helpful.
Otherwise, one of these 4 things is wrong:
1. The SDK jar that B4A points to
2. The support-v7 jars that are either in your additionalibs or additionaljar.
3. The res files from the support libs
4. The res files from this libs (in my link)

migrec · Jun 11, 2015

Oh sorry,
1. It points to 22
2. the latest ones are in my addiotionalibs folder
3. paths are correct
screenshot over appcompat/material drawer/toolbar:

Crash log:

B4X:

** Activity (main) Create, isFirst = true **


** Activity (main) Resume **


** Activity (main) Pause, UserClosed = false **


java.lang.RuntimeException: Unable to start activity ComponentInfo{b4a.example/b4a.example.home}: java.lang.IllegalArgumentException: AppCompat does not support the current theme features
    at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:1967)
    at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:1992)
    at android.app.ActivityThread.access$600(ActivityThread.java:127)
    at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1158)
    at android.os.Handler.dispatchMessage(Handler.java:99)
    at android.os.Looper.loop(Looper.java:137)
    at android.app.ActivityThread.main(ActivityThread.java:4441)
    at java.lang.reflect.Method.invokeNative(Native Method)
    at java.lang.reflect.Method.invoke(Method.java:511)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:784)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:551)
    at dalvik.system.NativeStart.main(Native Method)


Caused by: java.lang.IllegalArgumentException: AppCompat does not support the current theme features
    at android.support.v7.app.AppCompatDelegateImplV7.ensureSubDecor(AppCompatDelegateImplV7.java:363)
    at android.support.v7.app.AppCompatDelegateImplV7.setContentView(AppCompatDelegateImplV7.java:237)
    at android.support.v7.app.AppCompatActivity.setContentView(AppCompatActivity.java:111)
    at b4a.example.home.onCreate(home.java:59)
    at android.app.Activity.performCreate(Activity.java:4465)
    at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1049)
    at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:1931)
    ... 11 more

It occurs when I set (for example) this theme: SetApplicationAttribute(android:theme, "@style/MaterialDrawerTheme.Light.DarkToolbar")
though it runs with SetApplicationAttribute(android:theme, "@style/MyAppTheme")

thedesolatesoul · Jun 11, 2015

Can you open SDK Manager and check the version of the support library?

migrec · Jun 11, 2015

Yes, it is 22.2

thedesolatesoul · Jun 11, 2015

It seems with every support lib update they keep breaking it again and again.
In your md-libs folder, go into values/styles.xml
Go to line 115 and replace it with these two lines:

B4X:

<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>

See if that works.

migrec · Jun 11, 2015

nope sorry

B4X:

B4A version 4.30
Parsing code.                           0.02
Compiling code.                         0.03
Compiling layouts code.                 0.01
Generating R file.                      Error
C:\Users\Can\Desktop\AdditionalRes\MDLIBRES\values\styles.xml:115: error: Error parsing XML: not well-formed (invalid token)

won't even compile now...

koaunglay · Jun 12, 2015

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/

Very beautiful design! I like your design and tutorial. But I can't find your msmaterialdrawer.jar and .xml. Where can I download it. Thanks Thedesolatesoul!

thedesolatesoul · Jun 12, 2015

migrec said:

nope sorry

B4X:

B4A version 4.30
Parsing code.                           0.02
Compiling code.                         0.03
Compiling layouts code.                 0.01
Generating R file.                      Error
C:\Users\Can\Desktop\AdditionalRes\MDLIBRES\values\styles.xml:115: error: Error parsing XML: not well-formed (invalid token)

won't even compile now...

Sorry my home PC has been off for a while now, let me try to get you an xml, can you try with the one attached?
You have to put it in the same place.

thedesolatesoul · Jun 12, 2015

koaunglay said:
Very beautiful design! I like your design and tutorial. But I can't find your msmaterialdrawer.jar and .xml. Where can I download it. Thanks Thedesolatesoul!

Here

migrec · Jun 12, 2015

thedesolatesoul said:
Sorry my home PC has been off for a while now, let me try to get you an xml, can you try with the one attached?
You have to put it in the same place.

It does compile now! though the drawer is still light... I am starting to think that it might be an error in my code...

thedesolatesoul · Jun 12, 2015

migrec said:
It does compile now! though the drawer is still light... I am starting to think that it might be an error in my code...

Because the theme you selected is: MaterialDrawerTheme.Light.DarkToolbar

migrec · Jun 12, 2015

thedesolatesoul said:
Because the theme you selected is: MaterialDrawerTheme.Light.DarkToolbar

but there isn't a theme for dark toolbar? can't find such

thedesolatesoul · Jun 12, 2015

On a dark theme, the toolbar will be dark by default
thats what my understanding is
i think you need: MaterialDrawerTheme or MaterialDrawerTheme.ActionBar
although i havent really tried them all

migrec · Jun 12, 2015

Yeah so with the new styles.xml you gave me and this theme:

B4X:

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

it's now all working and looking awesome. I'm truly sorry for wasting your time but my stupidity is really time-consuming

However, thanks a bunch once again tds...

MSMaterialDrawer

Expert

Deleted member 30048

Guest

Deleted member 30048

Guest

Expert

Deleted member 30048

Guest

Member

Expert

Member

Expert

Member

Expert

Member

Member

Expert

Attachments

Expert

Member

Expert

Member

Expert

Member