9

I know there are guidelines for creating icons for specific areas in Android (Tab, List, etc.) and how you would size them according to ldpi, mdpi, hdpi etc.

Are there any rules on how to scale other in-app icons?

I've got a 'tiny' icon of 10x10 px which I am using on my mdpi dev phone, what would be the scaling rules to create ldpi, hdpi & xhdpi versions of that icon?

Thanks

Dave

DaveSav
  • 1,314
  • 4
  • 21
  • 40

4 Answers4

14

I would create separate images for each one:

Res     Px     
ldpi    36 x 36
mdpi    48 x 48
hdpi    72 x 72
xhdpi   96 x 96
xxhdpi  144x144
xxxhdpi 192x192

Then just put each of them in the separate stalks of the drawable folder.

Michaelangel007
  • 2,231
  • 1
  • 21
  • 20
Gajendra Rawat
  • 3,553
  • 2
  • 15
  • 34
  • For xxhdpi it is 180x180 and xxxhdpi is 192x192 according to Google's documentation here, http://developer.android.com/guide/practices/screens_support.html. Search on the page for, "180x180 (3.0x) for extra-extra-high-density". I use them in Export to Multiple Sizes Photoshop script here, http://www.velara3.com. – 1.21 gigawatts Jan 25 '15 at 04:57
  • @1.21 According to both your own link and the following one, xxhdpi is indeed 144x144 https://developer.android.com/guide/practices/ui_guidelines/icon_design_launcher.html. Also, it doesn't make sense that xxhdpi would be 180 and xxxhdpi would be 192, since it's supposed to be a 3:4 ratio, which would would make xxx 240x240. – Ionoclast Brigham Feb 08 '17 at 23:19
  • They've changed the documentation since I made my comment. Look at the way back machine – 1.21 gigawatts Feb 08 '17 at 23:35
12

The ratios are .75|1|1.33|1.5|2.|3.|4. (or 3:4:6:8:12:16) That is, for your 10x10px bitmap, the graphics would be

ldpi    - 10x10 * 0.75 = 7x7
mdpi    - 10x10 * 1    = 10x10
tvdpi   - 10x10 * 1.33 = 13x13
hdpi    - 10x10 * 1.5  = 15x15
xhdpi   - 10x10 * 2    = 20x20
xxhdpi  - 10x10 * 3    = 30x30
xxxhdpi - 10x10 * 4    = 40x40
Michaelangel007
  • 2,231
  • 1
  • 21
  • 20
DeeV
  • 34,764
  • 7
  • 103
  • 92
  • 1
    Also to note, the recommendation is to make your graphic dimensions divisible by four for better scaling. For example, if your 10x10 graphic was instead 12x12, it would scale to ldpi, hdpi, and xhdpi without fractional pixel dimensions. (9x9, 18x18, and 24x24, respectively). – Kevin Coppock Aug 24 '12 at 21:47
  • 3
    Just looked closely at your ratios -- it should be `.75|1|1.33|1.5|2`, not `.75|1|1.33|2|4`. – Kevin Coppock Aug 24 '12 at 21:48
  • Thanks to DeeV and kcoppock, both. I'll resize my base icon to be 12*12 (divisible by 4) and then apply the ratios. – DaveSav Aug 24 '12 at 21:58
  • 1
    Where is that ratio info, by the way? – DaveSav Aug 24 '12 at 21:59
  • It's scattered around the "Supporing Multiple Screen" page. http://developer.android.com/guide/practices/screens_support.html#Alternative – DeeV Aug 24 '12 at 22:08
  • 3
    Mainly, look at the "Alternative drawables" section. Also, by design, ldpi is 120dpi (120/160 = .75); mdpi is 160dpi (160/160 = 1); hdpi is 240dpi (240/160 = 1.5); and xhdpi is 320dpi (320/160 = 2) – DeeV Aug 24 '12 at 22:10
  • You can get different size for icons : https://play.google.com/store/apps/details?id=com.dsquareinfoways.iconsizegenerator&hl=en – Darsh Patel Apr 16 '15 at 10:25
2

Generalized rule for pixel values to support multiple screen is based on a baseline configuration of your device screen density. Baseline for density 160 pixels , mdpi comes in this range. So by calculating dpi values you can put these values in different dimens.xml to support various devices. General formula is :

Result = Value(dpi) * device density(pi)/160(dpi)

So first check your device density first then according to above formula calculate the values for dimens.xml. For standard we generally assume that:

For mdpi density = 160, hdpi - 240, xhdpi - 320 , ldpi - 120

As in your case if value is 10*10 then the Result for different screen will be :

For ldpi:

Result = 10*120/160 = 7.5 , i.e 7 pixels

For mdpi:

Result = 10*160/160 = 10 pixels

For hdpi:

Result = 10*240/160 = 15 pixels

For xhdpi:

Result = 10*320/160 = 20 pixels

You can also refer to this http://developer.android.com/guide/practices/screens_support.html and http://developer.android.com/training/multiscreen/screendensities.html

Yash
  • 71
  • 4
1

According to the Android-Iconography guide, the icons should follow 2:3:4:6 scale ratios for different screen densities, medium, high, x-high, and xx-high respectively.

enter image description here

You can also check Android Design guide for iconography. http://developer.android.com/design/style/iconography.html

Aksel Fatih
  • 1,309
  • 15
  • 29