Lollipop: dessiner derrière statusBar avec sa couleur définie sur transparent

J'ai défini ma couleur statusBar sur transparent pour Lollipop uniquement avec la ligne suivante dans mon thème:

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

Maintenant, j'ai besoin de dessiner derrière, mais je ne peux pas obtenir de vue derrière. Je sais comment le faire avec la windowTranslucentStatuspropriété, mais je ne veux pas utiliser cette propriété car elle ignorera alors la couleur du statusBar défini sur transparent.

Méthode n ° 1:

Pour obtenir une barre d'état complètement transparente, vous devez utiliser statusBarColor, qui n'est disponible que sur l'API 21 et supérieur. windowTranslucentStatusest disponible sur l'API 19 et au-dessus, mais il ajoute un arrière-plan teinté pour la barre d'état. Cependant, le paramétrage windowTranslucentStatusréalise une chose que le passage statusBarColorà transparent ne permet pas: il définit les indicateurs SYSTEM_UI_FLAG_LAYOUT_STABLE et SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN. Le moyen le plus simple d'obtenir le même effet est de définir manuellement ces indicateurs, ce qui désactive efficacement les inserts imposés par le système de mise en page Android et vous laisse vous débrouiller seul.

Vous appelez cette ligne dans votre onCreateméthode:

getWindow().getDecorView().setSystemUiVisibility(
    View.SYSTEM_UI_FLAG_LAYOUT_STABLE
    | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);

Assurez-vous également de définir la transparence dans /res/values-v21/styles.xml:

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

Ou définissez la transparence par programme:

getWindow().setStatusBarColor(Color.TRANSPARENT);

Le bon côté de cette approche est que les mêmes mises en page et conceptions peuvent également être utilisées sur l'API 19 en remplaçant la barre d'état transparente par la barre d'état translucide teintée.

<item name="android:windowTranslucentStatus">true</item>

Méthode n ° 2:

Si vous avez seulement besoin de peindre une image d'arrière-plan sous votre barre d'état, au lieu de positionner une vue derrière, cela peut être fait en définissant simplement l'arrière-plan du thème de votre activité sur l'image souhaitée et en définissant la transparence de la barre d'état comme indiqué dans la méthode # 1. C'est la méthode que j'ai utilisée pour créer les captures d'écran de l' article Android Police d'il y a quelques mois.

Méthode n ° 3:

Si vous devez ignorer les inserts système standard pour certaines mises en page tout en les faisant fonctionner dans d'autres, le seul moyen viable de le faire est de travailler avec la ScrimInsetsFrameLayoutclasse souvent liée . Bien sûr, certaines des choses effectuées dans cette classe ne sont pas nécessaires pour tous les scénarios. Par exemple, si vous ne prévoyez pas d'utiliser la superposition de la barre d'état synthétique, commentez simplement tout dans la init()méthode et ne vous souciez pas d'ajouter quoi que ce soit au fichier attrs.xml. J'ai vu cette approche fonctionner, mais je pense que vous constaterez qu'elle apporte d'autres implications qui peuvent demander beaucoup de travail à contourner.

J'ai également vu que vous vous opposez à l'encapsulation de plusieurs mises en page. Dans le cas de l'encapsulation d'une disposition à l'intérieur d'une autre, où les deux ont match_parentpour la hauteur et la largeur, les implications sur les performances sont trop triviales pour être préoccupées. Quoi qu'il en soit, vous pouvez éviter complètement cette situation en changeant la classe à partir de laquelle elle s'étend FrameLayoutvers tout autre type de classe Layout que vous aimez. Cela fonctionnera très bien.

Cela a fonctionné pour mon cas

// Create/Set toolbar as actionbar
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

// Check if the version of Android is Lollipop or higher
if (Build.VERSION.SDK_INT >= 21) {

    // Set the status bar to dark-semi-transparentish
    getWindow().setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
            WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

    // Set paddingTop of toolbar to height of status bar.
    // Fixes statusbar covers toolbar issue
    toolbar.setPadding(0, getStatusBarHeight(), 0, 0);
}

// A method to find height of the status bar
public int getStatusBarHeight() {
    int result = 0;
    int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
    if (resourceId > 0) {
        result = getResources().getDimensionPixelSize(resourceId);
    }
    return result;
}

Pour plus d'informations sur l'utilisation des barres d'état: youtube.com/watch?v=_mGDMVRO3iE

Essayez ce thème

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="colorPrimaryDark">@android:color/transparent</item>
    <item name="colorPrimary">@color/md_blue_200</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:windowTranslucentStatus">true</item>
</style>

Assurez-vous que votre mise en page

android:fitsSystemWindows="false"

Au lieu de

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

Utilisez le suivant:

<item name="android:windowTranslucentStatus">true</item>

Et assurez-vous de supprimer le rembourrage supérieur (qui est ajouté par défaut) sur votre disposition «MainActivity».

Notez que cela ne rend pas la barre d'état totalement transparente, et il y aura toujours une superposition "noir délavé" sur votre barre d'état.

La solution de Cody Toombs a presque fait l'affaire pour moi. Je ne sais pas si cela est lié à Xamarin ou non, mais j'ai maintenant une solution acceptable:

Voici ma configuration:

J'ai un projet Android où j'ai référencé les packages Android.Support v4 et v7. J'ai deux styles définis:

values ​​/ styles.xml:

<?xml version="1.0" encoding="UTF-8" ?>
<resources>
    <style name="MyStyle" parent="@style/Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowTranslucentStatus">true</item>
    </style>
</resources>

values-v21 / styles.xml:

<?xml version="1.0" encoding="UTF-8" ?>
<resources>
    <style name="MyStyle" parent="@style/Theme.AppCompat.Light.NoActionBar">
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
</resources>

AndroidManifest cible "MyStyle":

AndroidManifest.xml:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="1" android:versionName="1.0" package="com.agn.test.test">
    <uses-sdk android:minSdkVersion="10" />
    <application android:allowBackup="true" android:icon="@mipmap/icon" android:label="@string/app_name" android:theme="@style/MyStyle">
    </application>
</manifest>

Et enfin le code dans l'activité principale:

[Activity (Label = "Test", MainLauncher = true, Icon = "@mipmap/icon")]
public class MainActivity : Activity
{
    protected override void OnCreate (Bundle savedInstanceState)
    {
        base.OnCreate (savedInstanceState);

        SetContentView (Resource.Layout.Main);
        //Resource.Layout.Main is just a regular layout, no additional flags. Make sure there is something in there like an imageView, so that you can see the overlay.

        var uiOptions = (int)Window.DecorView.SystemUiVisibility;
        uiOptions ^= (int)SystemUiFlags.LayoutStable;
        uiOptions ^= (int)SystemUiFlags.LayoutFullscreen;
        Window.DecorView.SystemUiVisibility = (StatusBarVisibility)uiOptions;

        Window.AddFlags (WindowManagerFlags.DrawsSystemBarBackgrounds);
    }
}

Notez que j'ai défini le drapeau DrawsSystemBarBackgrounds, cela fait toute la différence

Window.AddFlags (WindowManagerFlags.DrawsSystemBarBackgrounds); 

J'ai passé beaucoup de temps à bien faire les choses, trop de temps en fait. Espérons que cette réponse aide quiconque essaie de réaliser la même chose.

La réponse de @Cody Toombs a conduit à un problème qui amène la mise en page derrière la barre de navigation. Donc ce que j'ai trouvé utilise cette solution donnée par @Kriti

voici l'extrait de code Kotlin pour le même:

if (Build.VERSION.SDK_INT >= 19 && Build.VERSION.SDK_INT < 21) {
    setWindowFlag(this, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, true)
}

if (Build.VERSION.SDK_INT >= 19) {
    window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
}

if (Build.VERSION.SDK_INT >= 21) {
    setWindowFlag(this, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, false)
    getWindow().setStatusBarColor(Color.TRANSPARENT)
}

private fun setWindowFlag(activity: Activity, bits: Int, on: Boolean) {

    val win: Window = activity.getWindow()

    val winParams: WindowManager.LayoutParams = win.getAttributes()
    if (on) {
        winParams.flags = winParams.flags or bits
    } else {
        winParams.flags = winParams.flags and bits.inv()
    }
    win.setAttributes(winParams)
}

Vous devez également ajouter

android:fitsSystemWindows="false"

vue racine de votre mise en page.

J'ai eu le même problème alors je crée ImageView qui s'inspire de l'API de la barre d'état 19+

Définir une image personnalisée derrière la barre d'état gist.github.com

public static void setTransparent(Activity activity, int imageRes) {
    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) {
        return;
    }
    // set flags
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
        activity.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
        activity.getWindow().setStatusBarColor(Color.TRANSPARENT);
    } else {
        activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
    }

    // get root content of system window
    //ViewGroup rootView = (ViewGroup) ((ViewGroup) activity.findViewById(android.R.id.content)).getChildAt(0);
    // rootView.setFitsSystemWindows(true);
    // rootView.setClipToPadding(true);

    ViewGroup contentView = (ViewGroup) activity.findViewById(android.R.id.content);
    if (contentView.getChildCount() > 1) {
        contentView.removeViewAt(1);
    }

    // get status bar height
    int res = activity.getResources().getIdentifier("status_bar_height", "dimen", "android");
    int height = 0;
    if (res != 0)
        height = activity.getResources().getDimensionPixelSize(res);

    // create new imageview and set resource id
    ImageView image = new ImageView(activity);
    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, height);
    image.setLayoutParams(params);
    image.setImageResource(imageRes);
    image.setScaleType(ScaleType.MATRIX);

    // add image view to content view
    contentView.addView(image);
    // rootView.setFitsSystemWindows(true);

}

Vous pouvez utiliser ScrimInsetFrameLayout

https://github.com/google/iosched/blob/master/android/src/main/java/com/google/samples/apps/iosched/ui/widget/ScrimInsetsFrameLayout.java

android: fitsSystemWindows = "true" doit être défini sur la mise en page canevas!

Similaire à certaines des solutions publiées, mais dans mon cas, j'ai rendu la barre d'état transparente et j'ai corrigé la position de la barre d'action avec une marge négative

if (Build.VERSION.SDK_INT >= 21) {
    getWindow().setStatusBarColor(Color.TRANSPARENT);
    FrameLayout.LayoutParams lp = (FrameLayout.LayoutParams) toolbar.getLayoutParams();
    lp.setMargins(0, -getStatusBarHeight(), 0, 0);
}

Et j'ai utilisé dans la barre d'outils et la vue racine

android:fitsSystemWindows="true"

Il existe une bonne bibliothèque StatusBarUtil de @laobie qui aide à dessiner facilement une image dans la StatusBar.

Ajoutez simplement votre build.gradle:

compile 'com.jaeger.statusbarutil:library:1.4.0'

Puis dans l'ensemble d'activités

StatusBarUtil.setTranslucentForImageView(Activity activity, int statusBarAlpha, View viewNeedOffset)

Dans la mise en page

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:orientation="vertical">

    <ImageView
        android:layout_alignParentTop="true"
        android:layout_width="match_parent"
        android:adjustViewBounds="true"
        android:layout_height="wrap_content"
        android:src="@drawable/toolbar_bg"/>

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/view_need_offset"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@android:color/transparent"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

        <!-- Your layout code -->
    </android.support.design.widget.CoordinatorLayout>
</RelativeLayout>

Pour plus d'informations, téléchargez une démo ou un clonage à partir de la page github et jouez avec toutes les fonctionnalités.

Remarque: Support KitKat et supérieur.

J'espère que cela aide quelqu'un d'autre!

Avec Android Studio 1.4, le projet de modèle avec le code de la plaque chauffante définit le Overlaythème sur votre AppbarLayout et / ou Toolbar. Ils sont également définis pour être rendus derrière la barre d'état par fitSystemWindowattribut = true. Cela entraînera uniquement le rendu de la barre d'outils directement sous la barre d'état et tout le reste sera rendu sous la barre d'outils. Les solutions proposées ci-dessus ne fonctionneront donc pas toutes seules. Vous devrez apporter les modifications suivantes.

• Supprimez le thème de superposition ou changez-le en thème sans superposition pour la barre d'outils.

• Mettez le code suivant dans votre styles-21.xml fichier .

  @android: couleur / transparent

• Attribuez ce thème à l'activité contenant le tiroir de navigation dans le fichier AndroidManifest.xml .

Cela rendra le tiroir de navigation derrière la barre d'état transparente.

Tout ce que vous avez à faire est de définir ces propriétés dans votre thème

<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>

La réponse acceptée a fonctionné pour moi en utilisant un CollapsingToolbarLayout. Il est important de noter cependant que cela setSytstemUiVisibility()remplace tous les appels précédents à cette fonction. Donc, si vous utilisez cette fonction ailleurs pour la même vue, vous devez inclure les indicateurs View.SYSTEM_UI_FLAG_LAYOUT_STABLEet View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN, sinon ils seront remplacés par le nouvel appel.

C'était le cas pour moi, et une fois que j'ai ajouté les deux drapeaux à l'autre endroit où j'appelais setSystemUiVisibility(), la réponse acceptée a parfaitement fonctionné.

J'ajouterai plus d'informations ici. Les derniers développements Android ont rendu assez facile la gestion de nombreux cas dans la barre d'état. Voici mes observations dustyles.xml

1. Couleur d'arrière-plan : pour SDK 21+, comme beaucoup de réponses l'ont mentionné, <item name="android:windowTranslucentStatus">true</item> la barre d'état sera transparente et s'affichera devant l'interface utilisateur. Votre activité occupera tout l'espace du haut.

2. Couleur d'arrière-plan : encore une fois, pour SDK 21+, <item name="android:statusBarColor">@color/your_color</item>donnera simplement une couleur à votre barre d'état, sans rien affecter d'autre.

3. Cependant, dans les appareils plus récents (Android M / +), les icônes ont commencé à se présenter dans différentes nuances. Le système d'exploitation peut donner une nuance de gris plus foncée aux icônes du SDK 23 / +, si vous remplacez votre styles.xmlfichier dans le values-23dossier et ajoutez <item name="android:windowLightStatusBar">true</item>.
   De cette façon, vous fournirez à votre utilisateur une barre d'état plus visible, si votre barre d'état a une couleur claire (pensez à la façon dont beaucoup d'applications Google ont un arrière-plan clair alors que les icônes y sont visibles dans une couleur grisâtre).
   Je vous suggère d'utiliser ceci, si vous donnez de la couleur à votre barre d'état via le point # 2

4. Dans les appareils les plus récents, le SDK 29 / + est livré avec un thème clair et sombre à l'échelle du système, contrôlable par l'utilisateur. En tant que développeurs, nous sommes également censés remplacer notre fichier de style dans un nouveau values-nightdossier, pour donner à l'utilisateur 2 expériences différentes.
   Là encore, j'ai trouvé que le point n ° 2 était efficace pour fournir la "couleur d'arrière-plan à la barre d'état". Mais le système ne changeait pas la couleur des icônes de la barre d'état pour mon application. puisque ma version du jour du style consistait en un thème plus léger, cela signifie que les utilisateurs souffriront d'une faible visibilité (icônes blanches sur fond clair)
   Ce problème peut être résolu en utilisant l'approche du point n ° 3 ou en remplaçant le fichier de style dans le values-29dossier et en utilisant un plus récent api <item name="android:enforceStatusBarContrast">true</item>. Cela appliquera automatiquement la teinte grisâtre aux icônes, si votre couleur d'arrière-plan est trop claire.

Voici le thème que j'utilise pour accomplir cela:

<style name="AppTheme" parent="@android:style/Theme.NoTitleBar">

    <!-- Default Background Screen -->
    <item name="android:background">@color/default_blue</item>
    <item name="android:windowTranslucentStatus">true</item>

</style>

La bonne solution consiste à modifier une propriété en XML sous votre balise Activity en un style ci-dessous. Ça marche juste

  android:theme="@style/Theme.AppCompat.Light.NoActionBar"