Skip to content Skip to sidebar Skip to footer

What Is The Navigation Drawer Icons Size?

I need to know the correct size (artboard and content) for Navigation Drawer icons. It doesn't say anything on the Navigation Drawer specs: http://www.google.com.br/design/spec/pat

Solution 1:

I would vote up Balar's answer, but it is off by one small detail. The correct answer is that all small icons should be 24 x 24 dp.

Reference: https://material.io/guidelines/layout/metrics-keylines.html#metrics-keylines-touch-target-size

Solution 2:

For:

mdpi :24x24pxhdpi :36x36pxxhdpi :48x48pxxxhdpi :72x72pxxxxhdpi :96x96px

According to their ratios:

mdpi : hdpi : xhdpi : xxhdpi :xxxhdpi=1 : 1.5 : 2 : 3 :4

Update:

Now google published Material icon design with more details.icons may be scaled down to 20dp with a trim area of 2dp surrounding the icon.

enter image description here

To learn more visit the Material Design site.

Solution 3:

You can check the official implementation of NavigationView provided by the support design library.

If you see the code of NavigationMenuItemView it defines:

this.mIconSize = 
 context.getResources().getDimensionPixelSize(dimen.navigation_icon_size);

where:

<dimen name="navigation_icon_size">24dp</dimen

Solution 4:

If you only need the icon size to set the dimensions of a view component you can use the Toolbar.Button.Navigation style. Here is an example where I create a fake navigation icon view.

<android.support.design.widget.CoordinatorLayoutandroid:id="@+id/vCoordinatorLayout"android:layout_width="match_parent"android:layout_height="match_parent"><!--CONTENT VIEW--><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"></LinearLayout><!--FAKE TOOLBAR NAVIGATION ICON--><RelativeLayoutandroid:layout_width="?attr/actionBarSize"android:layout_height="?attr/actionBarSize"><ImageViewandroid:id="@+id/vToolbarNavigationIcon"style="@style/Widget.AppCompat.Toolbar.Button.Navigation"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"android:src="@drawable/my_icon"/></RelativeLayout></android.support.design.widget.CoordinatorLayout>

Solution 5:

the dimensions of those navigation icons are usually 24 x 24 pixels

Post a Comment for "What Is The Navigation Drawer Icons Size?"