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

Réponses:

292

Cela a fonctionné pour moi,

mWebView.setBackgroundColor(Color.TRANSPARENT);
— Scottyab
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
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
source
Parfait, merci !
— Ayman Mahgoub
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
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
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
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
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
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
  • 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
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
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
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
source
2

Si la vue Web peut faire défiler:

  1. Ajoutez ceci au manifeste:

    android:hardwareAccelerated="false"

OU

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

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

  2. Ajoutez ce qui suit à la vue de défilement des parents:

    android:layerType="software"
— Bâton
source
0

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

— raja
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
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
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
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
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.