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>
Joshua W
fuente
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"/>
Joshua W
fuente
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>
osrl
fuente
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.

PayToPwn
fuente
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" />
Tuss
fuente
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);
Mayank Jain
fuente
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

sreekumar
fuente
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);
Kammaar
fuente
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);
Shiva Kanumala
fuente
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)
desarrollador de Android
fuente
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.

Germán
fuente
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;

    }

Narender Gusain
fuente
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

Moreno
fuente