Add a 2-Step DrawerLayout to your application, with a nice crossfade effect
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
DEV * initial commit Oct 21, 2015
app * update libs to final release Sep 22, 2018
gradle/wrapper * update gradle and gradle build tools Sep 22, 2018
library * update androidX to the stable release Sep 22, 2018
.gitignore * initial commit Oct 21, 2015
LICENSE * initial commit Oct 21, 2015 * [release] v1.1.0 Sep 22, 2018
build.gradle * [release] v1.1.0 Sep 22, 2018
gradle-release.gradle upgrade to androidX Aug 18, 2018 upgrade to androidX Aug 18, 2018
gradlew * initial commit Oct 21, 2015
gradlew.bat * initial commit Oct 21, 2015
settings.gradle * initial commit Oct 21, 2015

CrossfadeDrawerLayout Maven Central Join the chat at

Many modern applications come with a Drawer, which is a great pattern to implement one level of navigation to your app, but this only comes with one level, and after opening it will take the whole view.

The CrossfadeDrawerLayout is here to solve this. It alllows to implement a 2 step navigation. By default it does not show up, after the user swipes, or clicks the NavigationIcon it will show the quick navigation, which only consists out of a profile (if given), icons and badges. Users can quickly choose what they want, without interacting with any additional information. If the user wants to switch his profile, or want have access to additional functions, he can drag in the MiniDrawer and resize it to a normal Drawer.




Include in your project

Using Maven

implementation "com.mikepenz:crossfadedrawerlayout:1.1.0"
implementation "com.mikepenz:materialize:${latestVersion}"
implementation "androidx.appcompat:appcompat:${androidX}"

To use appcompat please use a version smaller than 1.1.0-rc01. (See the releases on GitHub)

How to use

With the MaterialDrawer


crossfadeDrawerLayout = new CrossfadeDrawerLayout(this);

//Create the drawer
result = new DrawerBuilder()
        //provide the custom crossfadeDrawerLaoyout
        //define the width to the width of our smaller view
        //generate the MiniDrawer which is used for the smaller view
        //add some items, those are alo automatically added to the MiniDrawer
        //the listener which is called when an item inside the drawer or miniDrawer is clicked
        .withOnDrawerItemClickListener(new Drawer.OnDrawerItemClickListener() {
            public boolean onItemClick(View view, int position, IDrawerItem drawerItem) {
                return false;

//define maxDrawerWidth (this is the width in the complete opened state)

//add second view (which is the miniDrawer)
MiniDrawer miniResult = result.getMiniDrawer();
//build the view for the MiniDrawer
View view =;
//set the background of the MiniDrawer as this would be transparent
view.setBackgroundColor(UIUtils.getThemeColorFromAttrOrRes(this, com.mikepenz.materialdrawer.R.attr.material_drawer_background, com.mikepenz.materialdrawer.R.color.material_drawer_background));
//we do not have the MiniDrawer view during CrossfadeDrawerLayout creation so we will add it here
crossfadeDrawerLayout.getSmallView().addView(view, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);

//define the crossfader to be used with the miniDrawer. This is required to be able to automatically toggle open / close
miniResult.withCrossFader(new ICrossfader() {
    public void crossfade() {
        //only close the drawer if we were already faded and want to close it now
        if (isCrossfaded()) {

    public boolean isCrossfaded() {
        return crossfadeDrawerLayout.isCrossfaded();

Developed By


Copyright 2018 Mike Penz

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

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
See the License for the specific language governing permissions and
limitations under the License.