Como mudar a cor da seta para trás no novo tema do material?

193

Atualizei meu SDK para a API 21 e agora o ícone de backup / backup é uma seta preta apontando para a esquerda.

Seta traseira preta

Eu gostaria que fosse cinza. Como eu posso fazer isso?

Na Play Store, por exemplo, a seta é branca.

Eu fiz isso para definir alguns estilos. Eu tenho usado @drawable/abc_ic_ab_back_mtrl_am_alphapara homeAsUpIndicator. Esse drawable é transparente (apenas alfa), mas a seta é exibida em preto. Gostaria de saber se posso definir a cor como eu faço no DrawerArrowStyle. Ou se a única solução é criar o meu @drawable/grey_arrowe usá-lo para homeAsUpIndicator.

<!-- Base application theme -->
<style name="AppTheme" parent="Theme.AppCompat.Light">

    <item name="android:actionBarStyle" tools:ignore="NewApi">@style/MyActionBar</item>
    <item name="actionBarStyle">@style/MyActionBar</item>

    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>

    <item name="homeAsUpIndicator">@drawable/abc_ic_ab_back_mtrl_am_alpha</item>
    <item name="android:homeAsUpIndicator" tools:ignore="NewApi">@drawable/abc_ic_ab_back_mtrl_am_alpha</item>
</style>

<!-- ActionBar style -->
<style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar.Solid">

    <item name="android:background">@color/actionbar_background</item>
    <!-- Support library compatibility -->
    <item name="background">@color/actionbar_background</item>
</style>

<!-- Style for the navigation drawer icon -->
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="spinBars">true</item>
    <item name="color">@color/actionbar_text</item>
</style>

Minha solução até agora foi pegar o @drawable/abc_ic_ab_back_mtrl_am_alpha, que parece branco, e pintá-lo na cor que eu desejo usando um editor de fotos. Funciona, embora eu prefira usar @color/actionbar_textcomo no DrawerArrowStyle.

Ferran Maylinch
fonte
Até agora, nenhuma das respostas baseadas em XML resolveu esse problema para mim, mas usei com sucesso o seu homeAsUpIndicator/ @drawable/abc_ic_ab_back_mtrl_am_alphacode para deixar a seta para trás branca. Eu prefiro isso do que invadir o Java.
ban-geoengineering
Velho mas quieto. Você está usando o ActionBar ou a nova barra de ferramentas?
F470071
O padrão deve ser um pouco cinza, usando android: theme = "@ style / Widget.AppCompat.Light.ActionBar" dentro da tag XML da barra de ferramentas. Sua cor é # 737373
desenvolvedor Android

Respostas:

354

Você pode conseguir isso através do código. Obtenha o desenho da seta para trás, modifique sua cor com um filtro e defina-o como botão Voltar.

final Drawable upArrow = getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
upArrow.setColorFilter(getResources().getColor(R.color.grey), PorterDuff.Mode.SRC_ATOP);
getSupportActionBar().setHomeAsUpIndicator(upArrow);

Revisão 1:

A partir da API 23 (Marshmallow), o recurso extraível abc_ic_ab_back_mtrl_am_alphaé alterado para abc_ic_ab_back_material.

EDITAR:

Você pode usar esse código para alcançar os resultados desejados:

toolbar.getNavigationIcon().setColorFilter(getResources().getColor(R.color.blue_gray_15), PorterDuff.Mode.SRC_ATOP);
Carles
fonte
4
Esta é a única coisa que funcionou para mim sem alterar a tonalidade de todos os outros widgets com colorControlNormal
Joris
4
problema com esta solução é que pinta todas as suas outras flechas nas costas, se você só quer mudar e deixar o resto branco
dabluck
24
Funciona. Por favor, note que você deve usar ContextCompat.getDrawable(this, R.drawable.abc_ic_ab_back_mtrl_am_alpha), porque getResources.getDrawable(int)é obsoleto
mrroboaat
3
Outra solução possível seria para você obter esse recurso si mesmo e colocá-lo em suas pastas drawable :)
Mauker
12
Observe que abc_ic_ab_back_mtrl_am_alpha mudou para abc_ic_ab_back_material na biblioteca de suporte 23.2.0
Jon
206

Observando a origem Toolbare TintManager, drawable/abc_ic_ab_back_mtrl_am_alphaé colorido com o valor do atributo style colorControlNormal.

Eu tentei definir isso no meu projeto (com <item name="colorControlNormal">@color/my_awesome_color</item>no meu tema), mas ainda está preto para mim.

Atualização :

Encontrei. Você precisa definir o actionBarThemeatributo ( não actionBarStyle ) com colorControlNormal.

Por exemplo:

<style name="MyTheme" parent="Theme.AppCompat.Light">        
    <item name="actionBarTheme">@style/MyApp.ActionBarTheme</item>
    <item name="actionBarStyle">@style/MyApp.ActionBar</item>
    <!-- color for widget theming, eg EditText. Doesn't effect ActionBar. -->
    <item name="colorControlNormal">@color/my_awesome_color</item>
    <!-- The animated arrow style -->
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>

<style name="MyApp.ActionBarTheme" parent="@style/ThemeOverlay.AppCompat.ActionBar">       
    <!-- THIS is where you can color the arrow! -->
    <item name="colorControlNormal">@color/my_awesome_color</item>
</style>

<style name="MyApp.ActionBarStyle" parent="@style/Widget.AppCompat.Light.ActionBar">
    <item name="elevation">0dp</item>      
    <!-- style for actionBar title -->  
    <item name="titleTextStyle">@style/ActionBarTitleText</item>
    <!-- style for actionBar subtitle -->  
    <item name="subtitleTextStyle">@style/ActionBarSubtitleText</item>

    <!-- 
    the actionBarTheme doesn't use the colorControlNormal attribute
    <item name="colorControlNormal">@color/my_awesome_color</item>
     -->
</style>
rockgecko
fonte
4
Essa deve ser a resposta aceita. Obrigado por isso. Pergunta, não consigo encontrar o estilo para colorir a seta mostrada quando o SearchView é expandido. Qualquer pista? Aparentemente, não é afetado por esta resposta.
Daniel Ochoa
6
Eu preciso adicionar também <item name = "android: colorControlNormal"> ... </item> com o android: prefix
Seraphim's
7
Infelizmente, essa é uma API de nível 21 e, se você quiser oferecer suporte a algo abaixo, ela não funcionará.
Gphilip # 6/15
10
Se o tema principal deriva de um dos temas "NoActionBar", a configuração colorControlNormaldo tema raiz, e não no, actionBarThemeé o caminho a seguir.
Jason Robinson
3
Levei apenas 2 horas de pesquisa e falha e pesquisa novamente para finalmente chegar a isso. Às vezes, o estilo 'sistema' no Android me deixa maluco! Esse método é especialmente importante quando você tem uma atividade que não usa o mesmo estilo das outras.
Bron Davies
119

Tentei todas as sugestões acima. A única maneira de conseguir alterar a cor da seta padrão do botão Voltar do ícone de navegação na barra de ferramentas é definir colorControlNormal no tema base como este. Provavelmente devido ao fato de o pai estar usando Theme.AppCompat.Light.NoActionBar

<style name="BaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="colorControlNormal">@color/white</item> 
  //the rest of your codes...
</style>
Harry Aung
fonte
6
Mais simples resposta de todos, em vez de brincar com outro código, basta adicionar esta linha em seustyle.xml
Rohan Kandwal
3
lembre-se de que o colorControlNormal requer API 21
Adnan Ali
3
@AdnanAli, se você estiver usando o AppCompat, também funcionará na <API 21. Claramente, o AppCompat está sendo usado aqui porque nãocolorControlNormal é prefixado com . android:
Vicky Chijwani
3
Mas isso muda a tonalidade de todos os outros widgets também .. alguma maneira de não afetar outros widgets, como caixa de seleção e botões de opção?
Bruce
2
Mas isso também altera a cor de outros controles, como botões de opção e a linha abaixo da edição de texto.
daka
66

É necessário adicionar um único atributo ao tema da barra de ferramentas -

<style name="toolbar_theme" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="colorControlNormal">@color/arrow_color</item>
</style>

Aplique este toolbar_theme à sua barra de ferramentas.

OU

você pode aplicar diretamente ao seu tema -

<style name="CustomTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="colorControlNormal">@color/arrow_color</item> 
  //your code ....
</style>
Neo
fonte
5
Tentar a resposta aceita (talvez a solução mais popular encontrada na rede) não funciona para mim, mas esta funciona :) tão louca ao programar com o Android.
King King
4
Resposta mais simples. Isso funciona sem alterar outros temas de controle. Tudo que você precisa é definir o tema personalizado da barra de ferramentas para sua barra de ferramentas. :)
SimplyProgrammer
1
Oh, as dores que você tem que passar para mudar a cor de apenas 1 ícone. O primeiro funciona para mim. O segundo funciona para barras de ferramentas personalizadas (e outras coisas aparentemente também). 3 anos depois, muito obrigado Neo.
Aba
45

Basta adicionar

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

ao seu tema atual do aplicativo.

S bruce
fonte
2
Isso está mudando a cor android.support.v7.widget.AppCompatCheckBox também
Udi Oshi
34

se usar Toolbar, você pode tentar isso

Drawable drawable = toolbar.getNavigationIcon();
drawable.setColorFilter(ContextCompat.getColor(appCompatActivity, colorId), PorterDuff.Mode.SRC_ATOP);
longbaobao
fonte
Esta deve ser a resposta aceita, imho - que tem como alvo apenas a seta, obtém a seta para definir usando meios mais simples, e é compatível também abaixo API 21
Antek
Se você procurar mais solução personalizada (cores diferentes para títulos e ícones do menu no meu caso), então esta é a solução que você quer
TheJudge
3
Observe que você pode precisar chamar isso antes de tentar chamar getNavigationIcon (): getSupportActionBar (). SetDisplayHomeAsUpEnabled (true);
rrbrambley
A melhor resposta! Obrigado.
shariful islam 7/03/19
32

Como dito na maioria dos comentários anteriores, a solução é adicionar

<item name="colorControlNormal">@color/white</item> ao seu tema do aplicativo. Mas confirme que você não tem outro tema definido no elemento Barra de ferramentas no seu layout.

     <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:elevation="4dp"
            android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
manuelvsc
fonte
3
Brilhante ... Tentei todas as respostas para adicioná-lo ao tema, mas não funcionou ... Como você mencionou, eu tinha a propriedade android: theme = "@ style / ThemeOverlay.AppCompat.ActionBar" na minha barra de ferramentas. Depois que o removi, ele começou a funcionar.
Rahul Hawge
10

A resposta de Carles é a resposta correta, mas alguns dos métodos, como getDrawable (), getColor (), foram descontinuados no momento em que escrevi essa resposta . Portanto, a resposta atualizada seria

Drawable upArrow = ContextCompat.getDrawable(context, R.drawable.abc_ic_ab_back_mtrl_am_alpha);
upArrow.setColorFilter(ContextCompat.getColor(context, R.color.white), PorterDuff.Mode.SRC_ATOP);
getSupportActionBar().setHomeAsUpIndicator(upArrow);

Após algumas outras consultas de stackoverflow, descobri que chamar ContextCompat.getDrawable () é semelhante a

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    return resources.getDrawable(id, context.getTheme());
} else {
    return resources.getDrawable(id);
}

E ContextCompat.getColor () é semelhante a

public static final int getColor(Context context, int id) {
    final int version = Build.VERSION.SDK_INT;
    if (version >= 23) {
        return ContextCompatApi23.getColor(context, id);
    } else {
        return context.getResources().getColor(id);
    }
}

Link 1: ContextCompat.getDrawable ()

Link 2: ContextCompat.getColor ()

capt.swag
fonte
Deveria ser abc_ic_ab_back_material, em vez de abc_ic_ab_back_mtrl_am_alpha.
Narendra Singh
7

Encontrei uma solução que funciona antes do pirulito. Defina o "colorControlNormal" dentro de "actionBarWidgetTheme" para alterar a cor homeAsUpIndicator. Modificando a resposta do rockgecko de cima para ficar assim:

<style name="MyTheme" parent="Theme.AppCompat.Light">        
    <item name="actionBarTheme">@style/MyApp.ActionBarTheme</item>
    <item name="actionBarStyle">@style/MyApp.ActionBar</item>
    <!-- color for widget theming, eg EditText. Doesn't effect ActionBar. -->
    <item name="colorControlNormal">@color/my_awesome_color</item>
    <!-- The animated arrow style -->
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
    <!-- The style for the widgets on the ActionBar. -->
    <item name="actionBarWidgetTheme">@style/WidgetStyle</item>
</style>

<style name="WidgetStyle" parent="style/ThemeOverlay.AppCompat.Light">
    <item name="colorControlNormal">@color/my_awesome_color</item>
</style>
GFred
fonte
7

No compileSdkVersoin 25, você pode fazer isso:

styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light">
     <item name="android:textColorSecondary">@color/your_color</item>
</style>
nuttynibbles
fonte
6

Use o método abaixo:

private Drawable getColoredArrow() {
    Drawable arrowDrawable = getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
    Drawable wrapped = DrawableCompat.wrap(arrowDrawable);

    if (arrowDrawable != null && wrapped != null) {
        // This should avoid tinting all the arrows
        arrowDrawable.mutate();
        DrawableCompat.setTint(wrapped, Color.GRAY);
    }

    return wrapped;
}

Agora você pode definir o drawable com:

getSupportActionBar().setHomeAsUpIndicator(getColoredArrow());
Jumpa
fonte
6

insira a descrição da imagem aqui

Alterar cor do ícone de navegação do menu

Cor do ícone do menu de conversão final

No style.xml:

<style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
    <item name="android:textColor">@color/colorAccent</item>


</style>

<style name="DrawerArrowStyle" parent="@style/Widget.AppCompat.DrawerArrowToggle">
    <item name="spinBars">true</item>
    <item name="color">@color/colorPrimaryDark</item>
</style>







In Mainfests.xml :

<activity android:name=".MainActivity"
        android:theme="@style/MyMaterialTheme.Base"></activity>
Sumit Saxena
fonte
5

Outra solução que pode funcionar para você é não declarar a barra de ferramentas como a barra de ação do aplicativo (por setActionBarou setSupportActionBar) e definir o ícone de retorno no seu onActivityCreated usando o código mencionado em outra resposta nesta página

final Drawable upArrow = getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
upArrow.setColorFilter(getResources().getColor(R.color.grey), PorterDuff.Mode.SRC_ATOP);
toolbar.setNavigationIcon(upArrow);

Agora, você não receberá o onOptionItemSelectedretorno de chamada quando pressionar o botão Voltar. No entanto, você pode se registrar para isso usando setNavigationOnClickListener. Isto é o que eu faço:

toolbar.setNavigationOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        getActivity().onBackPressed(); //or whatever you used to do on your onOptionItemSelected's android.R.id.home callback
    }
});

Não tenho certeza se funcionará se você trabalhar com itens de menu.

Vinay W
fonte
3

Estávamos enfrentando o mesmo problema e tudo o que queríamos era definir o

app: collapseIcon

atributo na barra de ferramentas no final, que não encontramos, pois não está muito bem documentado :)

<android.support.v7.widget.Toolbar
         android:id="@+id/toolbar"
         android:layout_width="match_parent"
         android:layout_height="@dimen/toolbarHeight"
         app:collapseIcon="@drawable/collapseBackIcon" />
Julian Horst
fonte
3

tente isso

public void enableActionBarHomeButton(AppCompatActivity appCompatActivity, int colorId){

    final Drawable upArrow = ContextCompat.getDrawable(appCompatActivity, R.drawable.abc_ic_ab_back_material);
    upArrow.setColorFilter(ContextCompat.getColor(appCompatActivity, colorId), PorterDuff.Mode.SRC_ATOP);

    android.support.v7.app.ActionBar mActionBar = appCompatActivity.getSupportActionBar();
    mActionBar.setHomeAsUpIndicator(upArrow);
    mActionBar.setHomeButtonEnabled(true);
    mActionBar.setDisplayHomeAsUpEnabled(true);
}

chamada de função:

enableActionBarHomeButton(this, R.color.white);
Siddarth Kanted
fonte
Definir a opção de exibição {@link #DISPLAY_HOME_AS_UP} ativará automaticamente o botão de início.
P. Savrov 30/07
2

Isto é o que funcionou para mim:

Adicione os atributos abaixo ao seu tema.

Para alterar a seta traseira da barra de ferramentas / barra de ação acima da API 21

<item name="android:homeAsUpIndicator">@drawable/your_drawable_icon</item>

Para alterar a seta traseira da barra de ferramentas / barra de ação abaixo da API 21

<item name="homeAsUpIndicator">@drawable/your_drawable_icon</item>

Para alterar a seta para trás do modo de ação

<item name="actionModeCloseDrawable">@drawable/your_drawable_icon</item>

Para remover a sombra da barra de ferramentas / barra de ação

<item name="android:elevation" tools:targetApi="lollipop">0dp</item>
<item name="elevation">0dp</item>
<!--backward compatibility-->
<item name="android:windowContentOverlay">@null</item>

Para alterar o drawable de estouro da barra de ação

<!--under theme-->
<item name="actionOverflowButtonStyle">@style/MenuOverflowStyle</item>

<style name="MenuOverflowStyle" parent="Widget.AppCompat.ActionButton.Overflow">
<item name="srcCompat">@drawable/ic_menu_overflow</item>

Nota: 'srcCompat' é usado em vez de 'android: src' devido ao suporte extraível por vetor para API abaixo de 21

Sadashiv
fonte
1

Acabei de alterar o tema da barra de ferramentas para @ style / ThemeOverlay.AppCompat.Light

e a flecha ficou cinza escuro

            <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:gravity="center"
            app:layout_collapseMode="pin"
            app:theme="@style/ThemeOverlay.AppCompat.Light">
Badr
fonte
1

Aqui está como eu fiz isso em Componentes de materiais:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="drawerArrowStyle">@style/AppTheme.DrawerArrowToggle</item>
</style>

<style name="AppTheme.DrawerArrowToggle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="color">@android:color/white</item>
</style>
Sam
fonte
Amigo, você salvou o meu dia. Passei o dia inteiro apenas nessa. Eu gostaria de poder lhe dar mais votos.
Dhaval Patel 13/04
1

A solução é muito simples

Basta colocar a seguinte linha no seu estilo chamado AppTheme

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

Agora todo o seu código xml será mostrado abaixo (estilo padrão).

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

        <item name="colorPrimary">#0F0F0F</item>
        <item name="android:statusBarColor">#EEEEF0</item>
        <item name="android:windowLightStatusBar">true</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowActivityTransitions">true</item>

        <item name="colorControlNormal">@color/white</item>
</style>
Suyog
fonte
0

Você pode alterar a cor do ícone de navegação programaticamente assim:

mToolbar.setNavigationIcon(getColoredArrow()); 

private Drawable getColoredArrow() {
        Drawable arrowDrawable = getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
        Drawable wrapped = DrawableCompat.wrap(arrowDrawable);

        if (arrowDrawable != null && wrapped != null) {
            // This should avoid tinting all the arrows
            arrowDrawable.mutate();
                DrawableCompat.setTintList(wrapped, ColorStateList.valueOf(this.getResources().getColor(R.color.your_color)));
            }
        }

        return wrapped;
}
pks
fonte
-1

Basta remover android:homeAsUpIndicatore homeAsUpIndicatordo seu tema e tudo ficará bem. O coloratributo no seu DrawerArrowStyleestilo deve ser suficiente.

Flávio Faria
fonte
Eu já tentei isso e a flecha é preta. Observe que esta seta não é a mesma que você vê quando abre a gaveta (essa seta é afetada pelo coloratributo). A seta da gaveta é um pouco maior.
Ferran Maylinch
1
Portanto, parece que você precisará fornecer seu próprio recurso desenhável. Você pode gerá-lo usando esta ferramenta: shreyasachar.github.io/AndroidAssetStudio
Flávio Faria
-4

A menos que haja uma solução melhor ...

O que fiz foi tirar as @drawable/abc_ic_ab_back_mtrl_am_alphaimagens, que parecem brancas, e pintá-las na cor que desejo usando um editor de fotos.

Ferran Maylinch
fonte