/material-drawer

Custom drawer implementation for Material design apps.

Primary LanguageJavaApache License 2.0Apache-2.0

material-drawer

Android Arsenal

Custom drawer implementation for Material design apps down to Android 2.1.

Demo

A demo app is available on Google Play:

Get it on Google Play

Screenshots

material-drawer material-drawer material-drawer
Active state tinting Scrollable drawer Few items

How-To-Use

Step 1: Include it in your layout:

<com.heinrichreimersoftware.materialdrawer.DrawerFrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
    
    <!-- Your main content here -->

</com.heinrichreimersoftware.materialdrawer.DrawerFrameLayout>

Step 2: Find view:

DrawerFrameLayout drawer = (DrawerFrameLayout) findViewById(R.id.drawer);

Step 3: Set a profile:

drawer.setProfile(
        new DrawerProfile()
                .setAvatar(getResources().getDrawable(R.drawable.profile_avatar))
                .setBackground(getResources().getDrawable(R.drawable.profile_background))
                .setName(getString(R.string.profile_name))
                .setDescription(getString(R.string.profile_description))
                .setOnProfileClickListener(new DrawerProfile.OnProfileClickListener() {
                    @Override
                    public void onClick(DrawerProfile drawerProfile) {
                        Toast.makeText(YourActivity.this, "Clicked profile", Toast.LENGTH_SHORT).show();
                    }
                })
        );

Step 4: Populate your drawer list:

drawer.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, int id, int position) {
                        Toast.makeText(YourActivity.this, "Clicked first item (#" + id + ")", Toast.LENGTH_SHORT).show();
                    }
                })
        );
drawer.addDivider();
drawer.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, ind id, int position) {
                        Toast.makeText(YourActivity.this, "Clicked second item (#" + id + ")", Toast.LENGTH_SHORT).show();
                    }
                })
        );

Pro Tip: Lollipop status bar

Step 1: Add fitSystemWindows="true" attribute to your DrawerFrameLayout in XML.

Step 2: Use Toolbar instead of ActionBar.

Step 3: Make your status bar transparent:

<style name="Theme.MyApp" 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.

For further information see Chris Banes' answer on stackoverflow.com.

Dependency

material-drawer is available on Maven Central

Gradle dependency:

dependencies {
    compile 'com.heinrichreimersoftware.materialdrawer:library:1.4.2'
}

Get the latest dependency with "Gradle, please"

Changes

  • Version 2.0:
    • Multiple profiles (#33)
    • Rounded avatars
    • Changable drawer width (#30)
  • Version 1.4.2:
    • Changed min SDK to 7 (Android 2.1)
    • Drawer max width can be changed (#30)
    • New image type DrawerItem.SMALL_AVATAR which doesn't get auto-tinted
    • Fixed issue #26
  • Version 1.4.1:
    • Fixed bottom list
    • Improved sizing
    • Improved colors
    • Fixed issue #27
  • Version 1.3.2:
  • Version 1.2:
    • Drawer items can now contain an ID
    • Image setters work with Bitmap too
  • Version 1.1.1:
    • You can change items that you got via drawer.getItem(position). Changes will update the adapter
    • Fixed auto drawer width
    • Fixed title padding

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.