web-dev-qa-db-fra.com

La barre d'état devient blanche et ne montre pas le contenu derrière elle

Je suis en train d'essayer AppCompat sur Guimauve. Et je veux avoir une barre d'état transparente, mais elle devient blanche. J'ai essayé plusieurs solutions mais elles ne fonctionnaient pas pour moi ( La barre d'état transparente ne fonctionne pas avec windowTranslucentNavigation = "false" , Lollipop: dessine derrière statusBar dont la couleur est définie sur transparente ). Voici le code associé.

Mes styles.xml 

<style name="Bacon" parent="Theme.Bacon"/>

<style name="Theme.Bacon" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/theme_primary</item>
    <item name="colorPrimaryDark">@color/theme_primary_dark</item>
    <item name="colorAccent">@color/theme_accent</item>
    <item name="windowActionBar">false</item>
    <item name="windowActionBarOverlay">true</item>
    <item name="windowNoTitle">true</item>
    <item name="Android:windowBackground">@color/background_material_light</item>  
</style>

<style name="Theme.Bacon.Detail" parent="Bacon"/>

v21

<style name="Bacon" parent="Theme.Bacon">
    <item name="Android:windowDrawsSystemBarBackgrounds">true</item>
</style>

<style name="Theme.Bacon.Detail" parent="Bacon">
    <item name="Android:statusBarColor">@Android:color/transparent</item>
</style>

Activité

<FrameLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:fitsSystemWindows="true">

<Android.support.v4.view.ViewPager
    Android:id="@+id/pager"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true" />

</FrameLayout>

Fragment

<Android.support.design.widget.CoordinatorLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:fitsSystemWindows="true">

<Android.support.design.widget.AppBarLayout
    Android:id="@+id/appbar"
    Android:layout_width="match_parent"
    Android:layout_height="192dp"
    Android:fitsSystemWindows="true"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <Android.support.design.widget.CollapsingToolbarLayout
        Android:id="@+id/collapsing_toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginBottom="32dp"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:statusBarScrim="@color/black_trans80">

        <ImageView
            Android:id="@+id/photo"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:contentDescription="@string/photo"
            Android:fitsSystemWindows="true"
            Android:scaleType="centerCrop"
            app:layout_collapseMode="parallax" />

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/anim_toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    </Android.support.design.widget.CollapsingToolbarLayout>
</Android.support.design.widget.AppBarLayout>

 enter image description here

68
pt2121

J'ai corrigé mon problème en modifiant la présentation de l'activité de FrameLayout en RelativeLayout. Merci à tous ceux qui ont essayé d'aider!

<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
  Android:layout_width="match_parent"
  Android:layout_height="match_parent"
  Android:background="@Android:color/transparent">

    <Android.support.v4.view.ViewPager
      Android:id="@+id/pager"
      Android:layout_width="match_parent"
      Android:layout_height="match_parent"
      Android:background="@color/theme_primary_dark"
      Android:fitsSystemWindows="true" />

</RelativeLayout>

Essayez hierarchy-viewer ou ViewInspector . Ces outils pourraient vous aider.

5
pt2121

J'ai trouvé la réponse dans ce lien: La barre d'état n'a pas changé de couleur avec la disposition relative en tant qu'élément racine

Il s’avère que nous devons retirer le 

      <item name="Android:statusBarColor">@Android:color/transparent</item>

dans styles.xml (v21). Et ça marche très bien pour moi.

133
Phoenix Wang

(Un peu tard pour la fête mais cela pourrait aider quelqu'un)

J'ai eu exactement le même problème. D'une manière ou d'une autre, certaines activités étaient normales alors que les nouvelles que j'avais créées affichaient une barre d'état blanche au lieu de la valeur colorPrimaryDark.

Après avoir essayé plusieurs astuces, j'ai remarqué que les activités normales fonctionnaient toutes en utilisant CoordinatorLayout comme racine de la mise en page, tandis que pour les autres je l'avais remplacée par des mises en page régulières car je n'avais pas besoin des fonctionnalités (animation, etc.) fournies par CoordinatorLayout.

La solution consiste donc à définir CoordinatorLayout la disposition racine, puis à l’intérieur de celle-ci, d’ajouter votre ancienne racine de disposition. Voici un exemple:

<?xml version="1.0" encoding="utf-8"?>
<Android.support.design.widget.CoordinatorLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
  xmlns:app="http://schemas.Android.com/apk/res-auto"
  Android:layout_width="match_parent"
  Android:layout_height="match_parent"
  Android:fitsSystemWindows="true">

  <LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical">

    <Android.support.design.widget.AppBarLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:theme="@style/AppTheme.AppBarOverlay">

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            Android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </Android.support.design.widget.AppBarLayout>

    <!-- your activity content here-->


  </LinearLayout>
</Android.support.design.widget.CoordinatorLayout>

VEUILLEZ NOTER que sans Android:fitsSystemWindows="true", cette solution ne fonctionne pas pour moi.

Testé sur sucette et guimauve 

92
Mauro Banze
 <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="Android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="Android:statusBarColor">@color/colorPrimaryDark</item>
    </style

Il suffit de remplacer ceci, statusBarColor doit être la couleur attendue et non pas transparente.

10
Shrini Jaiswal

Après avoir essayé sans succès tout ce qui précède, j'ai constaté que le fait de définir explicitement le thème corrigeait le problème.

setTheme(R.style.AppTheme);

Cela doit aller avant le super.OnCreate () dans votre activité.

9
James Britton

Ajoutez ceci dans votre style.xml

    <item name="Android:windowTranslucentStatus">true</item>
    <item name="Android:statusBarColor">@Android:color/transparent</item>

et ceci dans votre onCreate ();

 getWindow().getDecorView().setSystemUiVisibility(
       View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
7
Michele Lacorte

Il suffit de mettre cet élément dans votre v21\styles.xml:

vrai

Ça devrait ressembler à ça :

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="Android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="Android:windowTranslucentStatus">true</item>
</style>

7
Rami

J'ai fait face au même problème. Ce que j'ai fait était, dans le fichier "v21/styles.xml", la valeur true a changé:

 <item name="windowDrawsSystemBarBackgrounds">true</item>

à:

 <item name="windowDrawsSystemBarBackgrounds">false</item>
6
Degomos

Supprimez simplement la balise suivante du style v21 @Android: couleur/transparent

Cela fonctionne pour moi.

4
Shendre Kiran

Vous devez ajouter cette propriété sur votre style pour voir le contenu

<item name="Android:windowLightStatusBar" tools:ignore="NewApi">true</item>
3
Andres Paez

Meilleure approche

Vérifiez votre fichier style.xml où se trouve votre thème NoActionBar . Assurez-vous qu'il a pour parent le nom Theme.AppCompat.NoActionBar et personnalisez-le également en ajoutant votre jeu de couleurs. Enfin, définissez vos thèmes dans manifeste si nécessaire.

Vous trouverez ci-dessous un exemple de mon fichier styles.xml (ActionBar + NoActionBar). 

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

<!-- No ActionBar application theme. -->
<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>
3
Nilesh Mahant

Pour moi, cela a fonctionné comme suit: 

  1. Définir le thème .NoActionBar
  2. Envelopper la barre d'outils dans Android.support.design.widget.AppBarLayout
  3. Définissez Android.support.design.widget.CoordinatorLayout comme disposition parent. 

C’est essentiellement la troisième étape qui dessine la barre d’état dans la variable colorPrimaryDark sinon elle n’est pas dessinée si vous utilisez le thème NoActionBar 2ème étape donnera à votre barre d’outils que recouvrir

2
priyankvex

Je ne sais pas s'il est tard mais j'espère que cela aidera quelqu'un. .____.

<View
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:background="@Android:color/transparent"
    Android:fitsSystemWindows="true" />


<ImageView
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true"
    Android:scaleType="centerCrop"
    Android:src="@drawable/something" />

<FrameLayout
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

   .... YOUR LAYOUT

1
vahidlazio
<item name="Android:statusBarColor">@Android:color/transparent</item>

Vous verrez cette ligne de code dans values ​​/ styles/styles.xml (v21). Supprimez-le et cela résout le problème

Lien vers cette réponse

1
Phares

[Output]

Développez res -> valeurs -> répertoire styles à partir du panneau de projet.

Ouvrez styles.xml (v21)

UTILISEZ TOUT AUTRE DES MOYENS

  1. Remplacez la propriété true par false in Android:windowDrawsSystemBarBackgrounds.
  2. Changez @Android: color/transparent en @ color/colorPrimaryDark in Android:statusBarColor.
  3. Supprimez la ligne Android:statusBarColor propert.
0
Ketan Ramani

vérifier les combinaisons de couleurs implémentées dans styles-21

0
Shivegeeky

Pour les styles v23 

 <style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="Android:windowLightStatusBar">true</item>
    <item name="Android:statusBarColor">@Android:color/white</item>
</style>

Pour les styles v21

<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="Android:windowTranslucentStatus">true</item>
    <item name="Android:statusBarColor">@Android:color/white</item>
</style>
0
Ankit Aman

Si vous utilisez RelativeLayout/CoordinatorLayout voici la solution qui a fonctionné pour moi:

Vous devez utiliser 

  • Coordonnateur
  • AppBarLayout

Rember pour utiliser CoordinatorLayout au lieu de RelativeLayout (la performance est meilleure et fonctionne parfaitement avec AppBarLayout)

Voici comment votre fragment devrait commencer

<?xml version="1.0" encoding="utf-8"?>
<Android.support.design.widget.CoordinatorLayout
xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:background="@Android:color/background_light"
Android:fitsSystemWindows="true"
>

<Android.support.design.widget.AppBarLayout
    Android:id="@+id/main.appbar"
    Android:layout_width="match_parent"
    Android:layout_height="300dp"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    Android:fitsSystemWindows="true"
    >
    ...

Bon codage!

0
Faustino Gagneten

Mon hypothèse est que cela est causé par votre Android:windowBackground. @color/background_material_light est-il une référence au blanc?

0
hanspeide

Cochez cette case La barre d'outils devient blanche - AppBar n'est pas dessiné après un défilement à l'écran.

https://code.google.com/p/Android/issues/detail?id=178037#c19

J'utilise les bibliothèques 23.0.0. et le bogue persiste. 

La solution de contournement consiste à ajouter une vue qui ne prend presque pas d'espace et peut être invisible. Voir la structure ci-dessous.

<Android.support.v4.widget.NestedScrollView
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

</Android.support.v4.widget.NestedScrollView>

<Android.support.design.widget.AppBarLayout>

    <Android.support.v7.widget.Toolbar
        app:layout_scrollFlags="scroll|enterAlways" />

    <Android.support.design.widget.TabLayout
        app:layout_scrollFlags="scroll|enterAlways" />

    <View
        Android:layout_width="match_parent"
        Android:layout_height=".3dp"
        Android:visibility="visible"/>

</Android.support.design.widget.AppBarLayout>

Ces Questions sur Stackoverflow.com font également référence à ce bogue: Barre d’outils CoordinatorLayout invisible lors de la saisie jusqu’à la hauteur maximaleAppBarLayout - La mise en page est parfois invisible une fois entrée dans la vue (même si elle n’a pas été entrée)

0
clickdroid

Si votre v21/styles.xml contient

<resources>
    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="Android:statusBarColor">@Android:color/transparent</item>
    </style>
</resources>

Ensuite, Supprimer ou commenter sous la ligne ou changer la couleur de la barre d'état,

<item name="Android:statusBarColor">@Android:color/transparent</item>

Cela fonctionne bien. J'espère que c'est utile. Merci.

0
sahu