web-dev-qa-db-fra.com

Arrière-plan de style AppCompat propagé à l'image dans la barre d'outils

Contexte

J'utilise la dernière librairie AppCompat v7 (21.0.0) et j'ai migré mon application d'ActionBar vers ToolBar

Problème

  1. Les images de la barre d'outils reçoivent automatiquement le même arrière-plan que la barre d'outils

Actuellement, la SearchBox est une vue personnalisée définie dans la barre d'action (à partir de la mise en œuvre précédente). Je prévois de basculer vers la SearchView et de la styliser en conséquence, mais je suis toujours très intéressé par le problème auquel je suis confronté en ce moment.

Img background

  1. Lorsque vous appuyez longuement sur un élément de menu dans la barre d'outils, un toast apparaît avec le texte de conseil et le texte a le même arrière-plan que la barre d'outils.

Toast background

Comment puis-je éviter ça?

Voici ma disposition de barre d'outils et le style et le thème

layout v_toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<Android.support.v7.widget.Toolbar
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/my_awesome_toolbar"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/MyActionBarStyle"/>

values ​​/ styles.xml

<style name="MyActionBarStyle" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="Android:background">@color/green</item>
    <item name="Android:windowActionBarOverlay">true</item>

    <!-- Support library compatibility -->
    <item name="background">@color/green</item>
    <item name="windowActionBarOverlay">true</item>
</style>

Thème

<style name="MyTheme" parent="AppBaseTheme">
    <!-- Here we setting appcompat’s actionBarStyle -->
    <!-- <item name="actionBarStyle">@style/MyActionBarStyle</item> -->

    <item name="windowActionBar">false</item>
    <!-- ...and here we setting appcompat’s color theming attrs -->
    <item name="colorPrimary">@color/green</item>
    <item name="colorPrimaryDark">@color/green_dark</item>
</style>

Solution de contournement 1 pour le problème 1

La solution de contournement pour le premier problème consiste à définir un arrière-plan transparent sur ImageView

Android:background="@color/transparent"

Cela ne résout pas le problème des toasts.

Solution aux deux problèmes

J'ai défini un arrière-plan pour la barre d'outils

<?xml version="1.0" encoding="utf-8"?>
<Android.support.v7.widget.Toolbar
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/my_awesome_toolbar"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:background="@color/green"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/MyActionBarStyle"/>

Et je ne mets plus de fond sur le thème.

<style name="MyActionBarStyle" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="Android:windowActionBarOverlay">true</item>
    <!-- Support library compatibility -->
    <item name="windowActionBarOverlay">true</item>
</style>

Comme l'a souligné Chris Banes, un style pourrait être créé pour la barre d'outils au lieu de déclarer l'Android: background.

Cela résout mon problème, mais je semble avoir un autre problème avec le fait que le popupTheme n'est pas appliqué et ma liste déroulante ShareActionMenuItem n'a pas de fond blanc avec du texte noir. Voir une autre question ici: AppCompat ToolBar popupTheme non utilisé dans le ShareAction MenuItem

Il s'agit peut-être d'un bogue dans la bibliothèque appcompat.

androidandroid-appcompatandroid-toolbar
25
Benoit

Vous ne devriez pas utiliser theme comme ça:

  • style = local dans la barre d'outils
  • theme = global à tout gonflé dans la barre d'outils

La solution de contournement 2, comme vous l'appelez, est en quelque sorte la bonne façon. Si vous souhaitez extraire certaines valeurs dans un style, vous pouvez le faire comme suit:

<Android.support.v7.widget.Toolbar
    Android:id="@+id/my_awesome_toolbar"
    Android:layout_width="match_parent"
    Android:layout_height="?attr/actionBarSize"
    style="@style/MyDarkToolbar" />

Style:

<style name="MyDarkToolbarStyle" parent="Widget.AppCompat.Toolbar">
    <item name="Android:background">@color/green</item>
    <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
    <item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>
46
Chris Banes

N'utilisez jamais de thèmes pour éditer. Parce que le thème définit le comportement général de l'application. U peut utiliser deux méthodes pour cela

Méthode: 1

U peut spécifier directement les paramètres dans appbar.xml comme indiqué ci-dessous

dans appbar.xml

  <?xml version="1.0" encoding="utf-8"?>
    <Android.support.v7.widget.Toolbar
        Android:id="@+id/my_awesome_toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="?attr/actionBarSize"
        Android:background="@color/green"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme=">style/ThemeOverlay.AppCompat.Light"/>

Méthode: 2

vous pouvez utiliser un style comme Chris_Banes l'a suggéré dans le post ci-dessus

dans appbar.xml:

<Android.support.v7.widget.Toolbar
    Android:id="@+id/my_awesome_toolbar"
    Android:layout_width="match_parent"
    Android:layout_height="?attr/actionBarSize"
    style="@style/MyDarkToolbar" />

dans le style:

<style name="MyDarkToolbarStyle" parent="Widget.AppCompat.Toolbar">
    <item name="Android:background">@color/green</item>
    <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
    <item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>

Points à noter

Avec la nouvelle barre d'outils, vous pouvez appliquer un style et un thème. Ils sont différents! Le style est local à la vue de la barre d'outils, par exemple la couleur d'arrière-plan. Le thème app: est plutôt global pour tous les éléments de l'interface utilisateur gonflés dans la barre d'outils, par exemple la couleur du titre et des icônes.

5
Ashok Varma