material-drawer

Custom drawer implementation for Material design apps.

View demo Download Source

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' }
}
Gradle
dependencies {
    compile 'com.heinrichreimersoftware:material-drawer:2.3.3'
}
Gradle

Get the latest dependency atjitpack.io.

How-To-Use

Step 1: Let your [Activity][ABA] extend [DrawerActivity][DA]:

public class MainActivity extends DrawerActivity {}
Java

Step 2: Set your content:

setContentView(R.layout.activity_main);
Java

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();
                    }
                })
        );
Java

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();
                    }
                })
        );
Java

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>
XML

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)
);
Java

Step 7 (Optional): Set your own [Toolbar][T]:

You can set your own [Toolbar][T] as you do with [ActionBarActivity][ABA].

setSupportActionBar(toolbar);
Java

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>
XML

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

Info: [DrawerFrameLayout][DFL] & [DrawerView][DV]

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

GitHub