web-dev-qa-db-fra.com

Android, Comment faire correctement une barre d'état transparente

J'essaie de rendre la barre d'état transparente sur Android 4.4+ Je sais comment la rendre transparente en définissant mon propre style:

<style name="Theme.MyTheme" parent="Theme.MyTheme.Base">
    <item name="Android:windowTranslucentStatus">true</item>
    <item name="Android:windowTranslucentNavigation">true</item> </style>

J'ai trouvé ici: https://stackoverflow.com/a/20573595/26336

Le problème est que lorsque la barre d'état est transparente, elle ne correspond pas à la couleur de la barre d'action et l'activité en arrière-plan est visible: transparent status bar error

J'ai donc trouvé que je peux utiliser Android: fitsSystemWindows = "true" et Android: clipToPadding = "false" dans ma mise en page que j'ai trouvée ici http://mindofaandroiddev.wordpress.com/2013/12/28/making -la-barre-d'état-et-la-barre-de-navigation-transparente-avec-une-liste-vue-sur-Android-4-4-KitKat /

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:tools="http://schemas.Android.com/tools"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:background="@color/background_darkRed"
Android:fitsSystemWindows="true"
Android:clipToPadding="false"    
tools:context="com.sandak.......">

<ScrollView
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"> 
....

Cela résout le problème du haut avec la barre d'état transparente et semble ok .. Malheureusement, il y a un problème en bas sur la "barre de navigation" avec les boutons du système, qui est rouge et non transparent comme je le souhaite: enter image description here

J'essayais toutes les variantes possibles pour obtenir un résultat de travail, mais je ne sais pas comment le résoudre. Ma seule solution de travail est de définir un rembourrage supérieur d'environ 60dp à l'élément racine. Mais cette solution est moche et sur différents appareils peut avoir un aspect différent et peut ne pas fonctionner.

J'ai trouvé quelques applications sur Google Play qui fonctionnent Ok avec un fond transparent, donc je suis curieux de savoir comment elles fonctionnent.

Par exemple: https://play.google.com/store/apps/details?id=com.trello et quelques autres

androidandroid-layoutuser-experience
16
Sandak

// MISE À JOUR:
D'accord, c'est une réponse assez ancienne. Vous pouvez maintenant utiliser le thème Matériau pour gérer cela et c'est assez facile. Définissez simplement l'api cible sur 21+, utilisez la bibliothèque de support si vous en avez besoin et créez un thème avec un thème matériel où vous pouvez spécifier directement la couleur de la barre d'état

<style name="AppTheme"
        parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- colorPrimary is used for the default action bar background -->
        <item name="colorPrimary">@color/color_primary</item>

        <!-- colorPrimaryDark is used for the status bar -->
        <item name="colorPrimaryDark">@color/color_primary_dark</item>

        <!-- colorAccent is used as the default value for colorControlActivated
             which is used to tint widgets -->
        <item name="colorAccent">@color/accent_orange</item>
    </style>

================================================== =====================

ANCIENNE RÉPONSE:

Ok, il semble que je résout mon problème. Ce n'est pas la solution la meilleure et la plus claire, mais c'est une solution qui fonctionne. Si quelqu'un à l'avenir trouvera une solution meilleure et plus claire, faites-le moi savoir et je mettrai à jour ma réponse/ou marquer votre réponse comme correcte. Mais pour l'instant, je n'ai pas de meilleure solution que ce petit hack:

L'élément racine de la mise en page doit être RelativeLayout. Que devrait suivre votre mise en page principale comme ScrollView ou tout autre type de mise en page, cela n'a pas d'importance. À la fin avant de fermer la balise de mise en page relative, suit un LinearLayout vide qui a défini le même arrière-plan que votre barre d'action et une hauteur fixe (hauteur de la barre d'état).

<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:tools="http://schemas.Android.com/tools"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
tools:context="com.sandak....">
<ScrollView
    Android:fitsSystemWindows="true"
    Android:clipToPadding="false"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">
.... all your main views etc..
</ScrollView>
<LinearLayout
        Android:id="@+id/statusBarBackgroundLinearLayout"
        Android:layout_width="match_parent"
        Android:orientation="horizontal"
        Android:layout_height="30dp"
        Android:background="@color/background_darkRed"
        Android:clickable="false"
        Android:focusable="false">
     </LinearLayout>
</RelativeLayout>

Ok, vous devez définir dans le code la même hauteur de disposition linéaire que la barre d'état:

private void setStatusBarBackground(View rootView) {
        setStatusBarLayout(rootView);
        statusBarHeight = getStatusBarHeight();
        setStatusBarLayoutHeight(statusBarHeight);
    }

    private void setStatusBarLayout(View rootView){
        statusBarBackgroundLinearLayout = (LinearLayout) rootView.findViewById(R.id.statusBarBackgroundLinearLayout);
        if (isPreKitkatDevice()) {
            hideStatusBarLayout();
        }
    }

    private int getStatusBarHeight() {
        int statusBarHeight = 0;
        int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "Android");
        if (resourceId > 0) {
            statusBarHeight = getResources().getDimensionPixelSize(resourceId);
        }
        return statusBarHeight;
    }

    private boolean isPreKitkatDevice(){
        return Build.VERSION.SDK_INT < Build.VERSION_CODES.KitKat;
    }

    private void hideStatusBarLayout(){
        statusBarBackgroundLinearLayout.setVisibility(View.INVISIBLE);
    }        

    private void setStatusBarLayoutHeight(int height){
        RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) statusBarBackgroundLinearLayout.getLayoutParams();
        layoutParams.height = height;
    }

Et puis appelez simplement setStatusBarBackground dans votre méthode onCreate (). C'est une solution de travail pour tous les types de périphériques. Pour les appareils pré KitKat où l'arrière-plan transparent n'est pas autorisé, vous devez masquer la disposition linéaire.

12
Sandak