Images in Panels

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 Panel objects. Each of them is meant for a different purpose.

There are a number of design resources that you 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 portrait orientation.

This document includes the images used in this type of application 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:

Considerations

• For Apple, 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 you define which image goes for each platform. So then, for example, you can set the Image object that contains all the icons on every Application Icon property and changes the icons only on that object.

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

For more information refer to Density property.

Official guides by device:

• Android - Material Desing
• iOS - Image Size and Resolution

Launch Image

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

Example:

Notification Icon

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

Example:

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 :

The Android Asset Studio tool by Roman Nurik 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:

Considerations

• Applicable only to the iPad (landscape and portrait). Different size images have to be created for the various formats.

Tabs Icon

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

Example:

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 the unselected tab.

• 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 in each marketplace.

Example:

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 of images that are mostly mandatory.

Considerations for ANDROID - play.google.com

Image for Menu Option

It is the image associated with each option (item) in a Menu object. It is set in the 'Image' property of each Menu 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 preferred 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 the 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 design the images of an Android app in terms 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.

Free resources on-line

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

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

Videos

Prototyping features and Deployment of applications for Smart Devices