web-dev-qa-db-fra.com

Faire dessiner le tiroir de navigation derrière la barre d'état

J'essaie de créer un tiroir de navigation comme celui de la spécification de matériau (comme celui de la nouvelle application gmail). Notez comment le contenu du tiroir de navigation se dessine derrière la barre d'état:

example from the Material spec

En utilisant la réponse de Chris Banes de cette question , j'ai réussi à dessiner le tiroir de navigation dans mon application derrière la barre d'état; ça marche bien. Ce qui ne fonctionne pas, c'est de dessiner le contenu du tiroir de navigation derrière la barre d'état. Je veux que l'image bleue dans mon tiroir soit affichée derrière la barre d'état, mais cette zone est dessinée avec la couleur de la barre d'état, comme le montre cette capture d'écran.

my app

Alors, comment puis-je dessiner mon tiroir de navigation dans la zone située derrière la barre d'état? J'ai posté les parties pertinentes de mon projet ci-dessous.

Disposition de base contenant le tiroir de navigation:

<Android.support.v4.widget.DrawerLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:id="@+id/nav_drawer_layout"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical"
    Android:fitsSystemWindows="true">

    <!-- Framelayout to display Fragments -->
    <FrameLayout
        Android:id="@+id/content"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:layout_above="@+id/warning_container" />

    <FrameLayout
        Android:id="@+id/navigation_drawer_fragment_container"
        Android:layout_width="300dp"
        Android:layout_height="match_parent"
        Android:fitsSystemWindows="true"
        Android:layout_gravity="start">

        <fragment
            Android:id="@+id/navigation_drawer_fragment"
            Android:name="com.thebluealliance.androidclient.fragments.NavigationDrawerFragment"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            tools:layout="@layout/fragment_navigation_drawer" />

    </FrameLayout>

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

Thème de mon activité

<style name="AppThemeNoActionBar" parent="AppTheme">
    <item name="windowActionBar">false</item>
    <item name="Android:windowNoTitle">true</item>
    <item name="Android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="Android:statusBarColor">@Android:color/transparent</item>
</style>

Dans onCreate() de mon activité, je fais ce qui suit:

mDrawerLayout.setStatusBarBackground(R.color.primary_dark);
androidandroid-layoutandroid-navigation
43
Nathan Walters

J'ai trouvé la meilleure façon de le faire sur Android 5.0. La clé est d'utiliser un ScrimInsetFrameLayout comme élément racine du tiroir de navigation (la deuxième vue dans le DrawerLayout). Le contenu se développera pour remplir l'espace derrière la barre d'état. Pour colorer correctement l'encart, vous pouvez définir l'attribut suivant sur le ScrimInsetFrameLayout:

app:insetForeground="#4000"

Assurez-vous également que vous disposez de Android:fitsSystemWindows="true" sur le canevas!

Le code source de ScrimInsetFrameLayout peut être trouvé ici: https://github.com/google/iosched/blob/master/Android/src/main/Java/com/google/samples/ apps/iosched/ui/widget/ScrimInsetsFrameLayout.Java

11
Nathan Walters

Pour API 21 +

<style name="AppTheme" parent="Android:Theme.Holo.NoActionBar.TranslucentDecor">
    ...
</style>

Pour API 19 +

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="Android:windowTranslucentStatus">true</item>
</style>

Votre mise en page doit avoir Android:fitsSystemWindows="false" (qui est la valeur par défaut).

Maintenant que vous voulez basculer la translucidité, vous pouvez le faire par programme:

Window window = getWindow();

// Enable status bar translucency (requires API 19)
window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
        WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

// Disable status bar translucency (requires API 19)
window.getAttributes().flags &= (~WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

// Set a color (requires API 21)
window.setStatusBarColor(Color.RED);

Je vous laisse toute la version sdk vérifier :)

ss

52
Simas
<Android.support.v4.widget.DrawerLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:id="@+id/drawer_layout"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

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

        <include layout="@layout/toolbar" />
        <!-- Main layout -->
        <FrameLayout
            Android:id="@+id/main_fragment_container"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent" />
    </LinearLayout>
    <!-- Nav drawer -->
    <fragment
        Android:id="@+id/fragment_drawer"
        Android:name="com.example.DrawerFragment"
        Android:layout_width="@dimen/drawer_width"
        Android:layout_height="match_parent"
        Android:layout_gravity="left|start"
        Android:fitsSystemWindows="true" />

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

values ​​/ themes.xml 

<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="Android:windowBackground">@color/primary</item>
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="Android:textColorPrimary">@color/textColorPrimary</item>
</style>

<style name="AppTheme" parent="AppTheme.Base">
</style>

values-v19/themes.xml 

<style name="AppTheme" parent="AppTheme.Base">
    <!--This makes the status bar transparent in KK and Lollipop-->
    <!--You do not need values-v21 and if you create them make sure you extend from this one-->
    <item name="Android:windowTranslucentStatus">true</item>
</style>

Si vous souhaitez changer la couleur (différente du noir transparent) de la barre d'état, vous devrez opter pour l'autre approche avec la vue personnalisée, car mDrawerLayout.setStatusBarBackgroundColor(int) ne sera activé que si ce DrawerLayout s'adapte à SystemWindows (Android:fitsSystemWindows="true"), et si vous le faites, il ne sera pas dessiné derrière la barre d'état mais en dessous.

17
jpardogo

Dans votre répertoire "values-v21", ajoutez ces lignes:

<style name="AppTheme" parent="BaseTheme">
    <item name="Android:windowTranslucentStatus">true</item>
    <item name="Android:windowSharedElementsUseOverlay">false</item>
</style>
0
Juan Labrador

Ajoutez simplement ces deux valeurs à votre style de thème dans values-v21

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
  ..
  <item name="Android:statusBarColor">@Android:color/transparent</item>
   <item name="Android:windowDrawsSystemBarBackgrounds">true</item>
</style>
0
Kartik Sharma

Pour tous ceux qui luttent avec une barre d'état translucide en combinaison avec une barre de navigation, mais ne veulent pas changer <style name="yourAppTheme" parent= à "Android:Theme.Holo.NoActionBar.TranslucentDecor", ajoutez simplement ces lignes dans votre style.xml:

    <item name="Android:windowTranslucentStatus">true</item>
    <item name="Android:windowTranslucentNavigation">true</item> 
    <item name="Android:windowContentOverlay">@null</item>
0
luke8800gts