Cambiar el color de la barra de herramientas en Appcompat 21


93

Estoy probando las nuevas funciones de Appcompat 21 Material Design. Por lo tanto, he creado una barra de herramientas como esta:

<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/activity_my_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="@style/ThemeOverlay.AppCompat.ActionBar"/>

y lo incluí en mi archivo de diseño principal.

Luego lo configuré como supportActionBar así:

Toolbar toolBar = (Toolbar)findViewById(R.id.activity_my_toolbar);
setSupportActionBar(toolBar);

Está funcionando, pero de alguna manera no puedo entender cómo personalizar la barra de herramientas. Es gris y el texto es negro. ¿Cómo debo cambiar el fondo y el color del texto?

He seguido estas instrucciones:

http://android-developers.blogspot.de/2014/10/appcompat-v21-material-design-for-pre.html

¿Qué he supervisado para cambiar de color?

 <style name="AppTheme" parent="Theme.AppCompat.Light">
    <item name="android:windowActionBar" tools:ignore="NewApi">false</item>
    <item name="windowActionBar">false</item>
</style>

EDITAR :

Pude cambiar el color de fondo agregando estas líneas de código al tema:

<item name="colorPrimary">@color/actionbar</item>
<item name="colorPrimaryDark">@color/actionbar_dark</item>

Pero no afectarán el color del texto. ¿Qué me estoy perdiendo? En lugar del texto negro y el botón de menú negro, prefiero un texto blanco y botones de menú blancos:

ingrese la descripción de la imagen aquí


¿Cómo se ve tu tema para la actividad? ¿Estableciste tu color para la barra de herramientas allí como deberías?
tyczj

@tyczj Estoy agregando el tema a mi publicación
user2410644

está bien, hay una respuesta que no establece sus colores
tyczj

@tyczj, Sí, he vuelto a editar mi publicación, agregué color primario y color oscuro primario, pero ¿qué atributo cambia el color del texto?
user2410644

Respuestas:


185

de nuevo, todo esto está en el enlace que proporcionaste

para cambiar el texto a blanco todo lo que tiene que hacer es cambiar el tema.

usa este tema

<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/activity_my_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

4
Sí, acabo de notar lo mismo, de repente fue confuso que la barra de acción oscura tuviera texto claro y la barra de acción clara texto oscuro ... ¡Gracias!
user2410644

4
He hecho esto, pero todavía tengo la fuente de color negro, ¿me faltaba algo?
alijandro

6
Entonces, parece que @ style / ThemeOverlay.AppCompat.Dark.ActionBar en la aplicación: el tema cambia el texto de la barra de herramientas a blanco y @ style / ThemeOverlay.AppCompat.Light lo cambia a negro. El color de fondo se elige de android: atributo de fondo. Mientras que en la aplicación: popupTheme: @ style / ThemeOverlay.AppCompat.Dark da texto blanco y fondo negro y @ style / ThemeOverlay.AppCompat.Light da texto negro y fondo blanco. gist.github.com/mnemonicflow/7cba09f6461ec86b22b7
bitek

1
¡Gracias! : D google realmente se equivocó con el estilo de la barra de herramientas en Android. El hecho de que esta pregunta tenga 50 votos a favor y 22 aperturas es prueba de ello.
FRR

1
Si el título aún permanece negro después de configurar los estilos. Asegúrate de extender en AppCompatActivitylugar de Activity.
stefana

60

ACTUALIZACIÓN 11/12/2019: Biblioteca de componentes de materiales

Con las bibliotecas de Material Components y Androidx puede usar:

  • el android:backgroundatributo en el diseño:

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
  • aplicar el estilo predeterminado: style="@style/Widget.MaterialComponents.Toolbar.Primary"o personalizar el estilo heredado de él:

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        style="@style/Widget.MaterialComponents.Toolbar.Primary"
  • anule el color predeterminado usando el android:themeatributo:

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:theme="@style/MyThemeOverlay_Toolbar"

con:

  <style name="MyThemeOverlay_Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
    <item name="android:textColorPrimary">....</item>
    <item name="colorPrimary">@color/.....
    <item name="colorOnPrimary">@color/....</item>
  </style>

ANTIGUO: Bibliotecas de soporte:
puede usar un app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"tema como se sugiere en otras respuestas, pero también puede usar una solución como esta:

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    style="@style/HeaderBar"
    app:theme="@style/ActionBarThemeOverlay"
    app:popupTheme="@style/ActionBarPopupThemeOverlay"/>

Y puede tener el control total de sus elementos de interfaz de usuario con estos estilos:

<style name="ActionBarThemeOverlay" parent="">
    <item name="android:textColorPrimary">#fff</item>
    <item name="colorControlNormal">#fff</item>
    <item name="colorControlHighlight">#3fff</item>
</style>

<style name="HeaderBar">
    <item name="android:background">?colorPrimary</item>
</style>

<style name="ActionBarPopupThemeOverlay" parent="ThemeOverlay.AppCompat.Light" >
    <item name="android:background">@android:color/white</item>
    <item name="android:textColor">#000</item>
</style>

Esto no funciona para mi. El menú emergente todavía tiene un fondo negro con texto blanco
Sunkas

1
No es útil. Requiere un nivel mínimo de API de 21
Vaibhav Gupta

3
@VaibhavGupta Appcompat requiere minSdk = 7 no 21.
Gabriele Mariotti

10

Oye, si quieres aplicar el tema Material solo para Android 5.0, puedes agregar este tema en él

<style name="AppHomeTheme" parent="@android:style/Theme.Material.Light">

        <!-- customize the color palette -->
        <item name="android:colorPrimary">@color/blue_dark_bg</item>
        <item name="android:colorPrimaryDark">@color/blue_status_bar</item>
        <item name="android:colorAccent">@color/blue_color_accent</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="android:textColorPrimary">@android:color/white</item>
        <item name="android:actionMenuTextColor">@android:color/black</item>
    </style> 

A continuación, la línea es responsable del color del texto de Actionbar of Material design.

<item name="android:textColorPrimary">@android:color/white</item>

6

Puede establecer un color de elemento de barra de herramientas personalizado dinámicamente creando una clase de barra de herramientas personalizada:

package view;

import android.app.Activity;
import android.content.Context;
import android.graphics.ColorFilter;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffColorFilter;
import android.support.v7.internal.view.menu.ActionMenuItemView;
import android.support.v7.widget.ActionMenuView;
import android.support.v7.widget.Toolbar;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AutoCompleteTextView;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.TextView;

public class CustomToolbar extends Toolbar{

    public CustomToolbar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // TODO Auto-generated constructor stub
    }

    public CustomToolbar(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
    }

    public CustomToolbar(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
        ctxt = context;
    }

    int itemColor;
    Context ctxt;

    @Override 
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        Log.d("LL", "onLayout");
        super.onLayout(changed, l, t, r, b);
        colorizeToolbar(this, itemColor, (Activity) ctxt);
    } 

    public void setItemColor(int color){
        itemColor = color;
        colorizeToolbar(this, itemColor, (Activity) ctxt);
    }



    /**
     * Use this method to colorize toolbar icons to the desired target color
     * @param toolbarView toolbar view being colored
     * @param toolbarIconsColor the target color of toolbar icons
     * @param activity reference to activity needed to register observers
     */
    public static void colorizeToolbar(Toolbar toolbarView, int toolbarIconsColor, Activity activity) {
        final PorterDuffColorFilter colorFilter
                = new PorterDuffColorFilter(toolbarIconsColor, PorterDuff.Mode.SRC_IN);

        for(int i = 0; i < toolbarView.getChildCount(); i++) {
            final View v = toolbarView.getChildAt(i);

            doColorizing(v, colorFilter, toolbarIconsColor);
        }

      //Step 3: Changing the color of title and subtitle.
        toolbarView.setTitleTextColor(toolbarIconsColor);
        toolbarView.setSubtitleTextColor(toolbarIconsColor);
    }

    public static void doColorizing(View v, final ColorFilter colorFilter, int toolbarIconsColor){
        if(v instanceof ImageButton) {
            ((ImageButton)v).getDrawable().setAlpha(255);
            ((ImageButton)v).getDrawable().setColorFilter(colorFilter);
        }

        if(v instanceof ImageView) {
            ((ImageView)v).getDrawable().setAlpha(255);
            ((ImageView)v).getDrawable().setColorFilter(colorFilter);
        }

        if(v instanceof AutoCompleteTextView) {
            ((AutoCompleteTextView)v).setTextColor(toolbarIconsColor);
        }

        if(v instanceof TextView) {
            ((TextView)v).setTextColor(toolbarIconsColor);
        }

        if(v instanceof EditText) {
            ((EditText)v).setTextColor(toolbarIconsColor);
        }

        if (v instanceof ViewGroup){
            for (int lli =0; lli< ((ViewGroup)v).getChildCount(); lli ++){
                doColorizing(((ViewGroup)v).getChildAt(lli), colorFilter, toolbarIconsColor);
            }
        }

        if(v instanceof ActionMenuView) {
            for(int j = 0; j < ((ActionMenuView)v).getChildCount(); j++) {

                //Step 2: Changing the color of any ActionMenuViews - icons that
                //are not back button, nor text, nor overflow menu icon.
                final View innerView = ((ActionMenuView)v).getChildAt(j);

                if(innerView instanceof ActionMenuItemView) {
                    int drawablesCount = ((ActionMenuItemView)innerView).getCompoundDrawables().length;
                    for(int k = 0; k < drawablesCount; k++) {
                        if(((ActionMenuItemView)innerView).getCompoundDrawables()[k] != null) {
                            final int finalK = k;

                            //Important to set the color filter in seperate thread, 
                            //by adding it to the message queue
                            //Won't work otherwise. 
                            //Works fine for my case but needs more testing

                            ((ActionMenuItemView) innerView).getCompoundDrawables()[finalK].setColorFilter(colorFilter);

//                              innerView.post(new Runnable() {
//                                  @Override
//                                  public void run() {
//                                      ((ActionMenuItemView) innerView).getCompoundDrawables()[finalK].setColorFilter(colorFilter);
//                                  }
//                              });
                        }
                    }
                }
            }
        }
    }



}

luego consúltelo en su archivo de diseño. Ahora puede establecer un color personalizado usando

toolbar.setItemColor(Color.Red);

Fuentes:

Encontré la información para hacer esto aquí: Cómo cambiar dinámicamente el color de los iconos de la barra de herramientas de Android

y luego lo edité , lo mejoré y lo publiqué aquí: GitHub: AndroidDynamicToolbarItemColor


5

Esto es lo que se conoce como DarkActionBar, lo que significa que debe usar el siguiente tema para obtener el estilo deseado:

<android.support.v7.widget.Toolbar  
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="@dimen/triple_height_toolbar"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

2

Puede cambiar el color del texto en la barra de herramientas con estos:

<item name="android:textColorPrimary">#FFFFFF</item>
<item name="android:textColor">#FFFFFF</item>

2

Logre esto usando algo toolbarasí:

<android.support.v7.widget.Toolbar
        android:id="@+id/base_toolbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

1

Pruebe esto en su styles.xml:

colorPrimary será el color de la barra de herramientas.

<resources>

<style name="AppTheme" parent="Theme.AppCompat">
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_pressed</item>
    <item name="colorAccent">@color/accent</item>
</style>

¿Construiste esto en Eclipse por cierto?


1

Resolví este problema después de más Estudio ...

para Api21 y más uso

   <item name="android:textColorPrimary">@color/white</item>

para uso en versiones inferiores

   <item name="actionMenuTextColor">@color/white</item>

1

Si desea cambiar el color de la barra de herramientas en toda su aplicación, aproveche styles.xml. En general, evito alterar los componentes de la interfaz de usuario en mi código Java a menos que esté intentando hacer algo programáticamente. Si se trata de una configuración única, debería hacerlo en xml para que su código sea más limpio. Así es como se verá su styles.xml:

    <!-- Base application theme. -->
<style name="YourAppName.AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Color Primary will be your toolbar color -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <!-- Color Primary Dark will be your default status bar color -->
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
</style>

Asegúrese de utilizar el estilo anterior en su AndroidManifext.xml como tal:

    <application
        android:theme="@style/YourAppName.AppTheme">
    </application>

Quería diferentes colores de barra de herramientas para diferentes actividades. Así que aproveché los estilos nuevamente así:

    <style name="YourAppName.AppTheme.Activity1">
    <item name="colorPrimary">@color/activity1_primary</item>
    <item name="colorPrimaryDark">@color/activity1_primaryDark</item>
</style>

<style name="YourAppName.AppTheme.Activity2">
    <item name="colorPrimary">@color/activity2_primary</item>
    <item name="colorPrimaryDark">@color/activity2_primaryDark</item>
</style>

nuevamente, aplique los estilos a cada actividad en su AndroidManifest.xml como tal:

<activity
    android:name=".Activity2"
    android:theme="@style/YourAppName.AppTheme.Activity2"
</activity>

<activity
    android:name=".Activity1"
    android:theme="@style/YourAppName.AppTheme.Activity1"
</activity>

0

Para las personas que utilizan AppCompatActivity con la barra de herramientas como fondo blanco. Utilice este código.

Actualizado: diciembre de 2017

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:theme="@style/ThemeOverlay.AppCompat.Light">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_edit"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:popupTheme="@style/AppTheme.AppBarOverlay"
        app:title="Edit Your Profile"/>

</android.support.design.widget.AppBarLayout>

1
¿Cuál es la diferencia con una barra de herramientas predeterminada?
CoolMind
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.