Ankita Sethi
Ankita Sethi

Reputation: 43

Change Icon size of Default Navigation Drawer

Trying to change the icon size of the default navigation drawer and also to add a divider after each item but I don't understand how to do this? This is the menu drawer view:

<group android:checkableBehavior="single">
    <item
        android:id="@+id/agenda"
        android:icon="@drawable/agenda"
        android:title="AGENDA"
        />
    <item
        android:id="@+id/speakers"
        android:icon="@drawable/speakers"
        android:title="SPEAKERS" />
    <item
        android:id="@+id/schedule"
        android:icon="@drawable/schedule"
        android:title="SCHEDULE" />
    <item
        android:id="@+id/organiser"
        android:icon="@drawable/organiser"
        android:title="ORGANISER" />
    <item
        android:id="@+id/partners"
        android:icon="@drawable/partner"
        android:title="PARTNERS" />
    <item
        android:id="@+id/event_info"
        android:icon="@drawable/eventinfo"
        android:title="EVENT-INFO" />
</group>

this is dimens.xml

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="nav_header_vertical_spacing">16dp</dimen>
    <dimen name="nav_header_height">160dp</dimen>
</resources>

Upvotes: 3

Views: 6741

Answers (4)

Eshaqi
Eshaqi

Reputation: 21

you can use this:

R.id.navigationView.setItemIconSize(200)

Upvotes: 1

Water
Water

Reputation: 599

Setting design_navigation_icon_size and design_navigation_icon_padding in dimens.xml worked for me.

/values/dimens.xml

<dimen name="design_navigation_icon_size" tools:override="true">10dp</dimen>
<dimen name="design_navigation_icon_padding" tools:override="true">10dp</dimen>

Upvotes: 8

ABDUAHAD
ABDUAHAD

Reputation: 343

You can change the size of Navigation Drawer icons by overriding design_navigation_icon_size attribute in dimens.xml.

<dimen name="design_navigation_icon_size" tools:override="true">40dp</dimen>

To add divider for each item you should provide unique id to each group item as shown below

<group 
      android:id="@+id/group_item_1"
      android:checkableBehavior="single">
 <item
    android:id="@+id/agenda"
    android:icon="@drawable/agenda"
    android:title="AGENDA"/>
 </group> 

 <group 
      android:id="@+id/group_item_2"
      android:checkableBehavior="single">
 <item
    android:id="@+id/speakers"
    android:icon="@drawable/speakers"
    android:title="SPEAKERS" />
 </group> 

 <group 
      android:id="@+id/group_item_3"
      android:checkableBehavior="single">
 <item
    android:id="@+id/schedule"
    android:icon="@drawable/schedule"
    android:title="SCHEDULE" />
 </group> 

 <group 
      android:id="@+id/group_item_4"
      android:checkableBehavior="single">
 <item
    android:id="@+id/organiser"
    android:icon="@drawable/organiser"
    android:title="ORGANISER" />
 </group> 

 <group 
      android:id="@+id/group_item_5"
      android:checkableBehavior="single">
 <item
    android:id="@+id/partners"
    android:icon="@drawable/partner"
    android:title="PARTNERS" />
 </group> 

 <group 
      android:id="@+id/group_item_6"
      android:checkableBehavior="single">
 <item
    android:id="@+id/event_info"
    android:icon="@drawable/eventinfo"
    android:title="EVENT-INFO" />
</group>

And override this lines in dimens.xml to delete padding

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

Upvotes: 3

Patel Pinkal
Patel Pinkal

Reputation: 9522

try this for divider

<group android:checkableBehavior="single">
<item
    android:id="@+id/agenda"
    android:icon="@drawable/agenda"
    android:title="AGENDA"
    />
</group>

<group android:checkableBehavior="single">
<item
    android:id="@+id/speakers"
    android:icon="@drawable/speakers"
    android:title="SPEAKERS" />
</group>

<group android:checkableBehavior="single">
<item
    android:id="@+id/schedule"
    android:icon="@drawable/schedule"
    android:title="SCHEDULE" />
</group>

<group android:checkableBehavior="single">
<item
    android:id="@+id/organiser"
    android:icon="@drawable/organiser"
    android:title="ORGANISER" />
</group>

<group android:checkableBehavior="single">
<item
    android:id="@+id/partners"
    android:icon="@drawable/partner"
    android:title="PARTNERS" />
</group>

<group android:checkableBehavior="single">
<item
    android:id="@+id/event_info"
    android:icon="@drawable/eventinfo"
    android:title="EVENT-INFO" />
</group>

and for icon, Icon must be of 24dp of size

Check this link for icon size https://material.io/guidelines/patterns/navigation-drawer.html#navigation-drawer-specs and https://material.io/guidelines/layout/metrics-keylines.html#metrics-keylines-touch-target-size

Upvotes: 0

Related Questions