How do I set a background image on the WebView on Cordova/PhoneGap for Android?

Question

I\'m not just looking for the Splash Screen functionality in the API; if possible, I would like the HTML content to use a transparent background, and lean on the WebView to

Answer 1

You may want to automate some of this in your build, but this will work. It's how I got a splash screen to appear in Android while the app was loading (not after it had loaded or with an artificial delay)...

Create a file in platforms/android/res/values/styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MyTheme" parent="@android:style/Theme.NoTitleBar">
        <!-- set the splash screen as the background image on all windows -->
        <item name="android:windowBackground">@drawable/screen</item>
    </style>
</resources>

In your platforms/android/Manifest.xml replace the theme with @style/MyTheme

In your config.xml file add the following two lines

<!-- make the webview transparent -->
<preference name="backgroundColor" value="0x00000000" />
<!-- cordova will copy the splash screen file to screen.png, 
     but seems to ignore it after then 
-->
<splash src="res/splash/splash.png"/>

Obviously you'll need a splash.png file to use.

Answer 2

Figured it out after digging in Cordova source and Android docs. In src/com/.../MyApp.java:

public class MyApp extends DroidGap
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);

        super.loadUrl(Config.getStartUrl(), 20000);

        // Must be after loadUrl!
        super.appView.setBackgroundColor(0x00000000); // transparent RGB
        super.appView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);

        // Put background image in res/drawable/splash.jpg
        Drawable theSplash = getResources().getDrawable(R.drawable.splash);
        super.root.setBackground(theSplash);
    }
}

And the CSS:

html,
body,
.transparent { background-color: transparent !important; }

Answer 3

I am not sure about setting an image, but you can set the background color using this:

    <preference name="backgroundColor" value="0x00000000" />

You will add this in: res/xml/config.xml