Recents

Images for Smart Devices applicationsOfficial Content

When building an application for smart devices, the use of images is basic towards achieving an appealing application that is also easy to use. There are several types of images used in SD apps. Each of them is meant for a different purpose.

There are a number of design resources that we should consider for obtaining an application that is not only appealing but also validated by all markets: Google Play (Android) and Apple Store. For instance, for one single image, iPhone requires one size and iPad a different size; and this happens with every device and format. Images for landscape format are not the same as those for the portrait orientation.

This document includes the images used in this type of applications and the aspects to be borne in mind while designing them.

 

Image types

Application Icon

This is the image from which the application installed on the device is identified.

Examples:
Application Image - Android

Considerations

  • For iOS, they must NOT be transparent, the icon is designed on a square and the rounded borders will appear automatically on the device.  
  • For Android, the transparency aspect may exist or not.

In GeneXus, all these images must be loaded into an Image object on the KB, and varying according to the theme or density we define which image goes for each platform. So then, for example, we can set the Image Object that contains all the icons on every Application Icon property and changes the icons only on that object.

GeneXus 15 - AppIcon - Image object

 

  iOS devices  iPhone 6 Plus (@3x)   iPhone 6 and iPhone 5 (@2x)   iPhone 4s (@2x)   iPad and iPad mini (@2x)   iPad 2 and iPad mini (@1x) 
  App icon 180x180 120x120 120x120 152x152 76x76
  App icon for App Store 1024x1024 (*)
  Spotlight search results icon 120x120 80x80 80x80 80x80 40x40
  Settings icon 87x87 58x58 58x58 58x58 29x29
  Toolbar and navigation bar icon (optional) 66x66 44x44 44x44 44x44 22x22

(*) As of GeneXus 15 Upgrade 7, if Apple Application Icon property has a single Image with 1024x1024 resolution, other smaller images will be generated automatically.
 

  Android devices ldpi mdpi hdpi xhdpi xxhdpi xxxhdpi
  Application Icon 36x36 (120dpi) 48x48 (160dpi) 72x72 (240dpi) 96x96 (320dpi) 144x144 (480dpi) 192x192 (640dpi)


For more information refer to  Density property.

Official guides by device:

 

Launch Image

This is the image shown while the application is in the loading process.

Example:
Welcome Image - Android Sample

 

  iOS devices Landscape Portrait
  iPhone - iPod 480 x 320 320 x 480
  iPhone Retina 960 x 640 640 x 960
  iPhone 5 1136 x 640 640 x 1136
  iPhone 6 1334 x 750 750 x 1334
  iPhone 6 Plus 2208 x1242 1242 x 2208
  iPad 1024 x 768 768 x 1024
  iPad Retina 2048 x1536 1536 x 2048

 

  Android device Landscape Portrait
  ldpi 320 x 200 200 x 320
  mdpi 480 x 320 320 x 480
  hdpi 800 x 480 480 x 800
  xhdpi 1280 x 720 720 x 1280
  xxhdpi 1600 x 960 960 x 1600
  xxxhdpi 1920 x 1280 1280 x 1920

 

Notification Icon

This is the image shown in the status bar when the application receives a notification.

Example:
Notification Icon - Android

Considerations

  • Applicable only to Android devices (landscape and portrait)
  • The image must be completely white, optionally with transparency. The background color is taken from the property Primary Color of the Application Theme class.
  • The size must be 24x24 dp :
  mdpi hdpi xhdpi xxhdpi xxxhdpi
Notification Icons 24 px (22 px inset) 36 px 48 px 72 px 96 px

The Android Asset Studio tool by romannuric may be useful.

Split Mode Background Images for iPad

Only for applications running on iPad with Split mode navigation style. It is on the right when the application is being loaded.

Example:

IPAD Background Image - sample

Considerations

  • Applicable only to iPad (landscape and portrait). Different size images have to be created for the various formats.
    Size (pixels)
  iPad Landscape 703 x 704 
  iPad Portrait 768 x 960
  iPad Retina Landscape 1406 x 1408
  iPad Retina Portrait 1536 x 1920

 

Tabs Icon

These icons are used in the items of a main Menu for Smart Devices object when the value of the Control property is "Tabs".

Example:
Tab Image - Ipad Sample

Considerations

  • The extension must be *.png and with transparency (alpha channel different of 1).
    The transparency automatically enables a view when the tab is selected, different from the view with unselected tab.
    1x 2x 3x
 

iOS

25x25 min
48x32 max

50x50 min
96x64 max

75x75 min
144x96 max

 

Android

48x48 (hdpi)

-

-

  • There are some images that the iOS framework provides as standard icons for actions and tabs.
    See more information here.

 

Icon for the market

This is the image that represents the application in the market, i.e. Google Play (Android), Apple App Store (iOS).
It will appear on the list and in its detail when found.
This image is not configured in GeneXus. Instead, it is loaded at the time of uploading the application the each market for the various platforms.

Example:
Icon market - android sample

These are mandatory images required for uploading to each store.

In some cases, there are other non-mandatory images (for instance: a promotional graph in Android, appearing when the application is shown on a highlighted section).

There are also screenshots images that are mostly mandatory.

Considerations for ANDROID - play.google.com

 

Image for Dashboard Option

It is the image associated with each option (item) in a dashboard. It is set in the 'Image' property of each Dashboard Option.

Considerations

  • In run-time, these images are adjusted to an 86x86 size in iPhone and iPad, and to 96x96 in Android. So, if the image used is smaller, it will be 'enlarged' so as to adjust to the referred sizes.  

 

iPhone/iPad Retina notes

The iPhone 4, the 3rd generation iPad and later models, have what is called "Retina Display" which provides better resolution in the same screen size. The resolution of the Retina Display twice as wide and twice as long, compared to the earlier models displays. In the case of the iPhones, the resolution is 320 x 480, while in the case of iPhone Retina, the resolution is 640 x 960 (double width and double height). For the iPad is 768 x 1024 for the earlier models, and 1536 x 2048 for the Retina iPad models.

What GeneXus does is to copy all images used, and search the most appropriate for the device. In devices with Retina Display, it searches for an image with the same name and suffix "_2x". If GeneXus find it, then it is used. If not, the original one is used, and it is scaled to fit the same space on the screen (turning its view pixeled).

 

Android notes

The following table might be useful for those people who designs the images of an Android app in term of sizes and densities.
It is strongly recommended working at MDPI as a baseline and then scale the rest of the images for different sizes/densities.

  MDPI
(Baseline)
HDPI XHDPI XXHDPI XXXHDPI
Scale 1 x 1.5 x  2 x 3 x  4 x
DPI ~ 160 dpi ~ 240 dpi ~ 320 dpi ~ 480 dpi ~ 640 dpi
App Launcher Icons 48 px 72 px 96 px  144 px  192 px
Action Bar Icons 32 px (24 px inset) 48 px 64 px 96 px 128 px
Small / Contextual Icons 16 px (12 px inset) 24 px 32 px 48 px 64 px
Notification Icons 24 px (22 px inset) 36 px 48 px 72 px 96 px

 

Free resources on-line

Images for Application Icon, menu options and more can be found in GlyphishIconFinder and MaterialIcons.

To quickly and easily generate small icons with the correct settings, Android Asset Studio  could be useful.

 

Videos

Start Video Prototyping and Executing
Start Video Deploying

 



Was this page helpful?
What Is This?
Your feedback about this content is important. Let us know what you think.