¿Cómo configurar el color / estilo de ActionBar personalizado?

Respuestas:

174

Puede definir el color de la ActionBar (y otras cosas) creando un estilo personalizado :

Simplemente edite el archivo res / values ​​/ styles.xml de su proyecto de Android.

Por ejemplo así:

<resources>
    <style name="MyCustomTheme" parent="@android:style/Theme.Holo.Light">
        <item name="android:actionBarStyle">@style/MyActionBarTheme</item>
    </style>

    <style name="MyActionBarTheme" parent="@android:style/Widget.Holo.Light.ActionBar">
        <item name="android:background">ANY_HEX_COLOR_CODE</item>
    </style>
</resources>

Luego, configure "MyCustomTheme" como el tema de su actividad que contiene la barra de acciones.

También puede establecer un color para ActionBar como este:

ActionBar actionBar = getActionBar();
actionBar.setBackgroundDrawable(new ColorDrawable(Color.RED)); // set your desired color

Tomado de aquí: ¿Cómo cambio el color de fondo de la ActionBar de una ActionBarActivity usando XML?

Philipp Jahoda
fuente
2
¿Qué quiere decir con "Luego configure" MyCustomTheme "como el tema de su actividad que contiene la barra de acciones". ¿Cómo puedo hacer eso?
Kala J
2
En el XML de su actividad, debe agregar android: theme = "@ style / MyCustomTheme" como parámetro dentro de la etiqueta <android.support.v4.view.ViewPager ... />
PedroD
2
¿Qué pasa con los archivos valuesv14 y valuesv21 styles.xml restantes en Android?
Harsha
¿Cómo se puede cambiar el estilo de texto del título?
Adam Hurwitz
@KalaJ usa setTheme(R.style.MyCustomTheme) en el método onCreate de tu actividad.
NullByte08
57

En general, el sistema operativo Android aprovecha un "tema" para permitir a los desarrolladores de aplicaciones aplicar globalmente un conjunto universal de parámetros de estilo de elementos de la interfaz de usuario a las aplicaciones de Android en su conjunto o, alternativamente, a una sola subclase de actividad.

Por lo tanto, hay tres "temas del sistema" principales del sistema operativo Android, que puede especificar en su archivo XML Manifest de Android cuando esté desarrollando aplicaciones para la versión 3.0 y versiones posteriores.

Me refiero a la biblioteca de soporte (APPCOMPAT) aquí: - Entonces, los tres temas son 1. Tema AppCompat Light (Theme.AppCompat.Light)

ingrese la descripción de la imagen aquí

  1. Tema oscuro de AppCompat (Theme.AppCompat),

ingrese la descripción de la imagen aquí

  1. Y un híbrido entre estos dos, AppCompat Light Theme con Darker ActionBar. (Theme.AppCompat.Light.DarkActionBar)

AndroidManifest.xml y vea la etiqueta, el tema de Android se menciona como: - android: theme = "@ style / AppTheme"

Abra Styles.xml y tenemos el tema de la aplicación base declarado allí: -

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
  </style>

Necesitamos anular estos elementos del tema principal para diseñar la barra de acciones.

ActionBar con fondo de color diferente: -

Para hacer esto, necesitamos crear un nuevo estilo MyActionBar (puede dar cualquier nombre) con una referencia principal a @ style / Widget.AppCompat.Light.ActionBar.Solid.Inverse que contiene las características de estilo para el elemento de la interfaz de usuario de Android ActionBar. Entonces la definición sería

<style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
    <item name="background">@color/red</item>
</style>

Y esta definición necesitamos hacer referencia en nuestro AppTheme, apuntando al estilo de ActionBar anulado como--

@ style / MyActionBar ActionBar con color de fondo rosa

Cambiar el color del texto de la barra de título (por ejemplo, de negro a blanco): -

Ahora, para cambiar el color del texto del título, debemos anular la referencia principal parent = "@ style / TextAppearance.AppCompat.Widget.ActionBar.Title">

Entonces la definición de estilo sería

<style name="MyActionBarTitle" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
    <item name="android:textColor">@color/white</item>
</style>

Haremos referencia a esta definición de estilo dentro de la definición de estilo MyActionBar , ya que la modificación TitleTextStyle es un elemento secundario de un elemento de la interfaz de usuario del sistema operativo principal de ActionBar. Entonces, la definición final del elemento de estilo MyActionBar será

<style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
    <item name="background">@color/red</item>
    <item name="titleTextStyle">@style/MyActionBarTitle</item>
</style>

Así que este es el Styles.xml final

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <!-- This is the styling for action bar -->
        <item name="actionBarStyle">@style/MyActionBar</item>
    </style>

    <style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
        <item name="background">@color/red</item>
        <item name="titleTextStyle">@style/MyActionBarTitle</item>
    </style>

    <style name="MyActionBarTitle" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="android:textColor">@color/white</item>
    </style>
</resources>

ActionBar Con color de título blanco Para obtener más opciones de estilo de menú de ActionBar, consulte este enlace

Mellas
fuente
2
hey hombre funcionó. una duda, ¿qué pasa si quiero cambiar el color del icono de desbordamiento del menú, cambia el color de acuerdo con nuestro tema, verdad? icono blanco para el tema oscuro e icono oscuro para el tema claro, ¿cómo puedo cambiarlo a blanco? considere la última imagen en su respuesta.
Ameen Maheen
33

Solo para Android 3.0 y superior

Cuando solo es compatible con Android 3.0 y versiones posteriores, puede definir el fondo de la barra de acción de esta manera:

res / valores / themes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme" parent="@style/Theme.Holo.Light.DarkActionBar">
       <item name="android:actionBarStyle">@style/MyActionBar</item>
    </style>

<!-- ActionBar styles -->
  <style name="MyActionBar" parent="@style/Widget.Holo.Light.ActionBar.Solid.Inverse">
       <item name="android:background">#ff0000</item>
  </style>
</resources>

Para Android 2.1 y superior

Cuando utilice la biblioteca de soporte, su archivo XML de estilo podría verse así:

<?xml version="1.0" encoding="utf-8"?>
  <resources>
  <!-- the theme applied to the application or activity -->
 <style name="CustomActionBarTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">
    <item name="android:actionBarStyle">@style/MyActionBar</item>

    <!-- Support library compatibility -->
    <item name="actionBarStyle">@style/MyActionBar</item>
</style>

<!-- ActionBar styles -->
<style name="MyActionBar"
       parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
    <item name="android:background">@drawable/actionbar_background</item>

    <!-- Support library compatibility -->
    <item name="background">@drawable/actionbar_background</item>
  </style>
 </resources>

Luego aplique su tema a toda su aplicación o actividades individuales:

para más detalles Documentaion

Ketan Ahir
fuente
Esto es extraño: le da a Android 3.0 y superior un estilo más antiguo (holo) que 2.1 y superior (Material Design / Appcompat) ...
Roel
@DalvikVM Sí ... Appcompat es para versiones anteriores. no es necesario utilizarlo para versiones superiores. En el momento de esta respuesta, el diseño de materiales no se introdujo.
Ketan Ahir
Recibo un error: No resource found that matches the given name '@style/Widget.Holo.Light.ActionBar.Solid.Inverse'.cambiarlo para android:style/Widget.Holo.Light.ActionBar.Solid.Inverseresolver el problema. Gracias.
Annie Lagang
@ style / Theme.AppCompat.Light.DarkActionBar no se puede resolver en mi caso (Android Studio). ¿No debería ser @android: style / Theme.AppCompat.Light.DarkActionBar, es decir, con un "android" antes del estilo?
AgentKnopf
32

Puede cambiar el color de la barra de acción de esta manera:

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

Eso es todo lo que necesita para cambiar el color de la barra de acción.

Además, si desea cambiar el color de la barra de estado, simplemente agregue la línea:

 <item name="android:colorPrimaryDark">@color/green_dark_action_bar</item>

Aquí hay una captura de pantalla tomada del sitio de Android del desarrollador para que sea más claro, y aquí hay un enlace para leer más sobre la personalización de la paleta de colores.

ingrese la descripción de la imagen aquí

Gjoko Bozinov
fuente
7

Otra posibilidad de hacer.

actionBar.setBackgroundDrawable (new ColorDrawable (Color.parseColor ("# 0000ff")));

Levi Saturnino
fuente
5

Puedo cambiar el color del texto de ActionBar usando titleTextColor

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="titleTextColor">#333333</item>
</style>
Yigit
fuente
3

Color personalizado:

 <style name="AppTheme" parent="Theme.AppCompat.Light">

                <item name="colorPrimary">@color/ColorPrimary</item>
                <item name="colorPrimaryDark">@color/ColorPrimaryDark</item>
                <!-- Customize your theme here. -->
     </style>

Estilo personalizado:

 <style name="Theme.AndroidDevelopers" parent="android:style/Theme.Holo.Light">
        <item name="android:selectableItemBackground">@drawable/ad_selectable_background</item>
        <item name="android:popupMenuStyle">@style/MyPopupMenu</item>
        <item name="android:dropDownListViewStyle">@style/MyDropDownListView</item>
        <item name="android:actionBarTabStyle">@style/MyActionBarTabStyle</item>
        <item name="android:actionDropDownStyle">@style/MyDropDownNav</item>
        <item name="android:listChoiceIndicatorMultiple">@drawable/ad_btn_check_holo_light</item>
        <item name="android:listChoiceIndicatorSingle">@drawable/ad_btn_radio_holo_light</item>
    </style>

Para más: Android ActionBar

Media Luna
fuente
2

Como estaba usando las AppCompatActivityrespuestas anteriores no funcionó para mí. Pero la siguiente solución funcionó:

En res / styles.xml

<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
</style>


PD: he usado en colorPrimarylugar deandroid:colorPrimary

zackygaurav
fuente
1

en style.xml agregue este código

<resources>
    <style name="MyTheme" parent="@android:style/Theme.Holo.Light">
        <item name="android:actionBarStyle">@style/MyAction</item>
    </style>

    <style name="MyActionBarTheme" parent="@android:style/Widget.Holo.Light.ActionBar">
        <item name="android:background">#333333</item>
    </style>
</resources>
Milaaaad
fuente
0

Utilice esto: http://jgilfelt.github.io/android-actionbarstylegenerator/

Buena herramienta para personalizar tu barra de acciones con una vista previa en vivo en un par de minutos.

chanu
fuente
1
Si bien este enlace puede responder a la pregunta, es mejor incluir las partes esenciales de la respuesta aquí y proporcionar el enlace como referencia. Las respuestas de solo enlace pueden dejar de ser válidas si cambia la página enlazada.
Roman Marusyk