MaterialDrawer

A quick overview what's in

Preview

Demo

Screenshots

WIKI / FAQ

Setup

1. Provide the gradle dependency

compile('com.mikepenz:materialdrawer:5.9.5@aar') {transitive=true}

2. Add your drawer

newDrawerBuilder().withActivity(this).build();

Additional Setup

Add items and adding some functionality

//if you want to update the items at a later time it is recommended to keep it in a variablePrimaryDrawerItemitem1 =newPrimaryDrawerItem().withIdentifier(1).withName(R.string.drawer_item_home);SecondaryDrawerItemitem2 =newSecondaryDrawerItem().withIdentifier(2).withName(R.string.drawer_item_settings);//create the drawer and remember the `Drawer` result objectDrawerresult =newDrawerBuilder()    .withActivity(this)    .withToolbar(toolbar)    .addDrawerItems(item1,newDividerDrawerItem(),item2,newSecondaryDrawerItem().withName(R.string.drawer_item_settings)    )    .withOnDrawerItemClickListener(newDrawer.OnDrawerItemClickListener() {@OverridepublicbooleanonItemClick(Viewview,intposition,IDrawerItemdrawerItem) {// do something with the clicked item :D        }    })    .build();

Selecting an item

//set the selection to the item with the identifier 1result.setSelection(1);//set the selection to the item with the identifier 2result.setSelection(item2);//set the selection and also fire the `onItemClick`-listenerresult.setSelection(1,true);

newSecondaryDrawerItem().withName(R.string.drawer_item_dialog).withSelectable(false)

Modify items or the drawer

//modify an item of the draweritem1.withName("A new name for this drawerItem").withBadge("19").withBadgeStyle(newBadgeStyle().withTextColor(Color.WHITE).withColorRes(R.color.md_red_700));//notify the drawer about the updated element. it will take care about everything elseresult.updateItem(item1);//to update only the name, badge, icon you can also use one of the quick methodsresult.updateName(1,"A new name");//the result object also allows you to add new items, remove items, add footer, sticky footer, ..result.addItem(newDividerDrawerItem());result.addStickyFooterItem(newPrimaryDrawerItem().withName("StickyFooterItem"));//remove items with an identifierresult.removeItem(2);//open / close the drawerresult.openDrawer();result.closeDrawer();//get the reference to the `DrawerLayout` itselfresult.getDrawerLayout();

Add profiles and an AccountHeader

// Create the AccountHeaderAccountHeaderheaderResult =newAccountHeaderBuilder().withActivity(this)    .withHeaderBackground(R.drawable.header).addProfiles(newProfileDrawerItem().withName("Mike Penz").withEmail("mikepenz@gmail.com").withIcon(getResources().getDrawable(R.drawable.profile)))    .withOnAccountHeaderListener(newAccountHeader.OnAccountHeaderListener() {@OverridepublicbooleanonProfileChanged(Viewview,IProfileprofile,booleancurrentProfile) {returnfalse;}}).build();//Now create your drawer and pass the AccountHeader.ResultnewDrawerBuilder()    .withAccountHeader(headerResult)//additional Drawer setup as shown above    ...    .build();

Use the included icon font

compile'com.mikepenz:google-material-typeface:x.y.z@aar'//Google Material Iconscompile'com.mikepenz:fontawesome-typeface:x.y.z@aar'//FontAwesome

//now you can simply use any icon of the Google Material Icons fontnewPrimaryDrawerItem().withIcon(GoogleMaterial.Icon.gmd_wb_sunny)//Or an icon from FontAwesomenewSecondaryDrawerItem().withIcon(FontAwesome.Icon.faw_github)

Advanced Setup

Activity with ActionBar

Code:

newDrawerBuilder().withActivity(this).withTranslucentStatusBar(false)    .withActionBarDrawerToggle(false).addDrawerItems(//pass your items here).build();

Activity with Multiple Drawers

Code:

Drawerresult =newDrawerBuilder().withActivity(this).withToolbar(toolbar).addDrawerItems(//pass your items here).build();newDrawerBuilder().withActivity(this)    .addDrawerItems(//pass your items here    )    .withDrawerGravity(Gravity.END)    .append(result);

Load images via url

Code:

//initialize and create the image loader logicDrawerImageLoader.init(newAbstractDrawerImageLoader() {@Overridepublicvoidset(ImageViewimageView,Uriuri,Drawableplaceholder) {Picasso.with(imageView.getContext()).load(uri).placeholder(placeholder).into(imageView);    }@Overridepublicvoidcancel(ImageViewimageView) {Picasso.with(imageView.getContext()).cancelRequest(imageView);    }/*    @Override    public Drawable placeholder(Context ctx) {        return super.placeholder(ctx);    }    @Override    public Drawable placeholder(Context ctx, String tag) {        return super.placeholder(ctx, tag);    }    */});

Switching between Back-Arrow or Hamburger-Icon

Code - Show the back arrow:

result.getActionBarDrawerToggle().setDrawerIndicatorEnabled(false);getSupportActionBar().setDisplayHomeAsUpEnabled(true);

Code - Show the hamburger icon:

getSupportActionBar().setDisplayHomeAsUpEnabled(false);result.getActionBarDrawerToggle().setDrawerIndicatorEnabled(true);

AndroidManifest.xml

Style the drawer

Use of a none MaterialDrawer.* style

Custom style - styles.xml

    <stylename="CustomTheme"parent="MaterialDrawerTheme"><!-- ...and here we setting appcompat’s color theming attrs-->        <itemname="colorPrimary">@color/material_drawer_primary</item>        <itemname="colorPrimaryDark">@color/material_drawer_primary_dark</item>        <itemname="colorAccent">@color/material_drawer_accent</item><!-- MaterialDrawer specific values-->        <itemname="material_drawer_background">@color/material_drawer_background</item>        <itemname="material_drawer_primary_text">@color/material_drawer_primary_text</item>        <itemname="material_drawer_primary_icon">@color/material_drawer_primary_icon</item>        <itemname="material_drawer_secondary_text">@color/material_drawer_secondary_text</item>        <itemname="material_drawer_hint_text">@color/material_drawer_hint_text</item>        <itemname="material_drawer_divider">@color/material_drawer_divider</item>        <itemname="material_drawer_selected">@color/material_drawer_selected</item>        <itemname="material_drawer_selected_text">@color/material_drawer_selected_text</item>        <itemname="material_drawer_header_selection_text">@color/material_drawer_header_selection_text</item>    </style>

Custom colors - colors.xml

<!-- Material DEFAULT colors-->    <colorname="material_drawer_primary">#2196F3</color>    <colorname="material_drawer_primary_dark">#1976D2</color>    <colorname="material_drawer_primary_light">#BBDEFB</color>    <colorname="material_drawer_accent">#FF4081</color><!-- OVERWRITE THESE COLORS FOR A LIGHT THEME--><!-- MaterialDrawer DEFAULT colors-->    <colorname="material_drawer_background">#F9F9F9</color><!-- Material DEFAULT text / items colors-->    <colorname="material_drawer_primary_text">#DE000000</color>    <colorname="material_drawer_primary_icon">#8A000000</color>    <colorname="material_drawer_secondary_text">#8A000000</color>    <colorname="material_drawer_hint_text">#42000000</color>    <colorname="material_drawer_divider">#1F000000</color><!-- Material DEFAULT drawer colors-->    <colorname="material_drawer_selected">#E8E8E8</color>    <colorname="material_drawer_selected_text">#2196F3</color>    <colorname="material_drawer_header_selection_text">#FFF</color><!-- OVERWRITE THESE COLORS FOR A DARK THEME--><!-- MaterialDrawer DEFAULT DARK colors-->    <colorname="material_drawer_dark_background">#303030</color><!-- MaterialDrawer DEFAULT DARK text / items colors-->    <colorname="material_drawer_dark_primary_text">#DEFFFFFF</color>    <colorname="material_drawer_dark_primary_icon">#8AFFFFFF</color>    <colorname="material_drawer_dark_secondary_text">#8AFFFFFF</color>    <colorname="material_drawer_dark_hint_text">#42FFFFFF</color>    <colorname="material_drawer_dark_divider">#1FFFFFFF</color><!-- MaterialDrawer DEFAULT DARK drawer colors-->    <colorname="material_drawer_dark_selected">#202020</color>    <colorname="material_drawer_dark_selected_text">@color/material_drawer_primary</color>    <colorname="material_drawer_dark_header_selection_text">#FFF</color>

FAQ

How can i create a drawer without a default selection

//just use this with the Drawer.withSelectedItem(-1)

I have problems with the SoftKeyboard. How can i fix this?

.keyboardSupportEnabled(activity,enabled)

Can I lock the Drawer

//get the DrawerLayout from the DrawerDrawerLayoutdrawerLayout =result.getDrawerLayout();//do whatever you want with the Drawer. Like locking it.drawerLayout.setDrawerLockMode(intlockMode);//or (int lockMode, int edgeGravity)

Can I use my own DrawerLayout implementation

builder.withDrawerLayout(R.layout.material_drawer);

But I prefer Kotlin

Apps using the MaterialDrawer

Articles about the MaterialDrawer

Credits

Developed By

License

Copyright 2016 Mike PenzLicensed 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.0Unless required by applicable law or agreed to in writing, softwaredistributed 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 andlimitations under the License.