3

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 supply the background image. Is such a thing possible?

Barring that, can I at least set a background color on the WebView that will "bleed through" to HTML content?

1

3 Answers 3

5

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; }
3
  • Just curious as to why you are adding the background image to the webview instead of the html page? Doing something like this seems to take away one of the major benefits of Cordova: cross platform.
    – MBillau
    Aug 7, 2013 at 17:53
  • @MBillau: To get the same effect as background-attachment: fixed or position: fixed, both of which are problematic in Android's WebView environment. Aug 7, 2013 at 23:17
  • 1
    Oh I see...hmm, too bad there isn't a better HTML5 only way to accomplish that.
    – MBillau
    Aug 8, 2013 at 13:52
1

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

5
  • Still a white background on Android 2.3 / Cordova 2.8.1, using a blank index.html and * { background:transparent !important; }. Aug 5, 2013 at 22:22
  • try also adding that code to the config.xml file located in /www Aug 5, 2013 at 22:36
  • As far as I know the default white screen you are seeing is the background of the webview and to change that you would use CSS (or inline styles) applied to the body element ( body { background-color: #000; } ) Aug 5, 2013 at 23:20
  • 1
    This is the entire index.html (ie, styling the auto-generated <body> tag): <style>html, body, * { background: transparent !important; }</style> I'm trying to get the WebView background to "bleed through". Aug 5, 2013 at 23:24
  • I am not sure that is possible, but this thread may be what you are looking for: stackoverflow.com/questions/10919223/… Aug 5, 2013 at 23:27
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.