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?

Luke Dennis
  • 14,212
  • 17
  • 56
  • 69
  • Of topic but worth reading: http://cyrilmottier.com/2012/05/03/splash-screens-are-evil-dont-use-them/ – Waza_Be Aug 05 '13 at 22:12

3 Answers3

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; }
Luke Dennis
  • 14,212
  • 17
  • 56
  • 69
  • 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 07 '13 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. – Luke Dennis Aug 07 '13 at 23:17
  • 1
    Oh I see...hmm, too bad there isn't a better HTML5 only way to accomplish that. – MBillau Aug 08 '13 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

Dawson Loudon
  • 6,029
  • 2
  • 27
  • 31
  • Still a white background on Android 2.3 / Cordova 2.8.1, using a blank index.html and * { background:transparent !important; }. – Luke Dennis Aug 05 '13 at 22:22
  • try also adding that code to the config.xml file located in /www – Dawson Loudon Aug 05 '13 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; } ) – Dawson Loudon Aug 05 '13 at 23:20
  • 1
    This is the entire index.html (ie, styling the auto-generated tag): `` I'm trying to get the WebView background to "bleed through". – Luke Dennis Aug 05 '13 at 23:24
  • I am not sure that is possible, but this thread may be what you are looking for: http://stackoverflow.com/questions/10919223/android-webview-background-color – Dawson Loudon Aug 05 '13 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.

user1691694
  • 206
  • 2
  • 3