Android 2.2でAndroid WebViewスタイルbackground-color:transparentが無視される


156

背景が透明なWebViewを作成するのに苦労しています。

webView.setBackgroundColor(0x00FFFFFF);
webView.setBackgroundDrawable(myDrawable);

次に、htmlページをロードします

<body style="background-color:transparent;" ...

WebViewの背景色は透明ですが、ページが読み込まれるとすぐに、HTMLページの黒い背景で上書きされます。これはAndroid 2.2でのみ発生し、Android 2.1で動作します。

それでそれを本当に透明にするためにhtmlページコードに追加するものはありますか?


1
申し訳ありませんが、私の問題のため、ここにリストされている解決策は機能しません...:=(thxとにかく.. Webページは常に白い背景を使用しています...
cV2

回答:


291

これは私のために働いた、

mWebView.setBackgroundColor(Color.TRANSPARENT);

1
あなたは本当にOS 2.2でテストしましたか?
jptsetung '05年

87
私はこれが呼ばれるように持っていることが判明し、AFTER URLやデータをロードします。
マーク・

11
使用している場合、android 3.xでは機能しませんandroid:hardwareAccelerated="true"
Macarse

2
上記のコメントに加えて、ICS(4.0.3)にも注意してください。APIレベル10で動作するように透明性を得るために、私は無効「>フォースGPUレンダリング- - >開発者向けのオプションの設定」を持っていた
安芸

10
実際、私はなぜこの回答が非常に多くの賛成票を獲得するのか理解していません。webView.setBackgroundColor(0x00000000); webView.setBackgroundColor(0x00FFFFFF);とまったく同じです。アルファ値は0x00です。
jptsetung 2012

128

この先に述べた問題の一番下に解決策があります。2つのソリューションの組み合わせです。

webView.setBackgroundColor(Color.TRANSPARENT);
webView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);

このコードを URLのロードにWebViewer 追加すると、機能します(API 11以降)。

ハードウェアアクセラレーションがオンの場合でも機能します


2
Webviewがスクロール可能でない限り、機能します。
Rany Ishak、2012

サムスンS3でソフトウェアを強制的にレンダリングした後、背景色を設定する必要がありました
neworld

7
webView.setBackgroundColor(Color.argb(1、0、0、0)); スクロールで背景がちらつくのが嫌な場合
トレントシード

@トレント私はあなたの方法を試し、ジェリービーンのちらつきの問題を修正した場合、ジンジャーブレッドに黒い背景が表示されるようになりました。他の提案はありますか?
ティアゴ2013

2
これにより、webviewのハードウェアアクセラレーションが無効になります。!これは私には明らかではなく(:Dを使用する前に調べなかったのは私を責めます)、回答の最後の文は反対の印象を残します。これは実際には、多くのことに影響を与え動画、UI変換、スクロール、キャンバスなどAの可能な回避策のstackoverflow.com/a/17815574/2487876
Kristjan Liiva

36

2.2でも2.3でも同じ問題がありました。AndroidではなくHTMLでアルパ値を指定することで問題を解決しました。色々試してみたところ、setBackgroundColor();色がアルファ値では機能しないことがわかりました。webView.setBackgroundColor(Color.argb(128, 0, 0, 0));動作しないでしょう。

これが私の解決策です、私のために働きました。

      String webData = StringHelper.addSlashes("<!DOCTYPE html><head> <meta http-equiv=\"Content-Type\" " +
      "content=\"text/html; charset=utf-8\"> </head><body><div style=\"background-color: rgba(10,10,10,0.5); " +
      "padding: 20px; height: 260px; border-radius: 8px;\"> $$$ Content Goes Here ! $$$ </div> </body></html>");

そしてJavaでは

    webView = (WebView) findViewById(R.id.webview);
    webView.setBackgroundColor(0);
    webView.loadData(webData, "text/html", "UTF-8");

そして、以下が出力のスクリーンショットです。ここに画像の説明を入力してください


パーフェクト、ありがとう!
Ayman Mahgoub、2015年


22

これがあなたのやり方です:

最初にプロジェクトを11に基づいて作成しますが、AndroidManifestでminSdkVersionを8に設定します

android:hardwareAccelerated = "false"は不要で、8と互換性がありません

wv.setBackgroundColor(0x00000000);
if (Build.VERSION.SDK_INT >= 11) wv.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);

this.wv.setWebViewClient(new WebViewClient()
{
    @Override
    public void onPageFinished(WebView view, String url)
    {
        wv.setBackgroundColor(0x00000000);
        if (Build.VERSION.SDK_INT >= 11) wv.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
    }
});

安全のため、これをあなたのスタイルに入れてください:

BODY, HTML {background: transparent}

2.2と4で私のために働いた


これは私にとっては
うまくいき

12

最も重要なことは言及されていません。

htmlにが設定されたbodyタグが必要です。background-colortransparent

したがって、完全なソリューションは次のようになります。


HTML

    <body style="display: flex; background-color:transparent">some content</body>

アクティビティ

    WebView wv = (WebView) findViewById(R.id.webView);
    wv.setBackgroundColor(0);
    wv.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
    wv.loadUrl("file:///android_asset/myview.html");

それは質問で言及されています。しかし、これは、Androidのすべてのバージョンで機能させたい場合に実行する必要がある作業の素晴らしい再開のようです。
jptsetung 2014年

9

以下のコードはAndroid 3.0以降で正常に機能しますが、Android 3.0の下でこのコードを試すと、アプリが強制的に閉じられます。

webView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);

以下のコードをAPI 11以下で試してください。

webview.setBackgroundColor(Color.parseColor("#919191"));

または

すべてのAPIで正常に動作する以下のコードを試すこともできます

    webview.setBackgroundColor(Color.parseColor("#919191"));
    if (Build.VERSION.SDK_INT >= 11) {
        webview.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
    }

上記のコードは私にとってフル使用します。


setLayerTypeをLAYER_TYPE_SOFTWAREに設定することはお勧めしません。特にスクロールすると、パフォーマンスが大幅に低下します。
Navarr 2014年

8

試す webView.setBackgroundColor(0);


1
webView.setBackgroundColor(0x00FFFFFF);の間に違いはありません。およびwebView.setBackgroundColor(0x00); どちらも透明色であることになっています。
jptsetung

7

次のコードは私にとっては機能しますが、複数のWebビューがあり、それらの間のスクロールが少し遅いです。

v.setBackgroundColor(Color.TRANSPARENT);
Paint p = new Paint();
v.setLayerType(LAYER_TYPE_SOFTWARE, p); 

3
これはHoneycombでは機能しますが、残念ながらICSでは機能しません。くそー。ただし、これを使用する場合は、「android:layerType」プロパティを使用してレイアウトファイルで指定する方が簡単です。これは、タグが単に無視される古いリリースでもうまく機能するためです。
スヴェン

2
ICSでも機能しandroid:hardwareAccelerated="false"ているのは、activity要素のAndroidManifestを使用して、アクティビティ全体のハードウェアアクセラレーションを無効にすることです。
スヴェン

1
不必要にPaintオブジェクトを作成する必要があります。v.setLayerType(LAYER_TYPE_SOFTWARE, null);また動作します。
Sergey Glotov


6
  • 上記のすべてを試した後。/の
    webView.setBackgroundColor(Color.TRANSPARENT)前でも後でも、どちらでもかまいません。loadUrl()loadData()
  • 重要なことandroid:hardwareAccelerated="false"は、マニフェストで明示的に宣言する必要があることです。

IceCreamサンドイッチでテスト済み


3

これらの行を使用してください.....

webView.loadDataWithBaseURL(null,"Hello", "text/html", "utf-8", null);
webView.setBackgroundColor(0x00000000);

また、webviewにデータを読み込んだ後は常に背景色を設定する点に注意してください。


3
webView.setBackgroundColor(0x00000000);
webView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);

これは間違いなく機能します。Editbackgroundを使用してXMLの背景を設定します。今、その背景が表示されます


2

htmlをロードした後にbgを設定します(クイックテストから、htmlをロードするとbgの色がリセットされるようです。これは2.3用です)。

既に取得したデータからHTMLをロードする場合は、.postDelayedを実行するだけで、bgを設定するだけで十分です(たとえば、透明に)。


2

webviewがスクロール可能な場合:

  1. これをマニフェストに追加します。

    android:hardwareAccelerated="false"

または

  1. 以下をレイアウトのWebViewに追加します。

    android:background="@android:color/transparent"
    android:layerType="software"
  2. 親のスクロールビューに以下を追加します。

    android:layerType="software"

0

webView.setBackgroundColor(Color.parseColor( "#EDEDED"));を試してください。


0

GLビューの上に透明なHTMLオーバーレイを配置しようとしましたが、GLビューを覆う黒いちらつきが常にあります。このちらつきを取り除こうとする数日後、私はこの回避策が私には受け入れられるものであることに気付きました(ただし、Androidの場合は残念です)。

問題は、素晴らしいCSSアニメーションのためにハードウェアアクセラレーションが必要なため、私にwebView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);は選択肢がないということです。

トリックはWebView、GLビューとHTMLオーバーレイの間に2番目(空)を置くことでした。これdummyWebViewをSWモードでレンダリングするように指示しましたが、私のHTMLオーバーレイはHWでスムーズにレンダリングされ、黒いちらつきがなくなりました。

これがMy Acer Iconia A700以外のデバイスで機能するかどうかはわかりませんが、誰かがこれを手伝ってくれることを願っています。

public class MyActivity extends Activity {

    @Override
    protected void onCreate(Bundle icicle) {
        super.onCreate(icicle);

        RelativeLayout layout = new RelativeLayout(getApplication());
        setContentView(layout);

        MyGlView glView = new MyGlView(this);

        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);

        dummyWebView = new WebView(this);
        dummyWebView.setLayoutParams(params);
        dummyWebView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        dummyWebView.loadData("", "text/plain", "utf8");
        dummyWebView.setBackgroundColor(0x00000000);

        webView = new WebView(this);
        webView.setLayoutParams(params);
        webView.loadUrl("http://10.0.21.254:5984/ui/index.html");
        webView.setBackgroundColor(0x00000000);


        layout.addView(glView);
        layout.addView(dummyWebView);
        layout.addView(webView);
    }
}

Galaxy Nexusでこれをテストしたところ、残念ながらちらつきが残りました。
Navarr 2014年

0

これでうまくいきました。データが読み込まれた後に背景色を設定してみてください。そのようなあなたのwebviewオブジェクトのsetWebViewClientのために:

    webView.setWebViewClient(new WebViewClient(){

        @Override
        public void onPageFinished(WebView view, String url)
        {
            super.onPageFinished(view, url);
            webView.setBackgroundColor(Color.BLACK);
        }
    });


0

何も解決しない場合は、おそらくサイズを固定しwebView、幅と高さをwrap_contentまたはmatch_parentに変更します。これでうまくいくはずです。これは、Gifを読み込もうとしたときにうまくいきました。


0

次のようにBindingAdapterを使用できます。

ジャワ

@BindingAdapter("setBackground")
public static void setBackground(WebView view,@ColorRes int resId) {
        view.setBackgroundColor(view.getContext().getResources().getColor(resId));
        view.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
}

XML:

<layout >

    <data>

        <import type="com.tdk.sekini.R" />


    </data>

       <WebView
            ...
            app:setBackground="@{R.color.grey_10_transparent}"/>

</layout>

資源

<color name="grey_10_transparent">#11e6e6e6</color>

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.