Adhere to these general specifications when creating custom image assets:
- All App Catalog branding image assets must be provided in PNG (Portable Network Graphics) format with a resolution of at least 72 dpi.
- Images should be non-indexed, RGB images.
Image file names are case sensitive; follow file naming specifications exactly.
Common Image Assets
The following table lists specifications for image assets that are shared by the iOS, Android, Windows 8, and Windows Phone App Catalogs. You can provide one version of each of these images and Apperian will use it when building all three catalogs. See iOS Image Assets, Windows 8 Image Assets, and Windows Phone Image Assets for specifications for image assets unique to each platform.
Size is listed as width x height in pixels. To support resolution independence, provide both standard-resolution and high-resolution (Retina display) versions of the images. File names ending with
@2x are used for high-resolution displays. Where separate images are needed for iPhones and iPads, the iPad image file names end with
All of the examples on this page are taken from generic, Apperian-branded App Catalogs. Common image assets are demonstrated using the iOS App Catalog.
Logo for Login page
Appears above the fields on the login screen.
Background for Login page
Image which fills the entire background of the login page (in this example, it's white with the colored bar across the bottom). The same images are used for all devices.
Logo for content pages
Logo that appears at the top of all content pages (Popular, Categories, Updates, and All).
Footer background for content pages
Background image that appears in the bottom portion of all content pages (Popular, Categories, Updates, and All). How much of the image is seen depends on how much of the page is filled with the app list.
iOS Image Assets
The following table lists specifications for image assets used in the iOS App Catalog specifically.
Small app icon
Appears in Spotlight search results.
Standard app icon
Appears on the home screen. The same images are used for both iPhones and iPads.
In addition to customizing the app icon image, you can also customize the name of the App Catalog that appears below the icon whenever it appears on the user's device (Home screen, Apps list). The name can be a text string up to 12 characters or 11 em dashes, including spaces.
Android Image Assets
The following table lists specifications for image assets used in the Android App Catalog specifically.
To support different screen sizes and densities, you should provide versions in multiple densities, as listed in the the following table. The file name indicates the density. For general information on screen support, see Supporting Multiple Screens in the Android developer documentation.
In addition to customizing the app icon image, you can also customize the name of the App Catalog that appears below the icon whenever it appears on the user's device (Home screen, Apps list). Depending on the device, the string is truncated or shows ellipses after a certain number of characters unless you include a space to break and wrap the string. As a general guideline, if the string is more than the width of 6 em-dashes, use spaces to break and wrap the string.
To ensure that the launch image extends to the edges of the screen, use a Nine-patch image for the launch image assets. A Nine-patch is a resizable bitmap with stretchable areas that you define. Because Android devices are not all the same width and height, Nine-Patch images are needed in order to display certain types of graphics (such as background images) properly on all devices.
The stretched launch image will look like this:
Android Nine-Patch Images
A Nine-patch is a stretchable bitmap image that Android automatically resizes to accommodate the contents of the View in which you have placed the image. You can use a Nine-patch image for graphics, such as the App Catalog launch page, where the image needs to extend to the edge of the screen.
To create a Nine-patch image, you take a regular PNG image and use a tool to define the stretchable patches and the content area (the area that cannot be stretched). Be sure to save the file with the
You can use one of the following tools to generate a Nine-patch image:
You can also use a graphics editing program to create a Nine-patch image; for information on creating a Nine-patch image using Adobe Photoshop, see these guidelines. For additional instructions, see this simple guide.
The following figure shows how an image is stretched with and without the use of Nine-patch.
Not all images work well as a Nine-patch. The following example shows how a photograph image is distorted when it is saved as a Nine-patch image and resized:
Windows 8 Image Assets
The following table lists specifications for image assets used in the Windows 8 App Catalog specifically.
Application icon displayed on the application tile (both small and medium sizes), the Apps view page, and the desktop Title bar and Taskbar.
In the example above, the icon in the Apps list is organized under a category name "Apperian," but the category name will be customized for your organization during the branding process.
Image that appears when the App Catalog is loading.
Windows Phone Image Assets
The following table lists specifications for image assets used in the Windows Phone App Catalog specifically.
Application icon that appears on the Apps list page.
Tile image (small, medium, and wide)
Tile image that appears for the application tile on the Windows Phone Start screen. Provide the image in small, medium, and wide sizes.
Optional Customizable Elements
In addition to branding the images in the App Catalog, you can also request that Apperian customize:
Side Menu Items
Apperian can add custom items to the side menu of your organization's App Catalog. By default, the side menu contains:
- The name of the organization to which the user is logged in
- The version of the App Catalog (this is useful when troubleshooting a problem a user is having with the App Catalog)
- The user's first name and last name
- The user ID
- The Logout option
In addition to these default items, you can add other menu items. To add menu items, you must provide Apperian with the name of each additional menu item and the desired text for the corresponding HTML file. If you would like specific styling (certain font types and sizes, images, background color, etc.) implemented in the HTML file, you should create and provide Apperian with your own HTML file.
Initial Tab Display
Apperian can customize which tab appears when a user logs in to your organization's App Catalog. The options for tabs are as follows: Popular, Categories, Search, Updates, or All. The Popular tab appears initially by default.
Popup Message on Login Page
For organizations using SSO authentication, Apperian can add a custom popup box that displays on the login page when a user launches the App Catalog for the first time. The popup box covers the login fields, and provides an acknowledgment button that the user must click in order to log in. Once the user has clicked the acknowledgment button, the popup will not display again unless the App Catalog is updated.
This feature is useful for displaying information you want your users to read before using the catalog. For example, you can display your company's terms and conditions along with an Accept button that users must click to acknowledge that they understand and agree to the terms and conditions.
Apperian can make some CSS modifications to certain UI elements in your organization's App Catalog to further enhance the unified branding. For example, a custom color for the background of the app cards that appear in the Featured Apps section of the Popular tab. For more information about the specific UI elements that can be modified, contact Apperian Support.