full - toolbar android studio

El efecto de ondulación de fondo en los elementos de la barra de herramientas de StandAlone se ha ido

Question

El uso de la barra de herramientas independiente tiene un problema con el fondo seleccionable de los elementos, ya que este artículo tampoco funcionó:

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

Verifique la barra de herramientas normal en la captura de pantalla de abajo, el selector de efecto de onda desaparece cuando se usa la barra de herramientas independiente.

Aquí está mi estilo:

 <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>

EDITAR: Después de aislar el problema de mi código, pude reproducirlo y parece que está relacionado con la nueva biblioteca de diseño de soporte. Y aquí está el código de prueba que tiene el problema:

TestToolbar.zip

Answer 1

Buen ejemplo de mi proyecto:

 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" />

Esto es xml (android: background) donde está el efecto de onda en los iconos "buscar" y "atrás":

<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>

Answer 2

Chris Bane responde sobre el tema original:

code.google.com/p/android/issues/detail?id=176431

Esto se debe a que, por defecto, attr / actionBarItemBackground es un RippleDrawable ilimitado, lo que significa que se proyecta / dibuja en el siguiente elemento principal. En este caso, este es el CollapsingToolbarLayout que realmente no puedes ver.

No hay mucho que podamos hacer aquí desde la perspectiva de la biblioteca. La ''solución'' es configurar actionBarItemBackground para que no esté sin bordes:

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

Answer 3

Esto funcionó para mí:

Define un tema personalizado en el styles.xml

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

Luego aplique este tema en AppBarLayout o Toolbar

<android.support.design.widget.AppBarLayout
android:id="@+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/MyAppbarTheme" >

Answer 4

Esto se hizo usando el emulador de genymotion android 5.1

No resolví tu problema, pero intenté crear una barra de herramientas igual a la tuya, pero eliminando un estilo que no tengo.

aqui esta mi estilo

 <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>

Diseño de mi barra de herramientas

 <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"
/>

Mi menú

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

El código de actividad

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

Captura de pantalla del resultado.

Editar

después de descargar la muestra que proporcionó en la pregunta, el problema no tiene nada que ver con la barra de herramientas independiente o la barra de acción (ambas tienen el mismo problema) al usar AppBarLayout , el problema parece ser que el efecto Ripple se dibujará en AppBarLayout lugar de la Vista del Elemento del menú seleccionado, grabaré un video explicándolo.

el video: AppBarLayout con Toolbar Video

Intentaré encontrar una solución para esto.

Answer 5

La solución con respecto a la selectableItemBackground tampoco funcionó para mí. La mejor estrategia que encontré hasta ahora es configurar el fondo de la barra de herramientas en transparente:

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

Esto habilita el efecto de rizo (recortado a la altura de la barra de acción) en estado expandido / contraído / intermedio.

Answer 6

Parece que el efecto de onda sigue ahí pero el color de la onda ha cambiado. No estoy seguro de cuál es tu problema, pero esto es lo que veo.

Te sugiero que elimines

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

Desde su código y ejecútelo de nuevo. Si las ondas no se muestran (deberían), cambie el color de acento.