• Stars
    star
    11,670
  • Rank 2,828 (Top 0.06 %)
  • Language
    Kotlin
  • License
    Apache License 2.0
  • Created almost 10 years ago
  • Updated 5 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

The flexible, easy to use, all in one drawer library for your Android project. Now brand new with material 2 design.

MaterialDrawer

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


What's included ๐Ÿš€ โ€ข Setup ๐Ÿ› ๏ธ โ€ข Migration Guide ๐Ÿงฌ โ€ข WIKI / FAQ ๐Ÿ“– โ€ข Used by โ€ข Sample App


What's included ๐Ÿš€

  • the easiest possible integration
  • uses the androidX support libraries
  • compatible down to API Level 16
  • includes an AccountSwitcher
  • quick and simple api
  • follows the NEW Google Material Design Guidelines
  • use vector (.svg) icons and icon fonts via the Android-Iconics integration
  • Google Material Design Icons, Google Material Community Design Icons, FontAwesome and more
  • comes with various themes which help to get your own themes clean
  • modify the colors on the go
  • comes with multiple default drawer items
  • based on a RecyclerView
  • RTL support
  • Gmail like MiniDrawer
  • expandable items
  • badge support
  • define custom drawer items
  • tested and stable
  • sticky footer or headers
  • absolutely NO limits
  • NavController support by @petretiandrea

If you upgrade from < 8.0.0 follow the MIGRATION GUIDE

Preview

Screenshots ๐ŸŽ‰

Image

Setup

Latest releases ๐Ÿ› 

  • Kotlin && Material 3 | v9.0.1
  • Kotlin | v8.4.5 (Provided as-is only)
  • Java && AndroidX | v6.1.2 (Provided as-is only)
  • Java && AppCompat | v6.0.9 (Provided as-is only)

1. Provide the gradle dependency

The latest release is available on Maven Central.

implementation("com.mikepenz:materialdrawer:9.0.1")
//required support lib modules
implementation "androidx.appcompat:appcompat:${versions.appcompat}"
implementation "androidx.recyclerview:recyclerview:${versions.recyclerView}"
implementation "androidx.annotation:annotation:${versions.annotation}"
implementation "com.google.android.material:material:1.5.0-alpha05" // requires at least 1.5.0-x
implementation "androidx.constraintlayout:constraintlayout:${versions.constraintLayout}"

NavController Support @ Maven Central.

// Add for NavController support
implementation "com.mikepenz:materialdrawer-nav:${lastestMaterialDrawerRelease}"

Android-Iconics Support @ Maven Central .

// Add for Android-Iconics support
implementation "com.mikepenz:materialdrawer-iconics:${lastestMaterialDrawerRelease}"

2. Add the Drawer into the XML

The MaterialDrawerSliderView has to be provided as child of the DrawerLayout and will as such act as the slider

<androidx.drawerlayout.widget.DrawerLayout xmlns : android ="http://schemas.android.com/apk/res/android"
xmlns:app = "http://schemas.android.com/apk/res-auto"
android:id = "@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    ... your content ...

    <com.mikepenz.materialdrawer.widget.MaterialDrawerSliderView
        android:id="@+id/slider"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true" />
</androidx.drawerlayout.widget.DrawerLayout>

3. Add the DrawerStyle to your theme

<style name="SampleApp.DayNight" parent="Theme.Material3.DayNight.NoActionBar">
    ...
    <item name="materialDrawerStyle">@style/Widget.MaterialDrawerStyle</item>
    <item name="materialDrawerHeaderStyle">@style/Widget.MaterialDrawerHeaderStyle</item>
    ...
</style>

Great. Your drawer is now ready to use.

Note

Using v9.x with Material 3 theming requires a Material3 theme as base for the activity.

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 variable
val item1 = PrimaryDrawerItem().apply { nameRes = R.string.drawer_item_home; identifier = 1 }
val item2 = SecondaryDrawerItem().apply { nameRes = R.string.drawer_item_settings; identifier = 2 }

// get the reference to the slider and add the items
slider.itemAdapter.add(
	    item1,
	    DividerDrawerItem(),
	    item2,
	    SecondaryDrawerItem().apply { nameRes = R.string.drawer_item_settings }
)

// specify a click listener
slider.onDrawerItemClickListener = { v, drawerItem, position ->
    // do something with the clicked item :D
    false
}

Selecting an item

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

By default, when a drawer item is clicked, it becomes the new selected item. If this isn't the expected behavior, you can disable it for this item using isSelectable = false:

SecondaryDrawerItem().apply { nameRes = R.string.drawer_item_dialog; isSelectable = false }

Modify items or the drawer

//modify an item of the drawer
item1.apply {
  nameText = "A new name for this drawerItem"; badge = StringHolder("19")
  badgeStyle = BadgeStyle().apply { textColor = ColorHolder.fromColor(Color.WHITE); color = ColorHolder.fromColorRes(R.color.md_red_700) }
}
//notify the drawer about the updated element. it will take care about everything else
slider.updateItem(item1)

//to update only the name, badge, icon you can also use one of the quick methods
slider.updateName(1, "A new name")

//the result object also allows you to add new items, remove items, add footer, sticky footer, ..
slider.addItem(DividerDrawerItem())
slider.addStickyFooterItem(PrimaryDrawerItem().apply { nameTest = "StickyFooter" })

//remove items with an identifier
slider.removeItem(2)

//open / close the drawer
slider.drawerLayout?.openDrawer(slider)
slider.drawerLayout?.closeDrawer(slider)

//get the reference to the `DrawerLayout` itself
slider.drawerLayout

Add profiles and an AccountHeader

// Create the AccountHeader
headerView = AccountHeaderView(this).apply {
    attachToSliderView(slider) // attach to the slider
    addProfiles(
        ProfileDrawerItem().apply { nameText = "Mike Penz"; descriptionText = "[email protected]"; iconRes = R.drawable.profile; identifier = 102 }
    )
    onAccountHeaderListener = { view, profile, current ->
        // react to profile changes
        false
    }
    withSavedInstance(savedInstanceState)
}

Android-Iconics support

The MaterialDrawer provides an extension for the Android-Iconics library. This allows you to create your DrawerItems with an icon from any font.

Choose the fonts you need. Available Fonts

// Add for Android-Iconics support
implementation "com.mikepenz:materialdrawer-iconics:${lastestMaterialDrawerRelease}"

// fonts
implementation 'com.mikepenz:google-material-typeface:x.y.z@aar' //Google Material Icons
implementation 'com.mikepenz:fontawesome-typeface:x.y.z@aar'     //FontAwesome
//now you can simply use any icon of the Google Material Icons font
PrimaryDrawerItem().apply { iconicsIcon = GoogleMaterial.Icon.gmd_wb_sunny }
//Or an icon from FontAwesome
SecondaryDrawerItem().apply { iconicsIcon = FontAwesomeBrand.Icon.fab_github }

Advanced Setup

For advanced usecases. Please have a look at the provided sample activities.

Load images via url

The MaterialDrawer supports fetching images from URLs and setting them for the Profile icons. As the MaterialDrawer does not contain an ImageLoading library the dev can choose his own implementation (Picasso, Glide, ...). This has to be done, before the first image should be loaded via URL. (Should be done in the Application, but any other spot before loading the first image is working too)

//initialize and create the image loader logic
DrawerImageLoader.init(object : AbstractDrawerImageLoader() {
    override fun set(imageView: ImageView, uri: Uri, placeholder: Drawable) {
        Picasso.get().load(uri).placeholder(placeholder).into(imageView)
    }

    override fun cancel(imageView: ImageView) {
        Picasso.get().cancelRequest(imageView)
    }
    
    /*
    override fun set(imageView: ImageView, uri: Uri, placeholder: Drawable, tag: String?) {
        super.set(imageView, uri, placeholder, tag)
    }

    override fun placeholder(ctx: Context): Drawable {
        return super.placeholder(ctx)
    }

    override fun placeholder(ctx: Context, tag: String?): Drawable {
        return super.placeholder(ctx, tag)
    }
    */
})

An implementation with GLIDE v4 (See tag v6.1.1 for glide v3 sample) can be found in the sample application

JVM Target 1.8

// Since 8.1.0 the drawer includes core ktx 1.3.0 which requires jvm 1.8
kotlinOptions {
    jvmTarget = "1.8"
}

Style the drawer ๐Ÿ–Œ๏ธ

Custom style - styles.xml

Create your custom style. If you don't need a custom theme see the next section, how you can set the colors just by overwriting the original colors.

// define a custom drawer style
<style name="Widget.MaterialDrawerStyleCustom" parent="Widget.MaterialDrawerStyle">
    <item name="materialDrawerInsetForeground">#4000</item>
    <!-- MaterialDrawer specific values -->
    <item name="materialDrawerBackground">?colorSurface</item>
    <item name="materialDrawerPrimaryText">@color/color_drawer_item_text</item>
    <item name="materialDrawerPrimaryIcon">@color/color_drawer_item_text</item>
    <item name="materialDrawerSecondaryText">@color/color_drawer_item_text</item>
    <item name="materialDrawerSecondaryIcon">@color/color_drawer_item_text</item>
    <item name="materialDrawerDividerColor">?colorOutline</item>
    <item name="materialDrawerSelectedBackgroundColor">?colorSecondaryContainer</item>
</style>

// define a custom header style
<style name="Widget.MaterialDrawerHeaderStyleCustom" parent="">
    <item name="materialDrawerCompactStyle">true</item>
    <item name="materialDrawerHeaderSelectionText">?colorOnSurface</item>
    <item name="materialDrawerHeaderSelectionSubtext">?colorOnSurface</item>
</style>

// define the custom styles for the theme
<style name="SampleApp" parent="Theme.Material3.Light.NoActionBar">
    ...
    <item name="materialDrawerStyle">@style/Widget.MaterialDrawerStyleCustom</item>
    <item name="materialDrawerHeaderStyle">@style/Widget.MaterialDrawerHeaderStyleCustom</item>
    ...
</style>

Adjust BezelImageView style

Overwrite the Style of the BezelImageView for the whole MaterialDrawer

<style name="BezelImageView">
    <item name="biv_maskDrawable">@drawable/material_drawer_rectangle_mask</item>
    <item name="biv_drawCircularShadow">false</item>
    <item name="biv_selectorOnPress">@color/material_drawer_primary</item>
    <item name="android:scaleType">centerInside</item>
</style>

Used by

(feel free to send me new projects)

Articles about the MaterialDrawer

Credits

Developed By

License

Copyright 2021 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

   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.

More Repositories

1

Android-Iconics

Android-Iconics - Use any icon font, or vector (.svg) as drawable in your application.
Kotlin
5,166
star
2

FastAdapter

The bullet proof, fast and easy to use adapter library, which minimizes developing time to a fraction...
Kotlin
3,828
star
3

AboutLibraries

AboutLibraries automatically collects all dependencies and licenses of any gradle project (Kotlin MultiPlatform), and provides easy to integrate UI components for Android and Compose-jb environments
Kotlin
3,595
star
4

LollipopShowcase

A simple app to showcase Androids Material Design and some of the cool new cool stuff in Android Lollipop. RecyclerView, CardView, ActionBarDrawerToggle, DrawerLayout, Animations, Android Compat Design, Toolbar
Java
1,762
star
5

Android-ActionItemBadge

This library offers a simple method to add a small badge icon to your ActionBar-MenuItem
Java
1,274
star
6

wallsplash-android

wall:splash is a free open source android client for the awesome unsplash.com service (Free (do whatever you want) high-resolution photos)
Java
793
star
7

release-changelog-builder-action

A GitHub action that builds your release notes / changelog fast, easy and exactly the way you want.
TypeScript
693
star
8

multiplatform-markdown-renderer

Markdown renderer for Kotlin Multiplatform Projects (Android, iOS, Desktop), using Compose.
Kotlin
363
star
9

ItemAnimators

ItemAnimators: Supercharged Animators for your RecyclerView
Java
336
star
10

action-junit-report

Reports junit test results as GitHub Pull Request Check
TypeScript
297
star
11

Materialize

A easy helper library for Android to manage your applications StatusBarShadow, FullScreen behavior and much more over API Levels down to 10
Java
295
star
12

HypnoticCanvas

A shader modifier for Compose Multiplatform / Jetpack Compose
Kotlin
132
star
13

AnimatedGridView

A simple library which adds some basic animation if you delete fields. There's also a HeaderGridView if you need such a view for your projects :D
Java
116
star
14

CrossfadeDrawerLayout

Add a 2-Step DrawerLayout to your application, with a nice crossfade effect
Java
95
star
15

Crossfader

Crossfader is a small library to provide an easy to use and fast helper class for the great CrossFadeSlidingPaneLayout
Java
81
star
16

gradle-dependency-submission

Calculates dependencies for a Gradle build-target and submits the list to the Dependency Submission API
TypeScript
80
star
17

xray-action

... a GitHub action to import test results into "Xray" - A complete Test Management tool for Jira.
TypeScript
47
star
18

storyblok-mp-SDK

Storyblok Kotlin Multiplatform SDK (Android, JVM, JS, iOS, ...)
Kotlin
22
star
19

ModernJenkins-Theme

A quick css to beautify your jenkins (SimpleThemePlugin required)
CSS
20
star
20

HoloKitKatDrawer

[DEPRECATED] See for the MaterialDrawer for updates | Description: A simple Project to show how to use the new TranslucentDecor with a Drawer
Java
14
star
21

Storyblok-Android-SDK

Storyblok MP SDK available here: https://github.com/mikepenz/storyblok-mp-SDK
Kotlin
14
star
22

ApplicationReader

[DEPRECATED] OpenSourced source code for ApplicationReader util used for icon themeing
Java
9
star
23

Alternative-findr

[DEPRECATED!] Android application for the awesome site alternative.to
Java
6
star
24

storyblok-mp-SDK-sample

Storyblok Kotlin Multiplatform SDK sample (Android, JVM, JS)
Kotlin
6
star
25

jira-release-composite-action

Composite action, taking release notes as input, and automatically migrating tickets for release
6
star
26

storyblok-mp-SDK-blog

Blog implemented via the Storyblok Kotlin Multiplatform SDK (Android, JVM)
Kotlin
5
star
27

blog_CredentialShowcase

Simple showcase to highlight credential security
Kotlin
2
star
28

SpannableBar

Java
2
star
29

teaMSeven-MOD

[DEPRECATED] A smart tool for our awesome teaMSeven Kernel!
Java
1
star
30

InterfaceLIFT-Pane

An InterfaceLIFT Preference Pane for Mac OS X
Objective-C
1
star
31

MIcons-Builder

[DEPRECATED] MIUI Icons Builder/Configurator
JavaScript
1
star
32

release-changelog-builder-action-playground

Playground repo for testing purposes of the release-changelog-builder-action
1
star