Navigation View Multiline Text

Question

I have an app with a Navigation View for my DrawerLayout. I add programmatically items in the menu because I receive the information over the network. But sometimes, an item name can be very long and is just cut off with even having the ellipsize icon "..."

Does someone have an idea on how to have multiline for my menu items?

Thanks

user5968678 · Answer 1 · 2017-08-26T07:55:30.033

Override design_navigation_menu_item.xml from the Android Support Design Library and modify the things you need (set android:ellipsize="end" and android:maxLines="2")

Your res/layout/design_navigation_menu_item.xml should look like this:

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
    <CheckedTextView
        android:id="@+id/design_menu_item_text"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:drawablePadding="@dimen/design_navigation_icon_padding"
        android:gravity="center_vertical|start"
        android:textAppearance="@style/TextAppearance.AppCompat.Body2"
        android:ellipsize="end"
        android:maxLines="2" />
    <ViewStub
        android:id="@+id/design_menu_item_action_area_stub"
        android:inflatedId="@+id/design_menu_item_action_area"
        android:layout="@layout/design_menu_item_action_area"
        android:layout_width="wrap_content"
        android:layout_height="match_parent" />
</merge>

However, you should just ellipsize the text to properly follow the Material Design guidelines.

You have not to override anything to just ellipsize the text:

Add a new style to the styles.xml
Set the new style to the NavigationView

res / values / styles.xml

<style name="TextAppearance">
    <item name="android:ellipsize">end</item>
</style>

res / layout / activity_main.xml

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_header_main"
    app:menu="@menu/activity_main_drawer"
    app:theme="@style/TextAppearance" />

Thank you. Using the following style I managed to show 2 lines without override anything: — Sergio Viudes, May 22 '19 at 12:28
This solution used to work well. But now, the `design_navigation_menu_item.xml` file is being restored back to its original version when I build the app. Does anyone have a workaround? (BTW, I have already tried building the app offline, in vain) — Kathir, Jun 07 '19 at 09:26
how to implement the same for options menu (system popup items on the right of toolbar)? — user924, Oct 06 '21 at 16:39

score 12 · Answer 2 · answered Aug 21 '19 at 20:12

Just add app:itemMaxLines="2" attribute on the NavigationView tag like this:

<com.google.android.mayerial.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header_main"
app:menu="@menu/activity_main_drawer"
app:itemMaxLines="2" />

NOTE: Material dependency is--

implementation 'com.google.android.material.material:1.0.0'

ATTENTION: the correct version is `1.1.0`, there is no such attr or method in `1.0.0` material lib — Dmitry Gryazin, Mar 16 '20 at 17:00

score 4 · Answer 3 · edited Jan 30 '20 at 19:12

Add a style to your NavigationDrawer and then include 2 lines in the style.

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:background="@drawable/estilo"
    android:fitsSystemWindows="true"
    app:itemTextColor="@color/white"
    app:theme="@style/NavigationDrawerStyle"
    app:menu="@menu/activity_main_drawer" />

<style name="NavigationDrawerStyle">
    <item name="android:lines">2</item>
</style>

score 0 · Answer 4 · answered Apr 19 '16 at 22:08

0

Check out this answer. Default android slide menu is not very flexible, most likely you will have to create your custom view.
I really this tutorial from AndroidHive.

answered Apr 19 '16 at 22:08

chabislav

939
1
8
27

Farshad · Answer 5 · 2017-05-12T22:17:35.763

I had the same problem and I tried and tried, There was no progress with Menu, I don't say it was impossible but I couldn't find a way to break MenuItem lines.

But if you don't insist on using Menu I suggest you to use a ListView or RecyclerView in your layout like this:

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/nav_draw_header">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_marginTop="160dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</android.support.design.widget.NavigationView>

As you can see there is no special thing to explain, no menu, just a RecyclerView, layout_marginTop value is same as header height, I'm sure you know the rest of the story (How to fire up RecyclerView), This approach gives more flexibility to NavigationView menu items (actually RecyclerView items). If my answer is not clear enough to you let me know.

Here is the result:

score -1 · Answer 6 · answered Sep 24 '18 at 16:28

-1

You shouldn't change that.

Check out the material design guideline: https://material.io/design/components/navigation-drawer.html#anatomy

answered Sep 24 '18 at 16:28

Leandroid

1,997
2
17
19

Personally, in certain cases, I believe that breaking the Material design guidelines doesn't necessarily mean Bad UI design. This was one such case (for my implementation) – Kathir Feb 06 '19 at 16:05
1

in support of what @Kathir said, there's a reason they're called "guidelines" and not "rules". Basically: "it's your app, make it your own. Here's some helpful guidelines to assist you with design. Feel free to use them... or not" – Psest328 Mar 28 '19 at 15:07

score -1 · Answer 7 · edited Jan 30 '20 at 16:13

Add a style in your NavigationDrawer that declares the number of lines as 'two', like so:

 <style name="NavigationDrawerStyle">
        <item name="android:lines">2</item>
    </style>

and in your view:

<android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@drawable/estilo"
        android:fitsSystemWindows="true"
        app:itemTextColor="@color/white"
        app:theme="@style/NavigationDrawerStyle"
        app:menu="@menu/activity_main_drawer" />

Navigation View Multiline Text

7 Answers7

Linked