Cómo cambiar el color del icono de inicio de la barra Google


108

Estoy usando una barra de herramientas android.support.v7.widget.Toolbar y aprendí de esta publicación cómo cambiar el color del icono de la hamburguesa a blanco, pero la flecha hacia arriba / atrás sigue siendo de color oscuro cuando llamo

setDisplayHomeAsUpEnabled(true);

¿Cómo puedo hacer que la flecha también sea blanca?

Así es como se ve mi barra de herramientas cuando llamo a setDisplayHomeAsUpEnabled ():

ingrese la descripción de la imagen aquí

... y aquí está la parte relevante de mi archivo styles.xml:

<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">#194C5F</item>
    <item name="colorAccent">@color/accent</item>
    <item name="drawerArrowStyle">@style/WhiteDrawerIconStyle</item>
</style>

    <style name="WhiteDrawerIconStyle" parent="Widget.AppCompat.DrawerArrowToggle">
        <item name="spinBars">true</item>
        <item name="color">@android:color/white</item>
    </style>

2
Puede usar el icono png de flecha blanca y reemplazarlo por uno negro.
Surender Kumar

1
Estoy tratando de evitar eso y solo indicar un color como estilo ... si esa es la única forma en que sé que puedo hacerlo a través de actionBarDrawerToggle.setHomeAsUpIndicator (R.drawable.arrow);
Joshua W

... también el png /com.android.support/appcompat-v7/21.0.3/res/drawable-xxxhdpi/abc_ic_ab_back_mtrl_am_alpha.png aparece en blanco
Joshua W

@JoshuaWitter Gracias, resolvió mi problema, ¿pueden ayudarme también a detectar el botón de clic en atrás? aquí está mi pregunta stackoverflow.com/questions/29138629/…
user2056563

1
@JoshuaWitter, incluso si es blanco, se tiñe. Cambiar el colorControlNormalvalor
osrl

Respuestas:


242

Lo resolví editando styles.xml:

<style name="ToolbarColoredBackArrow" parent="AppTheme">
    <item name="android:textColorSecondary">INSERT_COLOR_HERE</item>
</style>

... luego haciendo referencia al estilo en la definición de la barra de herramientas en la actividad:

<LinearLayout
    android:id="@+id/main_parent_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <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/toolbar"
        app:theme="@style/ToolbarColoredBackArrow"
        app:popupTheme="@style/AppTheme"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        android:background="?attr/colorPrimary"/>

13
También puede establecer en su colorControlNormallugarandroid:textColorSecondary
mbelsky

pero eso cambiará el color de todo el widget, ¿verdad? @mbelsky
Dr. aNdRO

3
@mbelsky Tenga en cuenta que requiere API nivel 21.
Francisco Romero

@ Error404: se agrega en el nivel de API 1 como se ve aquí
Mohamed Hatem Abdu

Hola a todos, he probado su código pero no obtengo el resultado requerido. En mi archivo toolbar.axml estoy configurado, el tema es android: theme=@style/ThemeOverlay.AppCompat.Dark.ActionBar y en mi archivo styles.axml escribí su código dado, pero el color del botón de retroceso de la barra de navegación no cambia.
Deepak

57

Esto es lo que busca. Pero esto también cambia el color de radioButton, etc. Así que es posible que desee utilizar un tema para ello.

<item name="colorControlNormal">@color/colorControlNormal</item>

11
Esta debería ser la respuesta aceptada. Esto logra lo que estaba buscando: <style name = "ActionBarTheme" parent = "ThemeOverlay.AppCompat.Dark.ActionBar"> <item name = "colorControlNormal"> ### COLOR ### </item> </style> aplique el tema directamente a la barra de herramientas.
Mavamaarten

1
El atributo padre es muy importante.
ataravati

36

Lo resolví programáticamente usando este código:

final Drawable upArrow = getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
upArrow.setColorFilter(Color.parseColor("#FFFFFF"), PorterDuff.Mode.SRC_ATOP);
getSupportActionBar().setHomeAsUpIndicator(upArrow);

Revisión 1:

A partir de API 23 (Marshmallow), el recurso dibujable abc_ic_ab_back_mtrl_am_alphase cambia a abc_ic_ab_back_material.


5
establezca este también. getSupportActionBar().setDisplayHomeAsUpEnabled(true);
Ishan Fernando

¿Funcionaría esto en un Fragment? Si es así, ¿dónde colocaría este código? ¿El OnCreateViewmétodo, la raíz de la clase o ...?
AndroidDevBro

1
@AndroidDevBro Sí, simplemente póngalo en la función OnCreate y recuerde actualizar el recurso como Nouman Tahir escribió en la revisión (usando R.drawable.abc_ic_ab_back_material en lugar de R.drawable.abc_ic_ab_back_mtrl_am_alpha) y obtener el SupportActionBar así: ((AppCompat) getActivity ()). getSupportActionBar (). setHomeAsUpIndicator (flecha arriba);
PayToPwn

14

Esta respuesta quizás sea demasiado tarde, pero así es como lo hago. Diseñar la barra de herramientas funcionará. Cree toolbar.xml con el siguiente código.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:layout_alignParentTop="true"
android:layout_gravity="bottom"
local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

y en styles.xml

<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!--
    -->
</style>

<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
    <item name="windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
</style>

Finalmente, incluya la barra de herramientas dentro del diseño

<include
        android:id="@+id/toolbar"
        layout="@layout/toolbar" />

1
pero no se hace referencia a AppTheme en ninguna parte. ¿Es esto un error tipográfico?
Henry

11

Cambie el tema de la barra de herramientas a ThemeOverlay.AppCompat.Dark

<?xml version="1.0" encoding="utf-8"?>
<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/navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:orientation="vertical"
    app:theme="@style/ThemeOverlay.AppCompat.Dark">

</android.support.v7.widget.Toolbar>

y ponerlo en actividad

mToolbar = (Toolbar) findViewById(R.id.navigation);
setSupportActionBar(mToolbar);

1
Me sorprendieron las otras respuestas, siempre uso este método
C.Skjerdal

9
   <!-- ToolBar -->
    <style name="ToolBarTheme.ToolBarStyle"    parent="ThemeOverlay.AppCompat.Dark.ActionBar">
        <item name="android:textColorPrimary">@android:color/white</item>
        <item name="android:textColor">@color/white</item>
        <item name="android:textColorPrimaryInverse">@color/white</item>
    </style>

Demasiado tarde para publicar, esto funcionó para cambiar el color del botón de retroceso


8

Bueno, hay una manera más fácil de hacer esto.

drawerToggle = new ActionBarDrawerToggle(this, drawer, toolbar, R.string.open_drawer, R.string.close_drawer);
arrow = drawerToggle.getDrawerArrowDrawable();

Y entonces

arrow.setColor(getResources().getColor(R.color.blue);

7

En lugar de cambios de estilo, simplemente coloque estas dos líneas de código en su actividad.

getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeAsUpIndicator(R.drawable.arrowleft);

6

Esta es mi solución:

toolbar.navigationIcon?.mutate()?.let {
  it.setTint(theColor)
  toolbar.navigationIcon = it
}

O, si desea utilizar una función agradable para ello:

fun Toolbar.setNavigationIconColor(@ColorInt color: Int) = navigationIcon?.mutate()?.let {
    it.setTint(color)
    this.navigationIcon = it
}

Uso:

toolbar.setNavitationIconColor(someColor)

Esta es, con mucho, la mejor respuesta y resuelve mi problema
Zaraki596

5

Este código funciona para mí:

public static Drawable changeBackArrowColor(Context context, int color) {
    String resName;
    int res;

    resName = Build.VERSION.SDK_INT >= 23 ? "abc_ic_ab_back_material" : "abc_ic_ab_back_mtrl_am_alpha";
    res = context.getResources().getIdentifier(resName, "drawable", context.getPackageName());

    final Drawable upArrow = context.getResources().getDrawable(res);
    upArrow.setColorFilter(color, PorterDuff.Mode.SRC_ATOP);

    return upArrow;
}

...

getSupportActionBar().setHomeAsUpIndicator(changeBackArrowColor(this, Color.rgb(50, 50, 50)));               
supportInvalidateOptionsMenu();

Además, si desea cambiar el color del texto de la barra de herramientas:

Spannable spannableString = new SpannableString(t);
spannableString.setSpan(new ForegroundColorSpan(Color.rgb(50, 50, 50)), 0, t.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
toolbar.setText(spannableString);

Trabajando desde API 19 hasta 25.


0

En lugar de usar el identificador dibujable anterior " abc_ic_ab_back_material ", use el nuevo abc_ic_ab_back_material en cada versión de la API. Lo he probado en 19, 21, 27 y funciona bien con el siguiente código y configuración.

  • minSdkVersion = 17
  • targetSdkVersion = 26
  • compileSdkVersion = 27

    public static Drawable changeBackArrowColor(Context context, int color) {
    int res;
    res = context.getResources().getIdentifier("abc_ic_ab_back_material", "drawable", context.getPackageName());
    if (res == 0)
        return null;
    final Drawable upArrow = ContextCompat.getDrawable(context, res);
    upArrow.setColorFilter(ContextCompat.getColor(context, color), PorterDuff.Mode.SRC_ATOP);
    
    return upArrow;

    }


0

Pruebe esto: configure el tema de la barra de herramientas en su diseño de la siguiente manera

android:theme = "@android:style/ThemeOverlay.Material.Dark.ActionBar"

Si quieres más información

El curioso caso del Overflow Icon Color de Martin Bonnin

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.