Branding Customization

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:

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:

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 tap 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:

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.