The flexible, easy to use, all in one drawer library for your Android project.

Yes that’s true. But there are still shortage of community which provide resources and relavent information about this Material Drawer Library.

In this blog We are going to implement this library in our project. And later we will see how we can tailor the flow as per our application requirement.

Demo

You can download the complete sample application from here.

Setup

1. Provide the gradle dependency

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

compile('com.mikepenz:materialdrawer:[email protected]') {

transitive = true

}

note: add transitive dependencies by setting transitive = true for the material drawer dependency. This will add all the relevant dependency required by the material drawer library.

Also there are some other dependency that we can add to speed up the implementation:

 compile 'com.mikepenz:google-material-typeface:2.2.0.1@aar'
    compile 'com.mikepenz:fontawesome-typeface:4.4.0.1@aar'
    compile 'com.android.support:appcompat-v7:23.2.0'
    compile 'com.squareup.picasso:picasso:2.5.2'
    compile 'com.mikepenz:itemanimators:0.2.4@aar'

compile 'com.mikepenz:google-material-typeface:[email protected]'

compile 'com.mikepenz:fontawesome-typeface:[email protected]'

compile 'com.android.support:appcompat-v7:23.2.0'

compile 'com.squareup.picasso:picasso:2.5.2'

compile 'com.mikepenz:itemanimators:[email protected]'

compile ‘com.mikepenz:google-material-typeface:[email protected]’ , compile ‘com.mikepenz:fontawesome-typeface:[email protected]’ are the GitHub libraries that maintain Google recommended material based icons. This will boost our development process without worrying about the icon required.

We have used Picasso as a image loading and caching library.

2. Initialize and create the image loader logic

   DrawerImageLoader.init(new AbstractDrawerImageLoader() {
            @Override
            public void set(ImageView imageView, Uri uri, Drawable placeholder) {
                Picasso.with(imageView.getContext()).load(uri).placeholder(placeholder).into(imageView);
            }

            @Override
            public void cancel(ImageView imageView) {
                Picasso.with(imageView.getContext()).cancelRequest(imageView);
            }

           
        });

DrawerImageLoader.init(new AbstractDrawerImageLoader() {

@Override

public void set(ImageView imageView, Uri uri, Drawable placeholder) {

Picasso.with(imageView.getContext()).load(uri).placeholder(placeholder).into(imageView);

}

@Override

public void cancel(ImageView imageView) {

Picasso.with(imageView.getContext()).cancelRequest(imageView);

}

});

Note: Image loading is done in picasso but it can be change to any library.

3. Create a few sample profile

        // Create a few sample profile
        // NOTE you have to define the loader logic too. See the CustomApplication for more details
        final IProfile profile = new ProfileDrawerItem().withName("Mike Penz").withEmail("mikepenz@gmail.com").withIcon("https://avatars3.githubusercontent.com/u/1476232?v=3&s=460").withIdentifier(100);
        final IProfile profile2 = new ProfileDrawerItem().withName("Bernat Borras").withEmail("alorma@github.com").withIcon(Uri.parse("https://avatars3.githubusercontent.com/u/887462?v=3&s=460")).withIdentifier(101);
        final IProfile profile3 = new ProfileDrawerItem().withName("Max Muster").withEmail("max.mustermann@gmail.com").withIcon(R.drawable.profile2).withIdentifier(102);
        final IProfile profile4 = new ProfileDrawerItem().withName("Felix House").withEmail("felix.house@gmail.com").withIcon(R.drawable.profile3).withIdentifier(103);
        final IProfile profile5 = new ProfileDrawerItem().withName("Mr. X").withEmail("mister.x.super@gmail.com").withIcon(R.drawable.profile4).withIdentifier(104);
        final IProfile profile6 = new ProfileDrawerItem().withName("Batman").withEmail("batman@gmail.com").withIcon(R.drawable.profile5).withIdentifier(105);

// Create a few sample profile

// NOTE you have to define the loader logic too. See the CustomApplication for more details

final IProfile profile = new ProfileDrawerItem().withName("Mike Penz").withEmail("[email protected]").withIcon("https://avatars3.githubusercontent.com/u/1476232?v=3&s=460").withIdentifier(100);

final IProfile profile2 = new ProfileDrawerItem().withName("Bernat Borras").withEmail("[email protected]").withIcon(Uri.parse("https://avatars3.githubusercontent.com/u/887462?v=3&s=460")).withIdentifier(101);

final IProfile profile3 = new ProfileDrawerItem().withName("Max Muster").withEmail("[email protected]").withIcon(R.drawable.profile2).withIdentifier(102);

final IProfile profile4 = new ProfileDrawerItem().withName("Felix House").withEmail("[email protected]").withIcon(R.drawable.profile3).withIdentifier(103);

final IProfile profile5 = new ProfileDrawerItem().withName("Mr. X").withEmail("[email protected]").withIcon(R.drawable.profile4).withIdentifier(104);

final IProfile profile6 = new ProfileDrawerItem().withName("Batman").withEmail("[email protected]").withIcon(R.drawable.profile5).withIdentifier(105);

Note: IProfile is the interface that can be used to display multiple type of profiles based on the requirement.

Here we have passed the ProfileDrawerItem object which is used to display the profile as a drawer item of the Drawer.

We can set the icon from URL ,Drawable , DrawableRes or Bitmap.

Here Identifier is used to identifying a particular element. This is usually used OnDrawerItemClickListener to identify which drawer item has been clicked.

4. Create the AccountHeader

  // Create the AccountHeader
        headerResult = new AccountHeaderBuilder()
                .withActivity(this)
                .withTranslucentStatusBar(true)
                .withHeaderBackground(R.drawable.header)
                .addProfiles(
// Adding profiles to header view
                        profile,
                        profile2,
                        profile3,
                        profile4,
                        profile5,
                        profile6,
                        //don't ask but google uses 14dp for the add account icon in gmail but 20dp for the normal icons (like manage account)
// Adding setting drawer item other than profile drawer item                       
                        new ProfileSettingDrawerItem().withName("Add Account").withDescription("Add new GitHub Account").withIcon(new IconicsDrawable(this, GoogleMaterial.Icon.gmd_plus).actionBar().paddingDp(5).colorRes(R.color.material_drawer_primary_text)).withIdentifier(PROFILE_SETTING),
                        new ProfileSettingDrawerItem().withName("Manage Account").withIcon(GoogleMaterial.Icon.gmd_settings).withIdentifier(100001)
                )
                .withOnAccountHeaderListener(new AccountHeader.OnAccountHeaderListener() {
                    @Override
                    public boolean onProfileChanged(View view, IProfile profile, boolean current) {
                        //sample usage of the onProfileChanged listener
                        //if the clicked item has the identifier 1 add a new profile ;)
                        if (profile instanceof IDrawerItem && profile.getIdentifier() == PROFILE_SETTING) {
                            int count = 100 + headerResult.getProfiles().size() + 1;
                            IProfile newProfile = new ProfileDrawerItem().withNameShown(true).withName("Batman" + count).withEmail("batman" + count + "@gmail.com").withIcon(R.drawable.profile5).withIdentifier(count);
                            if (headerResult.getProfiles() != null) {
                                //we know that there are 2 setting elements. set the new profile above them ;)
                                headerResult.addProfile(newProfile, headerResult.getProfiles().size() - 2);
                            } else {
                                headerResult.addProfiles(newProfile);
                            }
                        }

                        //false if you have not consumed the event and it should close the drawer
                        return false;
                    }
                })
                .withSavedInstance(savedInstanceState)
                .build();

// Create the AccountHeader

headerResult = new AccountHeaderBuilder()

.withActivity(this)

.withTranslucentStatusBar(true)

.withHeaderBackground(R.drawable.header)

.addProfiles(

// Adding profiles to header view

profile,

profile2,

profile3,

profile4,

profile5,

profile6,

//don't ask but google uses 14dp for the add account icon in gmail but 20dp for the normal icons (like manage account)

// Adding setting drawer item other than profile drawer item

new ProfileSettingDrawerItem().withName("Add Account").withDescription("Add new GitHub Account").withIcon(new IconicsDrawable(this, GoogleMaterial.Icon.gmd_plus).actionBar().paddingDp(5).colorRes(R.color.material_drawer_primary_text)).withIdentifier(PROFILE_SETTING),

new ProfileSettingDrawerItem().withName("Manage Account").withIcon(GoogleMaterial.Icon.gmd_settings).withIdentifier(100001)

)

.withOnAccountHeaderListener(new AccountHeader.OnAccountHeaderListener() {

@Override

public boolean onProfileChanged(View view, IProfile profile, boolean current) {

//sample usage of the onProfileChanged listener

//if the clicked item has the identifier 1 add a new profile ;)

if (profile instanceof IDrawerItem && profile.getIdentifier() == PROFILE_SETTING) {

int count = 100 + headerResult.getProfiles().size() + 1;

IProfile newProfile = new ProfileDrawerItem().withNameShown(true).withName("Batman" + count).withEmail("batman" + count + "@gmail.com").withIcon(R.drawable.profile5).withIdentifier(count);

if (headerResult.getProfiles() != null) {

//we know that there are 2 setting elements. set the new profile above them ;)

headerResult.addProfile(newProfile, headerResult.getProfiles().size() - 2);

} else {

headerResult.addProfiles(newProfile);

}

//false if you have not consumed the event and it should close the drawer

return false;

}

})

.withSavedInstance(savedInstanceState)

.build();

Note: AccountHeaderBuilder class allow up to create a header of the drawer. We can create our custom header or use among the available header files.

You can change the header by using withAccountHeader(R.layout.myHeaderView). Also to set compact header layout use withCompactStyle(true).

Here withOnAccountHeaderListener all the profile changed events related to AccountHeader are managed.

5. Create the drawer

        //Create the drawer
        result = new DrawerBuilder()
                .withActivity(this)
                .withToolbar(toolbar)
                .withHasStableIds(true)
                .withItemAnimator(new AlphaCrossFadeAnimator())
                .withAccountHeader(headerResult) //set the AccountHeader we created earlier for the header
                .addDrawerItems(
                        new PrimaryDrawerItem().withName(R.string.drawer_item_compact_header).withDescription(R.string.drawer_item_compact_header_desc).withIcon(GoogleMaterial.Icon.gmd_sun).withIdentifier(1).withSelectable(false),
                        new PrimaryDrawerItem().withName(R.string.drawer_item_action_bar_drawer).withDescription(R.string.drawer_item_action_bar_drawer_desc).withIcon(FontAwesome.Icon.faw_home).withIdentifier(2).withSelectable(false),
                        new PrimaryDrawerItem().withName(R.string.drawer_item_multi_drawer).withDescription(R.string.drawer_item_multi_drawer_desc).withIcon(FontAwesome.Icon.faw_gamepad).withIdentifier(3).withSelectable(false),
                        new PrimaryDrawerItem().withName(R.string.drawer_item_non_translucent_status_drawer).withDescription(R.string.drawer_item_non_translucent_status_drawer_desc).withIcon(FontAwesome.Icon.faw_eye).withIdentifier(4).withSelectable(false).withBadgeStyle(new BadgeStyle().withTextColor(Color.WHITE).withColorRes(R.color.md_red_700)),
                        new PrimaryDrawerItem().withName(R.string.drawer_item_advanced_drawer).withDescription(R.string.drawer_item_advanced_drawer_desc).withIcon(GoogleMaterial.Icon.gmd_adb).withIdentifier(5).withSelectable(false),
                        new PrimaryDrawerItem().withName(R.string.drawer_item_embedded_drawer).withDescription(R.string.drawer_item_embedded_drawer_desc).withIcon(GoogleMaterial.Icon.gmd_battery).withIdentifier(7).withSelectable(false),
                        new PrimaryDrawerItem().withName(R.string.drawer_item_fullscreen_drawer).withDescription(R.string.drawer_item_fullscreen_drawer_desc).withIcon(GoogleMaterial.Icon.gmd_labels).withIdentifier(8).withSelectable(false),
                        new PrimaryDrawerItem().withName(R.string.drawer_item_custom_container_drawer).withDescription(R.string.drawer_item_custom_container_drawer_desc).withIcon(GoogleMaterial.Icon.gmd_my_location).withIdentifier(9).withSelectable(false),
                        new PrimaryDrawerItem().withName(R.string.drawer_item_menu_drawer).withDescription(R.string.drawer_item_menu_drawer_desc).withIcon(GoogleMaterial.Icon.gmd_filter_list).withIdentifier(10).withSelectable(false),
                        new PrimaryDrawerItem().withName(R.string.drawer_item_mini_drawer).withDescription(R.string.drawer_item_mini_drawer_desc).withIcon(GoogleMaterial.Icon.gmd_battery_charging).withIdentifier(11).withSelectable(false),
                        new PrimaryDrawerItem().withName(R.string.drawer_item_fragment_drawer).withDescription(R.string.drawer_item_fragment_drawer_desc).withIcon(GoogleMaterial.Icon.gmd_disc_full).withIdentifier(12).withSelectable(false),
                        new PrimaryDrawerItem().withName(R.string.drawer_item_collapsing_toolbar_drawer).withDescription(R.string.drawer_item_collapsing_toolbar_drawer_desc).withIcon(GoogleMaterial.Icon.gmd_camera_rear).withIdentifier(13).withSelectable(false),
                        new PrimaryDrawerItem().withName(R.string.drawer_item_persistent_compact_header).withDescription(R.string.drawer_item_persistent_compact_header_desc).withIcon(GoogleMaterial.Icon.gmd_brightness_5).withIdentifier(14).withSelectable(false),
                        new PrimaryDrawerItem().withName(R.string.drawer_item_crossfade_drawer_layout_drawer).withDescription(R.string.drawer_item_crossfade_drawer_layout_drawer_desc).withIcon(GoogleMaterial.Icon.gmd_format_bold).withIdentifier(15).withSelectable(false),
                        new SectionDrawerItem().withName(R.string.drawer_item_section_header),
                        new ExpandableDrawerItem().withName("Collapsable").withIcon(GoogleMaterial.Icon.gmd_collection_case_play).withIdentifier(19).withSelectable(false).withSubItems(
                                new SecondaryDrawerItem().withName("CollapsableItem").withLevel(2).withIcon(GoogleMaterial.Icon.gmd_8tracks).withIdentifier(2000),
                                new SecondaryDrawerItem().withName("CollapsableItem 2").withLevel(2).withIcon(GoogleMaterial.Icon.gmd_8tracks).withIdentifier(2001)
                        ),
                        new SecondaryDrawerItem().withName(R.string.drawer_item_open_source).withIcon(FontAwesome.Icon.faw_github).withIdentifier(20).withSelectable(false),
                        new SecondaryDrawerItem().withName(R.string.drawer_item_contact).withIcon(GoogleMaterial.Icon.gmd_format_color_fill).withIdentifier(21).withTag("Bullhorn"),
                        new DividerDrawerItem(),
                        new SwitchDrawerItem().withName("Switch").withIcon(Octicons.Icon.oct_tools).withChecked(true).withOnCheckedChangeListener(onCheckedChangeListener),
                        new SwitchDrawerItem().withName("Switch2").withIcon(Octicons.Icon.oct_tools).withChecked(true).withOnCheckedChangeListener(onCheckedChangeListener).withSelectable(false),
                        new ToggleDrawerItem().withName("Toggle").withIcon(Octicons.Icon.oct_tools).withChecked(true).withOnCheckedChangeListener(onCheckedChangeListener),
                        new DividerDrawerItem(),
                        new SecondarySwitchDrawerItem().withName("Secondary switch").withIcon(Octicons.Icon.oct_tools).withChecked(true).withOnCheckedChangeListener(onCheckedChangeListener),
                        new SecondarySwitchDrawerItem().withName("Secondary Switch2").withIcon(Octicons.Icon.oct_tools).withChecked(true).withOnCheckedChangeListener(onCheckedChangeListener).withSelectable(false),
                        new SecondaryToggleDrawerItem().withName("Secondary toggle").withIcon(Octicons.Icon.oct_tools).withChecked(true).withOnCheckedChangeListener(onCheckedChangeListener)
                ) // add the items we want to use with our Drawer
                .withOnDrawerItemClickListener(new Drawer.OnDrawerItemClickListener() {
                    @Override
                    public boolean onItemClick(View view, int position, IDrawerItem drawerItem) {
                        //check if the drawerItem is set.
                        //there are different reasons for the drawerItem to be null
                        //--> click on the header
                        //--> click on the footer
                        //those items don't contain a drawerItem

                        if (drawerItem != null) {
                            Intent intent = null;
                            if (drawerItem.getIdentifier() == 1) {
                                intent = new Intent(DrawerActivity.this, CompactHeaderDrawerActivity.class);
                            } else if (drawerItem.getIdentifier() == 2) {
                                intent = new Intent(DrawerActivity.this, ActionBarActivity.class);
                            } else if (drawerItem.getIdentifier() == 3) {
                                intent = new Intent(DrawerActivity.this, MultiDrawerActivity.class);
                            } else if (drawerItem.getIdentifier() == 4) {
                                intent = new Intent(DrawerActivity.this, NonTranslucentDrawerActivity.class);
                            } else if (drawerItem.getIdentifier() == 5) {
                                intent = new Intent(DrawerActivity.this, AdvancedActivity.class);
                            } else if (drawerItem.getIdentifier() == 7) {
                                intent = new Intent(DrawerActivity.this, EmbeddedDrawerActivity.class);
                            } else if (drawerItem.getIdentifier() == 8) {
                                intent = new Intent(DrawerActivity.this, FullscreenDrawerActivity.class);
                            } else if (drawerItem.getIdentifier() == 9) {
                                intent = new Intent(DrawerActivity.this, CustomContainerActivity.class);
                            } else if (drawerItem.getIdentifier() == 10) {
                                intent = new Intent(DrawerActivity.this, MenuDrawerActivity.class);
                            } else if (drawerItem.getIdentifier() == 11) {
                                intent = new Intent(DrawerActivity.this, MiniDrawerActivity.class);
                            } else if (drawerItem.getIdentifier() == 12) {
                                intent = new Intent(DrawerActivity.this, FragmentActivity.class);
                            } else if (drawerItem.getIdentifier() == 13) {
                                intent = new Intent(DrawerActivity.this, CollapsingToolbarActivity.class);
                            } else if (drawerItem.getIdentifier() == 14) {
                                intent = new Intent(DrawerActivity.this, PersistentDrawerActivity.class);
                            } else if (drawerItem.getIdentifier() == 15) {
                                intent = new Intent(DrawerActivity.this, CrossfadeDrawerLayoutActvitiy.class);
                            } else if (drawerItem.getIdentifier() == 20) {
                                intent = new LibsBuilder()
                                        .withFields(R.string.class.getFields())
                                        .withActivityStyle(Libs.ActivityStyle.LIGHT_DARK_TOOLBAR)
                                        .intent(DrawerActivity.this);
                            }
                            if (intent != null) {
                                DrawerActivity.this.startActivity(intent);
                            }
                        }

                        return false;
                    }
                })
                .withSavedInstance(savedInstanceState)
                .withShowDrawerOnFirstLaunch(true)
                .build();


        //if you have many different types of DrawerItems you can magically pre-cache those items to get a better scroll performance
        //make sure to init the cache after the DrawerBuilder was created as this will first clear the cache to make sure no old elements are in
        //RecyclerViewCacheUtil.getInstance().withCacheSize(2).init(result);
        new RecyclerViewCacheUtil<IDrawerItem>().withCacheSize(2).apply(result.getRecyclerView(), result.getDrawerItems());

        //only set the active selection or active profile if we do not recreate the activity
        if (savedInstanceState == null) {
            // set the selection to the item with the identifier 11
            result.setSelection(21, false);

            //set the active profile
            headerResult.setActiveProfile(profile3);
        }

        result.updateBadge(4, new StringHolder(10 + ""));

100

101

102

103

104

105

106

107

108

109

110

111

//Create the drawer

result = new DrawerBuilder()

.withActivity(this)

.withToolbar(toolbar)

.withHasStableIds(true)

.withItemAnimator(new AlphaCrossFadeAnimator())

.withAccountHeader(headerResult) //set the AccountHeader we created earlier for the header

.addDrawerItems(

new PrimaryDrawerItem().withName(R.string.drawer_item_compact_header).withDescription(R.string.drawer_item_compact_header_desc).withIcon(GoogleMaterial.Icon.gmd_sun).withIdentifier(1).withSelectable(false),

new PrimaryDrawerItem().withName(R.string.drawer_item_action_bar_drawer).withDescription(R.string.drawer_item_action_bar_drawer_desc).withIcon(FontAwesome.Icon.faw_home).withIdentifier(2).withSelectable(false),

new PrimaryDrawerItem().withName(R.string.drawer_item_multi_drawer).withDescription(R.string.drawer_item_multi_drawer_desc).withIcon(FontAwesome.Icon.faw_gamepad).withIdentifier(3).withSelectable(false),

new PrimaryDrawerItem().withName(R.string.drawer_item_non_translucent_status_drawer).withDescription(R.string.drawer_item_non_translucent_status_drawer_desc).withIcon(FontAwesome.Icon.faw_eye).withIdentifier(4).withSelectable(false).withBadgeStyle(new BadgeStyle().withTextColor(Color.WHITE).withColorRes(R.color.md_red_700)),

new PrimaryDrawerItem().withName(R.string.drawer_item_advanced_drawer).withDescription(R.string.drawer_item_advanced_drawer_desc).withIcon(GoogleMaterial.Icon.gmd_adb).withIdentifier(5).withSelectable(false),

new PrimaryDrawerItem().withName(R.string.drawer_item_embedded_drawer).withDescription(R.string.drawer_item_embedded_drawer_desc).withIcon(GoogleMaterial.Icon.gmd_battery).withIdentifier(7).withSelectable(false),

new PrimaryDrawerItem().withName(R.string.drawer_item_fullscreen_drawer).withDescription(R.string.drawer_item_fullscreen_drawer_desc).withIcon(GoogleMaterial.Icon.gmd_labels).withIdentifier(8).withSelectable(false),

new PrimaryDrawerItem().withName(R.string.drawer_item_custom_container_drawer).withDescription(R.string.drawer_item_custom_container_drawer_desc).withIcon(GoogleMaterial.Icon.gmd_my_location).withIdentifier(9).withSelectable(false),

new PrimaryDrawerItem().withName(R.string.drawer_item_menu_drawer).withDescription(R.string.drawer_item_menu_drawer_desc).withIcon(GoogleMaterial.Icon.gmd_filter_list).withIdentifier(10).withSelectable(false),

new PrimaryDrawerItem().withName(R.string.drawer_item_mini_drawer).withDescription(R.string.drawer_item_mini_drawer_desc).withIcon(GoogleMaterial.Icon.gmd_battery_charging).withIdentifier(11).withSelectable(false),

new PrimaryDrawerItem().withName(R.string.drawer_item_fragment_drawer).withDescription(R.string.drawer_item_fragment_drawer_desc).withIcon(GoogleMaterial.Icon.gmd_disc_full).withIdentifier(12).withSelectable(false),

new PrimaryDrawerItem().withName(R.string.drawer_item_collapsing_toolbar_drawer).withDescription(R.string.drawer_item_collapsing_toolbar_drawer_desc).withIcon(GoogleMaterial.Icon.gmd_camera_rear).withIdentifier(13).withSelectable(false),

new PrimaryDrawerItem().withName(R.string.drawer_item_persistent_compact_header).withDescription(R.string.drawer_item_persistent_compact_header_desc).withIcon(GoogleMaterial.Icon.gmd_brightness_5).withIdentifier(14).withSelectable(false),

new PrimaryDrawerItem().withName(R.string.drawer_item_crossfade_drawer_layout_drawer).withDescription(R.string.drawer_item_crossfade_drawer_layout_drawer_desc).withIcon(GoogleMaterial.Icon.gmd_format_bold).withIdentifier(15).withSelectable(false),

new SectionDrawerItem().withName(R.string.drawer_item_section_header),

new ExpandableDrawerItem().withName("Collapsable").withIcon(GoogleMaterial.Icon.gmd_collection_case_play).withIdentifier(19).withSelectable(false).withSubItems(

new SecondaryDrawerItem().withName("CollapsableItem").withLevel(2).withIcon(GoogleMaterial.Icon.gmd_8tracks).withIdentifier(2000),

new SecondaryDrawerItem().withName("CollapsableItem 2").withLevel(2).withIcon(GoogleMaterial.Icon.gmd_8tracks).withIdentifier(2001)

new SecondaryDrawerItem().withName(R.string.drawer_item_open_source).withIcon(FontAwesome.Icon.faw_github).withIdentifier(20).withSelectable(false),

new SecondaryDrawerItem().withName(R.string.drawer_item_contact).withIcon(GoogleMaterial.Icon.gmd_format_color_fill).withIdentifier(21).withTag("Bullhorn"),

new DividerDrawerItem(),

new SwitchDrawerItem().withName("Switch").withIcon(Octicons.Icon.oct_tools).withChecked(true).withOnCheckedChangeListener(onCheckedChangeListener),

new SwitchDrawerItem().withName("Switch2").withIcon(Octicons.Icon.oct_tools).withChecked(true).withOnCheckedChangeListener(onCheckedChangeListener).withSelectable(false),

new ToggleDrawerItem().withName("Toggle").withIcon(Octicons.Icon.oct_tools).withChecked(true).withOnCheckedChangeListener(onCheckedChangeListener),

new DividerDrawerItem(),

new SecondarySwitchDrawerItem().withName("Secondary switch").withIcon(Octicons.Icon.oct_tools).withChecked(true).withOnCheckedChangeListener(onCheckedChangeListener),

new SecondarySwitchDrawerItem().withName("Secondary Switch2").withIcon(Octicons.Icon.oct_tools).withChecked(true).withOnCheckedChangeListener(onCheckedChangeListener).withSelectable(false),

new SecondaryToggleDrawerItem().withName("Secondary toggle").withIcon(Octicons.Icon.oct_tools).withChecked(true).withOnCheckedChangeListener(onCheckedChangeListener)

) // add the items we want to use with our Drawer

.withOnDrawerItemClickListener(new Drawer.OnDrawerItemClickListener() {

@Override

public boolean onItemClick(View view, int position, IDrawerItem drawerItem) {

//check if the drawerItem is set.

//there are different reasons for the drawerItem to be null

//--> click on the header

//--> click on the footer

//those items don't contain a drawerItem

if (drawerItem != null) {

Intent intent = null;

if (drawerItem.getIdentifier() == 1) {

intent = new Intent(DrawerActivity.this, CompactHeaderDrawerActivity.class);

} else if (drawerItem.getIdentifier() == 2) {

intent = new Intent(DrawerActivity.this, ActionBarActivity.class);

} else if (drawerItem.getIdentifier() == 3) {

intent = new Intent(DrawerActivity.this, MultiDrawerActivity.class);

} else if (drawerItem.getIdentifier() == 4) {

intent = new Intent(DrawerActivity.this, NonTranslucentDrawerActivity.class);

} else if (drawerItem.getIdentifier() == 5) {

intent = new Intent(DrawerActivity.this, AdvancedActivity.class);

} else if (drawerItem.getIdentifier() == 7) {

intent = new Intent(DrawerActivity.this, EmbeddedDrawerActivity.class);

} else if (drawerItem.getIdentifier() == 8) {

intent = new Intent(DrawerActivity.this, FullscreenDrawerActivity.class);

} else if (drawerItem.getIdentifier() == 9) {

intent = new Intent(DrawerActivity.this, CustomContainerActivity.class);

} else if (drawerItem.getIdentifier() == 10) {

intent = new Intent(DrawerActivity.this, MenuDrawerActivity.class);

} else if (drawerItem.getIdentifier() == 11) {

intent = new Intent(DrawerActivity.this, MiniDrawerActivity.class);

} else if (drawerItem.getIdentifier() == 12) {

intent = new Intent(DrawerActivity.this, FragmentActivity.class);

} else if (drawerItem.getIdentifier() == 13) {

intent = new Intent(DrawerActivity.this, CollapsingToolbarActivity.class);

} else if (drawerItem.getIdentifier() == 14) {

intent = new Intent(DrawerActivity.this, PersistentDrawerActivity.class);

} else if (drawerItem.getIdentifier() == 15) {

intent = new Intent(DrawerActivity.this, CrossfadeDrawerLayoutActvitiy.class);

} else if (drawerItem.getIdentifier() == 20) {

intent = new LibsBuilder()

.withFields(R.string.class.getFields())

.withActivityStyle(Libs.ActivityStyle.LIGHT_DARK_TOOLBAR)

.intent(DrawerActivity.this);

}

if (intent != null) {

DrawerActivity.this.startActivity(intent);

}

return false;

}

})

.withSavedInstance(savedInstanceState)

.withShowDrawerOnFirstLaunch(true)

.build();

//if you have many different types of DrawerItems you can magically pre-cache those items to get a better scroll performance

//make sure to init the cache after the DrawerBuilder was created as this will first clear the cache to make sure no old elements are in

//RecyclerViewCacheUtil.getInstance().withCacheSize(2).init(result);

new RecyclerViewCacheUtil<IDrawerItem>().withCacheSize(2).apply(result.getRecyclerView(), result.getDrawerItems());

//only set the active selection or active profile if we do not recreate the activity

if (savedInstanceState == null) {

// set the selection to the item with the identifier 11

result.setSelection(21, false);

//set the active profile

headerResult.setActiveProfile(profile3);

}

result.updateBadge(4, new StringHolder(10 + ""));

Note: Here we have added multiple type of drawer items namely PrimaryDrawerItem, SectionDrawerItem, ExpandableDrawerItem and like that. Check the main drawer for all types of Drawer items provideded by the Material Drawer library

Here withOnDrawerItemClickListener handles all the drawer items click events related to Drawer.

Also, .withAccountHeader(headerResult) automatically sets the AccountHeader that we created earlier for the header.

That’s all folks. Stay updated.

Important Links:

https://github.com/mikepenz/MaterialDrawer

https://gitter.im/mikepenz/MaterialDrawer

Shubham Agarwal 14 December 2016

. . .

6 comments

Oliver Bob Nov 5, 2016 at 6:45 am

Please provide an example project for this tutorial, that would be much useful.

Shubham Agarwal Nov 7, 2016 at 5:56 am
Hi Oliver checkout the https://github.com/mikepenz/MaterialDrawer library. The docs and examples are easy to understand and implement. Also you will get the idea of many related view’s implementation that is provided by the library.

Reply
- Oliver Bob Nov 15, 2016 at 6:33 am
  Hi Shubham. I was able to create a new project for the lack of https://uploads.disquscdn.com/images/344314be192d19c895064e1c4b11de4ef3e351a06ffbf6a7c14ab33ec39fc8cf.png information in the web about Mike’s library. But it still uses his drawer:
  
  Collapsing toolbar with crossfade, searchbar and a extended actionbutton, plus the latest slider with pinch zoom which I implemented early at dawn before I finally went to sleep. 🙂
  
  I needed to overcome the limitations of a fairly recent obsession: the webview, that I was forced to approach material design beginning with this drawer.
  
  I’m only two weeks in Android development, but I know java for quit a long time and I haven’t tried it for years. I quit java when I realized that there was yet little support for distribution of java enabled phones around 2007 at least in my country, just about the time when Android was yet a company (which I haven’t heard yet back then) and the expense to do it was too high.
  
  But today, Android Studio provides many better promises for android applications than what was then available for mobile devices in Netbeans, even years later, while PHP and javascript was my haven.
  
  Reply
  - Shubham Agarwal Nov 15, 2016 at 7:26 am
    Yes true, Android Studio is now the official IDE for Android Application development. Our team is currently not using Mike’s library, we are using a custom one right now.
    There is a good community monitored by Mike himself https://gitter.im/mikepenz/MaterialDrawer you should really check out if there is any problem in using MaterialDrawer library.
    It was nice talking to you.
    
    Reply

Abhinav Nagani Sep 8, 2017 at 8:38 am

Could you provide us with the complete source code?

aastha gupta Jul 23, 2018 at 12:16 pm
Hi Abhinav Please go through this link.
https://github.com/mikepenz/MaterialDrawer

Reply

Implementation of mike penz’s MaterialDrawer Library for Navigation View

Demo

Setup

1. Provide the gradle dependency

2. Initialize and create the image loader logic

3. Create a few sample profile

4. Create the AccountHeader

5. Create the drawer

Leave a Comment Cancel Reply

6 comments

Implementation of mike penz’s MaterialDrawer Library for Navigation View

Demo

Setup

1. Provide the gradle dependency

2. Initialize and create the image loader logic

3. Create a few sample profile

4. Create the AccountHeader

5. Create the drawer

Leave a Comment Cancel Reply

6 comments

Message Sent!