Image & Icon

Supported Image Format

PowerBuilder, iOS, Android, and PowerServer Mobile supports different types of image files. PNG and JPG are the recommended image types for PowerServer Mobile. Though BMP and ICO are supported by PowerServer Mobile, they are not recommended to use because they are Windows-platform specific and may have problems to display in iOS or Android.

Table 6. Image Types

Format

File Extension

PB

iOS

Android

PowerServer Mobile

Portable Networks Graphics

.PNG

Supported

Supported

Supported

Supported & Recommended

Joint Photographic Experts Group

.JPEG or .JPG

Supported

Supported

Supported

Supported & Recommended

Static Graphic Interchange Format

.GIF

Supported

Supported

Supported

Supported

Animated GIF files

.GIF

Supported

Supported

Supported

Not Supported

Windows Bitmap Format

.BMP or .BMPF

Supported

Supported

Supported

Supported

Windows Bitmap Format

.RLE

Supported

Not Supported

Not Supported

Not Supported

Windows Icon Format

.ICO

Not Supported

Supported

Not Supported

Supported

Windows metafiles

.WMF

Supported

Not Supported

Not Supported

Not Supported

Tagged Image File Format

.TIFF or .TIF

Not Supported

Supported

Not Supported

Not Supported

Windows Cursor

.CUR

Not Supported

Supported

Not Supported

Not Supported

XWindow bitmap

.XBM

Not Supported

Supported

Not Supported

Not Supported


Image & Icon Size

You can use images or icons in various areas such as menu, toolbar, tab bar, ListView, TreeView etc. Make sure you prepare the images and icons in the recommended size so they look good and perform well in the mobile device.

Table 7. Image & Icon size for iOS and Android devices

Icon

Size for iPad (in Pixels)

Size for iPhone & iPod Touch (in Pixels)

Size for Android Screen* (in Pixels)

App icon on the mobile device

72 x 72 (144 x 144 for retina display)

57 x 57 (114 x 114 for retina display)

48 x 48

App icon for display in Apple App Store or Google Play

512 x 512

512 x 512

512 x 512

App icon for display in Appeon Workspace

86 x 86 (172 x 172 for retina display)

86 x 86 (172 x 172 for retina display)

86 x 86

Menu icon

20 x 20 (40 x 40 for retina display)

20 x 20 (40 x 40 for retina display)

20 x 20

Toolbar icon

20 x 20 (40 x 40 for retina display)

20 x 20 (40 x 40 for retina display)

20 x 20

Tab bar icon

20 x 20 (40 x 40 for retina display)

20 x 20 (40 x 40 for retina display)

20 x 20

ListView icon

30 x 30 (60 x 60 for retina display)

30 x 30 (60 x 60 for retina display)

20 x 20

TreeView icon

20 x 20 (40 x 40 for retina display)

20 x 20 (40 x 40 for retina display)

20 x 20

PictureListBox

20 x 20 (40 x 40 for retina display)

20 x 20 (40 x 40 for retina display)

20 x 20

DropDownPictureListBox

20 x 20 (40 x 40 for retina display)

20 x 20 (40 x 40 for retina display)

20 x 20


* For Android devices, to create an icon for different densities, you should follow the 2:3:4:6:8 scaling ratio between the five primary densities (MDPI, HDPI, XHDPI, XXHDPI, and XXXHDPI respectively). For example, consider that the size for an app icon is specified to be 48x48 px. This means the baseline (MDPI) asset is 48x48 px, and the high density (HDPI) asset should be 1.5x the baseline at 72x72 px, and the x-high density (XHDPI) asset should be 2x the baseline at 96x96 px, and so on.

Guidelines for designing Images & Icons

Beautiful, compelling icons and images are a fundamental part of the user experience. Please follow Icon and Image Design in iOS Human Interface Guidelines and Iconography in Android Design to design good-looking images and icons.