What is the best way to create drawables for different dpi

Question

Do you create the MDPI drawable first and just scale it accordinly to the .075/1.00/1.50/2 ratio by pixels in photoshop or do you recreate each individual drawable?

Answer 1

I suggest a little script write in powershell for Inkscape.

Example :

Put Inkscape in "c:\bin\inkscape" (dir without any space) and draw all your images in mdpi (1x) resolution.

in Inkscape object properties box (i.e id in xml), give an Id name for each object that you would to export in png.

Save your SVG to " C:\users\rone\Pictures\design-MyApps-forscript.svg"

Create a dir "d:\temp".

And put this script in "C:\app\scripts\"

---

Powershell script name is "inkscape_to_png.ps1" :

param (
    $inkscape_dir="C:\bin\Inkscape\",
    $inkscape_bin="inkscape.exe",
    $img_id="",
    $fichier_svg="C:\Users\rone\Pictures\design-MyMap-forscript.svg",
    $tmp_dir="d:\temp\"
)

$inkscape=$(Resolve-Path "$inkscape_dir\$inkscape_bin")


function getWidthHeight($img_id) {
    $size=@{}

    $old_pwd=$pwd.path

    cd $inkscape_dir

    write-host -foreground yellow "détermine la taille de $img_id"

    $size.width=invoke-command {./inkscape --file=$fichier_svg --query-id=$img_id --query-width 2>$null}
    $size.height=invoke-command {./inkscape --file=$fichier_svg --query-id=$img_id --query-height 2>$null}

    write-host -foreground yellow "width : $($size.width)"
    write-host -foreground yellow "height : $($size.height)"

    cd $old_pwd

    return $size
}

function convertTo($size, $format) {
    $rsize=@{}

    if ($format -eq "MDPI") {
        $rsize.width=[int]$size.width*1
        $rsize.height=[int]$size.height*1
    } elseif ($format -eq "LDPI") {
        $rsize.width=[int]$size.width*0.75
        $rsize.height=[int]$size.height*0.75
    } elseif ($format -eq "HDPI") {
        $rsize.width=[int]$size.width*1.5
        $rsize.height=[int]$size.height*1.5
    } elseif ($format -eq "XHDPI") {
        $rsize.width=[int]$size.width*2
        $rsize.height=[int]$size.height*2
    } elseif ($format -eq "XXHDPI") {
        $rsize.width=[int]$size.width*3
        $rsize.height=[int]$size.height*3   
    } elseif ($format -eq "XXXHDPI") {
        $rsize.width=[int]$size.width*4
        $rsize.height=[int]$size.height*4
    }

    write-host -foreground yellow "après conversion : $format"

    write-host -foreground yellow "width : $($rsize.width)"
    write-host -foreground yellow "height : $($rsize.height)"

    return $rsize
}

function inkscape_convert() {

    $mdpi_size=getWidthHeight $img_id

    write-host -foreground gray "----------------------------------------"
    "MDPI,LDPI,HDPI,XHDPI,XXHDPI,XXXHDPI" -split ","|% {


        $new_size=convertTo $mdpi_size $_
        if ($new_size.width -eq 0 -or $new_size.height -eq 0) {
            write-host -foreground red "erreur lors de la recherche de la taille de l'image"
            exit
        }
        $w=$new_size.width
        $h=$new_size.height
        $dir="$tmp_dir\drawable-$($_.toLower())"
        if (-not $(test-path $dir)) {
            write-host -foreground yellow "création du répertoire $dir"
            mkdir $dir
        }
        $new_file_name="$dir\$($img_id).png"
        $cmd="$inkscape -z -i $img_id -j -f $fichier_svg -w $w -h $h -e $new_file_name"
        write-host -foreground gray $cmd
        invoke-expression -command $cmd
        if ($? -eq $true) {
            write-host -foreground yellow "conversion OK"
        }

    }
    write-host -foreground gray "----------------------------------------"

}


inkscape_convert

---

now, call this script as this example :

@("btn_button_name_1","btn_button_name_3","btn_other", "btn_zoom", "btn_dezoom", "btn_center", "btn_wouwou", "im_abcdef", "ic_half", "ic_star", "ic_full") | % { C:\app\scripts\inkscape_to_png.ps1 -img $_ -f design-MyMap-forscript.svg }

And the script will create all your drawables in all resolutions (ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi) in d:\temp\drawable-xyz ...

So a confortable time saving.

Answer 2

Best way: create high res images, then downscale them.

If you use Photoshop, it will be a piece of cake!

My forked version of Output Android Assets.jsx script automate the downscale process for all dpi :-)

In one click, it will create:

• all the drawable-???? folders
• with all the down-scaled images version of all your psd or png High res files.

So, just create xxxhdpi images then scale them down with the script.

Creating initial high res images width and height as a multiple of 16 is wise since they will scale down properly as illustrate in this table:

ldpi   mdpi   tvdpi     hdpi    xhdpi   xxhdpi  xxxhdpi
0,75   1      1,33     1,5     2       3       4

3      4      5,33     6       8       12      16
6      8      10,67    12      16      24      32
9      12     16       18      24      36      48
12     16     21,33    24      32      48      64
15     20     26,67    30      40      60      80
18     24     32       36      48      72      96
21     28     37,33    42      56      84      112
24     32     42,67    48      64      96      128
27     36     48       54      72      108     144
30     40     53,33    60      80      120     160
etc....

Hope this helps

Note:

tvdpi is a rare case, so I don't really care about it sometimes scaling down to "no integer" values.

Credits:

Former versions of this script, to which I added xxxhdpi and xxhdpi support, are available here and here

Answer 3

From the Android design guidelines:

Strategies

So where do you begin when designing for multiple screens? One approach is to work in the base standard (medium size, MDPI) and scale it up or down for the other buckets. Another approach is to start with the device with the largest screen size, and then scale down and figure out the UI compromises you'll need to make on smaller screens.

For more detailed information on this topic, check out Supporting Multiple Screens.

Answer 4

I generally start big, and move to smaller.

I find that powerpoint is actually a very nice tool for creating resources for my applications. All of the graphics are vector, so they scale up and down without any quality loss.

I tend to start with the big ones if for no other reason than it is easier to work with something that looks bigger. when I move to the smaller sized ones I generally zoom in some to compensate.

Any graphic object in powerpoint will allow you to right click it and choose "Save as picture" which will output it as a png file for you. Only thing left is to drop it into draw9patch if need be.

Answer 5

The tips for designers section of the Icon Design Guidelines has the following advice:

Use vector shapes where possible
When possible, use vector shapes so that if the need arises, assets can be scaled up without loss of detail and edge crispness.

Start with large artboards
Because you will need to create assets for different screen densities, it is best to start your icon designs on large artboards with dimensions that are multiples of the target icon sizes. For example, launcher icons are 96, 72, 48, or 36 pixels wide, depending on screen density. If you initially draw launcher icons on an 864x864 artboard, it will be easier and cleaner to tweak the icons when you scale the artboard down to the target sizes for final asset creation.

There are a number of other nice tips in that section. I think it's good advice for other drawable types as well (menu icons, backgrounds, etc.).

Answer 6

As of Android L there is a VectorDrawable which is like the SHAPE from SVG but in Android's XML style

see Android documentation:

https://developer.android.com/training/material/drawables.html#VectorDrawables