Personalización de la toolbar y sus botones de acción...
177 views
Skip to first unread message
Gilberto Cuba Ricardo
Aug 9, 2015, 9:34:59 AM8/9/15
to Desarrolladores Android
Hola colegas,
Tengo varios días de enredo con esto de los estilos que nunca me han
tratado bien, y acá en la lista no veo que se hable mucho de eso. En
internet es bien escaso el contenido sobre mi problema y no sé ya por
dónde ni cómo buscar, de ahí que acepte cualquier idea, código fuente
con comportamiento similar al que deseo o recomendación de lectura o
ejemplo para resolver el problema.
La cuestión es de índole visual y se puede percibir en la imagen que
adjunto al mensaje. Este comportamiento se produce cuando dejo
presionado de forma prolongada el botón de compartir de la barra de
acciones, y el sistema muestra el título, mensaje de ayuda o tooltip
de este. Lo deseado es que salga ese diálogo de un color completo,
verde oscuro, igual que la barra de acciones, y no con ese borde en
negro como sale ahora.
Esto sucede al personalizar un componente toolbar que he sustituido
por la action bar regular. Como se ve en la imagen, he cambiado el
color de fondo, el del texto, y el del menú flotante que no se
muestran en la imagen pero que sale bien.
El contenido del archivo de estilos ('styles.xml') que está en la
carpeta por defecto 'values' es el siguiente:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<!-- used for the default action bar background -->
<item name="colorPrimary">@color/primary_color</item>
<!-- used for the status bar -->
<item name="colorPrimaryDark">@color/primary_color_dark</item>
<!-- used as the default value for colorControlActivated which
is used to tint widgets -->
<item name="colorAccent">@color/accent_color</item>
<item name="colorControlNormal">@color/primary_color</item>
<item name="colorControlActivated">@color/accent_color</item>
<item name="colorControlHighlight">@color/accent_color</item>
<!-- toolbar + overflow menu text color -->
<item name="android:textColorPrimary">@color/primary_text_color</item>
<!-- overflow menu button color -->
<item name="android:textColorSecondary">@color/text_icons_color</item>
<item name="android:windowBackground">@color/background_color</item>
<item name="android:textColor">@color/primary_text_color</item>
<item name="android:colorBackground">@color/primary_color</item>
<item name="android:itemTextAppearance">@style/Toolbar.Menu</item>
<item name="popupMenuStyle">@style/Toolbar.Menu</item>
<item name="actionMenuTextColor">@style/Toolbar.Menu</item>
</style>
<style name="Toolbar" parent="ThemeOverlay.AppCompat.ActionBar">
<item name="color">@color/primary_color_dark</item>
<item name="android:colorBackground">@color/primary_color_dark</item>
<!-- color of the Toolbar -->
<item name="android:background">@color/primary_color_dark</item>
<!-- used to for the title of the Toolbar when parent is
Theme.AppCompat.Light -->
<item name="android:textColorPrimaryInverse">@color/highlighted_color</item>
<!-- used to for the title of the Toolbar -->
<item name="android:textColorPrimary">@color/text_icons_color</item>
<!-- used to color the text of the action menu icons -->
<item name="android:textColorSecondary">@color/secondary_text_color</item>
<!-- used to color the overflow menu icon -->
<item name="actionMenuTextColor">@color/light_primary_color</item>
<item name="popupTheme">@style/AppTheme.ActionBar.Popup</item>
</style>
<style name="Toolbar.Menu"
parent="@android:style/TextAppearance.Widget.IconMenu.Item">
<!-- used to color the overflow menu options -->
<item name="android:textColor">@color/text_icons_color</item>
<!-- color of the Toolbar -->
<item name="android:background">@color/primary_color_dark</item>
<!-- used to for the title of the Toolbar -->
<item name="android:textColorPrimary">@color/text_icons_color</item>
<!-- used to color the text of the action menu icons -->
<item name="android:textColorSecondary">@color/secondary_text_color</item>
<item name="android:textColorPrimaryInverse">@color/text_icons_color</item>
</style>
<style name="AppTheme.ActionBar.Popup"
parent="Widget.AppCompat.Light.PopupMenu.Overflow">
<item name="android:background">?attr/colorPrimary</item>
</style>
</resources>
y los colores a los que se refieren ahí están definidos en el archivo
de colores. El componente toolbar tiene definido además el estilo
Toolbar que aparece arriba declarado; tal y como muestro a
continuación:
...
<android.support.v7.widget.Toolbar
app:theme="@style/Toolbar"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
/>
...
También he aislado el problema para un proyecto aparte por si alguien
quiere que lo adjunte por acá para jugar y probar un rato. :)
He mirado además en los estilos que aparecen definidos en el appcompat
(sdk\extras\android\support\v7\appcompat\res\values\*.xml), la cual
uso (v7), pero no sé cómo interpretar de aquí lo que necesito, tal vez
alguien me echa un cable ahí :)
En internet lo más cercano que he encontrado es esto:
http://stackoverflow.com/questions/28168093/android-tooltip-menu-item-style
http://stackoverflow.com/questions/26672666/android-actionbar-custom-action-view-tool-tip
pero no me sirve (o al menos eso pienso :D), porque el action que he
incluido ha sido agregado por defecto e menu, y no personalizado como
mencionan en ellos. Además, tampoco he sabido cómo obtener el
onLongClick de ese botón que se agrega a la toolbar (si fuera un
button o imagebutton).
Por último, este problema se manifiesta en todas las versiones desde
la API 10 para arriba en las que he probado.
Disculpen por lo extendido del mensaje, pero me pareció adecuado
brindar la mayor cantidad de información posible para que me puedan
ayudar ;)
Gracias por la lectura anticipada.
--
Saludos,
Gilberto Cuba
Tengo varios días de enredo con esto de los estilos que nunca me han
tratado bien, y acá en la lista no veo que se hable mucho de eso. En
internet es bien escaso el contenido sobre mi problema y no sé ya por
dónde ni cómo buscar, de ahí que acepte cualquier idea, código fuente
con comportamiento similar al que deseo o recomendación de lectura o
ejemplo para resolver el problema.
La cuestión es de índole visual y se puede percibir en la imagen que
adjunto al mensaje. Este comportamiento se produce cuando dejo
presionado de forma prolongada el botón de compartir de la barra de
acciones, y el sistema muestra el título, mensaje de ayuda o tooltip
de este. Lo deseado es que salga ese diálogo de un color completo,
verde oscuro, igual que la barra de acciones, y no con ese borde en
negro como sale ahora.
Esto sucede al personalizar un componente toolbar que he sustituido
por la action bar regular. Como se ve en la imagen, he cambiado el
color de fondo, el del texto, y el del menú flotante que no se
muestran en la imagen pero que sale bien.
El contenido del archivo de estilos ('styles.xml') que está en la
carpeta por defecto 'values' es el siguiente:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<!-- used for the default action bar background -->
<item name="colorPrimary">@color/primary_color</item>
<!-- used for the status bar -->
<item name="colorPrimaryDark">@color/primary_color_dark</item>
<!-- used as the default value for colorControlActivated which
is used to tint widgets -->
<item name="colorAccent">@color/accent_color</item>
<item name="colorControlNormal">@color/primary_color</item>
<item name="colorControlActivated">@color/accent_color</item>
<item name="colorControlHighlight">@color/accent_color</item>
<!-- toolbar + overflow menu text color -->
<item name="android:textColorPrimary">@color/primary_text_color</item>
<!-- overflow menu button color -->
<item name="android:textColorSecondary">@color/text_icons_color</item>
<item name="android:windowBackground">@color/background_color</item>
<item name="android:textColor">@color/primary_text_color</item>
<item name="android:colorBackground">@color/primary_color</item>
<item name="android:itemTextAppearance">@style/Toolbar.Menu</item>
<item name="popupMenuStyle">@style/Toolbar.Menu</item>
<item name="actionMenuTextColor">@style/Toolbar.Menu</item>
</style>
<style name="Toolbar" parent="ThemeOverlay.AppCompat.ActionBar">
<item name="color">@color/primary_color_dark</item>
<item name="android:colorBackground">@color/primary_color_dark</item>
<!-- color of the Toolbar -->
<item name="android:background">@color/primary_color_dark</item>
<!-- used to for the title of the Toolbar when parent is
Theme.AppCompat.Light -->
<item name="android:textColorPrimaryInverse">@color/highlighted_color</item>
<!-- used to for the title of the Toolbar -->
<item name="android:textColorPrimary">@color/text_icons_color</item>
<!-- used to color the text of the action menu icons -->
<item name="android:textColorSecondary">@color/secondary_text_color</item>
<!-- used to color the overflow menu icon -->
<item name="actionMenuTextColor">@color/light_primary_color</item>
<item name="popupTheme">@style/AppTheme.ActionBar.Popup</item>
</style>
<style name="Toolbar.Menu"
parent="@android:style/TextAppearance.Widget.IconMenu.Item">
<!-- used to color the overflow menu options -->
<item name="android:textColor">@color/text_icons_color</item>
<!-- color of the Toolbar -->
<item name="android:background">@color/primary_color_dark</item>
<!-- used to for the title of the Toolbar -->
<item name="android:textColorPrimary">@color/text_icons_color</item>
<!-- used to color the text of the action menu icons -->
<item name="android:textColorSecondary">@color/secondary_text_color</item>
<item name="android:textColorPrimaryInverse">@color/text_icons_color</item>
</style>
<style name="AppTheme.ActionBar.Popup"
parent="Widget.AppCompat.Light.PopupMenu.Overflow">
<item name="android:background">?attr/colorPrimary</item>
</style>
</resources>
y los colores a los que se refieren ahí están definidos en el archivo
de colores. El componente toolbar tiene definido además el estilo
Toolbar que aparece arriba declarado; tal y como muestro a
continuación:
...
<android.support.v7.widget.Toolbar
app:theme="@style/Toolbar"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
/>
...
También he aislado el problema para un proyecto aparte por si alguien
quiere que lo adjunte por acá para jugar y probar un rato. :)
He mirado además en los estilos que aparecen definidos en el appcompat
(sdk\extras\android\support\v7\appcompat\res\values\*.xml), la cual
uso (v7), pero no sé cómo interpretar de aquí lo que necesito, tal vez
alguien me echa un cable ahí :)
En internet lo más cercano que he encontrado es esto:
http://stackoverflow.com/questions/28168093/android-tooltip-menu-item-style
http://stackoverflow.com/questions/26672666/android-actionbar-custom-action-view-tool-tip
pero no me sirve (o al menos eso pienso :D), porque el action que he
incluido ha sido agregado por defecto e menu, y no personalizado como
mencionan en ellos. Además, tampoco he sabido cómo obtener el
onLongClick de ese botón que se agrega a la toolbar (si fuera un
button o imagebutton).
Por último, este problema se manifiesta en todas las versiones desde
la API 10 para arriba en las que he probado.
Disculpen por lo extendido del mensaje, pero me pareció adecuado
brindar la mayor cantidad de información posible para que me puedan
ayudar ;)
Gracias por la lectura anticipada.
--
Saludos,
Gilberto Cuba
Gabriel Pozo
Aug 9, 2015, 10:04:58 AM8/9/15
to Desarrolladores Android
Podrías colgar tu proyecto (sólo el código que contiene el action bar y su estilo) para poder verlo?
Podrías ver esto también:
http://stackoverflow.com/questions/19659637/how-to-change-the-background-color-of-action-bars-option-menu-in-android-4-2
http://stackoverflow.com/questions/19447657/actionbar-menu-item-background-on-select
--
Para participar es necesario que leas detenidamente las normas del grupo: http://goo.gl/8h8ez2
---
Has recibido este mensaje porque estás suscrito al grupo "desarrolladores-android" de Grupos de Google.
Para anular la suscripción a este grupo y dejar de recibir sus mensajes, envía un correo electrónico a desarrolladores-a...@googlegroups.com.
Para publicar una entrada en este grupo, envía un correo electrónico a desarrollad...@googlegroups.com.
Visita este grupo en http://groups.google.com/group/desarrolladores-android.
Para ver este debate en la Web, visita https://groups.google.com/d/msgid/desarrolladores-android/CADQYGtJpJ7_3zmB2YKX%2B5EaZLBU0RhKT6uwWLxCuSFTR3j657A%40mail.gmail.com.
Para obtener más opciones, visita https://groups.google.com/d/optout.
Gilberto Cuba Ricardo
Aug 9, 2015, 10:45:32 AM8/9/15
to desarrollad...@googlegroups.com
Gracias por contestar Gabriel. :)
El 9/8/15, Gabriel Pozo <jack...@gmail.com> escribió:
con la toolbar.
Además tiene una acción el mismo botón, que dispara un toast
personalizado al que se le cambia el background, y un progress dialog
al que estoy viendo también cómo cambiarle su color de fondo, ya que
en el API 10 solamente, sale con colores negros. Ambas adiciones no
intervienen en el código y estilización del botón de la action bar.
https://mega.co.nz/#!fZtWXRLQ!qxnKbVlCVKHiYkf9Q3pZLE3BUxqL3kygHLE1AHrDVIc
> Podrías ver esto también:
> http://stackoverflow.com/questions/19659637/how-to-change-the-background-color-of-action-bars-option-menu-in-android-4-2
> http://stackoverflow.com/questions/19447657/actionbar-menu-item-background-on-select
>
> http://scriptedpapers.com/2015/02/12/android-action-bar-and-overflow-menu-customization-with-theme-appcompat/
Reviso y en breve os cuento que he podido sacar en claro.
Nuevamente las gracias.
--
Saludos,
Gilberto Cuba
El 9/8/15, Gabriel Pozo <jack...@gmail.com> escribió:
> Podrías colgar tu proyecto (sólo el código que contiene el action bar y su
> estilo) para poder verlo?
Acá está el proyecto colgado, solamente con los estilos que puse aquí
> estilo) para poder verlo?
con la toolbar.
Además tiene una acción el mismo botón, que dispara un toast
personalizado al que se le cambia el background, y un progress dialog
al que estoy viendo también cómo cambiarle su color de fondo, ya que
en el API 10 solamente, sale con colores negros. Ambas adiciones no
intervienen en el código y estilización del botón de la action bar.
https://mega.co.nz/#!fZtWXRLQ!qxnKbVlCVKHiYkf9Q3pZLE3BUxqL3kygHLE1AHrDVIc
> Podrías ver esto también:
> http://stackoverflow.com/questions/19659637/how-to-change-the-background-color-of-action-bars-option-menu-in-android-4-2
> http://stackoverflow.com/questions/19447657/actionbar-menu-item-background-on-select
>
> http://scriptedpapers.com/2015/02/12/android-action-bar-and-overflow-menu-customization-with-theme-appcompat/
Nuevamente las gracias.
--
Saludos,
Gilberto Cuba
Gilberto Cuba Ricardo
Aug 10, 2015, 9:12:45 AM8/10/15
to desarrollad...@googlegroups.com
Hola nuevamente colegas,
Lamentablemente las noticias son malas.
Mire y remiré todo en los posts que me pasó Gabriel; sin embargo, no
pude sacar nada en concreto que me ayudara. Incluso pude notar, que
mucho de ellos no logran cambiarle el color a los menu de la barra de
acciones y al menos eso logro hacerlo por acá, ambos menús inclusive
(el que sale desde los tres puntos por arriba, y el que sale desde
abajo al presionar la tecla de menú)
No obstante a todo esto, mirando el sitio proyecto que me genera los
recursos para un estilo que pueda definir
(http://jgilfelt.github.io/android-actionbarstylegenerator/), he
podido ver otros horizontes, y me da la sospecha que ese marco en
negro que sale alrededor del tooltip, pudiera ser una imagen
Nine-Patch. Tal vez digo locuras, pero esto fue lo que vi.
Sigo abierto a cualquier nueva sugerencia :D e igual sigo probando e
investigando a ver si logro algo, aunque se me están acabando las
alternativas de por dónde mirar.
Gracias.
El 9/8/15, Gilberto Cuba Ricardo <gcuba...@gmail.com> escribió:
--
Saludos,
Gilberto Cuba
Lamentablemente las noticias son malas.
Mire y remiré todo en los posts que me pasó Gabriel; sin embargo, no
pude sacar nada en concreto que me ayudara. Incluso pude notar, que
mucho de ellos no logran cambiarle el color a los menu de la barra de
acciones y al menos eso logro hacerlo por acá, ambos menús inclusive
(el que sale desde los tres puntos por arriba, y el que sale desde
abajo al presionar la tecla de menú)
No obstante a todo esto, mirando el sitio proyecto que me genera los
recursos para un estilo que pueda definir
(http://jgilfelt.github.io/android-actionbarstylegenerator/), he
podido ver otros horizontes, y me da la sospecha que ese marco en
negro que sale alrededor del tooltip, pudiera ser una imagen
Nine-Patch. Tal vez digo locuras, pero esto fue lo que vi.
Sigo abierto a cualquier nueva sugerencia :D e igual sigo probando e
investigando a ver si logro algo, aunque se me están acabando las
alternativas de por dónde mirar.
Gracias.
El 9/8/15, Gilberto Cuba Ricardo <gcuba...@gmail.com> escribió:
Saludos,
Gilberto Cuba
Reply all
Reply to author
Forward
0 new messages