How can I change the NavigationView's item text size?
Solution 1
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:
- add
app:theme="@style/yourStyle.Drawer"
to yourNavigationView
in your layout.xml - in styles.xml, add
android:textSize="16sp"
in styleyourStyle.Drawer
Solution 2
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
Solution 3
You can customize everything from text color to size and font in your style.xml
<style name="NavDrawerTextStyle" parent="Base.TextAppearance.AppCompat">
<item name="android:textColor">@color/colorPrimaryDark</item>
<item name="android:textSize">16sp</item>
<item name="android:textStyle">bold</item>
</style>
and then in your NavigationView
:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<android.support.design.widget.NavigationView
...
android:itemTextAppearance="@style/NavDrawerTextStyle"
/>
Solution 4
you can use this attributes inside xml file
app:itemTextAppearance="?android:attr/textAppearanceMedium"
or for small text
app:itemTextAppearance="?android:attr/textAppearance"
or for large text
app:itemTextAppearance="?android:attr/textAppearanceLarge"
Solution 5
This worked for me:
activity_main.xml
<android.support.design.widget.NavigationView
android:id="@+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:theme="@style/NavigationDrawerStyle"
app:headerLayout="@layout/navdrawer_header"
app:menu="@menu/navdrawer_menu" />
styles.xml
<style name="NavigationDrawerStyle">
<item name="android:textSize">16sp</item>
</style>
Jay Wick
Updated on March 30, 2021Comments
-
Jay Wick about 3 years
Google recently released the
android.support.design.widget.NavigationView
widget as part of thecom.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 notextSize
ortextStyle
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)? -
Jay Wick almost 9 yearshey thanks a lot for your answer, however I came from implementing my own navdrawer to using the support one from Google. I was hoping to achieve this using
NavigationView
itself. -
Chaudhary Amar almost 9 yearsdude you have to make a layout as you like to put there in your adapter.
-
Jay Wick almost 9 yearsI think we're implementing the nav drawer differently. I'm not sure what you mean by "List Adapter Layout". With the design support library's
NavigationView
there's no list adapters at play butapp:menu="@menu/drawer"
referencing a standard menu. See the first snippet of goo.gl/D0kVBH for more details. Apologies if I'm understanding you wrong :) -
Jay Wick almost 9 yearsSo it looks like a bug then! Cool stuff! If anyone is stuck on 22.2.0 for some reason, please see my answer.
-
Akhil Dad over 8 yearsare you suggesting to override all these xmls and make my own or just use those parameters and put it in the style? Also is there any way I can specify my own font for this?
-
Sierisimo about 8 yearsThis is the kind of responde I needed, adding custom style for this values helps a lot. Thanks.
-
Akshatha S R almost 7 yearsHow do I set roboto-medium font for the item title?
-
Akshatha S R almost 7 yearssans-serif-medium option is not available for me
-
iSofia over 6 yearsThank you, although not for the solution per se, but for the example for implementing the Parcelable.Creator method.
-
Mrinal over 6 yearsI have a navigation header as well and changing the
textSize
changes the size of the texts for the menu items but changing thetextColor
changes the colour of the text for the header.<style name="NavigationDrawer" > <item name="android:textSize">20sp</item> <item name="android:textColor">@color/white</item> </style>
I wanted to change the colour of the texts for the menu items. Any idea? -
sagar.android over 5 yearsThis actually works but in case of if we want to apply custom ttf then how to do that?
-
Vivek Pratap Singh over 5 years@ojonugwaochalifu Can we set layout_gravity to position items centre_horizontal?
-
Akanshi Srivastava almost 5 yearsHey, this worked for me when I changed android:itemTextAppearance="@style/NavDrawerTextStyle"/> to app:itemTextAppearance="@style/NavDrawerTextStyle"/>
-
Wowo Ot almost 3 yearsThanks Perfect answer.