Android How to load Custom CSS on external HTML page in WebView

Question

I want to apply my custom CSS on HTML page i tried this way but it is not working.

 wv.loadUrl("<style>.featured {"+
        "   background-image: -ms-linear-gradient(bottom, #F9F6F9 0%, #ECE4F4 100%);"+
        "   background-image: -moz-linear-gradient(bottom, #F9F6F9 0%, #ECE4F4 100%);"+
        "   background-image: -o-linear-gradient(bottom, #F9F6F9 0%, #ECE4F4 100%);"+
        "background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #F9F6F9), color-stop(1, #ECE4F4));"+
        "   background-image: -webkit-linear-gradient(bottom, #F9F6F9 0%, #ECE4F4 100%);"+
        "   background-image: linear-gradient(to top, #F9F6F9 0%, #ECE4F4 100%);"+
        "}");

please help me out.

Nishit Patel · Accepted Answer · 2012-09-25 06:20:18Z

1

Thank you for your answers guys but i got my solution.

This my solution.

wv.loadUrl("javascript:(function() { " +                        
    "var divs = document.getElementsByClassName('free');"+
     "for(var i=0; i<divs.length; i++)"+
     "{"+
        "divs[i].style.backgroundImage='-webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #EFD2E4))';"+
      "}"+
     "})()");

using this you can apply your custom CSS on any Tag or Elements of the HTML in Android.

answered Sep 25, 2012 at 6:20

Nishit Patel

1491 gold badge2 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rahul Patel · Accepted Answer · 2012-09-25 05:12:42Z

0

Put your html and css file inside the Assets folder. And use the following code.

Main.java

WebView webview = (WebView) findViewById(R.id.abtus_webView);
webview.loadUrl("file:///android_asset/index.html");

and if you want to use image into html page then add below code into html page.

htmltest.html

<img src="file:///android_asset/images/abc.png">

I have put the images into the images Folder in Assets folder.This is working for me correct,I hope it helps you.

answered Sep 25, 2012 at 5:12

Rahul Patel

3,8435 gold badges32 silver badges46 bronze badges

Comments

Adrien Aubel · Accepted Answer · 2015-05-16 01:19:48Z

You can inject custom JS by using the javascript: URL capability.

Here's how you can add CSS rules using this from Java:

/**
 * Creates a CSS element in the <head> section of the Web page and assigns it
 * to a `customSheet` JS variable
 */
private final static String CREATE_CUSTOM_SHEET =
    "if (typeof(document.head) != 'undefined' && typeof(customSheet) == 'undefined') {"
        + "var customSheet = (function() {"
            + "var style = document.createElement(\"style\");"
            + "style.appendChild(document.createTextNode(\"\"));"
            + "document.head.appendChild(style);"
            + "return style.sheet;"
        + "})();"
    + "}";

/**
 * Adds CSS properties to the loaded Web page. A <head> section should exist when this method is called.
 * The Web view should be configured with `.getSettings().setJavaScriptEnabled(true);`
 *
 * @param webView Web view to inject into
 * @param cssRules CSS rules to inject
 */
void injectCssIntoWebView(WebView webView, String... cssRules) {
    StringBuilder jsUrl = new StringBuilder("javascript:");
    jsUrl
        .append(CREATE_CUSTOM_SHEET)
        .append("if (typeof(customSheet) != 'undefined') {");
    int cnt = 0;
    for (String cssRule : cssRules) {
        jsUrl
            .append("customSheet.insertRule('")
            .append(cssRule)
            .append("', ")
            .append(cnt++)
            .append(");");
    }
    jsUrl.append("}");

    webView.loadUrl(jsUrl.toString());
}

And here's an usage example of the above method:

@Override
public void onPageFinished(WebView webView, String url) {
    // Several people probably worked hard on the design of this Web page, let's hope they won't see what's next
    injectCssIntoWebView(
        webView,
        "div { border: 4px solid yellow; }",
        "p { border: 4px solid green; }",
        "a { border: 4px solid black; }",
        "img { border: 4px solid blue; }"
    );
}

Collectives™ on Stack Overflow

Android How to load Custom CSS on external HTML page in WebView

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related