Introduction
These are the required assets for a QB mobile app
Accessing assets
Got to Assets in the settings menu in Zapp
Assets can be uploaded item by item or a bulk upload as a Zip file
iOS App Icon
Icon-1024 is the app icon that will show on your device. Upload a 1024x1024px graphic.
The asset should be supplied as a square, the device will round the corners for you.
iOS iPhone Splash Screen
There are 3 options:
- Launch Image Only
- Launch Image & Logo Image
- Video Splash
OPTION 1 - LAUNCH IMAGE ONLY
launch_image_iPhone is the asset that will show on your device when the app is loading. Upload a 428x926 @3x (1284x2778px) graphic.
Only one splash asset is needed for all iPhone devices. This asset matches the size & pixel density of the biggest device (iPhone 12 Pro Max) and therefore will be high enough resolution for all iPhone devices. The asset fits the screen by matching the device width and is vertically aligned center. Cropping of the image will take place at the top & bottom of the screen. This will happen when the screen ratio does not match that of the iPhone 12 Pro Max.
This asset can be supplied with the app logo as part of the image. In this example the logo has been artworked into the launch image. The logo scales down across smaller devices.
OPTION 2 - LAUNCH IMAGE & LOGO IMAGE
launch_image_iPhone is the asset that will show on your device when the app is loading. Upload a 428x926 @3x (1284x2778px) graphic.
launch_image_logo_iPhone is the asset that will appear over the launch image. Upload a 320x320 @3x (960x960px) graphic.
Supplying the logo separately means that the size of the asset is consistent across different sized devices. In Option 1 the logo is part of the background image and scales across different device sizes whereas in this example the logo is a consistent size.
OPTION 3 - LAUNCH VIDEO
launch_video_iPhone_2x is the video asset that will show on your device when the app is loading. Upload a 856x1852px video for @2x resolution devices.
launch_video_iPhone_3x is the video asset that will show on your device when the app is loading. Upload a 1284x2778px video for @3x resolution devices.
launch_image_iPhone is the asset that will show on your device when the app is loading. Upload a 428x926 @3x (1284x2778px) graphic.
The splash video should be kept fairly short 2-4 seconds which should be enough time for an app intro. Also bear in mind video file sizes, these should be kept to a minimum where possible. Two resolutions are needed for @2x and @3x display devices.
The launch image is displayed before the video starts to play therefore the image should reflect the first frame of the video.
iOS iPad Splash Screen
There are 3 options:
- Launch Image Only
- Launch Image & Logo Image
- Video Splash
OPTION 1 - LAUNCH IMAGE ONLY
launch_image_iPad is the asset that will show on your device when the app is loading. Upload a 1100x1100 @2x (2200x2200px) graphic.
Only one splash asset is needed for both tablet portrait & landscape. This asset should be supplied as a square 1x1 asset. The asset fits the screen by matching either the device height on portrait or device width on landscape. This means that we do not have to supply assets for every single device size.
This asset can be supplied with the app logo as part of the image. In this example the logo has been artworked into the launch image. The logo scales down across smaller devices.
OPTION 2 - LAUNCH IMAGE & LOGO IMAGE
launch_image_iPad is the asset that will show on your device when the app is loading. Upload a 1100x1100 @2x (2200x2200px) graphic.
launch_image_logo_iPad is the asset that will appear over the launch image. Upload a 550x550 @2x (1100x1100px) graphic.
Supplying the logo separately means that the size of the asset is consistent across different sized devices. In Option 1 the logo is part of the background image and scales across different device sizes.
OPTION 3 - LAUNCH VIDEO
launch_video_iPad_1x is the video asset that will show on your device when the app is loading. Upload a 1100x1100 video here for @1x resolution devices.
launch_video_iPad_2x is the video asset that will show on your device when the app is loading. Upload a 2200x2200 video here for @2x resolution devices.
launch_image_iPad is also needed here and should be the first frame of the video. Upload a 1100x1100 @2x (2200x2200px) graphic.
The splash video should be kept fairly short 2-4 seconds which should be enough time for an app intro. Also bear in mind video file sizes, these should be kept to a minimum where possible. Two resolutions are needed for @1x and @2x display devices.
The launch image is displayed before the video starts to play therefore the image should reflect the first frame of the video.
Android App Icon
App icons should be uploaded in two formats:
- App Icon (Legacy)
- App Icon (Rounded)
APP ICON - LEGACY SIZINGS
ic_launcher is the app icon that will show on your device. Upload the following resolution images:
- hdpi 72x72px
- Xhdpi 96x96px
- xxhdpi 144x144px
- xxxhdpi 192x192px
APP ICON - ROUNDED SIZINGS
ic_launcher_foreground is the top layer of the app icon that will show on your device. Image must have an empty area outside of the 72dp center area as it will be clipped. Upload the following resolution images:
- hdpi 162x162px
- xhdpi 216x216px
- xxhdpi 324x324px
- xxxhdpi 432x432px
ic_launcher_background is the bottom layer of the app icon that will show on your device. Upload the following resolution images:
- hdpi 162x162px
- xhdpi 216x216px
- xxhdpi 324x324px
- xxxhdpi 432x432px
The two icon assets (ic_launcher_background & ic_launcher_foreground) are layered on top of each other to create the app icon on the device. Make sure that both assets are supplied in a square (no rounded corners) & the foreground asset should have a transparent background. The background asset is clipped differently across different devices/operating systems. Supplying seperate layers ensures that the app icon looks good everywhere.
More info on adaptive icons here: https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive
Android Notification Icon
notification_icon should have a transparent background as the logo shape is coloured by the device. These should be supplied in the following resolutions:
- hdpi 36x26px
- xhdpi 48x48px
- xxhdpi 72x72px
- xxxhdpi 96x96px
More info on notification icons here: https://documentation.onesignal.com/docs/customize-notification-icons
Android Mobile Splash Screen
Please note that the following are general guidelines on creating artwork for splash screens. However, there are some things to consider:
- File size should be considered and try to keep it as low as possible
- Other ratios/sizes are acceptable if target audience requires something different
- Video assets over 2000px will not render on some older devices
- In some cases just one asset at xhdpi could be good enough resolution across all devices
There are 3 options:
- Launch Image Only
- Launch Image & Logo Image
- Video Splash
OPTION 1 - LAUNCH IMAGE ONLY
splash_background is the asset that will show on your device when the app is loading. Upload the following resolution images:
- hdpi 540x1290px
- Xhdpi 720x1720px
- xxhdpi 1080x2580px
- xxxhdpi 1440x3440px
Only one splash asset is needed for all Android mobile devices. This asset matches the screen ratio of the biggest device (9:21.5) and therefore will be deep enough for all Android mobile device sizes. The asset fits the screen by matching the device width and is vertically aligned center. Cropping of the image will take place at the top & bottom of the screen will happen when the screen ratio does not match 9:21.5.
This asset can be supplied with the app logo as part of the image. In this example the logo has been artworked into the launch image.
OPTION 2 - LAUNCH IMAGE & LOGO IMAGE
splash_background is the asset that will show on your device when the app is loading. Upload the following resolution images:
- hdpi 540x1290px
- Xhdpi 720x1720px
- xxhdpi 1080x2580px
- xxxhdpi 1440x3440px
splash_logo is the asset that will appear over the splash background. Upload a square image in the following resolutions.
- hdpi 540x540px
- Xhdpi 720x720px
- xxhdpi 1080x1080px
- xxxhdpi 1440x1440px
Supplying the logo separately means that the size of the asset is consistent across different sized devices. In Option 1 the logo is part of the background image and scales across different device sizes whereas in this example the logo is a consistent size.
OPTION 3 - LAUNCH VIDEO
intro is the video asset that will show on your device when the app is loading. Upload the following resolution images:
- hdpi 540x1290px
- Xhdpi 720x1720px
- xxhdpi 1080x2580px
- xxxhdpi 1440x3440px
splash_background is the asset that will show on your device when the app is loading. Upload the following resolution images:
- hdpi 540x1290px
- Xhdpi 720x1720px
- xxhdpi 1080x2580px
- xxxhdpi 1440x3440px
The splash video should be kept fairly short 2-4 seconds which should be enough time for an app intro. Also bear in mind video file sizes, these should be kept to a minimum where possible.
The splash background is displayed after the video starts to play therefore the image should reflect the last frame of the video.
Android Tablet Splash Screen
Please note that the following are general guidelines on creating artwork for splash screens. However, there are some things to consider:
- File size should be considered and try to keep it as low as possible
- Other ratios/sizes are acceptable if target audience requires something different
- Video assets over 2000px will not render on some older devices
- In some cases just one asset at xhdpi could be good enough resolution across all devices
There are 3 options:
- Launch Image Only
- Launch Image & Logo Image
- Video Splash
OPTION 1 - LAUNCH IMAGE ONLY
splash_background is the asset that will show on your device when the app is loading. Upload the following resolution images:
- sw600dp 1500x1500px
- sw620dp-xhdpi 2000x2000px
Only one splash asset is needed for both tablet portrait & landscape. This asset should be supplied as a square 1x1 asset. The asset fits the screen by matching either the device height on portrait or device width on landscape. This means that we do not have to supply assets for every single device size.
This asset can be supplied with the app logo as part of the image. In this example the logo has been artworked into the launch image. The logo scales down across smaller devices.
OPTION 2 - LAUNCH IMAGE & LOGO IMAGE
splash_background is the asset that will show on your device when the app is loading. Upload the following resolution images:
- sw600dp 1500x1500px
- sw620dp-xhdpi 2000x2000px
splash_logo is the asset that will appear over the splash background. Upload a square image in the following resolutions.
- sw600dp 600x600px
- sw620dp-xhdpi 800x800px
Supplying the logo separately means that the size of the asset is consistent across different sized devices. In Option 1 the logo is part of the background image and scales across different device sizes.
OPTION 3 - LAUNCH VIDEO
intro is the video asset that will show on your device when the app is loading. Upload the following resolution images:
- sw600dp 1500x1500px
- sw620dp-xhdpi 2000x2000px
splash_background is the asset that will show on your device when the app is loading. Upload the following resolution images:
- sw600dp 1500x1500px
- sw620dp-xhdpi 2000x2000px
The splash video should be kept fairly short 2-4 seconds which should be enough time for an app intro. Also bear in mind video file sizes, these should be kept to a minimum where possible.
The splash background is displayed after the video starts to play therefore the image should reflect the last frame of the video.
Android Preloader
loader_X 12 frames of a preloader spinner image sequence (files should include ‘loader_1’, ‘loader_2’ etc. upto ‘loader_12’). These should be supplied in the following resolutions:
- hdpi 45x45px
- xhdpi 60x60px
- xxhdpi 90x90px
- xxxhdpi 120x120px
PDF file download
Comments
0 comments
Please sign in to leave a comment.