web-dev-qa-db-fra.com

L'effet d'entraînement en arrière-plan sur les éléments de la barre d'outils StandAlone a disparu

L’utilisation de la barre d’outils autonome pose un problème avec l’arrière-plan sélectionnable des éléments. Suivre cet article ne fonctionnait pas également:

http://blog.mohitkanwal.com/blog/2015/03/07/styling-material-toolbar-in-Android/

Vérifiez la barre d’outils normale dans la capture d’écran ci-dessous, le sélecteur d’effet d’ondulation disparaît lorsque vous utilisez la barre d’outils autonome.

voici mon style:

 <style name="ToolbarTheme" parent="Widget.AppCompat.Toolbar">
        <item name="actionMenuTextColor">@color/green</item>
        <item name="drawerArrowStyle">@style/DrawerArrowToggle</item>
        <item name="colorControlNormal">@color/white</item>
        <item name="colorControlActivated">@color/white</item>
        <item name="Android:textColorPrimary">@color/white</item>
        <item name="titleTextAppearance">@style/ActionBar.TitleText</item>
        <item name="Android:actionOverflowButtonStyle">@style/MoreActionButton</item>
        <item name="actionButtonStyle">@style/Widget.AppCompat.ActionButton</item>
        <item name="selectableItemBackground">?android:selectableItemBackground</item>
        <item name="selectableItemBackgroundBorderless">?android:selectableItemBackground</item>
        <item name="colorControlHighlight">@color/accentColor</item>
    </style>

EDIT: Après avoir isolé le problème de mon code, j'ai pu le reproduire et il semble que cela soit lié à la nouvelle bibliothèque de conception de support. Et voici le code de test qui a le problème:

TestToolbar.Zip

enter image description here

androidandroid-toolbar
20
Mahdi Hijazi

Cela a été fait en utilisant l'émulateur Android 5.1 genymotion

Je n’ai pas compris votre problème, mais j’ai simplement essayé de créer une barre d’outils identique à la vôtre, mais en supprimant un style que je n’ai pas. 

voici mon style

  <style name="ToolbarTheme"
      parent="Widget.AppCompat.Toolbar">
    <item name="actionMenuTextColor">#1bff3a</item>
    <item name="colorControlNormal">#FFF</item>
    <item name="colorControlActivated">#FFF</item>
    <item name="Android:textColorPrimary">#FFF</item>
    <item name="actionButtonStyle">@style/Widget.AppCompat.ActionButton</item>
    <item name="selectableItemBackground">?android:selectableItemBackground</item>
    <item name="selectableItemBackgroundBorderless">?android:selectableItemBackground</item>
    <item name="colorControlHighlight">@color/accentColor</item>
  </style>

Ma mise en page de la barre d'outils

 <Android.support.v7.widget.Toolbar
      Android:id="@+id/toolbar"
      Android:layout_width="match_parent"
      Android:layout_height="?attr/actionBarSize"
      Android:background="?colorPrimary"
      app:theme="@style/ToolbarTheme"
      app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
      />

Mon menu

<item
      Android:id="@+id/action_settings"
      Android:title="@string/action_settings"
      Android:icon="@drawable/abc_ic_clear_mtrl_alpha"
      app:showAsAction="always"
      />

Le code d'activité

   Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
   toolbar.inflateMenu(R.menu.menu_home);

Capture d'écran du résultat

Screenshot of working toolbar

Modifier

après avoir téléchargé l'exemple que vous avez fourni dans la question, le problème n'a plus rien à voir avec la barre d'outils autonome ou la barre d'action (les deux ont le même problème) lorsque vous utilisez AppBarLayout, le problème semble que l'effet Ripple sera tiré sur AppBarLayout au lieu de la vue élément de menu sélectionné, je vais enregistrer une vidéo l'expliquant.

la vidéo: AppBarLayout with Toolbar Video

Je vais essayer de trouver une solution pour cela.

21
Mohammad Ersan

La solution de contournement concernant la selectableItemBackground ne fonctionnait pas non plus pour moi. La meilleure stratégie à laquelle je suis arrivé jusqu'ici consiste à définir l'arrière-plan de la barre d'outils sur transparent: 

<Android.support.v7.widget.Toolbar
   ...
   Android:background="@Android:color/transparent"/>

Cela active l’effet d’ondulation (réduit à la hauteur de la barre d’action) à l’état développé/collapsé/intermédiaire.

5
Andreas Wenger

Il semble que l’effet d’ondulation soit toujours présent, mais la couleur de l’ondulation a changé. Je ne sais pas quel est votre problème, mais c’est ce que je vois. 

Je vous suggère de retirer 

        <item name="colorControlHighlight">@color/accentColor</item>

à partir de votre code et exécutez-le à nouveau. Si les ondulations ne s'affichent pas (elles devraient l'être), changez la couleur d'accent.

5
Alok Narasiman

Chris Bane répond sur le problème initial:

https://code.google.com/p/Android/issues/detail?id=176431

En effet, par défaut? Attr/actionBarItemBackground est un RippleDrawable non limité, ce qui signifie qu'il est projeté/dessiné sur le parent suivant. Dans ce cas, il s'agit de CollapsingToolbarLayout que vous ne pouvez pas réellement voir.

Nous ne pouvons pas faire grand chose du point de vue des bibliothèques. La "solution de contournement" consiste à définir actionBarItemBackground pour qu'il ne soit pas sans frontière:

<style name="Theme.Toolbar.Collapsing" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="actionBarItemBackground">?attr/selectableItemBackground</item>
</style>

<Toolbar
    ...
    Android:theme="Theme.Toolbar.Collapsing" />
1
Mahdi Hijazi

Cela a fonctionné pour moi:

Définir un thème personnalisé dans le fichier styles.xml

<style name="MyAppbarTheme" parent="@style/ThemeOverlay.AppCompat.Light">
    <item name="colorControlHighlight">@color/colorAccent</item>
</style>

Puis appliquez ce thème sur AppBarLayout ou la barre d’outils

<Android.support.design.widget.AppBarLayout
    Android:id="@+id/appbar_layout"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:theme="@style/MyAppbarTheme" >
1
s-hunter

Bon exemple de mon projet:

            Android:id="@+id/..."
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_alignParentEnd="true"
            Android:layout_centerVertical="true"
            Android:layout_marginEnd="@dimen/..."
            Android:background="@drawable/button_ripple_circle_green"
            Android:theme="@style/SearchViewTheme"
            Android:visibility="visible"
            app:elementColor="@color/white"
            app:hintColor="@color/text_disabled_light"
            app:leftIconMode="back"
            app:leftSearchSpace="@dimen/..."
            app:textColor="@color/white"
            app:textSize="@dimen/..."
            tools:visibility="visible" />

Ceci est xml (Android: background) où l’effet d’ondulation sur les icônes "recherche" & "retour":

<item Android:state_pressed="true">
    <shape Android:shape="oval">
        <solid Android:color="@color/icon_toolbar_pressed"/>
        <corners Android:radius="3dp"/>
    </shape>
</item>

<item Android:state_pressed="false">
    <shape Android:shape="oval">
        <solid Android:color="@color/primary"/>
        <corners Android:radius="3dp"/>
    </shape>
</item>

0
Kolesnichenko Ruslan