Branding Customization

Last update: May 24, 2024

CREATED FOR:

  • User
  • Developer

You can customize the application icon, application name, launch images, and login page to provide a distinct organization-specific appearance to AEM Forms app. For example, you can change the images to use logos from your organization. The AEM Forms app supports the following customizations:

  • Customizing application icon and launch images
  • Customizing app name
  • Customizing images on the login page
  • Customizing the logo in the app menu

Customizing icon and launch images

Perform the following steps to customize the default app icon and the launch image of the AEM Forms app:

NOTE
For all the icons and images, use non-interlaced PNG format.

To customize icon and launch images

For iOS

  1. Open the Capture.xcodeproj project in Xcode.

  2. (For customizing icon) In the navigator view of Capture, navigate to Capture > Capture > Supporting Files > Capture-info.plist. Click the drop-down next to the Icon files. Specify the name of the icon file (.png) and upload the file at Capture > Capture > Resources > icons. Currently supported dimesions are: 29x29, 50x50, 58x58, 72x72, 100x100, and 144x144.

  3. (For customizing launch images) Ensure that the filenames of your images are:

    • For portrait: Default-Portrait~ipad.png and Default-Portrait@2x~ipad.png
    • For landscape: Default-Landscape~ipad.png and Default-Landscape@2x~ipad.png

    Upload them to the Capture project to replace existing files in the project.

    NOTE
    Ensure that the name and resolution of your image matches the image you replace in the project.

  4. Build and run AEM Forms app on iOS device or iOS simulator.

For Android

  1. Name the application icon files as:

    ic_launcher.png

  2. Place the corresponding icon files in the following directories:

    • [User_Home]/Projects/[your-project]/src/android/res/drawable-hdpi
    • [User_Home]/Projects/[your-project]/src/android/res/drawable-mdpi
    • [User_Home]/Projects/[your-project]/src/android/res/drawable-xhdpi
    • [User_Home]/Projects/[your-project]/src/android/res/drawable-xxhdpi
    • [User_Home]/Projects/[your-project]/src/android/res/drawable-xxxhdpi
    NOTE
    Ensure that the name and resolution of your image matches the image you replace in the project.

  3. Rebuild the AEM Forms app.

For Windows

  1. Replace the icons in the path:

    %HOMEPATH%\adobe-lc-mobileworkspace-src-<version>\src\windows\MWSWindows\res\icons\windows

  2. Replace the launcher image in the path:

    %HOMEPATH%\adobe-lc-mobileworkspace-src-<version>\src\windows\MWSWindows\res\screens\windows

    NOTE
    Ensure that the name and resolution of your image matches the image you replace in the project.

  3. Rebuild the AEM Forms app.

Customize the app name

For iOS

  1. Open the Capture.xcodeproj project in Xcode.

  2. In the navigator view of Capture, navigate to Capture > Capture > Supporting Files > InfoPlist.strings.

    Update the value for the CFBundleDisplayName attribute to a name you want to display for the app.

  3. Build and run AEM Forms app on iOS device or iOS simulator.

    For details on building the app for iOS, see Set up the Xcode project and build the iOS app.

For Android

  1. Open the following Xml in any text or Xml editor:

    [User_Home]/Projects/[your-project]/src/android/res/values/strings.xml and android/res/values-en/strings.xml

  2. Update the value for the key app_name.

  3. Rebuild the AEM Forms app.

    For details on building the app for Android, see Set up the Eclipse project and build the Android app.

For Windows

  1. Open the following Xml in any text editor:

    %HOMEPATH%\adobe-lc-mobileworkspace-src-<version>\src\windows\MWSWindows\config.xml

  2. Update the value in the <name>...</name> tag.

  3. Rebuild the AEM Forms app.

    For details on building the app for Windows, see Set up the Visual Studio project and build the Windows app.

Customizing images on the login page

The login page of the AEM Forms app has logo and background images. The logo is located above the login dialog box and background image is located below the login dialog box. Perform the following steps to customize the default image on the login page:

Before you start

Ensure that you have following images:

DescriptionSizeFilename
Logo72 x 72 pixelLC-logo.png
Background image (Portrait)1280 x 989 pixelLanding_bg.jpeg

To customize images on the login page using Xcode

  1. Open the Capture.xcodeproj project in Xcode.

  2. Navigate to the www/wsmobile/imagesfolder.

  3. To change logo, replace the default LC-logo.png file with the custom LC-logo.png file.

  4. To change background, replace the default Landing_bg.jpeg file with the custom Landing_bg.jpegfile.

  5. Build and run AEM Forms app on iOS device or iOS simulator.

To customize images on the login pages using Eclipse

  1. Open the Android project in Eclipse.

  2. Navigate to the assets/www/wsmobile/imagesfolder.

  3. To change logo, replace the default LC-logo.png file with the custom LC-logo.png file.

  4. To change background, replace the default Landing_bg.jpeg file with the custom Landing_bg.jpegfile.

  5. Build and run AEM Forms app on Android device.

To customize images on the login pages using Visual Studio

  1. Open the MWSWindows.sln project in Visual Studio.

  2. Navigate to the MWSWindows\www\wsmobile\imagesfolder.

  3. To change logo, replace the default LC-logo.png file with the custom LC-logo.png file.

  4. To change background, replace the default Landing_bg.jpeg file with the custom Landing_bg.jpegfile.

  5. Build and run AEM Forms app on Windows device.

Customizing the logo in the app menu

After you login to the AEM Forms app and select the menu button, you can see the logo above the menu. Perform the following steps to customize the default logo:

Before you start

Ensure that you have following image:

DescriptionSizeFilename
Logo72 x 72 pixelaem_icon.png

To customize images on the login page using Xcode

  1. Open the Capture.xcodeproj project in Xcode.

  2. Navigate to the www/wsmobile/imagesfolder.

  3. To change the logo, replace the default aem_icon.png file with the custom aem_icon.png file.

  4. Build and run AEM Forms app on iOS device or iOS simulator.

To customize images on the login pages using Eclipse

  1. Open the Android project in Eclipse.

  2. Navigate to the assets/www/wsmobile/imagesfolder.

  3. To change the logo, replace the default aem_icon.png file with the custom aem_icon.png file.

  4. Build and run AEM Forms app on Android device.

To customize images on the login pages using Visual Studio

  1. Open the MWSWindows.sln project in Visual Studio.

  2. Navigate to the MWSWindows\www\wsmobile\imagesfolder.

  3. To change the logo, replace the default aem_icon.png file with the custom aem_icon.png file.

  4. Build and run AEM Forms app on Windows device.

Experience Manager


Espressos & Experience Manager: AEM Forms

Espressos & Experience Manager

Thursday, Mar 6, 7:00 PM UTC

Join Adobe's AEM product team as they highlight AEM Forms' latest innovations, including: the new Gen AI Assistant, Unified Composition with AEM Sites, and new ways to deploy forms through conversations.

Register

Connect with Experience League at Summit!

Get front-row access to top sessions, hands-on activities, and networking—wherever you are!

Learn more

Register now