Action Bar icon size

Question

According to Action Bar Icons action bar icon for the mdpi screen should be 24 x 24 px but the icons in Action Bar Icon Pack for mdpi are 32 x 32 px. The sizes do not match for other screen sizes neither. So which one is correct and what dimensions should the action bar icon have?

Alex Curran · Accepted Answer · 2017-04-24T14:07:43.943

55

UPDATE: this answer is no longer valid, see the below answer for more up-to-date guidelines.

I believe they have to be 32x32dp, but the actual image itself should be 24dpx24dp centred. The Android design website has the correct guidelines.

I've submitted a bug report about this but have yet to hear anything...

edited Apr 24 '17 at 14:07

answered Jun 28 '12 at 12:45

Alex Curran

8,818
6
49
55

I guess you meant px and not dp? – AlikElzin-kilaka Apr 01 '15 at 17:08
`dp` means device independent pixel, the unit that's usually used in the Android UI. – ayke Aug 04 '15 at 15:23
4

Is this answer obsolete? – Ferran Maylinch Nov 30 '15 at 10:44
This answer is obsolete. The new guidelines are 24x24dp image (file). This is made of 20x20 content in center with 2dp padding to each side (4dp in total). – Warpzit Apr 04 '17 at 13:26

wangqi060934 · Answer 2 · 2015-10-16T16:53:05.233

55

-------update 2015.10.17--------

The new google design gideline says:"System icons are displayed at 24dp","Icon content is limited to the 20 x 20dp live area, with 4px of trim around the perimeter".Like:

------old-------

Full asset, 32x32 dp; Optical square, 24x24 dp

enter image description here

edited Oct 16 '15 at 16:53

answered Feb 16 '13 at 08:32

wangqi060934

1,552
16
23

I guess you meant px and not dp? – AlikElzin-kilaka Apr 01 '15 at 17:09
@AlikElzin-kilaka it is dp as stated in the documentation (in the link). – Samuel Barbosa Apr 13 '15 at 03:49
What does dp mean when you use icon editing tools? A pixel is a squarish unit that has one color. It has a meaning. Look at the documentation for the meaning of **baseline**. – AlikElzin-kilaka Apr 13 '15 at 05:33
6

@AlikElzin-kilaka dp are density-independent pixels. it's a scale for actual pixels. mdpi is the baseline, so 24dp in mdpi is 24px. For hdpi devices, the scale is 1.5x, so 24dp is 36px. – Jason Robinson Apr 29 '15 at 17:35
Full asset size has changed from 32dp to 48dp with Material (Android 5) – OneWorld Oct 16 '15 at 13:56

OneWorld · Answer 3 · 2015-10-19T08:45:58.853

I've conducted more testing with AppCompat ActionBar. I found out, that the ActionBar takes care for itself to enforce the minimum 48dp touch target size. I also found out, that the AppCompat ActionBar still expects action bar icons with a 32dp square size.

Even with Material design, icons still have to follow rule "Full asset: 32x32 dp; Optical square: 24x24 dp" to have the correct size along with other icons in the action bar as this figure (from wangqi060934's anwer) shows:

My previous assumption (see figures below) that the full asset size expanded from 32dp to 48dp is not correct. The 48dp are talking about the touch area. The confusion was caused by the revised Material Icon Spec document which is linked in the much older ActionBar document.

from https://www.google.com/design/spec/style/icons.html#icons-system-icons

from http://www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-sizing-by-increments

The area in blue/pink is "Clearance area","Adequate space around the icon is needed to allow for legibility and touch.",as the guideline said. — wangqi060934, Oct 16 '15 at 16:57
The [Material Design icons](https://design.google.com/icons/) provided by Google do not give an option to download 32dp icons. What's going on here? — Jason Robinson, Feb 03 '16 at 19:43

score 14 · Answer 4 · answered Feb 07 '17 at 13:10

14

Use Android Studio Image Asset

Go to:

Project>res --> right click
new> image asset --> Icon type: Action Bar and Tab Icons
next>Finish.

Now you will have your icon in the correct resolutions.

answered Feb 07 '17 at 13:10

CarLoOSX

505
3
9

just what I was looking for. – lasec0203 Sep 03 '21 at 02:56

score 7 · Answer 5 · edited May 13 '20 at 06:21

7

The finished action bar icon dimensions as shown in the link below should be. https://developer.android.com/guide/practices/ui_guidelines/icon_design_action_bar.html

Low density screen

ldpi (120 dpi) --> 18 x 18 px

Medium density screen

mdpi (160 dpi) --> 24 x 24 px

High density screen

hdpi (240 dpi) --> 36 x 36 px

Extra-high density screen

xhdpi (320 dpi) --> 48 x 48 px

XX-high density screen

xxhdpi (480 dpi) --> 72 x 72 px

XXX-high density screen

xxxhdpi (640 dpi) --> 96 x 96 px

edited May 13 '20 at 06:21

SendETHToThisAddress

2,756
7
29
54

answered Oct 07 '16 at 05:52

Radoslav

1,446
1
16
30

Thanks this is what I was looking for was the pixel size I needed so I size down copies of my image as needed for each folder. There is now also xxhdpi and xxx. These are created in some project by default so I will suggest an edit/update to your post to add those as well. – SendETHToThisAddress May 13 '20 at 02:31

Action Bar icon size

5 Answers5

Linked

Related