mikepenz / MaterialDrawer

The flexible, easy to use, all in one drawer library for your Android project. Now brand new with material 2 design.
https://mikepenz.dev
Apache License 2.0
11.67k stars 2.05k forks source link

Question - MiniDrawer styling, colored translucent statusbar and icons from menu XML #1150

Closed pokerazor closed 8 years ago

pokerazor commented 8 years ago

Hi and thank you again for this awesome library. We're now using it in the dev version of our app fork: https://github.com/pokerazor/mixare/blob/4128ba4b00a1349c6b27278bbe0933477d624997/src/org/mixare/MaterialDrawerMenuActivity.java

There's a couple of questions I have which I wasn't able to solve by myself after looking in the code and searching on the internet, so I hope it's OK to ask them here? I have included two screenshots to illustrate the questions and all the code can be found at https://github.com/pokerazor/mixare/tree/dev-ha-improvements/src/org/mixare

screenshot_2016-04-03-09-22-55

screenshot_2016-04-03-09-22-45 (the blue on the right is a live camera preview)

  1. We have a static MiniDrawer which crossfades to a regular drawer, using MaterialDrawerTheme.TranslucentStatus. Styling/coloring of the regular drawer is easily done by @color/material_drawer_dark_background in our own colors.xml. But how to color the MiniDrawer? it always stays dark grey and we couldn't find a corresponding attribute in the code? Also, what about the margins around the items, is there any way to influence them? Because they're different in the regular drawer and the MiniDrawer and we would like them to be the same, so the items don't "jump" when dragging/switching between both.
  2. We have a translucent status bar now, but because our app is mainly used in landscape mode, doesn't use an ActionBar and the main Activity has a fullscreen camera stream, the status bar is very "fluttery" and kind of boring because the transparency is only from black, not colored. Is there any way to use a color transparany/alpha channel to enable visual identy of the app to the user? We suspect, one would need to implement an own view showing only the background alpha-color with the status bar height and somehow manage to get it "between" the status bar and the actual content? Are there any suggestions on how that could be achieved?
  3. We use a XML menu file to inflate the items for the menu, (personally I thought that's the way to do it because it's declarative?), also stating the icons like this:
    <item
        android:id="@+id/menuitem_markerlist"
        android:icon="@android:drawable/ic_menu_view"
        android:title="@string/menu_item_list" />

But that way we are limited to use the "original" android and some own drawables, while we would like to use some material design icons from the Iconics package. Is there any way to do it, I thought maybe like android:icon="@iconics:drawable/gmd-plus-circle" and someway introducing the iconics prefix to the app? We tried switching MaterialDrawerMenuActivity's base class to AppCompatActivity and using LayoutInflaterCompat.setFactory(getLayoutInflater(), new IconicsLayoutInflater(getDelegate())); in the onCreate(), but what would we need to put into the android:icon="" attribute in the menu.xml? We tried android:icon="gmd-plus-circle" which would give us

String types not allowed

and also app:ico_icon="gmd-plus-circle" with

    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.mikepenz.iconics.sample.MainActivity"

which would leave us with no icon at all. We also tried android:title="{gmd-plus-circle}" which is not being replaced. What did we miss?

Thank you in advance for reading this and trying to help!

Ah, and if some of the questions would need some implementation work to do first, I'd happily try my best and submit a Pull Request if you can give some hints on how/where to do it.

Cheers, Hanno

mikepenz commented 8 years ago

@pokerazor a quick answer regarding 3. You sadly can't use the Android-Iconics directly via the menu.xml as I have not yet found a way how to hook into the SupportMenuInflator (if someone has suggestions, it would be really awesome). The only (and also preferred) solution is to set the Android-Iconics icons via code to the Menu

I will answer the other questions later today, as they might need a bit more time to answer.

pokerazor commented 8 years ago

Thank you for your quick reaction! Oh, that's a pity :-( I had a short look and found http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android/4.3.1_r1/android/support/v7/internal/view/SupportMenuInflater.java and http://developer.android.com/reference/android/view/MenuInflater.html, both state

For performance reasons, menu inflation relies heavily on pre-processing of XML files that is done at build time. Therefore, it is not currently possible to use MenuInflater with an XmlPullParser over a plain XML file at runtime; it only works with an XmlPullParser returned from a compiled resource (R. something file.)

That's probably the problem? My first thought was to add an own class which extends MenuInflater/SupportMenuInflater, but you would have to include some way to generate the R. files at build time as well, right? So, thinking about how to workaround, one would probably have to getDrawerItems(), cast to PrimaryDrawerItem() and call withIcon() on it, maybe using values from an R.array with the same key? I'm beginning to understand, why creating Items from .java code is the preferred way to go :-)

mikepenz commented 8 years ago

Ok here's the answer regarding your fist 2 points.

1.) The MiniDrawer is transparent by default. And takes the activity background. If you want to alter this you can set the background color on the View of the MiniDrawer

View miniView = miniResult.build(this);
miniView.setBackgroundColor(Color.RED);

In general the MiniDrawer and its items is built exactly to fit the Google Material Design Guidelines and it is not recommended to change it. If you really need this you will have to implement CustomMiniDrawerItems and alter the default values. Which is more complicated (but possible) I have written detailed instructions regarding this here: https://github.com/mikepenz/MaterialDrawer/issues/1090#issuecomment-195913322 Something else I tried a while ago was to alter the margins dynamically when the drawer was opened or closed but this might not the most performant solution. See more here: https://github.com/mikepenz/MaterialDrawer/commit/8dd57feeeaa5190b13b9a203329a48510d0c07b3

2.) Not really related to the MaterialDrawer. You might also just want to use a different theme which does not make the activity translucent and has a normal colored StatusBar or if you want it translucent and colored you may want to check out other libs doing this for you. Not sure if this helps: https://github.com/niorgai/StatusBarCompat (just found this after a quick google search)

3.) Yeah I know. I also tried for quite a long time to get it working. But the only solution (as far as I have found) would be to copy and paste the whole SupportMenuInflater to the project, and I really do not want to do this, as it will cause problems accross support lib updates. For this feature to be possible I still wait for a possibility (like for the normal LayoutInflater) to hook into a custom MenuInflater.

As an additional information. Creating the items via Java comes with a lot of additional flexibility, as you will also be able to add a lot more different items, and properties, which are not possible via the XML