web-dev-qa-db-fra.com

Barre d'état et barre d'outils translucides

J'aimerais intégrer quelque chose comme ceci:

 enter image description here

Et je l’ai fait comme ça, mais je n'arrive pas à mettre l’imageview en dessous de la barre d’outils. Sans la barre d'outils, je peux le faire sous la barre d'état, mais il est impossible de combiner ces deux éléments.

 enter image description here

Voici ma mise en page:

<?xml version="1.0" encoding="utf-8"?>
<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:orientation="vertical"
    Android:fitsSystemWindows="true"
    tools:context="com.project.Android.PhotoActivity">

    <Android.support.v7.widget.Toolbar
        Android:id="@+id/photo_tl"
        Android:layout_width="match_parent"
        Android:layout_height="?attr/actionBarSize"
        Android:background="#59000000"
        tools:ignore="UnusedAttribute" />

    <ImageView
        Android:id="@+id/photo_image"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:adjustViewBounds="true"
        Android:scaleType="fitStart" />


</LinearLayout>

Dans mon activité, j'ai effectué les tâches suivantes:

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

J'ai également déclaré un fichier styles-v21.xml:

<style name="Project.Photo" parent="Project.Light">
    <item name="Android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="Android:statusBarColor">#59000000</item>
</style>

Et définissez-le comme style par défaut pour PhotoActivity . J'ai déjà essayé de placer la barre d'outils dans un FrameLayout, mais ma barre d'outils se cache tout simplement comme ceci:

 enter image description here

Merci d'avance.

Cela a été corrigé, mais la barre d'outils chevauche la barre d'état. Est-il possible de réparer le rembourrage? Si j'utilise Android: fitsSystemWindows = "true", la barre d'état n'est plus translucide.

androidandroid-layoutmaterial-designandroid-toolbarandroid-statusbar
16
dynamitem

Je supprimerais la Toolbar de votre mise en page et utiliserais une implémentation d'une ActionBar du AppCompat.Theme:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

Ensuite, je créerais un nouveau style pour la ActionBar semi-transparente __ (dans values/styles.xml:

<style name="AppTheme.Transparent" parent="AppTheme">
    <item name="windowActionBarOverlay">true</item>
</style>

Et en v21/styles.xml:

<style name="AppTheme.Transparent" parent="AppTheme">
    <item name="windowActionBarOverlay">true</item>
    <item name="Android:windowTranslucentStatus">true</item>
</style>

Je suppose que votre Activity étend AppCompatActivity donc dans onCreate() vous pouvez appeler:

Pour activer un bouton de retour:

getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);

Pour définir votre couleur translucide:

getSupportActionBar().setBackgroundDrawable(new ColorDrawable(ContextCompat.getColor(this, R.color.yourTranslucentColor)));

Pour supprimer votre titre ActionBar:

getSupportActionBar().setDisplayShowTitleEnabled(false);

De plus, je changerais votre racine LinearLayout en CoordinatorLayout car cela vous donnerait plus de contrôle sur vos mises en page (c'est un FrameLayout plus puissant).

La couleur que j'ai utilisée est:

<color name="yourTranslucentColor">#29000000</color>

Bien sûr, vous devez vous rappeler d’appliquer ce thème à votre Activity dans le AndroidManifest.xml:

<activity
    Android:name=".ui.activity.YourActivity"
    Android:theme="@style/AppTheme.Transparent">
</activity>

En effectuant toutes ces étapes, vous devriez obtenir quelque chose comme ceci:

 enter image description here

S'il vous plaît faites le moi savoir, si cela fonctionne pour vous.

6
mmBs

Comme tu dis, 

"J'ai déjà essayé de placer la barre d'outils dans un FrameLayout, mais ma barre d'outils est masquée, comme ceci:". 


Le problème avec ceci est l'ordre dans lequel on a ajouté childView dans FrameLayout, vous avez ajouté Toolbar en tant que premier enfant, puis ImageView. c'est pourquoi image cache la barre d'outils. Au lieu de cela, l'ordre des vues dans FameLayout devrait être comme ceci 

<FrameLayout   
          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:fitsSystemWindows="true"
          tools:context="com.project.Android.PhotoActivity">

          <ImageView
              Android:id="@+id/photo_image"
              Android:layout_width="match_parent"
              Android:layout_height="match_parent"
              Android:adjustViewBounds="true"
              Android:scaleType="fitStart" />

          <Android.support.v7.widget.Toolbar
              Android:id="@+id/photo_tl"
              Android:layout_width="match_parent"
              Android:layout_height="?attr/actionBarSize"
              Android:background="#59000000"
              tools:ignore="UnusedAttribute" />

    </FrameLayout>

Également pour le niveau d'API> = 19, vous pouvez ajouter cet attribut dans le fichier style.xml pour rendre statusBar transparent.
<item name="Android:windowTranslucentStatus">true</item>
Pour créer du contenu derrière statusBar, utilisez ce lien

https://developer.Android.com/training/system-ui/status.html#behind

6
Akhilesh Kumar

Utilisez le code ci-dessous

<Android.support.design.widget.CoordinatorLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/coordinator_layout"
    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="300dp"
        Android:fitsSystemWindows="true">

        <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="@color/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleTextAppearance="@style/AppTheme.CollapsingToolbarLayoutExpandedTextStyle"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

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

            <Android.support.v7.widget.Toolbar
                Android:id="@+id/toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="?android:attr/actionBarSize"
                Android:theme="@style/YourTheme"
                app:layout_collapseMode="pin" />

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

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

<!-- Rest of your view-->

</Android.support.design.widget.CoordinatorLayout>
2
Haris Qureshi

Ne traitez pas la barre d'état comme quelque chose de séparé de votre application. L'image s'affiche sous la barre d'outils car vous avez utilisé LinearLayout. Si vous aviez utilisé RelativeLayout, votre image commencerait à la même hauteur que la barre d’outils.

Maintenant, pour rendre la barre d'état transparente et pour que tout commence sous la barre d'état, utilisez ce qui suit. 

<style name="AppTheme.TranslucentStatusBar" >
    <item name="Android:windowTranslucentStatus">true</item>
    <item name="Android:windowBackground">@Android:color/transparent</item>
</style>

Utilisez le style ci-dessus pour votre activité et tout commence sous la barre d'état. Maintenant, pour la barre d’outils, vous pouvez augmenter la hauteur de la barre d’outils en ajoutant la hauteur de la barre d’état en tant que remplissage à la barre d’outils. Cela peut être fait comme suit:

toolbarContainer.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                Rect frame = new Rect();
                getWindow().getDecorView().getWindowVisibleDisplayFrame(frame);
                toolbarContainer.setPadding(0, frame.top, 0, 0);
            }
        });

Vous pouvez définir une couleur sur la barre d'état et utiliser la même couleur avec AlphaTransparency dans la barre d'outils.

getWindow().setStatusBarColor(ContextCompat.getColor(this, Android.R.color.transparent));

Maintenant, vous contrôlez tout, y compris la barre d'état et la barre d'outils.

1
Roadblock

TLDR; Vous devez envelopper la barre d'outils dans un LinearLayout.

Ce que j'ai fait pour que cela fonctionne était similaire à l'approche de @Akhilesh Kumar, mais j'ai enveloppé la barre d'outils dans un LinearLayout qui corrigeait la superposition de la barre d'outils. Je mets également les ajustementsSystemWindows à true dans ce LinearLayout.

<FrameLayout 
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:fitsSystemWindows="true"
tools:context="com.project.Android.PhotoActivity">

<ImageView
    Android:id="@+id/photo_image"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:adjustViewBounds="true"
    Android:scaleType="fitStart"/>

<LinearLayout

    Android:id="@+id/content_card_image"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical"
    Android:fitsSystemWindows="true"
    >

    <Android.support.v7.widget.Toolbar
        Android:id="@+id/photo_tl"
        Android:layout_width="match_parent"
        Android:layout_height="?attr/actionBarSize"
        Android:background="#59000000"
        tools:ignore="UnusedAttribute"/>

</LinearLayout>
</FrameLayout>

J'espère que ça aide.

1
Francisco Junior

LinearLayout placera automatiquement la ImageView sous la Toolbar.

Essayez plutôt d'utiliser RelativeLayout.

1
Bret Deasy

Correction de cette erreur, mais la barre d’outils chevauche la barre d’état. Est-il possible de réparer le rembourrage? Si j'utilise Android: fitsSystemWindows = "true", la barre d'état n'est plus translucide.

J'ai récemment écrit un article sur WindowInsets, vous pouvez le vérifier . Je pense que cela résoudrait votre problème.

En résumé, ce que vous devez faire est de transmettre les incrustations de fenêtre uniquement à Toolbar via l'API ViewCompat.setOnApplyWindowInsetListener. Mais le parent de votre Toolbar devrait passer les encarts de fenêtre. Dans votre cas, cela ne se produira pas, car par défaut LinearLayout et les dispositions de famille ne le feront pas, vous devez sous-classer et remplacer la méthode onApplyWindowInsets.

Je vous suggère de lire l'article, où tout est décrit plus précisément.

0
azizbekian