Match the icons in your mobile app with the requirements of your company or
project by replacing default image assets with a custom set of graphics.
Upload
your custom assets in a single .zip file that contains images for the icons that appear on the
home screen and on the splash screen when the mobile app starts.
Before you begin: Create a mobile channel for your mobile app. For more
information, see
Setting up mobile apps.
Important: When you replace the default image files in the assets .zip file,
ensure that you keep the directory structure, file names, and image dimensions of your
custom assets .zip file identical to the setup in the default .zip file. If a specific image
asset is missing in your custom assets .zip file, the operating system of the mobile device
rescales the existing assets (Android), or replaces the missing assets with the
system-default resources (iOS).
-
Download the simplified assets .zip file that matches your version of Pega Infinity Mobile Client.
-
Extract the contents of the .zip file.
-
Replace the image assets in the folders that you extracted from the .zip file to
customize the following graphics:
| Choices |
Actions |
|---|
| Mobile app icon (iOS) |
-
Open the common_assets folder, and then replace the
icon.svg file with the image file that you want to
use.
Note: If you plan to publish your mobile app in the Apple App Store, you must
use a rectangular icon. iOS mobile devices also rescale the
icon.svg file and use it as an icon to display
notifications on the status bar of your mobile app.
|
| Mobile app icon (Android) |
-
Open the common_assets folder, and then replace the
icon.svg file with the image file that you want to
use.
-
Open the android folder, and then replace the
icon_round.svg file with the image file that you want to
use.
Note: Use a circular icon. Android devices that support circular launcher icons
use the icon_round.svg file instead of the
icon.svg file as the app icon.
-
Open the android folder, and then replace the
notification_icon.svg file with the image file that you
want to use.
Note: Android mobile devices use this icon to display notifications on the
status bar of your mobile app. Use an icon that matches the following
requirements:
- Image format – 32-bit .png (with alpha)
- Transparent image
- Transparency Color Index – White (#FFFFFF)
|
| Splash screen logo (iOS) |
Open the ios folder, and then replace the
[email protected] file with the image file that you want to
use. |
| Splash screen logo (Android) |
Open the android/drawable-resolution
folder for each resolution of the target mobile device that you want to support, and
then replace the splashlogo.png file with the image file that you
want to use. |
-
Select the folders that you extracted from the .zip file that now contain your custom
assets, and then compress them to a single .zip file.
-
Open your mobile channel:
-
In the navigation pane of
App Studio, click Channels.
-
In the Current channel interfaces section, click
the icon that represents a channel for your mobile app.
-
On the mobile channel page, on the Layout tab, in the
Styling section, click the preview of the icon and splash screen of
your mobile app.
-
In the Update branding window, click
Custom, and then upload your custom branding assets .zip
file:
- To upload the custom branding for the first time, click Upload zip
file, and then choose the .zip file with your custom image
assets.
- To update the existing custom branding, click Replace, and
then choose the .zip file with your updated custom image assets.
-
Click OK, and then click Save.
Result: At run time, your mobile app now uses the custom image assets
from the .zip assets file that you uploaded in the mobile channel.
What to do next: Verify the changes to your mobile app by generating,
installing, and launching the app. For more information, see Generating native mobile apps.