Android: Navigation drawer item size

Question

I have an Android app with a navigation drawer in it. The drawer gets its items from a menu resource file.

<com.google.android.material.navigation.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" />

The active item has a semi-transparent layer above it, it's the default stuff. My problem is with the size/margin of that layer.

I would like to have this:

Instead of this: https://i.stack.imgur.com/Zlp9p.png

I can make it square following this answer, but it still has a small margin around it.

How can I achieve it?

Gabriele Mariotti · Accepted Answer · 2020-08-19T06:40:46.687

2

You can use the itemShapeInset* attributes to fill the entire space:

<com.google.android.material.navigation.NavigationView
 app:itemShapeInsetStart="0dp"
 app:itemShapeInsetEnd="0dp"
 app:itemShapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Nav.Square"

and the itemShapeAppearanceOverlay to have square corners:

<style name="ShapeAppearanceOverlay.Nav.Square" parent="">
    <item name="cornerSize">0dp</item>
</style>

edited Aug 19 '20 at 06:40

answered Aug 19 '20 at 06:33

Gabriele Mariotti

320,139
94
887
841

Works as expected. Thanks! (I have edited to include the top and bottom properties.) – Nekomajin42 Aug 20 '20 at 22:25

score 0 · Answer 2 · answered Aug 19 '20 at 05:02

0

Have you tried changing this attribute app:itemHorizontalPadding="0dp".

answered Aug 19 '20 at 05:02

AagitoEx

484
2
8

The `itemHorizontalPadding` reduces the space before the icon and after the text but it not related to the `itemShape` – Gabriele Mariotti Aug 19 '20 at 06:42

score 0 · Answer 3 · answered Aug 19 '20 at 05:51

You want this

 <com.google.android.material.navigation.NavigationView
    android:id="@+id/nav_view"
    style="@style/Widget.Custom.NavigationView"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:clipToPadding="false"
    android:fitsSystemWindows="true"
    android:theme="@style/NavigationTheme"
    app:headerLayout="@layout/nav_header_main"
    app:itemHorizontalPadding="45dp"
    app:itemIconPadding="@dimen/_17sdp"
    app:itemIconTint="#000"
    app:itemTextColor="#000"
    app:menu="@menu/activity_main_drawer" />

styles

  <style name="Widget.Custom.NavigationView" parent="Widget.Design.NavigationView">
    <item name="itemIconTint">?attr/colorNavigationItem</item>
    <item name="itemTextColor">?attr/colorNavigationItem</item>
    <item name="itemBackground">?attr/drawableNavigationItemBackground</item>
</style>
<style name="NavigationTheme" parent="AppTheme">
    <item name="android:layout_marginBottom">4dp</item>
</style>

add attr.xml in values

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <attr name="colorNavigationItem" format="color" />
    <attr name="colorNavigationItemSelected" format="color" />

    <attr name="drawableNavigationItemBackground" format="reference" />
</resources>

There is no reason to use a custom attr. Instead of using the legacy style use the default style `Widget.MaterialComponents.NavigationView` provided by the Material Components theme and use the [**`itemShape*`** attributes](https://stackoverflow.com/a/61792872/2016562) — Gabriele Mariotti, Aug 19 '20 at 06:48

Android: Navigation drawer item size

3 Answers3

Linked