Couleur d'arrière-plan du style Android WebView: transparent ignoré sur Android 2.2

157

J'ai du mal à créer une WebView avec un fond transparent.

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

Ensuite, je charge une page html avec

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

La couleur d'arrière-plan de la WebView est transparente mais dès que la page est chargée, elle est écrasée par un arrière-plan noir de la page html. Cela ne se produit que sur Android 2.2, cela fonctionne sur Android 2.1.

Alors, y a-t-il quelque chose à ajouter dans le code de la page html pour le rendre vraiment transparent?

android background webview transparency transparent jptsetung
la source

1

Je suis désolé de le dire, mais pour mon problème, aucune solution répertoriée ici n'a fonctionné ...: = (merci de toute façon .. la page Web a toujours utilisé un fond blanc ...

cV2

292

Cela a fonctionné pour moi,

mWebView.setBackgroundColor(Color.TRANSPARENT);

Scottyab
la source

1

Avez-vous vraiment testé sur os 2.2?

jptsetung

87

J'ai trouvé que cela doit être appelé APRÈS le chargement de l'url ou des données.

Mark le

11

cela ne fonctionne pas sous Android 3.x si vous utilisezandroid:hardwareAccelerated="true"

Macarse

2

Notez que sur ICS (4.0.3), en plus des commentaires ci-dessus; J'ai dû désactiver "Paramètres -> Options du développeur -> Forcer le rendu GPU" pour que la transparence fonctionne avec le niveau d'API 10.

Aki

10

Actuellement, je ne comprends pas pourquoi cette réponse obtient autant de votes. webView.setBackgroundColor (0x00000000); est exactement le même que webView.setBackgroundColor (0x00FFFFFF); la valeur alpha est 0x00.

jptsetung

128

Au bas de ce problème mentionné précédemment, il y a une solution. C'est une combinaison de 2 solutions.

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

Lorsque vous ajoutez ce code au WebViewer après avoir chargé l'url, cela fonctionne (API 11+).

Cela fonctionne même lorsque l'accélération matérielle est activée

Ceetn
la source

2

Cela fonctionne tant que la vue Web ne peut pas faire défiler.

Rany Ishak

J'avais besoin de définir la couleur de fond après le rendu du logiciel de force sur Samsung S3

Neworld

7

webView.setBackgroundColor (Color.argb (1, 0, 0, 0)); si vous ne voulez pas de scintillement d'arrière-plan sur le défilement

Trent Seed

@Trent J'ai essayé votre méthode et si corrigé le problème de scintillement sur Jelly Bean, mais maintenant il affiche un fond noir sur Gingerbread. Une autre suggestion?

Tiago

2

Cela désactive l'accélération matérielle pour la vue Web! ! Ce n'était pas évident pour moi (blâmez-moi de ne pas l'avoir recherché avant d'utiliser: D), et la dernière phrase de la réponse laisse l'impression inverse. Cela affecte en fait beaucoup de choses, vidéos, transformations d'interface utilisateur, défilement, canevas, etc. Une solution de contournement possible stackoverflow.com/a/17815574/2487876

Kristjan Liiva

36

J'ai eu le même problème avec 2.2 et aussi dans 2.3. J'ai résolu le problème en donnant la valeur alpa en html et non sous Android. J'ai essayé beaucoup de choses et j'ai découvert que la setBackgroundColor();couleur ne fonctionne pas avec la valeur alpha. webView.setBackgroundColor(Color.argb(128, 0, 0, 0));ne fonctionnera pas.

alors voici ma solution, a fonctionné pour moi.

      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>");

Et à Java,

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

Et voici la capture d'écran de sortie ci-dessous. entrez la description de l'image ici

osayilgan
la source

Parfait, merci !

Ayman Mahgoub

31

En fait, c'est un bogue et personne n'a encore trouvé de solution de contournement. Un problème a été créé. Le bug est toujours là en nid d'abeille.

Veuillez la mettre en étoile si vous pensez que c'est important: http://code.google.com/p/android/issues/detail?id=14749

jptsetung
la source

22

Voici comment procéder:

Commencez par créer votre projet sur 11, mais dans AndroidManifest, définissez minSdkVersion sur 8

android: hardwareAccelerated = "false" est inutile et incompatible avec 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);
    }
});

Pour plus de sécurité, mettez ceci dans votre style:

BODY, HTML {background: transparent}

a travaillé pour moi sur 2.2 et 4

Ali
la source

cela fonctionne pour moi: android: hardwareAccelerated = "false" BODY, HTML {background: transparent}

jayellos

12

La chose la plus importante n'a pas été mentionnée.

Le code HTML doit avoir une bodybalise background-colordéfinie sur transparent.

La solution complète serait donc:

HTML

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

Activité

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

lilotop
la source

C'est mentionné dans la question. Mais cela semble être un bon résumé de ce que vous devez faire si vous voulez que cela fonctionne sur toutes les versions d'Android.

jptsetung

9

le code ci-dessous fonctionne correctement Android 3.0+, mais lorsque vous essayez ce code sous Android 3.0, votre application est fermée de force.

webView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);

Vous essayez ci-dessous le code sur votre API moins que 11 .

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

Ou

vous pouvez également essayer le code ci-dessous qui fonctionne sur toutes les API .

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

le code ci-dessus utilise plein pour moi.

duggu
la source

Je ne vous recommande pas de définirLayerType sur LAYER_TYPE_SOFTWARE. Cela diminue considérablement les performances, en particulier lors du défilement.

Navarr le

8

Essayer webView.setBackgroundColor(0);

Andrew Podkin
la source

1

Il n'y a aucune différence entre webView.setBackgroundColor (0x00FFFFFF); et webView.setBackgroundColor (0x00); Les deux sont censés être de couleur transparente.

jptsetung

7

Le code suivant fonctionne pour moi, même si j'ai plusieurs vues Web et que le défilement entre elles est un peu lent.

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

Umair
la source

3

Cela fonctionne sur Honeycomb, mais malheureusement pas sur ICS. Zut. Mais si vous l'utilisez, il est plus facile de le spécifier dans le fichier de mise en page en utilisant la propriété "android: layerType" car cela fonctionnera également bien sur les versions plus anciennes où la balise sera simplement ignorée.

sven

2

Ce qui fonctionne même sur ICS, c'est de désactiver l'accélération matérielle pour toute l'activité en utilisant android:hardwareAccelerated="false"dans le fichier AndroidManifest pour l' activityélément.

sven

1

Il est inutile de créer un objet Paint. v.setLayerType(LAYER_TYPE_SOFTWARE, null);fonctionnera également.

Sergey Glotov

6

Utilisez ceci

WebView myWebView = (WebView) findViewById(R.id.my_web);

myWebView.setBackgroundColor(0);

Zahid Habib
la source

0 (0x00000000) = Color.TRANSPARENT voir developer.android.com/reference/android/graphics/…

Dan Dar3

6

Après avoir essayé tout ce qui est donné ci-dessus. J'ai trouvé que cela n'a pas d'importance que vous spécifiez
webView.setBackgroundColor(Color.TRANSPARENT)avant ou après loadUrl()/ loadData().
Ce qui compte, c'est que vous devez déclarer explicitement android:hardwareAccelerated="false"dans le manifeste.

Testé sur IceCream Sandwich

Gaurav Arora
la source

3

Utilisez simplement ces lignes .....

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

Et rappelez-vous un point qui définit toujours la couleur d'arrière-plan après le chargement des données dans la vue Web.

Atul Bhardwaj
la source

3

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

cela fonctionnera certainement .. définir le fond en XML avec Editbackground. Maintenant, cet arrière-plan sera affiché

Shivendra
la source

2

définir le bg après le chargement du html (à partir de tests rapides, il semble que le chargement du html réinitialise la couleur bg .. c'est pour 2.3).

si vous chargez le html à partir de données que vous avez déjà, il suffit de faire un .postDelayed dans lequel vous venez de définir le bg (par exemple transparent).

Lassi Kinnunen
la source

2

Si la vue Web peut faire défiler:

Ajoutez ceci au manifeste:
```
android:hardwareAccelerated="false"
```

OU

Ajoutez ce qui suit à WebView dans la mise en page:

android:background="@android:color/transparent"
android:layerType="software"

Ajoutez ce qui suit à la vue de défilement des parents:
```
android:layerType="software"
```

Bâton
la source

0

Essayez webView.setBackgroundColor (Color.parseColor ("# EDEDED"));

raja
la source

0

J'essayais de mettre une superposition HTML transparente sur ma vue GL, mais elle a toujours un scintillement noir qui couvre ma vue GL. Après plusieurs jours à essayer de me débarrasser de ce scintillement, j'ai trouvé cette solution de contournement qui est acceptable pour moi (mais dommage pour Android).

Le problème est que j'ai besoin d'une accélération matérielle pour mes belles animations CSS et que ce webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);n'est donc pas une option pour moi.

L'astuce était de mettre une seconde (vide) WebViewentre ma vue GL et la superposition HTML. Ce que dummyWebViewje dis rendre en mode SW, et maintenant mon superpositions HTML rend lisse dans HW et vacillante plus noir.

Je ne sais pas si cela fonctionne sur d'autres appareils que mon Acer Iconia A700, mais j'espère pouvoir aider quelqu'un avec cela.

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);
    }
}

Ingemar
la source

J'ai testé cela sur un Galaxy Nexus et le scintillement est resté, malheureusement.

Navarr

0

Cela a fonctionné pour moi. essayez de définir la couleur d'arrière-plan une fois les données chargées. pour cet objet setWebViewClient sur votre objet de vue Web comme:

    webView.setWebViewClient(new WebViewClient(){

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

Abdul Mohsin
la source

0

Essaie:

myWebView.setAlpha(0.2f);

ABN
la source

0

Si rien ne vous aide, alors vous avez probablement une taille fixe webView, changez la largeur et la hauteur en wrap_content ou match_parent, cela devrait fonctionner. Cela a fonctionné pour moi lorsque j'ai essayé de charger un Gif.

Hayk
la source

0

Vous pouvez utiliser BindingAdapter comme ceci:

Java

@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>

Ressources

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

Ahmad Aghazadeh
la source

-2

myWebView.setAlpha(0);

est la meilleure réponse. Ça marche!

Fantôme en bois
la source

1

Veuillez également expliquer pourquoi.

AsthaUndefined

Couleur d'arrière-plan du style Android WebView: transparent ignoré sur Android 2.2

Réponses:

La chose la plus importante n'a pas été mentionnée.

La solution complète serait donc:

HTML

Activité