11

I have a navigation drawer like this image. I want to add a section separator . It seems simple but I can't find anything on the web that was useful for my case.

- Add a line separator below Express

Add a line separator below My Information

enter image description here

        <menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:title="Express">
    <menu>
        <group
            android:id="@+id/me"
            android:checkableBehavior="single">
            <item
                android:id="@+id/nav_balance_transfer"
                android:icon="@mipmap/icon_wallet_transfer"
                android:title="Balance Transfer" />

            <item
                android:id="@+id/nav_load_money"
                android:icon="@mipmap/icon_load_money"
                android:title="Load Money" />
            <item
                android:id="@+id/nav_report"
                android:icon="@mipmap/icon_history"
                android:title="Report" />
        </group>
    </menu>
</item>
<item android:title="My Information">
    <menu>

        <group
            android:id="@+id/menu_nav_temp_gid"
            android:checkableBehavior="none">
            <item
                android:id="@+id/nav_profile"
                android:icon="@mipmap/icon_profile"
                android:title="My Account" />
            <item
                android:id="@+id/nav_changePassword"
                android:icon="@mipmap/icon_change"
                android:title="Change Password" />
            <item
                android:id="@+id/nav_ViewUser"
                android:icon="@mipmap/ic_view_user"
                android:title="View User" />
            <item
                android:id="@+id/nav_addUser"
                android:icon="@mipmap/icon_adduser"
                android:title="Add User" />
            <item
                android:id="@+id/nav_addScheme"
                android:icon="@mipmap/icon_add_scheme"
                android:title="Add Scheme" />

            <item
                android:id="@+id/nav_logout"
                android:icon="@mipmap/icon_logout"
                android:title="Log Out" />

        </group>
    </menu>
</item>

i had done this code if i takes express and my info in a separate group than it takes padding

suggest me how to achive this ..

Tufan
  • 2,789
  • 4
  • 34
  • 52
  • You mean you want to remove those paddings in group title? – Amir Aug 19 '16 at 05:51
  • nope i just want to set a divider below express and my information .. – Tufan Aug 19 '16 at 06:04
  • i can do that by what answer given by #rishikesh but problem is than it is treated as submenu item and it automaticaly takes padding – Tufan Aug 19 '16 at 06:05
  • As a suggestion: Create a recyclerView to do this can time less time. – Amir Aug 19 '16 at 06:39
  • yeh i know ..i can add a section navigation drawer..but i am finding something how we can do with navigation view – Tufan Aug 19 '16 at 06:41
  • @Tufan try to my updated answer...... – Arjun saini Aug 24 '16 at 12:53
  • Maybe https://stackoverflow.com/questions/30243365/how-to-add-one-section-separator-for-navigation-drawer-in-android ? The accepted answer there is to add new groups with different ids. Each group gets a separate line drawn above it. – dweebo Aug 22 '16 at 19:27

5 Answers5

12

Try this....

    <group>
    <item android:title="Express">
    </item>
    </group>



            <group
                android:id="@+id/grpid1"
                android:checkableBehavior="single">
                <item
                    android:id="@+id/nav_balance_transfer"
                    android:icon="@mipmap/ic_launcher"
                    android:title="Balance Transfer" />

                <item
                    android:id="@+id/nav_load_money"
                    android:icon="@mipmap/ic_launcher"
                    android:title="Load Money" />
                <item
                    android:id="@+id/nav_report"
                    android:icon="@mipmap/ic_launcher"
                    android:title="Report" />
            </group>



    <group>
    <item android:title="My Information">



        </item>
    </group>


            <group
                android:id="@+id/grpid2"
                android:checkableBehavior="none">
                <item
                    android:id="@+id/nav_profile"
                    android:icon="@mipmap/ic_launcher"
                    android:title="My Account" />
                <item
                    android:id="@+id/nav_changePassword"
                    android:icon="@mipmap/ic_launcher"
                    android:title="Change Password" />
                <item
                    android:id="@+id/nav_ViewUser"
                    android:icon="@mipmap/ic_launcher"
                    android:title="View User" />
                <item
                    android:id="@+id/nav_addUser"
                    android:icon="@mipmap/ic_launcher"
                    android:title="Add User" />
                <item
                    android:id="@+id/nav_addScheme"
                    android:icon="@mipmap/ic_launcher"
                    android:title="Add Scheme" />

                <item
                    android:id="@+id/nav_logout"
                    android:icon="@mipmap/ic_launcher"
                    android:title="Log Out" />

            </group>


    </menu>

It looks like you just need to give your group tags unique ID's.

<group android:id="@+id/ids">
    <!-- Divider will appear above this item -->
    <item ... />
</group>

enter image description here

Sure @Tufan I can solve this problem also

Do this... put these lines to your dimen.xml

<dimen name="design_navigation_padding_top_default" tools:override="true">0dp</dimen>
<dimen name="design_navigation_separator_vertical_padding" tools:override="true">0dp</dimen>
<dimen name="design_navigation_padding_bottom" tools:override="true">0dp</dimen>

dimen.xml

<resources
    xmlns:tools="http://schemas.android.com/tools"
    >

    <dimen name="design_navigation_padding_top_default" tools:override="true">0dp</dimen>
    <dimen name="design_navigation_separator_vertical_padding" tools:override="true">0dp</dimen>
    <dimen name="design_navigation_padding_bottom" tools:override="true">0dp</dimen>
    <dimen name="navigation_separator_vertical_padding">0dp</dimen>

</resources>

New Screenshot remove padding by add this..

enter image description here

Arjun saini
  • 4,223
  • 3
  • 23
  • 51
  • it can be a solution but look at express and my info they are not looking like main item ..when you set like this it treat as group item and it takes padding – Tufan Aug 25 '16 at 10:32
0

Here is your Solution Do like this

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

        <group>
                <item
                    android:title="Express">
                </item>
        </group>

    <menu>

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

    </menu>

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

</menu>
Rishikesh pathak
  • 423
  • 4
  • 18
  • if i done like this than it sets padding to express ..it consider it as a child...i already tried that – Tufan Aug 16 '16 at 14:19
  • i don't want any padding to the main item ..and in your code it will set padding to express – Tufan Aug 16 '16 at 14:20
0

You should create groups with different IDs in your menu XML file like this:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group
        android:id="@+id/menu_section_1"
        android:checkableBehavior="single">
        <item
            android:id="@+id/drawer_item_1"
            android:icon="@drawable/ic_item_1"
            android:title="@string/drawer_item_1"/>
        <item
            android:id="@+id/drawer_item_2"
            android:icon="@drawable/ic_item_2"
            android:title="@string/drawer_item_2"/>
    </group>
    <group
        android:id="@+id/menu_section_2"
        android:checkableBehavior="none">
        <item
            android:id="@+id/drawer_item_3"
            android:icon="@drawable/ic_item_3"
            android:title="@string/drawer_item_3" >
        </item>
    </group>
</menu>
Alex
  • 419
  • 1
  • 5
  • 24
  • alex i know about that look at my xml ..if i take all items in separate group than i will have line separator ..but it reflcet on my look an feel that i don't want to change – Tufan Aug 23 '16 at 11:13
  • and if i put express and my info in group than it treated as sub item and it takes pading – Tufan Aug 23 '16 at 11:14
0

This is the activities layout. You should place the other things inside the frame layout. 

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

<!-- your content layout -->
<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/content_frame">



</FrameLayout>

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

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

below is my drawer_view file in res/menu directory

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group>
        <item
            android:title="Label1"
            android:id="@+id/asd">
        </item>
   </group>


    <group
        android:checkableBehavior="single"
        android:id="@+id/nav_file_navigation">
        <item
            android:id="@+id/nav_all_files"
            android:icon="@drawable/all"
            android:title="All Files" />
        <item
            android:id="@+id/nav_memory_card"
            android:icon="@drawable/sd_card"
            android:title="Memory Card"
            />
        <item
            android:id="@+id/nav_pictures"
            android:icon="@drawable/picture"
            android:title="Pictures" />
        <item
            android:id="@+id/nav_videos"
            android:icon="@drawable/play_button"
            android:title="Video" />
        <item
            android:id="@+id/nav_music"
            android:icon="@drawable/music_player"
            android:title="Music" />
        <item
            android:id="@+id/nav_documents"
            android:icon="@drawable/document"
            android:title="Documents" />
        <item
            android:id="@+id/nav_download"
            android:icon="@drawable/download"
            android:title="Downloads"
            />
    </group>

    <group>
        <item
            android:title="Label1"
            android:id="@+id/asd">
        </item>
   </group>


     <group
         android:checkableBehavior="single"
         android:id="@+id/nav_others"
         >
        <item
            android:id="@+id/nav_certificate"
            android:icon="@drawable/certificate"
            android:title="Set Certificate"/>
         <item
             android:id="@+id/nav_email"
             android:icon="@drawable/mail_gray"
             android:title="Email"
             />
        <item
            android:id="@+id/nav_setting"
            android:icon="@drawable/settings"
            android:title="Settings"/>
        <item
            android:id="@+id/nav_help"
            android:icon="@drawable/help"
            android:title="Help" />
        <item
            android:id="@+id/nav_log_out"
            android:icon="@drawable/log_out"
            android:title="Log Out" />

     </group>
</menu>

This is a navigation drawer header:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="140dp"
    android:background="@color/lightGray"
    android:theme="@style/ThemeOverlay.AppCompat.Dark"
    android:orientation="vertical"
    android:gravity="center_vertical">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/navigation_header_image"
        android:background="@color/lightGray"
        android:src="@drawable/drawer_header"
        android:padding="16dp"
        />


</FrameLayout>

In the activity's on create() method

mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

    mNavigationView = (NavigationView) findViewById(R.id.navigation_view);
    mNavigationView.setItemIconTintList(null);
    mNavigationView.setNavigationItemSelectedListener(new      NavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(MenuItem item) {
            item.setChecked(true);
            onNavigationItemClicked(item);
            return true;
        }
    });

before on create declare this variables.

public NavigationView mNavigationView;
public DrawerLayout mDrawerLayout;

onNavigationClicked() method is

public void onNavigationItemClicked(MenuItem item){
 //Do whatever you want to do with item. You can get its title and depending
 //on the title you can do what you want.

 mDrawerLayout.closeDrawers();
}
gunescelil
  • 313
  • 1
  • 23
0

What about remove the <Menu> and wrap the separator item with a group.

From this:

<item android:title="Express">
<menu>
    <group
        android:id="@+id/me"
        android:checkableBehavior="single">
        <item
            android:id="@+id/nav_balance_transfer"
            android:icon="@mipmap/icon_wallet_transfer"
            android:title="Balance Transfer" />

        <item
            android:id="@+id/nav_load_money"
            android:icon="@mipmap/icon_load_money"
            android:title="Load Money" />
        <item
            android:id="@+id/nav_report"
            android:icon="@mipmap/icon_history"
            android:title="Report" />
    </group>
</menu>

To this

    <group android:id="@+id/id1">
       <item android:title="Express"
        android:enabled="false">
    </group>
    <group
        android:id="@+id/me"
        android:checkableBehavior="single">
        <item
            android:id="@+id/nav_balance_transfer"
            android:icon="@mipmap/icon_wallet_transfer"
            android:title="Balance Transfer" />

        <item
            android:id="@+id/nav_load_money"
            android:icon="@mipmap/icon_load_money"
            android:title="Load Money" />
        <item
            android:id="@+id/nav_report"
            android:icon="@mipmap/icon_history"
            android:title="Report" />
    </group>

Don't forget set the item wraped with android:enabled="false" to remove touch effects.

Source: This Answer

Community
  • 1
  • 1
Vinicius DSL
  • 1,839
  • 1
  • 18
  • 26