Skip to content

Instantly share code, notes, and snippets.

@LalitMaganti
Last active September 29, 2018 00:23
Show Gist options
  • Save LalitMaganti/fb8d83ad463845e2d1d8 to your computer and use it in GitHub Desktop.
Save LalitMaganti/fb8d83ad463845e2d1d8 to your computer and use it in GitHub Desktop.
Material Design Navigation Items with NavigationView
<android.support.design.widget.NavigationView
android:id="@+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/navigation_drawer"
android:theme="@style/Theme.AppTheme.NavigationDrawer"/>

#####Problem: The NavigationView is an excellent component which simplifies much of the issues with generating a consistent and polished navigation drawer on Android. However, it does not quite follow the MD spec on how items should look

#####Solution: Create a couple of themes which sort this while maintaining backward compatibility to JB 4.2 (and further if you play around with fontFamily attribute). Note that you do need to have the support library v7 in your project for this to work without modifications - it requires the primary_text_default_material_light color from the library.

<resources>
<style name="Theme.AppTheme.NavDrawerItem" parent="Base.Theme.AppTheme.NavDrawerItem">
<item name="android:fontFamily">sans-serif-medium</item>
</style>
</resources>
<resources>
<style name="Base.Theme.AppTheme.NavDrawerItem">
<item name="android:textSize">14sp</item>
<item name="android:textColor">@color/primary_text_default_material_light</item>
</style>
<style name="Theme.AppTheme.NavigationDrawer" parent="Base.Theme.AppTheme">
<item name="textAppearanceListItem">@style/Theme.SkillTree.NavDrawerItem</item>
</style>
<style name="Theme.AppTheme.NavDrawerItem" parent="Base.Theme.AppTheme.NavDrawerItem">
<item name="android:fontFamily">sans-serif</item>
<item name="android:textStyle">bold</item>
</style>
</resources>
@kjeremy
Copy link

kjeremy commented May 30, 2015

What is Theme.SkillTree.NavDrawerItem?

@LalitMaganti
Copy link
Author

Sorry SkillTree should be AppTheme. SkillTree is something specific to a project I've been working on. I've updated the Gist.

@binaryKarmic
Copy link

How to go about for changing the item height using the theme ?
Also to mention i have overridden design_navigation_separator_vertical_padding to 0dp in order to show the item selection background to appear edge to edge when tapped.

@timusus
Copy link

timusus commented Aug 27, 2018

For the height, you override the listPreferredItemHeightSmall style property.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment