Slides part of the online Codename One introductory course created in 2017.

1. How do I?

2. Work With Images & Densities

3. Device Density - Which is Bigger?
© Codename One 2017 all rights reserved
iPhone 6 iPad Air 2

4. Resolution
© Codename One 2017 all rights reserved
1334x750 2048x1536
<

5. Size (Inches)
© Codename One 2017 all rights reserved
4.7 9.7
<

6. Density (PPI/DPI)
© Codename One 2017 all rights reserved
326 264
>

7. Density
✦Exact same image on iPad Air 2 will seem larger
than on iPhone 6
✦Differences can be extreme e.g old iPad II had
132 PPI. Pixel II XL is 538 PPI
✦Density is more important than resolution, for an
iPad you don’t want to just scale up the UI. You
want to fit more information
© Codename One 2017 all rights reserved

8. Adapting UI
© Codename One 2017 all rights reserved

9. Vectors vs. Rasters
✦Vector images are images that are constructed
from a series of drawing instructions (lines,
curves, text etc.
✦Vectors automatically adapt to UI sizing
✦FontImage, builtin material icon set & SVG are
vectors
✦Rasters are images where each pixel has a
color e.g.: JPEG, GIF, PNG, PSD etc.
© Codename One 2017 all rights reserved

10. Raster Scaling
✦Rasters can be scaled but they generally look
bad when scaled too much
✦The solution is to ship the app with multiple
versions of the raster image for the common
DPI groups: Multi Image
✦Codename One supports smart import &
scaling of images on the fly to the common
PPI’s
© Codename One 2017 all rights reserved

11. Constant Density Device Samples
DENSITY_VERY_LOW ~ 88 ppi Old feature phones, HD TV
DENSITY_LOW ~ 120 ppi First generation Android devices
DENSITY_MEDIUM ~ 160 ppi
iPhone 3GS, iPad I/II/Mini, Android
mdpi devices
DENSITY_HIGH ~ 240 ppi Android hdpi devices
DENSITY_VERY_HIGH ~ 320 ppi
iPhone 4, iPad Air 2, Android xhdpi
devices
DENSITY_HD ~ 540 ppi iPhone 6+, Android xxhdpi devices
DENSITY_560 ~ 750 ppi Android xxxhdpi devices
DENSITY_2HD ~ 1000 ppi
DENSITY_4K ~ 1250 ppi
Densities In Codename One

12. © Codename One 2017 all rights reserved

13. © Codename One 2017 all rights reserved

14. © Codename One 2017 all rights reserved

15. © Codename One 2017 all rights reserved

16. © Codename One 2017 all rights reserved

17. Image img = theme.getImage(“imagename”);
Loading The image

18. Thank You!