Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Customizing the image assets of mobile apps

Updated on March 3, 2022

Match the icons in your mobile app with the branding requirements of your company or project by replacing the default image assets with a set of custom graphics.

By uploading your custom assets in a single .zip file, you can customize the icons that appear on the home screen and on the launch 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.
Note: Perform this procedure only in the following scenarios:
  • To specify different icons for iOS and Android apps.
  • To upload icon images in a format other than the default SVG format, for example, .png.
  • To upload icon images in a resolution other than the recommended 512 x 512 pixels.
  • For Android apps, to upload a custom notification icon for the status bar of your mobile app.

Otherwise, customize the icon and launch screen of your mobile app in a low-code environment. For more information, see Customizing the icon and launch screen of 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).
  1. Download the simplified assets .zip file that matches your version of Pega Mobile Client.
  2. Extract the contents of the .zip file.
  3. Replace the image assets in the folders that you extracted from the .zip file to customize any of the following graphics:
    ChoicesActions
    Mobile app icon (iOS)
    1. In the common_assets folder, 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, 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)
    1. In the common_assets folder, replace the icon.svg file with the image file that you want to use.
    2. In the android folder, 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.
    3. In the android folder, replace the notification_icon.svg file with the image file that you want to use.
      Android mobile devices use this icon to display notifications on the status bar of your mobile app.
      Note: Use an icon that matches the following requirements:
      • Image format – 32-bit .png (with alpha)
      • Transparent image
      • Transparency Color Index – White (#FFFFFF)
    4. Optional: To enable adaptive icons for your mobile app, in the android folder, replace the icon_background.svg and icon_foreground.svg files with the image files that you want to use.
      For more information about adaptive icons in Android operating systems, see the Adaptive icons article on the Android Developers website.
    Splash screen logo (iOS and Android)In the common_assets folder, replace the splashlogo.svg file with the image file that you want to use.
  4. Select the folders that you extracted from the .zip file that now contain your custom assets, and then compress them into a single .zip file.
  5. Open your mobile channel:
    1. In the navigation pane of App Studio, click Channels.
    2. In the Current channel interfaces section, click the tile that represents a mobile channel for your app.
  6. On the mobile channel page, on the Layout tab, click Branding.
  7. In the Branding section, click the Configure advanced branding icon, and then select the Advanced Branding check box.
  8. In the Upload custom branding file section, click Choose file, and then select the .zip file that contains your custom assets.
  9. Confirm your selection by clicking OK.
  10. 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.

Tags

Pega Platform 8.6 Mobile

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Visit the Support Center

Did you find this content helpful?

Yes
No

Want to help us improve this content?
Suggest an edit

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us