Google recently released the android.support.design.widget.NavigationView
widget as part of the com.android.support:design:22.2.0
library, which greatly simplified (and standardises) the process of creating a NavigationDrawer.
However according to the design specs, the list item should be Roboto Medium, 14sp, 87% #000000. The NavigationView
exposes no textSize
or textStyle
to customise this.
What are my options if I'm pedantic about maintaining the correct design specifications using the Google provided NavigationView
(or customising it in any other way)?
Create new style at the file app/src/main/res/values/styles.xml
<style name="NavigationDrawerStyle"> <item name="android:textSize">20sp</item><!-- text size in menu--> <!-- item size in menu--> <item name="android:listPreferredItemHeightSmall">40dp</item> <item name="listPreferredItemHeightSmall">40dp</item> <!-- item padding left in menu--> <item name="android:listPreferredItemPaddingLeft">8dp</item> <item name="listPreferredItemPaddingLeft">8dp</item> <!-- item padding right in menu--> <item name="android:listPreferredItemPaddingRight">8dp</item> <item name="listPreferredItemPaddingRight">8dp</item> </style>
Add it to your main_layout.xml
<android.support.design.widget.NavigationView ... app:theme="@style/NavigationDrawerStyle" ....> </android.support.design.widget.NavigationView>
All params of the navigation items (which you can change) are located here (path to file ...\sdk\extras\android\support\design\res\layout\design_navigation_item.xml
)
design_navigation_item.xml
<android.support.design.internal.NavigationMenuItemView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="?attr/listPreferredItemHeightSmall" android:paddingLeft="?attr/listPreferredItemPaddingLeft" android:paddingRight="?attr/listPreferredItemPaddingRight" android:drawablePadding="@dimen/navigation_icon_padding" android:gravity="center_vertical|start" android:maxLines="1" android:fontFamily="sans-serif-thin" android:textSize="22sp" android:textAppearance="?attr/textAppearanceListItem" />
Also you can override *.xml
file (copy file from ...\sdk\extras\android\support\design\res\layout\design_navigation_item.xml
), just in your app/src/main/res/layout
folder create a layout named the same design_navigation_item.xml
.
All layouts which can be Overriden are located here ...\sdk\extras\android\support\design\res\layout\
design_layout_snackbar.xml design_layout_snackbar_include.xml design_layout_tab_icon.xml design_layout_tab_text.xml design_navigation_item.xml design_navigation_item_header.xml design_navigation_item_separator.xml design_navigation_item_subheader.xml design_navigation_menu.xml
[UPDATE] Each version of com.android.support:design-{version}
lib has different items to override. Check all what you need in
[UPDATE 04/14/2020]
If you are using com.google.android.material.navigation.NavigationView
then open the class, and you will see:
public NavigationView(@NonNull Context context, @Nullable AttributeSet attrs) { this(context, attrs, R.attr.navigationViewStyle); }
So you can use attr navigationViewStyle
to set your own style for the NavigationView via theme of your app:
NB: parent theme of AppTheme should be Theme.MaterialComponents
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar.Bridge"> ... <item name="navigationViewStyle">@style/AppNavigationViewStyle</item> ... </style> <style name="AppNavigationViewStyle" parent="Widget.MaterialComponents.NavigationView"> <item name="itemTextAppearance">@style/AppNavigationViewItemTextAppearance</item> </style> <style name="AppNavigationViewItemTextAppearance" parent="@style/TextAppearance.MaterialComponents.Subtitle2"> <item name="android:textSize">18sp</item> </style>
Just open parent theme to see all <item name
attrs for override
Since Android Support Library 22.2.1, Google has changed default textSize of items in NavigationView
from 16sp to 14sp, which suits Material Design guideline well. However, in some cases(for example, when you want to support Chinese language), it seems larger textSize is better. Solution is simple:
app:theme="@style/yourStyle.Drawer"
to your NavigationView
in your layout.xmlandroid:textSize="16sp"
in style yourStyle.Drawer
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With