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

Answer 1

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" />

Answer 2

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'