What is the navigation drawer icons size?
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 : 24 x 24 px
hdpi : 36 x 36 px
xhdpi : 48 x 48 px
xxhdpi : 72 x 72 px
xxxhdpi : 96 x 96 px
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.
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
the dimensions of those navigation icons are usually 24 x 24 pixels
Solution 5
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.CoordinatorLayout
android:id="@+id/vCoordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--CONTENT VIEW-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
</LinearLayout>
<!--FAKE TOOLBAR NAVIGATION ICON-->
<RelativeLayout
android:layout_width="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize">
<ImageView
android: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>
thiagolr
I'm here to help! #SOreadytohelp Check out my android apps: https://play.google.com/store/apps/developer?id=Pink+Pointer Check out my linkedin profile: http://www.linkedin.com/in/thiagorosa
Updated on July 05, 2022Comments
-
thiagolr almost 2 years
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/patterns/navigation-drawer.html#navigation-drawer-specs
Thanks!