Hexagon Geospatial
MENU

Developers Knowledge Base

Mobile and field solutions function as an extension of the overall enterprise, and include the ability to access, create, review and update geospatial data and asset information in real-time in the field.
Turn on suggestions Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Do you mean 

Custom icons and splash screens

by Technical Evangelist on ‎09-11-2015 06:15 AM - edited on ‎11-15-2017 01:48 AM by Technical Evangelist (1,662 Views)
Labels:

Every app has an icon which is dispalyed on a device’s Home screen and in the Store. Every app has also a launch image which is displayed immediatly when the app is launched giving the app time to prepare its initial user interface. Since mobile applications runs on a variety of devices, graphics should be prepared in different sizes for  different screen sizes and densities.

 

To change the app icon and splash screens you need to :

  • Create a project: grunt createproject --name=myApp --id=com.my.app --template=mmw-essentials
  • Replace default graphics with custom ones.
    • Mobile (Android) - '.\workspace\myApp\src\mobile\android\img'
    • Mobile (Windows) - '. \workspace\myApp\src\mobile\ios\img'
    • Mobile (iOS) - '.\workspace\myApp\src\mobile\windows\img'
  • Build and deploy app.
    • Mobile (Android) - in the command line window run grunt android and grunt runandroid
    • Mobile (Windows) - in the command line window run grunt windows and grunt runwindows
    • Mobile (iOS) - in the command line window run grunt ios and grunt runios

 

Android

The default application icon (icon.png) and splash screen (splashscreen.png) should be placed in '.\workspace\myApp\src\mobile\android\img\drawable' directory.

 

Android selects best matching drawable directory to use based on the device screen size and density.

Drawable directory naming convention is as follow:  drawable-[screen size ]-[screen orientation]-[screen pixel density]

 

Complete icon and splash screen set for Android app:   

Drowable directory name

Splash screen size (pixels)

Icon size (pixels)

drawable-port-ldpi

480x800

36x36

drawable-port-mdpi

720x1280

48x48

drawable-port-hdpi

1080x1920

72x72

drawable-port-xhdpi

1440x2560

96x96

drawable-port-xxhdpi

1440x2560

144x144

drawable-large-port-mdpi

1200x1920

48x48

drawable-large-port-hdpi

1600x2560

72x72

drawable-xlarge-port-mdpi

1200x1920

48x48

drawable-xlarge-port-hdpi

1600x2560

72x72

drawable-land-ldpi

800x480

36x36

drawable-land-mdpi

1280x720

48x48

drawable-land-hdpi

1920x1080

72x72

drawable-land-xhdpi

2560x1440

96x96

drawable-land-xxhdpi

2560x1440

 144x144

drawable-large-land-mdpi

1920x1200

48x48

drawable-large-land-hdpi

2560x1600

72x72

drawable-xlarge-land-mdpi

1920x1200

48x48

drawable-xlarge-land-hdpi

2560x1600

72x72

 

For more information see: http://developer.android.com/

 

iOS

The icons files should be placed in ‘.\workspace\myApp\src\mobile\ios\img\icons’ directory. 

The launch/splash screen files should be placed in ‘.\workspace\myApp\src\mobile\ios\img\splash’ directory. 

 

The standard bit depth for icons is 24 bits - that is, 8 bits each for red, green, and blue - plus an 8-bit alpha channel, for a total of 32 bits. Filles names should be as presented in the below tables. 

 

Complete icon set for a iOS app:   

Image size (pixels)

Image file name

40x40

icon-40.png

80x80

icon-40@2x.png

50x50

icon-50.png

100x100

icon-50@2x.png

60x60

icon-60.png

120x120

icon-60@2x.png

72x72

icon-72.png

144x144

icon-72@2x.png

76x76

icon-76.png

152x152

icon-76@2x.png

180x180

icon@3x.png

29x29

icon-small.png

58x58

icon-small@2x.png

57x57

icon.png

114x114

icon@2x.png

1024x1024

appStoreIcon.png

 

Complete splash screen set for a iOS app:

Image size (pixels)

Image file name

1024x748

Default-Landscape~ipad.png

768x1024

Default-Portrait~ipad.png

1536x2048

Default-Portrait@2x~ipad.png

1024x768

Default-Landscape~ipad.png

2048x1536

Default-Landscape@2x~ipad.png

320x480

Default~iphone.png

640x960

Default@2x~iphone.png

640x1136

Default-568h@2x~iphone.png

750x1334

Default-667h.png

1242x2208

Default-736h.png

2208x1242

Default-Landscape-736h.png

 

For more information see http://developer.apple.com

 

Windows

The application icons and splash screens should be placed in '.\workspace\myApp\src\mobile\windows\img\WindowsPhone' directory for WIndows Phone app, and in '.\workspace\myApp\src\mobile\windows\img\Windows' directory for Windows app.

 

Complete icon set for a Windows Phone app:

Image size (pixels)

Image file name

44x44

Square44x44Logo.scale-100.png

62x62

Square44x44Logo.scale-140.png

106x106

Square44x44Logo.scale-240.png

71x71

Square71x71Logo.scale-100.png

99x99

Square71x71Logo.scale-140.png

170x170

Square71x71Logo.scale-240.png

150x150

Square150x150Logo.scale-100.png

210x210

Square150x150Logo.scale-140.png

360x360

Square150x150Logo.scale-240.png

50x50

StoreLogo.scale-100.png

70x70

StoreLogo.scale-140.png

120x120

StoreLogo.scale-240.png

310x150

Wide310x150Logo.scale-100.png

434x210

Wide310x150Logo.scale-140.png

744x360

Wide310x150Logo.scale-240.png

 

Complete icon set for Windows app:

Image size (pixels)

Image file name

24x24

Square30x30Logo.scale-80.png

30x30

Square30x30Logo.scale-100.png

42x42

Square30x30Logo.scale-140.png

54x54

Square30x30Logo.scale-180.png

16x16

Square30x30Logo.target-16.png

32x32

Square30x30Logo.target-32.png

48x48

Square30x30Logo.target-48.png

256x256

Square30x30Logo.target-256.png

56x56

Square70x70Logo.scale-80.png

70x70

Square70x70Logo.scale-100.png

98x98

Square70x70Logo.scale-140.png

126x126

Square70x70Logo.scale-180.png

120x120

Square150x150Logo.scale-80.png

150x150

Square150x150Logo.scale-100.png

210x210

Square150x150Logo.scale-140.png

270x270

Square150x150Logo.scale-180.png

248x248

Square310x310Logo.scale-80.png

310x310

Square310x310Logo.scale-100.png

434x343

Square310x310Logo.scale-140.png

558x558

Square310x310Logo.scale-180.png

50x50

StoreLogo.scale-100.png

70x70

StoreLogo.scale-140.png

90x90

StoreLogo.scale-180.png

248x120

Wide310x150Logo.scale-80.png

310x150

Wide310x150Logo.scale-100.png

434x210

Wide310x150Logo.scale-120.png

558x270

Wide310x150Logo.scale-180.png

 

Complete splash screen set for Windows Phone app:

Image size (pixels)

Image file name

480x800

SplashScreenPhone.scale-100.png

672x1120

SplashScreenPhone.scale-140.png

1152x1920

SplashScreenPhone.scale-240.png

 

Complete splash screen set for Windows app:

Image size (pixels)

Image file name

620x300

SplashScreen.scale-100.png

868x420

SplashScreen.scale-140.png

1116x540

SplashScreen.scale-180.png

 

For more information see Guidelines for Universal Windows Platform (UWP) apps - tile and icon assets and - splash screens

Rate this article:
0 HexPoints
Did you find this article helpful? Yes No
1 Comment (1 New)
Hide Comment
Comments
by mosael
on ‎10-31-2018 09:58 AM
@testing1 wrote:

Every app has an icon which is dispalyed on a device’s Home screen and in the Store. Every app has also a launch image which is displayed immediatly when the app is launched giving the app time to prepare its initial user interface. Since mobile applications runs on a variety of devices, graphics should be prepared in different sizes for  different screen sizes and densities.

 

To change the app icon and splash screens you need to :

  • Create a project: grunt createproject --name=myApp --id=com.my.app --template=mmw-essentials
  • Replace default graphics with custom ones.
    • Mobile (Android) - '.\workspace\myApp\src\mobile\android\img'
    • Mobile (Windows) - '. \workspace\myApp\src\mobile\ios\img'
    • Mobile (iOS) - '.\workspace\myApp\src\mobile\windows\img'
  • Build and deploy app.
    • Mobile (Android) - in the command line window run grunt android and grunt runandroid
    • Mobile (Windows) - in the command line window run grunt windows and grunt runwindows
    • Mobile (iOS) - in the command line window run grunt ios and grunt runios

 

Android

The default application icon (icon.png) and splash screen (splashscreen.png) should be placed in '.\workspace\myApp\src\mobile\android\img\drawable' directory.

 

Android selects best matching drawable directory to use based on the device screen size and density.

Drawable directory naming convention is as follow:  drawable-[screen size ]-[screen orientation]-[screen pixel density]

 

Complete icon and splash screen set for Android app:   

Drowable directory name

Splash screen size (pixels)

Icon size (pixels)

drawable-port-ldpi

480x800

36x36

drawable-port-mdpi

720x1280

48x48

drawable-port-hdpi

1080x1920

72x72

drawable-port-xhdpi

1440x2560

96x96

drawable-port-xxhdpi

1440x2560

144x144

drawable-large-port-mdpi

1200x1920

48x48

drawable-large-port-hdpi

1600x2560

72x72

drawable-xlarge-port-mdpi

1200x1920

48x48

drawable-xlarge-port-hdpi

1600x2560

72x72

drawable-land-ldpi

800x480

36x36

drawable-land-mdpi

1280x720

48x48

drawable-land-hdpi

1920x1080

72x72

drawable-land-xhdpi

2560x1440

96x96

drawable-land-xxhdpi

2560x1440

 144x144

drawable-large-land-mdpi

1920x1200

48x48

drawable-large-land-hdpi

2560x1600

72x72

drawable-xlarge-land-mdpi

1920x1200

48x48

drawable-xlarge-land-hdpi

2560x1600

72x72

 

For more information see: http://developer.android.com/

 

iOS

The icons files should be placed in ‘.\workspace\myApp\src\mobile\ios\img\icons’ directory. 

The launch/splash screen files should be placed in ‘.\workspace\myApp\src\mobile\ios\img\splash’ directory. 

 

The standard bit depth for icons is 24 bits - that is, 8 bits each for red, green, and blue - plus an 8-bit alpha channel, for a total of 32 bits. Filles names should be as presented in the below tables. 

 

Complete icon set for a iOS app:   

Image size (pixels)

Image file name

40x40

icon-40.png

80x80

icon-40@2x.png

50x50

icon-50.png

100x100

icon-50@2x.png

60x60

icon-60.png

120x120

icon-60@2x.png

72x72

icon-72.png

144x144

icon-72@2x.png

76x76

icon-76.png

152x152

icon-76@2x.png

180x180

icon@3x.png

29x29

icon-small.png

58x58

icon-small@2x.png

57x57

icon.png

114x114

icon@2x.png

1024x1024

appStoreIcon.png

 

Complete splash screen set for a iOS app:

Image size (pixels)

Image file name

1024x748

Default-Landscape~ipad.png

768x1024

Default-Portrait~ipad.png

1536x2048

Default-Portrait@2x~ipad.png

1024x768

Default-Landscape~ipad.png

2048x1536

Default-Landscape@2x~ipad.png

320x480

Default~iphone.png

640x960

Default@2x~iphone.png

640x1136

Default-568h@2x~iphone.png

750x1334

Default-667h.png

1242x2208

Default-736h.png

2208x1242

Default-Landscape-736h.png

 

For more information see http://developer.apple.com

 

Windows

The application icons and splash screens should be placed in '.\workspace\myApp\src\mobile\windows\img\WindowsPhone' directory for WIndows Phone app, and in '.\workspace\myApp\src\mobile\windows\img\Windows' directory for Windows app.

 

Complete icon set for a Windows Phone app:

Image size (pixels)

Image file name

44x44

Square44x44Logo.scale-100.png

62x62

Square44x44Logo.scale-140.png

106x106

Square44x44Logo.scale-240.png

71x71

Square71x71Logo.scale-100.png

99x99

Square71x71Logo.scale-140.png

170x170

Square71x71Logo.scale-240.png

150x150

Square150x150Logo.scale-100.png

210x210

Square150x150Logo.scale-140.png

360x360

Square150x150Logo.scale-240.png

50x50

StoreLogo.scale-100.png

70x70

StoreLogo.scale-140.png

120x120

StoreLogo.scale-240.png

310x150

Wide310x150Logo.scale-100.png

434x210

Wide310x150Logo.scale-140.png

744x360

Wide310x150Logo.scale-240.png

 

Complete icon set for Windows app:

Image size (pixels)

Image file name

24x24

Square30x30Logo.scale-80.png

30x30

Square30x30Logo.scale-100.png

42x42

Square30x30Logo.scale-140.png

54x54

Square30x30Logo.scale-180.png

16x16

Square30x30Logo.target-16.png

32x32

Square30x30Logo.target-32.png

48x48

Square30x30Logo.target-48.png

256x256

Square30x30Logo.target-256.png

56x56

Square70x70Logo.scale-80.png

70x70

Square70x70Logo.scale-100.png

98x98

Square70x70Logo.scale-140.png

126x126

Square70x70Logo.scale-180.png

120x120

Square150x150Logo.scale-80.png

150x150

Square150x150Logo.scale-100.png

210x210

Square150x150Logo.scale-140.png

270x270

Square150x150Logo.scale-180.png

248x248

Square310x310Logo.scale-80.png

310x310

Square310x310Logo.scale-100.png

434x343

Square310x310Logo.scale-140.png

558x558

Square310x310Logo.scale-180.png

50x50

StoreLogo.scale-100.png

70x70

StoreLogo.scale-140.png

90x90

StoreLogo.scale-180.png

248x120

Wide310x150Logo.scale-80.png

310x150

Wide310x150Logo.scale-100.png

434x210

Wide310x150Logo.scale-120.png

558x270

Wide310x150Logo.scale-180.png

 

Complete splash screen set for Windows Phone app:

Image size (pixels)

Image file name

480x800

SplashScreenPhone.scale-100.png

672x1120

SplashScreenPhone.scale-140.png

1152x1920

SplashScreenPhone.scale-240.png

 

Complete splash screen set for Windows app:

Image size (pixels)

Image file name

620x300

SplashScreen.scale-100.png

868x420

SplashScreen.scale-140.png

1116x540

SplashScreen.scale-180.png

 

For more information see Guidelines for Universal Windows Platform (UWP) apps - tile and icon assets and - splash screens

this is a real big help for us like begginers thx if i know how to add you hex point it would be a big pleasure 

Overview
Contributors