Media Pack

Media Packs are used in mobile clients to create shortcut icons on the home screen and splash images that will be shown while the mobile client loads.

A Media Pack consist of many different icons and splash screen images. A Media Pack is used exclusively in mobile clients. Icons will be used to create shortcut icons on Android (.apk), iOS (.ipa) and native Windows apps (.appx). A splash screen image will be shown while the mobile client loads.

When you have created a media pack, you can use it in one or more mobile clients.

media pack overview

Mobile only

Splash screen images from a Media Pack WILL NOT be used on desktop launchpads!

So don’t confuse the splash screen images in a media pack, with the splash screen you can design in Cockpit → Run → Resources → Splash Screen Designer. The splash screen created in the Splash Screen Designer, is used in both desktop launchpads and mobile clients in various places, like when the launchpad loads, when the menu is loaded or when you lock a mobile client.

Generate icon and splash screen images

A Media Pack consists of icons and splash screen images. It can be very time-consuming to produce icon and splash screen images manually. In Neptune, we use the NPM command line tool "Resource Generator" to build Android, iOS & Windows resources. You should too!

Read more about the Resource Generator. With the resource generator you only need to create 2 images, the icon source file and the splash screen source file.

Install the Resource Generator in the command line

npm install -g cordova-res

Icon Source File

The icon source file should be a square .png image with a width of 1240 pixel and a height of 1240 pixel. You can also use a .png 1024x1024 image if you don’t want to create resources for Windows .appx applications.

The icon content should fill almost all of the canvas. But each platform can add rounded corners, so leave a little room for the platform cropping.

Save the image in the PNG format with the name icon.png in a folder named "resources".

media png

Splash Screen Source File

The splash screen source file should be a square .png image with a width of 2732 pixel and a height of 2732 pixel. The resource generator will create both landscape and portrait splash screens based on this one image, so content should be placed in the center of the image. As a rule the content should be placed within an area of ~1000 pixels in the center.

Save the image in the PNG format with the name splash.png in a folder named "resources".

media png resources

Now you have to .png images in your resource folder, icon.png & splash.png.

media png images
meida terminal img

Now you got folders with all the images needed.

media folders with images

Zip all the folders and the two images into resources.zip

media folder zip

Import the .zip file in the Media Pack configuration (Neptune DXP - SAP Edition v.6.0.7 and above).

media import zip

All the resource files will be added to the media library: "Mediapack → <NAME>".

media import media pack

All the resources have been added to the media pack.

madia images added to media pack

Manual Workflow

Neptune is using a centralized media library for all images. Whenever an image is needed, it must be uploaded to the media library first. You’ll find the media library in: Development → Resources → Media Library.

Example

media example

Resource Generator folder and files structure

When using the import functionality, icons and splash screen images, must follow the naming scheme used in the NPM tool "Resource Generator":

resources.zip

    |-- icon.png
    |-- splash.png
    |-- android/
        |-- icon/
            |-- drawable-hdpi-icon.png
            |-- drawable-ldpi-icon.png
            |-- drawable-mdpi-icon.png
            |-- drawable-xhdpi-icon.png
            |-- drawable-xxhdpi-icon.png
            |-- drawable-xxxhdpi-icon.png
        |-- splash/
            |-- drawable-land-hdpi-screen.png
            |-- drawable-land-ldpi-screen.png
            |-- drawable-land-mdpi-screen.png
            |-- drawable-land-xhdpi-screen.png
            |-- drawable-land-xxhdpi-screen.png
            |-- drawable-land-xxxhdpi-screen.png
            |-- drawable-port-hdpi-screen.png
            |-- drawable-port-ldpi-screen.png
            |-- drawable-port-mdpi-screen.png
            |-- drawable-port-xhdpi-screen.png
            |-- drawable-port-xxhdpi-screen.png
            |-- drawable-port-xxxhdpi-screen.png
    |-- ios/
        |-- icon/
            |-- icon-1024.png
            |-- icon-108@2x.png
            |-- icon-20.png
            |-- icon-20@2x.png
            |-- icon-20@3x.png
            |-- icon-24@2x.png
            |-- icon-27.5@2x.png
            |-- icon-29.png
            |-- icon-29@2x.png
            |-- icon-29@3x.png
            |-- icon-40.png
            |-- icon-40@2x.png
            |-- icon-40@3x.png
            |-- icon-44@2x.png
            |-- icon-50.png
            |-- icon-50@2x.png
            |-- icon-60.png
            |-- icon-60@2x.png
            |-- icon-60@3x.png
            |-- icon-72.png
            |-- icon-72@2x.png
            |-- icon-76.png
            |-- icon-76@2x.png
            |-- icon-83.5@2x.png
            |-- icon-86@2x.png
            |-- icon-98@2x.png
            |-- icon.png
            |-- icon@2x.png
        |-- splash/
            |-- Default@2x~universal~anyany.png
    |-- windows/
        |-- icon/
            |-- SmallTile.scale-100.png
            |-- SmallTile.scale-125.png
            |-- SmallTile.scale-140.png
            |-- SmallTile.scale-150.png
            |-- SmallTile.scale-200.png
            |-- SmallTile.scale-240.png
            |-- SmallTile.scale-400.png
            |-- Square150x150Logo.scale-100.png
            |-- Square150x150Logo.scale-125.png
            |-- Square150x150Logo.scale-140.png
            |-- Square150x150Logo.scale-150.png
            |-- Square150x150Logo.scale-200.png
            |-- Square150x150Logo.scale-240.png
            |-- Square150x150Logo.scale-400.png
            |-- Square310x310Logo.scale-100.png
            |-- Square310x310Logo.scale-125.png
            |-- Square310x310Logo.scale-140.png
            |-- Square310x310Logo.scale-150.png
            |-- Square310x310Logo.scale-180.png
            |-- Square310x310Logo.scale-200.png
            |-- Square310x310Logo.scale-400.png
            |-- Square44x44Logo.scale-100.png
            |-- Square44x44Logo.scale-125.png
            |-- Square44x44Logo.scale-140.png
            |-- Square44x44Logo.scale-150.png
            |-- Square44x44Logo.scale-200.png
            |-- Square44x44Logo.scale-240.png
            |-- Square44x44Logo.scale-400.png
            |-- StoreLogo.scale-100.png
            |-- StoreLogo.scale-125.png
            |-- StoreLogo.scale-140.png
            |-- StoreLogo.scale-150.png
            |-- StoreLogo.scale-180.png
            |-- StoreLogo.scale-200.png
            |-- StoreLogo.scale-240.png
            |-- StoreLogo.scale-400.png
            |-- Wide310x150Logo.scale-100.png
            |-- Wide310x150Logo.scale-125.png
            |-- Wide310x150Logo.scale-140.png
            |-- Wide310x150Logo.scale-150.png
            |-- Wide310x150Logo.scale-180.png
            |-- Wide310x150Logo.scale-200.png
            |-- Wide310x150Logo.scale-240.png
            |-- Wide310x150Logo.scale-400.png
            |-- Wide310x150Logo.scale-80.png
        |-- splash/
            |-- Splash.scale-100.png
            |-- Splash.scale-125.png
            |-- Splash.scale-150.png
            |-- Splash.scale-200.png
            |-- Splash.scale-400.png

Transparency

iOS does not support transparency and XCode will throw a warning if you use transparent images! But Android supports transparency.