Custom drawer implementation for Material design apps.

Overview

Icon

material-drawer

Android Arsenal JitPack Build Status License

Custom drawer implementation for Material design apps.

Demo

A demo app is available on Google Play:

Get it on Google Play

Screenshots

material-drawer material-drawer material-drawer
Fixed items Select profile Custom theme

Dependency

material-drawer is available on jitpack.io

Gradle dependency:

repositories {
    // ...
    maven { url 'https://jitpack.io' }
}
dependencies {
    compile 'com.heinrichreimersoftware:material-drawer:2.3.3'
}

Get the latest dependency at jitpack.io.

How-To-Use

Step 1: Let your Activity extend DrawerActivity:

public class MainActivity extends DrawerActivity {}

Step 2: Set your content:

setContentView(R.layout.activity_main);

Step 3: Add a profile:

addProfile(
        new DrawerProfile()
                .setRoundedAvatar((BitmapDrawable)getResources().getDrawable(R.drawable.profile_avatar))
                .setBackground(getResources().getDrawable(R.drawable.profile_cover))
                .setName(getString(R.string.profile_name))
                .setDescription(getString(R.string.profile_description))
                .setOnProfileClickListener(new DrawerProfile.OnProfileClickListener() {
                    @Override
                    public void onClick(DrawerProfile drawerProfile, long id) {
                        Toast.makeText(MainActivity.this, "Clicked profile #" + id, Toast.LENGTH_SHORT).show();
                    }
                })
        );

Step 4: Populate your drawer list:

addItem(
        new DrawerItem()
                .setImage(getResources().getDrawable(R.drawable.ic_first_item))
                .setTextPrimary(getString(R.string.title_first_item))
                .setTextSecondary(getString(R.string.description_first_item))
                .setOnItemClickListener(new DrawerItem.OnItemClickListener() {
                    @Override
                    public void onClick(DrawerItem drawerItem, long id, int position) {
                        Toast.makeText(MainActivity.this, "Clicked first item #" + id, Toast.LENGTH_SHORT).show();
                    }
                })
        );
addDivider();
addItem(
        new DrawerItem()
                .setImage(getResources().getDrawable(R.drawable.ic_second_item))
                .setTextPrimary(getString(R.string.title_second_item))
                .setOnItemClickListener(new DrawerItem.OnItemClickListener() {
                    @Override
                    public void onClick(DrawerItem drawerItem, long id, int position) {
                        Toast.makeText(MainActivity.this, "Clicked second item #" + id, Toast.LENGTH_SHORT).show();
                    }
                })
        );

Step 5: Add actionBarStyle to your theme:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/color_primary</item>
    <item name="colorPrimaryDark">@color/color_primary_dark</item>
    <item name="colorAccent">@color/color_accent</item>
    <item name="actionBarStyle">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>

Step 6 (Optional): Change the drawer theme:

The drawer gets themed based on your selected app theme but you can also modify it.

setDrawerTheme(
        new DrawerTheme(this)
                .setBackgroundColorRes(R.color.background)
                .setTextColorPrimaryRes(R.color.primary_text)
                .setTextColorSecondaryRes(R.color.secondary_text)
                .setTextColorPrimaryInverseRes(R.color.primary_text_inverse)
                .setTextColorSecondaryInverseRes(R.color.secondary_text_inverse)
                .setHighlightColorRes(R.color.highlight)
);

Step 7 (Optional): Set your own Toolbar:

You can set your own Toolbar as you do with ActionBarActivity.

setSupportActionBar(toolbar);

Pro Tip: Lollipop status bar

Step 1: Make your status bar transparent:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
</style>

That's it! material-drawer takes care of the rest.

Info: DrawerFrameLayout & DrawerView

Of course you can use DrawerFrameLayout and DrawerView alone too. See the comments in the Java files for further information.

Open source libraries

material-drawer uses the following open source libraries or files:

License

Copyright 2015 Heinrich Reimer

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Comments
  • Layout issues, especially in 5.1

    Layout issues, especially in 5.1

    I'm comparing the behaviour on Android 5.0.2 (with a real device Galaxy S4 I9505) and 5.1 (real device Nexus 7 2013 LTE).

    The observations are related to the app in Google Play (v 2.1.1). Some of the problems I see in 5.1 are also observed by compiling the sources on 5.0.2 (a clone of today's repository), which is weird. I double-checked and re-installed the app from Play on 5.1 to make sure, but my conclusion is that those problems are the same I see by compiling the sources on a 5.0.2, not sure whether it's a regression.

    1. Launching the application => similar appearance of the MainActivity's main fragment on both platforms.

    2. Opening the navigation drawer by sliding. => completely blank on 5.1, contains 3 profiles and a few items on 5.0.2. Sadly, the same pseudo-latin text is used everywhere, which makes it hard to link with the source and verify. On 5.0.2, there are 7 items (including separators) and 2 fixed items.

    3. Opening the navigation drawer with the ActionBar button => similar on both platforms

    4. Rotating the screen => crashes on 5.0.2, OK on 5.1

    5. Opening the app again, rotating the screen => OK

    6. Selecting "DRAWERFRAMELAYOUT"

    7. Opening the drawer (either by sliding or using the ActionBar) => repetition of the same pseudo-latin text on 5.0.2, completely blank on 5.1 Note: selecting an item (on 5.0.2) does not provide any feedback

    8. Back to MainActivity and selecting "DRAWERACTIVITY" => 5.1: the text "Example of using ..." appears in the ActionBar (above "material-drawer" and the buttons, actually), the part below the ActionBar is empty => 5.0.2: the same text appears below, black on white

    9. Opening the drawer (either by sliding or using the ActionBar) => similar on both, contains 2 profiles, and 2 items (one of which has a black flag). Selecting those items has no effect (except the ripple)

    10. Selecting the other profile => changes the profile background and selects the 2nd profile

    11. Selecting the other profile => fails to change the background, fails to select the profile. Now the two profiles have the same picture.

    Note: that last part was also tested on a 4.x tablet, the same bug was observed.

    In summary,

    • layout issues in 5.0.2
    • profile issues
    • potential crash when the orientation changes
    • needs more relevant text than this fake pseudo-latin repetition
    type-bug flag-help-wanted priority-high 
    opened by ghost 16
  • MeasureSpec.EXACTLY crash

    MeasureSpec.EXACTLY crash

    I'm using the latest library and getting the following in log cat:

    java.lang.IllegalArgumentException: DrawerLayout must be measured with MeasureSpec.EXACTLY. at android.support.v4.widget.DrawerLayout.onMeasure(DrawerLayout.java:814) at android.view.View.measure(View.java:16628) at android.support.v4.widget.DrawerLayout.onMeasure(DrawerLayout.java:866) at android.view.View.measure(View.java:16628) at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5125) at android.widget.FrameLayout.onMeasure(FrameLayout.java:310) at android.view.View.measure(View.java:16628) at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5125) at android.widget.FrameLayout.onMeasure(FrameLayout.java:310) at android.view.View.measure(View.java:16628) at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5125) at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1404) at android.widget.LinearLayout.measureVertical(LinearLayout.java:695) at android.widget.LinearLayout.onMeasure(LinearLayout.java:588) at android.view.View.measure(View.java:16628) at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5125) at android.widget.FrameLayout.onMeasure(FrameLayout.java:310) at android.view.View.measure(View.java:16628) at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5125) at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1404) at android.widget.LinearLayout.measureVertical(LinearLayout.java:695) at android.widget.LinearLayout.onMeasure(LinearLayout.java:588) at android.view.View.measure(View.java:16628) at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5125) at android.widget.FrameLayout.onMeasure(FrameLayout.java:310) at com.android.internal.policy.impl.PhoneWindow$DecorView.onMeasure(PhoneWindow.java:2298) at android.view.View.measure(View.java:16628) at android.view.ViewRootImpl.performMeasure(ViewRootImpl.java:1916) at android.view.ViewRootImpl.measureHierarchy(ViewRootImpl.java:1113) at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:1295) at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1000) at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:5610) at android.view.Choreographer$CallbackRecord.run(Choreographer.java:761) at android.view.Choreographer.doCallbacks(Choreographer.java:574) at android.view.Choreographer.doFrame(Choreographer.java:544) at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:747) at android.os.Handler.handleCallback(Handler.java:733) at android.os.Handler.dispatchMessage(Handler.java:95) at android.os.Looper.loop(Looper.java:212) at android.app.ActivityThread.main(ActivityThread.java:5137) at java.lang.reflect.Method.invokeNative(Native Method) at java.lang.reflect.Method.invoke(Method.java:515) at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:902) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:718) at dalvik.system.NativeStart.main(Native Method)

    type-bug 
    opened by theblixguy 13
  • No ripple effects

    No ripple effects

    Hi.

    Thanks for your work on the library. I tried modifying MainActivity3 in your demo project to:

    1. MainActivity3 extends DrawerActivity implements DrawerItem.OnItemClickListener
    2. setOnItemClickListener(this) in onCreate
    3. @Override public void onClick(DrawerItem item, long id, int position) { selectItem(position); }

    Then there are no ripple effects when clicking the items in the drawer. Any suggestions?

    type-bug 
    opened by phishboh 10
  • Add bottomItem

    Add bottomItem

    As per Google design guidelines: "Settings and support are located at the bottom of the scrolling list, in-line with the rest of the list content."

    This items should not scroll with the rest of the drawer items (in other words, should be bottom fixed).

    type-enhancement 
    opened by mradzinski 9
  • Project refresh failed

    Project refresh failed

    Hello, upon importing your project into Android Studio, I get the following error:

    Error:No such property: GROUP for class: org.gradle.api.publication.maven.internal.ant.DefaultGroovyMavenDeployer

    Please advise.

    opened by IgorGanapolsky 8
  • Problem: Back Arrow Instead of Hamgurger Icon

    Problem: Back Arrow Instead of Hamgurger Icon

    I am facing two issues implementing this the library.

    1. The hamburger Icon to open the the drawer doesn't show up normally. If I use set Navigation icon property of the toolbar, Back Arrow Icon shows up, irrespective of what Icon I choose. Though I can pull out the drawer, I can't open it using icon on the toolbar.
    2. I can't seem to be able to set profile background. Irrespective what drawable/bitmap I choose, the background

    is a grey.

    I have attached screenshots for both the issues.

    screenshot_2015-01-04-12-43-11 screenshot_2015-01-04-12-41-21

    flag-help-wanted 
    opened by stripathi669 8
  • Update DrawerView.java

    Update DrawerView.java

    Compile the demo app with two profiles and one draweritem, compile with the version 2.2.0 and the library in this repo just compare it. You 'll see the issues

    opened by SMontiel 7
  • Download drawer avatar with Glide & Firebase

    Download drawer avatar with Glide & Firebase

    Hey,

    Thanks alot for this library, however I've facing an issue. i already set up the drawer and i implemented the onClickListener for the header to upload an image to Firebase, which works fine, but i want to add this image to the drawer avatar ( as a profile image ) also retrieve the image automatically on onCreate() to put in the Drawer header avatar, so i couldn't find how do i:

    1. Refresh the drawer texts elements ( i change something and the title/description of the items change only after i restart the app
    2. Update the avatar after i successfully get the image using this
    public void set_profileImg(){
        StorageReference mStorage = storageReference.child("images/" + user.getUid() + "/*");
        mStorage.getDownloadUrl().addOnSuccessListener(new OnSuccessListener<Uri>() {
            @Override
            public void onSuccess(Uri uri) {
                Glide.with(MainActivity.this).load(uri).into(AVATAR_GOES_HERE);
            }
        }).addOnFailureListener(new OnFailureListener() {
            @Override
            public void onFailure(@NonNull Exception exception) {
                // Handle any errors
            }
        });
    }
    

    Do you have any idea on how to fix this/workaround for this ? Thanks again.

    opened by Vel-San 6
  • Mutiple Drawer Items

    Mutiple Drawer Items

    when adding mutiple Draweritems (seperatly or using a list of drawer items ) only the last added item is displayed!! using the addItem/addItems methods only the last DrawerItem is displayed!!

    type-bug 
    opened by amineMpdam 6
  • Bibliotek/Bugs/Crash

    Bibliotek/Bugs/Crash

    Guten Tag,ich benutze dieser Bibliotek in meinem App Das App crasht on Method onCreate ich habe das Bibliotek auf diese Gerate getestet -Sony Xperia miro 4.0.4 Fliegt raus -Samsung Galaxy Tab PRO 4.4.4-Funktioniert Gut -LG G2 4.2.2 Fliegt raus... Viele benutzer haben bei mich gemeldet Ich erwarte von innen Unterstützung für Android 4.0+ bzw.fur Sony,LG,usw.

    type-bug flag-help-wanted 
    opened by mishushakov 6
  • Adding large number of items slow

    Adding large number of items slow

    When I try to add a large number of items to the drawer (couple hundred for example, use case similar to gmail app having the list of labels in the drawer) it takes a long time (minutes) to finish drawing the drawer. The logcat shows D/DrawerView: updateList() over and over.

    opened by maxpower47 6
  • Profile name is in different position

    Profile name is in different position

    1 2

    When I remove and add profiles or just NotifyDataChanged() when set new avatar - the user name changes position from the first picture to the second one when it should only be visible as in picture 2 because no description is set.

    opened by asbozh 0
Releases(2.3.3)
Owner
Jan Heinrich Reimer
📚 Student • 💻 Developer • 🏛️ European
Jan Heinrich Reimer
The flexible, easy to use, all in one drawer library for your Android project. Now brand new with material 2 design.

MaterialDrawer ... the flexible, easy to use, all in one drawer library for your Android project. What's included ?? • Setup ??️ • Migration Guide ??

Mike Penz 11.6k Dec 27, 2022
Navigation Drawer Activity with material design style and simplified methods

MaterialNavigationDrawer Navigation Drawer Activity with material design style and simplified methods       It requires 10+ API and android support v7

Fabio Biola 1.6k Jan 5, 2023
Android drawer icon with material design animation

LDrawer Android drawer icon with material design animation Note Basically same as appcompat_v7 version 21, you can use appcompat_v7 compile 'com.andro

Hasan Keklik 1.4k Dec 25, 2022
Android drawer icon with material design animation

LDrawer Android drawer icon with material design animation Note Basically same as appcompat_v7 version 21, you can use appcompat_v7 compile 'com.andro

Hasan Keklik 1.4k Dec 25, 2022
Implementation of Ripple effect from Material Design for Android API 9+

RippleEffect ExpandableLayout provides an easy way to create a view called header with an expandable view. Both view are external layout to allow a ma

Robin Chutaux 4.9k Dec 30, 2022
Material Design implementation for Android 4.0+. Shadows, ripples, vectors, fonts, animations, widgets, rounded corners and more.

Carbon Material Design implementation for Android 4.0 and newer. This is not the exact copy of the Lollipop's API and features. It's a custom implemen

null 3k Jan 9, 2023
Custom Tabs with Material Design effects

MaterialTabs Custom Tabs with Material Design animations for pre-Lollipop devices       Download example apk It requires 14+ API and android support v

Fabio Biola 1.4k Dec 29, 2022
Default colors and dimens per Material Design guidelines and Android Design guidelines inside one library.

Material Design Dimens Default colors and dimens per Material Design guidelines and Android Design guidelines inside one library. Dimens Pattern: R.di

Dmitry Malkovich 1.4k Jan 3, 2023
Animations for Android L drawer, back, dismiss and check icons

Material Menu Morphing Android menu, back, dismiss and check buttons Have full control of the animation: Including in your project compile 'com.balysv

Balys Valentukevicius 2.5k Jan 3, 2023
📱Android Library to implement animated, 😍beautiful, 🎨stylish Material Dialog in android apps easily.

Material Dialogs for Android ?? ?? Android Library to implement animated, ?? beautiful, ?? stylish Material Dialog in android apps easily. 1. Material

Shreyas Patil 875 Dec 28, 2022
A library to bring fully animated Material Design components to pre-Lolipop Android.

Material MaterialLibrary is an Open Source Android library that back-port Material Design components to pre-Lolipop Android. MaterialLibrary's origina

Rey Pham 6k Dec 21, 2022
Material Design icons by Google

Material design icons Material design icons is the official icon set from Google. The icons are designed under the material design guidelines. 4.0.0 U

Google 47.1k Jan 9, 2023
A Material Design ViewPager easy to use library

MaterialViewPager Material Design ViewPager easy to use library Sample And have a look on a sample Youtube Video : Youtube Link Download In your modul

Florent CHAMPIGNY 8.2k Jan 1, 2023
Floating Action Button for Android based on Material Design specification

FloatingActionButton Yet another library for drawing Material Design promoted actions. Features Support for normal 56dp and mini 40dp buttons. Customi

Zendesk 6.4k Dec 26, 2022
EditText in Material Design

MaterialEditText NOTE: 2.0 is NOT BACKWARDS COMPATIBLE! See more on wiki or 中文看这里 AppCompat v21 makes it easy to use Material Design EditText in our a

Kai Zhu 6.1k Dec 30, 2022
Material Design ProgressBar with consistent appearance

MaterialProgressBar Material Design ProgressBar with consistent appearance on Android 4.0+. Why MaterialProgressBar? Consistent appearance on Android

Hai Zhang 2.2k Dec 21, 2022
[] Android Library that implements Snackbars from Google's Material Design documentation.

DEPRECATED This lib is deprecated in favor of Google's Design Support Library which includes a Snackbar and is no longer being developed. Thanks for a

null 1.5k Dec 16, 2022
Android Sample Project with Material Design and Toolbar.

AndroidMaterialDesignToolbar -- PROJECT IS NOT SUPPORTED Android Sample Project with Material Design and Toolbar. Project use Appcompat library for ma

kemal selim tekinarslan 713 Nov 11, 2022
Floating Action Button for Android based on Material Design specification

FloatingActionButton Yet another library for drawing Material Design promoted actions. Features Support for normal 56dp and mini 40dp buttons. Customi

Zendesk 6.4k Jan 3, 2023