7

When we define a NavigationView with a section with sub menu items. It left aligns the sub items with the section title: 

<menu xmlns:android="http://schemas.android.com/apk/res/android">

<item android:title="Sub items">
    <menu>
        <item
            android:title="Sub item 1" />
        <item
            android:title="Sub item 2" />
    </menu>
</item>
</menu>

enter image description here

I tried adding a transparent image with the correct size to pad:

<menu xmlns:android="http://schemas.android.com/apk/res/android">

<item android:title="Sub items">
    <menu>
        <item
            android:icon="@drawable/ic_transparent"
            android:title="Sub item 1" />
        <item
            android:icon="@drawable/ic_transparent"
            android:title="Sub item 2" />
    </menu>
</item>
</menu>

enter image description here

But by default the NavigationView:

  1. Adds a fixed padding between the icon the text
  2. Enforces a fixes size on the icon itself

I could not find how to configure this padding nor the icon size.

Question How can we change the sub item indentation so that the sub items are more indented?

I prefer to do it cleaning via an attribute rather than inserting transparent images.

infinite-loop
  • 882
  • 11
  • 17
  • Hi, did you get a solution for this? – Noundla Sandeep Nov 04 '15 at 17:25
  • Not yet. I have not looked into this since I posted it. Need to wrap up other higher priority work. But I am starting to think that maybe it is not the better design to have the indentation - after all I did not see it recommended in the Material Design guidelines. I will be looking into this again in the next couple of weeks. So I will post an update then. – infinite-loop Nov 05 '15 at 02:17
  • @Noundla After looking into this again, I did not find a way to do it. My current take on this is that indentation is not promoted within the Material Design guidelines so I do not consider it a best practice in Android therefore I am staying away from it. Instead, a better approach is to use the background and foreground colors of each menu row to indicate grouping. I have seen that done nicely in a number of apps. FYI what I mean by foreground color is the text color. You can also integrate font types to emphasize different aspects of the grouping and state. – infinite-loop Dec 15 '15 at 02:18

2 Answers2

9

Disclaimer

See my comment to Noundla on the main question where I explain why I think that indentation is not the right approach.

Answer

With that said, if you must have indentation the simplest way is to pad each menu item with spaces. This is not ideal but it is simple to implement, understand and replace when a better option is available. And it works with the built-in Android NavigationView without having to introduce external libraries:

Here is the code sample that will work:

<menu xmlns:android="http://schemas.android.com/apk/res/android">

  <item android:title="Sub items">
    <menu>
        <item android:title="&#160;&#160;&#160;&#160;Sub item 1" />
        <item android:title="&#160;&#160;&#160;&#160;Sub item 2" />
    </menu>
   </item>
</menu>

I hope this saves someone out there time.

infinite-loop
  • 882
  • 11
  • 17
2

Not sure if you got the answer but I had the same problem and ended up using MaterialDrawer - https://github.com/mikepenz/MaterialDrawer.

You need to extend the SecondaryDrawerItem and add the padding on bindView onPostBindView.

drawer = new DrawerBuilder()
            .withActivity(this)
            .withHeader(drawerHeader)
            .withSavedInstance(savedInstanceState)
            .addDrawerItems(
                    new PrimaryDrawerItem().withName("Item1"),
                    new CustomSecondaryDrawerItem().withName("SubItem1"),
                    new CustomSecondaryDrawerItem().withName("SubItem2")
            )
            .build();

CustomDrawerSecondaryItem.java

public class CustomSecondaryDrawerItem extends SecondaryDrawerItem {

   @Override
   public void onPostBindView(IDrawerItem drawerItem, View view) {

       Context ctx = view.getContext();

       int paddingLeft = ctx.getResources().getDimensionPixelSize(R.dimen.drawer_secondary_item_padding_left);
       view.setPadding(paddingLeft, view.getPaddingTop(), view.getPaddingRight(), view.getPaddingBottom());

       super.onPostBindView(drawerItem, view);

   }
}
Krishnaraj
  • 2,360
  • 1
  • 32
  • 55