stackoom
  简体   繁体   中英

How to set backGround color Black and text white in android webview

 原文  2013-09-24 06:43:15  8   10    android

Question

package com.example.webviewtheme;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.webkit.WebView;

public class MainActivity extends Activity {
WebView webview1;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        webview1=(WebView)findViewById(R.id.webView1);

        String rawHTML = "<HTML>"+  
         "<body style='color: #000000; background-color: #ffffff'><h1>Hello Android </h1></body>"+  
     "</HTML>";
        webview1.setBackgroundColor(00000000);
        webview1.loadData(rawHTML, "text/HTML", "UTF-8");
    }

}

This is My code i want to set background color black and text white of webView i have tried to apply In Html But Unable to get Out put please help me how to set Night Mode in Webview text and backGround

10 answers

solution1
 8  2014-04-29 07:50:23

use this

webview1=(WebView)findViewById(R.id.webView1);
    String rawHTML = "<HTML>"+ 
     "<head>"+"<style  type=\"text/css\">"+
     "body,h1{color: #000000;"+
     "background-color: #ffffff;}"+
     "</style></head>"+
     "<body><h1>Hello Android </h1></body>"+  
 "</HTML>";
    webview1.loadData(rawHTML, "text/html; charset=UTF-8",null);

UPDATE 20/June:

if you want to change web page css after it's load finished (for example when load webPageAddress with loadUrl ) you can do it like this:

  • set javaScript enable on webView

    webView.getSettings().setJavaScriptEnabled(true);

  • set listener on page load finish

    webView.setWebViewClient(new WebViewClient() { @Override public void onPageFinished(WebView view, String url) { // Inject CSS on PageFinished injectCSS(); super.onPageFinished(view, url); } });

  • inject CSS

     private void injectCSS() { webView.loadUrl( "javascript:document.body.style.setProperty(\\"color\\", \\"white\\");" ); webView.loadUrl( "javascript:document.body.style.setProperty(\\"background-color\\", \\"black\\");" ); }

solution2
 3  2014-04-26 06:15:12

Here is something that will inject Javascript into a webpage to make it invert colors:

String js ="javascript: ("
                    +"function () { "

                    +"var css = 'html {-webkit-filter: invert(100%);' +"
                    +"    '-moz-filter: invert(100%);' + "
                    +"    '-o-filter: invert(100%);' + "
                    +"    '-ms-filter: invert(100%); }',"

                    +"head = document.getElementsByTagName('head')[0],"
                    +"style = document.createElement('style');"

                    +"if (!window.counter) { window.counter = 1;} else  { window.counter ++;"
                    +"if (window.counter % 2 == 0) { var css ='html {-webkit-filter: invert(0%); -moz-filter:    invert(0%); -o-filter: invert(0%); -ms-filter: invert(0%); }'}"
                    +"};"

                    +"style.type = 'text/css';"
                    +"if (style.styleSheet){"
                    +"style.styleSheet.cssText = css;"
                    +"} else {"
                    +"style.appendChild(document.createTextNode(css));"
                    +"}"

                    //injecting the css to the head
                    +"head.appendChild(style);"
                    +"}());";

                    CustomWebView.this.loadUrl(js);

solution3
 2  2013-09-24 06:58:06

webview.setBackgroundColor(0) makes webview transparent.

You will need to set bg color black in the HTML tag bg.

solution4
 2  2013-09-24 09:07:49

Ok, this is not in document, and not recommended, but it will work:

@Override
protected void onCreate(Bundle savedInstanceState) {
    ...
    webview.loadUrl("http://en.wikipedia.org/wiki/Lena_S%C3%B6derberg");
    try {
        Class clsWebSettingsClassic = 
            getClassLoader().loadClass("android.webkit.WebSettingsClassic");
        Method md = clsWebSettingsClassic.getMethod(
                "setProperty", String.class, String.class);
        md.invoke(webview.getSettings(), "inverted", "true");
        md.invoke(webview.getSettings(), "inverted_contrast", "1");
    } catch (Exception e) {}
}

This will do inverted rendering to WebView.
The range of "inverted_contrast" is about 1 to 30 (not very sure).
The result tested with android 4.2:

http://i.imgur.com/IWsRcAW.png

solution5
 1  2013-09-24 06:45:51

Give the following in java class

webView1.setBackgroundColor(0);

and set the colour of text in xml

solution6
 1  2013-09-24 07:02:21

in XML

<WebView
            android:id="@+id/web"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="@android:color/black" />

in java code

String str="<div style=\'background-color:transparent;padding: 5px ;color:#white'>Enter text to display in web view</div";
WebView web=(WebView)findViewById(R.id.web);
web.loadData(str,"text/html","utf-8");
web.setBackgroundColor(Color.TRANSPARENT);

solution7
 0  2013-09-24 06:50:08

Use this for webview backgroundColor:

   import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.webkit.WebView;

public class MainActivity extends Activity {

    WebView webview1;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        webview1=(WebView)findViewById(R.id.webview1);

        String text = "<html><head>"
                  + "<style type=\"text/css\">body{color: #fff; background-color: #000;}"
                  + "</style></head>"
                  + "<body>"                          
                  + "Helloo Andorid"
                  + "</body></html>";

        webview1.loadData(text, "text/html", "utf-8");
        webview1.setBackgroundColor(00000000);
    }

}

It's works for me..

solution8
 0  2013-09-24 06:51:47

Hai this may help you

dialogMesage.setBackgroundColor(0x00000000);

or

myWebView.setBackgroundColor(Color.parseColor("#FFFFFF"));

solution9
 0  2015-01-29 14:38:27

You can invert colors of a WebView using its parent.

  1. You need to implement inversion in parent. I'm using a FrameLayout , but you can use some other form of layout.

     public class WebViewInverter extends FrameLayout { public WebViewInverter(Context context) { super(context); init(); } public WebViewInverter(Context context, AttributeSet attrs) { super(context, attrs); init(); } public WebViewInverter(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } public WebViewInverter(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { super(context, attrs, defStyleAttr, defStyleRes); init(); } private boolean nightMode = false; private Paint paint = new Paint(); private ColorFilter cf; private Rect inversionRect; @Override protected void dispatchDraw(Canvas c){ inversionRect = new Rect(0, 0, getWidth(), getHeight()); Bitmap b = Bitmap.createBitmap(getWidth(), getHeight(), Config.ARGB_8888); Canvas cc = new Canvas(b); super.dispatchDraw(cc); paint.setColorFilter(null); c.drawBitmap(b, 0, 0, paint); paint.setColorFilter(cf); c.drawBitmap(b, inversionRect, inversionRect, paint); } private void init(){ float[] mat = new float[] { -1, 0, 0, 0, 255, 0, -1, 0, 0, 255, 0, 0, -1, 0, 255, 0, 0, 0, 1, 0 }; cf = new ColorMatrixColorFilter(new ColorMatrix(mat)); } }

  2. Place Your WebView inside inverter in your layout's file:

     <your.package.name.WebViewInverter android:id="@+id/view_inverter" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_weight="1" android:layout_marginLeft="@dimen/reader_side_margins" android:layout_marginTop="@dimen/reader_top_margin" android:layout_marginRight="@dimen/reader_side_margins" android:layout_marginBottom="@dimen/reader_bottom_margin"> <ru.yandex.reader.widget.ReaderView android:id="@+id/view_reader" android:layout_width="match_parent" android:layout_height="match_parent"/> </your.package.name.WebViewInverter>

The WebView should be inverted.

solution10
 -1  2018-02-09 09:13:48

Android have built-in theme for night mode called Theme.AppCompat.DayNight theme

<style name="MyTheme" parent="Theme.AppCompat.DayNight"> <!-- Blah blah --> </style>

To know more, how to implement this functionality check out the link below

https://medium.com/@chrisbanes/appcompat-v23-2-daynight-d10f90c83e94

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question WebView black background and white text white background and black text color on android wear app Android DialogFragment text color is white instead of black How to Change the toolbar black color text into White in Xamarin.Android while retaining black text of activity text? how set text color of webview in android How to set Status bar to white background and black text (black icon) in my cordova app How to set Status bar to white background and black text (black icon) in my app (android) how to set background of TextView with black-transparent color how to change the color of an image to black and white in android how to make the color image to black and white in Android
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM