Skip to content
This repository has been archived by the owner on Apr 30, 2020. It is now read-only.

Theming

Fabio Biola edited this page Jan 30, 2015 · 3 revisions

This library uses a theming system that allows you to set up the navigation drawer style easily.

Drawer Type

The drawer type allows you to set up how to use the drawer header.

Accounts

As default, the drawer type is setted to Accounts.


This type of drawer is based on google apps, and implements the same animations.

Check the Accounts page for all explanation

Image


This drawer uses a simple single image as drawer. You can use it for showing the app logo or simply for a good design.

For setting up, add this item to your custom theme:

<item name="drawerType">@integer/DRAWERTYPE_IMAGE</item>

Then go to your activity class and add this in your init method:

// for drawable resources
setDrawerHeaderImage(R.drawable.mat2);

// and for bitmaps
this.setDrawerHeaderImage(myBitmap);

No Drawer Header

This drawer type remove the header from your drawer, so it will be like this:

For setting up, add this item to your custom theme:

<item name="drawerType">@integer/DRAWERTYPE_NO_HEADER</item>

Custom Drawer Header


When you want to have a custom drawer, you can use this type.

For setting up, add this item to your custom theme:

<item name="drawerType">@integer/DRAWERTYPE_CUSTOM</item>

Then go to your activity class and add this in your init method:

// create and set the header
View view = LayoutInflater.from(this).inflate(R.layout.custom_drawer,null);
// ...
setDrawerHeaderCustom(view);

Ripple Backport

The ripple effect avariable on lollipop is great. So why don't use it on the older version of android? From API 14+ you can enable the lollipop ripple animation to all devices, adding this to your theme:

<item name="rippleBackport">true</item>

Kitkat with traslucent status bar (Lollipop style)

With kitkat, there is the possibility to have the drawer over the status bar, like on lollipop.
To add this functionality, change your parent Theme like this:

MaterialNavigationDrawerTheme -> MaterialNavigationDrawerTheme.TranslucentKitKatStatusBar

NOTE: if you enable this functionality, on kitkat will be enabled the ripple effect as default

Multipane for tablets

If you are developing an application and you want to use a multipane layout as defined there
you can add this item to your theme:

<item name="multipaneSupport">true</item>

and the drawer for tablet in landscape mode will be always open.

Advanced Theming

If you want to create a navigation drawer with different color than the dark or the light,
e.g. red background and blue writing, you can set all the drawer colors.

<style name="MySubheaderTheme">
    <item name="subheaderTitleColor">#00F</item>
</style>

<style name="MySectionTheme" >
    <item name="sectionColorIcon">#00F</item>
    <item name="sectionColorText">#00F</item>
    <item name="sectionColorNotification">#00F</item>
    <item name="sectionBackgroundColorPressed">#160000FF</item>
    <item name="sectionBackgroundColorSelected">#0A0000FF</item>
    <item name="sectionBackgroundColor">#000000FF</item>
</style>

<style name="MyNavigationDrawerTheme" parent="MaterialNavigationDrawerTheme" >
        <!-- Other customization -->
        <item name="drawerColor">#F00</item>
        <item name="sectionStyle">@style/MySectionTheme</item>
        <item name="subheaderStyle">@style/MySubheaderTheme</item>
</style>

Remove change account button from Accounts header


You can remove it setting this item into your theme configuration:

<item name="singleAccount">true</item>