Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change the indentation of sub menu items in a NavigationView?

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.

like image 972
infinite-loop Avatar asked Jul 21 '15 01:07

infinite-loop


2 Answers

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.

like image 138
infinite-loop Avatar answered Oct 01 '22 15:10

infinite-loop


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);

   }
}
like image 22
Krishnaraj Avatar answered Oct 01 '22 15:10

Krishnaraj