android navigation drawer item without icon, display text only

Question

I want to add a menu item entry without icon to navigation drawer in my android app.

I have checked the samples at NavigationDrawer and read through the tutorial at Android Developer training article.

I edited the sample menu to add new menu items "My Text 1" and "My Text 2" as per this xml file following this image:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

<group android:checkableBehavior="single">
    <item
        android:id="@+id/nav_camera"
        android:icon="@drawable/ic_menu_camera"
        android:title="Import" />
    <item
        android:id="@+id/nav_gallery"
        android:icon="@drawable/ic_menu_gallery"
        android:title="Gallery" />
    <item
        android:id="@+id/nav_slideshow"
        android:icon="@drawable/ic_menu_slideshow"
        android:title="Slideshow" />
    <item
        android:id="@+id/nav_manage"
        android:icon="@drawable/ic_menu_manage"
        android:title="Tools" />
    <item
        android:id="@+id/example"
        android:title="My Text 1" />
</group>

<item android:title="Communicate">
    <menu>
        <item
            android:id="@+id/nav_share"
            android:icon="@drawable/ic_menu_share"
            android:title="Share" />
        <item
            android:id="@+id/nav_send"
            android:icon="@drawable/ic_menu_send"
            android:title="Send" />
        <item
            android:id="@+id/sample"
            android:title="My Text 2" />
    </menu>
</item>

</menu>

If i remove the two lines declaring icons for "Share" and "Send", then "My Text 2" gets aligned to the left as shown in this image

But i want to keep the icons of other items, and just add a text item, i hope there is some parameter that allows no icon menu item in groups.

I tried using android_icon="@android/color:transparent", but that doesn't/can't solve the problem either.

I dont want to provide any icons for my menu items, but i expect that text to align to the left. Is that achievable? If yes, how?

Answer 1

No custom layout here.

You have to create a second group with an ID (even dummy) then in this group put all the items without any icon.

Note: every time the group ID changes Android adds a separator line.

<menu xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  tools:showIn="navigation_view">

<group android:checkableBehavior="single">
    <item
        android:id="@+id/nav_home"
        android:icon="@drawable/ic_menu_dummy1"
        android:title="@string/nav_menu_home"/>
    <item
        android:id="@+id/nav_profile"
        android:icon="@drawable/ic_menu_dummy2"
        android:title="@string/nav_menu_profile"/>
</group>

<group android:id="@+id/dummy">
    <item
        android:id="@+id/nav_info"
        android:title="@string/nav_menu_info"/>
    <item
        android:id="@+id/nav_settings"
        android:title="@string/nav_menu_settings"/>
</group>

Answer 2

A simple alternative would be to use a custom layout instead of a menu.

It'll be a simple change. Simply, you can just create a custom layout as you would in any other layout but instead of indicating the corresponding menu within the NavigationView, instead of using the app:menu="@menu/drawer_view" attribute.

You can simply follow the layout structure of in your Activity.

<android.support.design.widget.CoordinatorLayout

     <android.support.v4.widget.DrawerLayout

           <RelativeLayout/>

           <LinearLayout/>

    </android.support.v4.widget.DrawerLayout>

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

There's no fundamental difference between the structure of the tutorial and that of this layout except, I've chosen to use a LinearLayout instead of a menu resource for the side menu (obviously the rootlayout for the side view will be at your discretion but for your use-case LinearLayout fits best.).

An Example

Activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@color/colorAccent"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/drawer_layout"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:fitsSystemWindows="true">

            <include layout="@layout/content_activity_main"/>

            <include layout="@layout/layout_side_view"/>

    </android.support.v4.widget.DrawerLayout>
</android.support.design.widget.CoordinatorLayout>

You'll notice in this layout that there are two include statements in place of the layouts before as shown in the structure before. One for the actual content of the activity and one for the side view. I'll show you an example of your requested use case layout below:

layout_side_view.xml

 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 <LinearLayout
    android:orientation="vertical"
    android:background="@color/white"
    android:layout_width="match_parent"
    android:layout_height="50dp">

    <TextView
        android:id="@+id/with_icon"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:textColor="@color/black"
        android:drawableLeft="@drawable/icon"
        android:drawableStart="@drawable/icon"
        android:drawablePadding="15dp"
        android:gravity="start|center_vertical"
        android:text="TextView 1"/>

</LinearLayout>

<LinearLayout
    android:orientation="vertical"
    android:background="@color/white"
    android:layout_width="match_parent"
    android:layout_height="50dp">

    <TextView
        android:id="@+id/without_icon"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:textColor="@color/black"
        android:gravity="start|center_vertical"
        android:text="Text View 2"/>

</LinearLayout>


</LinearLayout>  

You can then simply customize your layout and where you want a TextView with an icon on the left use the DrawableLeft | DrawableStart attribute, and if you don't want an icon simply just don't use it.

I hope this helps.

Note:

I would look into what the DrawerLayout does and why it is structured that way, the content goes below the menu for what reason? Looking into these things helps you develop an understanding where you can customize layout structures to your liking.

Answer 3

Create your custom layout for the Navigation Drawer and do whatever you want with that:

This is my xml file for custom design of drawer layout-

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".HomeActivity">

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- The main content view -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <include
                android:id="@+id/rl_topbar"
                layout="@layout/inflate_topbar" />

            <FrameLayout
                android:id="@+id/fl_content_frame"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_below="@id/rl_topbar" />
        </LinearLayout>

        <!-- The navigation drawer -->
        <LinearLayout
            android:id="@+id/ll_navbar_container"
            android:layout_width="@dimen/navbar_width"
            android:layout_height="match_parent"
            android:layout_gravity="right"
            android:background="@color/color_255_255_255"
            android:orientation="vertical">

            <!--This is my custom layout how I want, you can design as you want and include it-->
            <include
                android:id="@+id/ll_navbar"
                layout="@layout/inflate_navbar" />
        </LinearLayout>

    </android.support.v4.widget.DrawerLayout>

    <!--Add progress bar-->
    <!--Add other views-->
</RelativeLayout>

Now in your activity of this xml file take the references of views and make click events or other changes easily.