background image of mobile app

background image of mobile app

  

Hi,

I want to change the background image of my mobile app. Instead of background colour i want to use background image. I tried many codes but none worked. I wonder what is it im missing.One of them is

background-image:url('img/myimage/png');


Cheers


Do you mean a background image for the splash screen that shows while your app is loading?  Or a background image for each screen of your app?

Davidk wrote:

Do you mean a background image for the splash screen that shows while your app is loading?  Or a background image for each screen of your app?


Hi David,

Actually both. Splash as well as background image of each screen.

Cheers

For the Splash Screen you can follow this...

https://success.outsystems.com/Documentation/10/Delivering_Mobile_Apps/Customize_Your_Mobile_App/Use_Custom_Splash_Screens

I just tried it and it works.  Here are some tips however.  I put all my splash screen into a zip... no folders in the zip... just all files.  Therefore, the path to the file is just the full file name.

I also had to include "preferences" in the configuration JSON... without it the splash screen did not display.

My full Extensibility Configuation JSON is below.  I only tested with Android.  What's really nice is if you forget to include a splash screen size, the Android app build process will tell you.

{
        "resource": "MyResources.zip",
        "splashscreens":{
            "android" : [{
            "resource" : "screen-ldpi-portrait.png",
            "density" : "port-ldpi"
        },
        {
            "resource" : "screen-mdpi-portrait.png",
            "density" : "port-mdpi"
        },
        {
            "resource" : "screen-hdpi-portrait.png",
            "density" : "port-hdpi"
        },
        {
            "resource" : "screen-xhdpi-portrait.png",
            "density" : "port-xhdpi"
        },
        {
            "resource" : "screen-xxhdpi-portrait.png",
            "density" : "port-xxhdpi"
        },
        {
            "resource" : "screen-xxxhdpi-portrait.png",
            "density" : "port-xxxhdpi"
        },
        {
            "resource" : "screen-ldpi-landscape.png",
            "density" : "land-ldpi"
        },
        {
            "resource" : "screen-mdpi-landscape.png",
            "density" : "land-mdpi"
        },
        {
            "resource" : "screen-hdpi-landscape.png",
            "density" : "land-hdpi"
        },
        {
            "resource" : "screen-xhdpi-landscape.png",
            "density" : "land-xhdpi"
        },
        {
            "resource" : "screen-xxhdpi-landscape.png",
            "density" : "land-xxhdpi"
        },
        {
            "resource" : "screen-xxxhdpi-landscape.png",
            "density" : "land-xxxhdpi"
        }]
   },
   "preferences":{
       "global": [{
           "name": "SplashScreenDelay",
           "value": "3000"
       }]
   }
}