Yeni malzeme temasında geri okun rengi nasıl değiştirilir?


193

SDK'mı API 21'e güncelledim ve şimdi geri / yukarı simgesi sola doğru işaret eden siyah bir ok.

Siyah geri ok

Gri olmasını istiyorum. Bunu nasıl yapabilirim?

Örneğin, Play Store'da ok beyazdır.

Bunu bazı stiller ayarlamak için yaptım. Ben kullandım @drawable/abc_ic_ab_back_mtrl_am_alphaiçin homeAsUpIndicator. Bu çekilebilir saydamdır (yalnızca alfa), ancak ok siyah olarak görüntülenir. Merak ediyorum rengi benim gibi ayarlayabilir miyim DrawerArrowStyle. Veya tek çözüm benim oluşturmak @drawable/grey_arrowve kullanmak için ise 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>

Şimdiye kadar benim çözümüm @drawable/abc_ic_ab_back_mtrl_am_alpha, beyaz gibi görünen ve bir fotoğraf editörü kullanarak istediğim renkte boyamak oldu. Çalışıyor, ancak ben @color/actionbar_textgibi kullanmayı tercih ederdim DrawerArrowStyle.


XML tabanlı cevapların hiçbiri benim için bu sorunu çözmedi, ancak geri okunu beyaz yapmak için homeAsUpIndicator/ @drawable/abc_ic_ab_back_mtrl_am_alphakodunuzu başarıyla kullandım . Bunu Java'ya girmek yerine tercih ederim.
ban-geoengineering

Eski ama yine de. ActionBar veya yeni Araç Çubuğu mu kullanıyordunuz?
f470071

Varsayılanın, Araç Çubuğu XML etiketi içinde android: theme = "@ style / Widget.AppCompat.Light.ActionBar" kullanılarak biraz gri olması gerekiyordu. Rengi # 737373
android geliştirici 14

Yanıtlar:


354

Bunu kod ile başarabilirsiniz. Geri oku çizilebilir şekilde alın, rengini bir filtreyle değiştirin ve geri düğmesi olarak ayarlayın.

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);

Revizyon 1:

API 23'ten (Marshmallow) başlayarak, çekilebilir kaynak abc_ic_ab_back_mtrl_am_alphaolarak değiştirilir abc_ic_ab_back_material.

DÜZENLE:

İstediğiniz sonuçları elde etmek için bu kodu kullanabilirsiniz:

toolbar.getNavigationIcon().setColorFilter(getResources().getColor(R.color.blue_gray_15), PorterDuff.Mode.SRC_ATOP);

4
Bu, colorControlNormal
Joris

4
Bu sorunla ilgili sorun, diğer tüm geri oklarınızı
boyamasıdır

24
İşe yarıyor. ContextCompat.getDrawable(this, R.drawable.abc_ic_ab_back_mtrl_am_alpha)getResources.getDrawable(int)
Kullanmanız

3
Başka bir olası çözüm, bu kaynağı kendiniz almanız ve çekilebilir klasörlerinize
koymanızdır

12
23.2.0 destek kütüphanesinde abc_ic_ab_back_mtrl_am_alpha'nın abc_ic_ab_back_material olarak değiştiğini unutmayın
Jon

206

ToolbarVe TintManagerkaynağına bakıldığında drawable/abc_ic_ab_back_mtrl_am_alpha, style özelliğinin değeri ile renklendirilir colorControlNormal.

Bunu projemde (temamla) ayarlamayı denedim <item name="colorControlNormal">@color/my_awesome_color</item>, ama benim için hala siyah.

Güncelleme :

Buldum. actionBarTheme( Değil actionBarStyle ) niteliğini ayarlamanız gerekir colorControlNormal.

Örneğin:

<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>

4
Bu kabul edilen cevap olmalı. Bunun için teşekkür ederim. Soru, SearchView genişletildiğinde gösterilen oku renklendirme stilini bulamıyorum. Bir ipucu? Görünüşe göre bu cevaptan etkilenmiyor.
Daniel Ochoa

6
Ayrıca Android ile <item name = "android: colorControlNormal"> ... </item> eklemem gerekiyor: önek
Seraphim'in

7
Ne yazık ki bu seviye 21 API ve aşağıda bir şey desteklemek istiyorsanız işe yaramaz.
gphilip

10
Ana temanız "NoActionBar" temalarından birinden geliyorsa, gidilecek yol colorControlNormaldeğil kök temayı ayarlamak actionBarTheme.
Jason Robinson

3
Sadece arama ve başarısız 2 saat sürdü ve sonunda bu almak için tekrar arama. Bazen android tarzı 'sistem' beni deli ediyor! Bu yöntem, diğerleriyle aynı stili kullanmayan bir etkinliğiniz olduğunda kullanmak özellikle önemlidir.
Bron Davies

119

Yukarıdaki tüm önerileri denedim. Gezinme simgesi rengini değiştirmeyi başarabilmemin tek yolu, araç çubuğumdaki Geri düğmesi oku, bu gibi temel temada colorControlNormal ayarlamaktır. Muhtemelen ebeveynin Theme.AppCompat.Light.NoActionBar kullanıyor olması nedeniyle

<style name="BaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="colorControlNormal">@color/white</item> 
  //the rest of your codes...
</style>

6
En basit cevap, diğer kodlarla style.xml
uğraşmak

3
colorControlNormal'ın API 21 gerektirdiğini unutmayın
Adnan Ali

3
@AdnanAli AppCompat kullanıyorsanız, <API 21 üzerinde de çalışır. Açıkçası, AppCompat edilir burada kullanılıyor çünkü colorControlNormalbir değil öneki android:.
Vicky Chijwani

3
Ancak bu, diğer tüm widget'ların tonunu da değiştirir .. herhangi bir şekilde onay kutusu ve radyo düğmeleri gibi diğer widget'ları etkilemez mi?
Bruce

2
Ancak bu, radyo düğmeleri ve metin düzenleme altındaki satır gibi diğer kontrollerin rengini de değiştirir.
daka

66

Araç çubuğu temanıza tek bir özellik eklemeniz gerekiyor -

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

Bu toolbar_theme öğesini araç çubuğunuza uygulayın.

VEYA

doğrudan temanıza başvurabilirsiniz -

<style name="CustomTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="colorControlNormal">@color/arrow_color</item> 
  //your code ....
</style>

5
Kabul edilen cevabı denemek (belki de internette bulunan en popüler çözüm) benim için çalışmıyor ama bu çalışıyor :) Android ile programlama yaparken çok çılgın.
King King

4
En basit cevap. Bu, diğer kontrol temalarını değiştirmeden çalışır. Tek ihtiyacınız olan özel araç çubuğu temasını araç çubuğunuza ayarlamaktır. :)
SimplyProgrammer

1
Ah sadece 1 ikonun rengini değiştirmek için uğraşman gereken acılar .. Birincisi benim için çalışıyor. İkincisi özel Araç Çubukları (ve görünüşte diğer şeyler) için çalışır. 3 yıl sonra çok teşekkürler Neo.
Aba

45

Sadece ekle

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

mevcut uygulama temanıza.


2
Bu android.support.v7.widget.AppCompatCheckBox rengini de değiştiriyor
Udi Oshi

34

kullanırsanız Toolbar, bunu deneyebilirsiniz

Drawable drawable = toolbar.getNavigationIcon();
drawable.setColorFilter(ContextCompat.getColor(appCompatActivity, colorId), PorterDuff.Mode.SRC_ATOP);

Bu kabul edilen cevap olmalı, imho - sadece oku hedefliyor, oku en basit yollarla ayarlıyor ve API 21
Antek

Daha özel bir çözüm arıyorsanız (benim durumumda başlıklar ve menü simgeleri için farklı renkler) o zaman bu istediğiniz çözümdür
TheJudge

3
GetNavigationIcon (): getSupportActionBar (). SetDisplayHomeAsUpEnabled (true); öğesini çağırmayı denemeden önce bunu çağırmanız gerekebileceğini unutmayın.
rrbrambley

En iyi cevap! Teşekkür ederim.
shariful islam

32

Önceki yorumların çoğunda belirtildiği gibi, çözüm

<item name="colorControlNormal">@color/white</item> uygulama temanıza. Ancak, mizanpajınızda Araç Çubuğu öğenizde başka bir temanın tanımlanmadığını doğrulayın.

     <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" />

3
Brilliant ... Temaya eklemek için tüm cevapları denedim ama işe yaramadı ... Dediğin gibi, araç çubuğumda android: theme = "@ style / ThemeOverlay.AppCompat.ActionBar" özelliği vardı. Çıkardıktan sonra çalışmaya başladı.
Rahul Hawge

10

Carles'ın cevabı doğru cevaptır, ancak getDrawable (), getColor () gibi yöntemlerden birkaçı bu cevabı yazdığım sırada kullanımdan kaldırıldı . Yani güncellenmiş cevap

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);

Bazı diğer stackoverflow sorguları takip ContextCompat.getDrawable () çağrılması benzer olduğunu buldum

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

Ve ContextCompat.getColor () benzer

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);
    }
}

Bağlantı 1: ContextCompat.getDrawable ()

Bağlantı 2: ContextCompat.getColor ()


Bunun abc_ic_ab_back_materialyerine olmalı abc_ic_ab_back_mtrl_am_alpha.
Narendra Singh

7

Lollipop'tan önce çalışan bir çözüm buldum. HomeAsUpIndicator rengini değiştirmek için "actionBarWidgetTheme" içinde "colorControlNormal" değerini ayarlayın. Rockgecko'nun cevabını yukarıdaki gibi değiştirmek için:

<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>

7

CompileSdkVersoin 25 üzerinde şunları yapabilirsiniz:

styles.xml

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

6

Aşağıdaki yöntemi kullanın:

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;
}

Şimdi çekmeceyi şu şekilde ayarlayabilirsiniz:

getSupportActionBar().setHomeAsUpIndicator(getColoredArrow());

6

resim açıklamasını buraya girin

Menü Gezinme Simge Rengini Değiştir

Son dönüştürme Menü Simge Renk

Style.xml dosyasında:

<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>

5

Sizin için işe yarayabilecek başka bir çözüm, araç çubuğunuzu uygulamanın eylem çubuğu olarak ( setActionBarveya setSupportActionBar) bildirmemek ve bu sayfadaki başka bir cevapta belirtilen kodu kullanarak onActivityCreated öğenizdeki geri simgesini ayarlamaktır.

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);

Şimdi, onOptionItemSelectedgeri düğmesine bastığınızda geri aramayı alamayacaksınız . Ancak, bunu kullanarak kaydolabilirsiniz setNavigationOnClickListener. Bu benim işim:

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
    }
});

Menü öğeleriyle çalıştığınızda işe yarayıp yaramayacağından emin değilim.


3

Aynı sorunla karşılaşıyorduk ve tek istediğimiz

app: collapseIcon

çok iyi belgelenmediği için bulamadığımız sonunda araç çubuğundaki öznitelik :)

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

3

bunu dene

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);
}

fonksiyon çağrısı:

enableActionBarHomeButton(this, R.color.white);

{@Link #DISPLAY_HOME_AS_UP} görüntüleme seçeneğinin ayarlanması, ana sayfa düğmesini otomatik olarak etkinleştirir.
P. Savrov

2

Benim için işe yarayan buydu:

Temanıza aşağıdaki özellikleri ekleyin.

API 21 üzerindeki araç çubuğunu / işlem çubuğu geri okunu değiştirmek için

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

API 21 altındaki araç çubuğu / işlem çubuğu geri okunu değiştirmek için

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

İşlem modunu değiştirmek için geri ok

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

Araç çubuğu / işlem çubuğu gölgesini kaldırmak için

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

Eylem çubuğu taşması çizilebilir değiştirmek için

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

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

Not: 21'in altındaki API için vektör çekilebilir desteği nedeniyle 'android: src' yerine 'srcCompat' kullanılır


2

Çözüm çok basit

Aşağıdaki satırı AppTheme olarak adlandırdığınız stile yerleştirin

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

Şimdi tüm xml kodunuz aşağıda gösterildiği gibi görünecektir (varsayılan stil).

<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>

1

Araç çubuğu temasını @ style / ThemeOverlay.AppCompat.Light olarak değiştirdim

ve ok koyu gri oldu

            <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">

1

Malzeme Bileşenlerinde şöyle yaptım:

<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>

Dostum, günümü kurtardın. Bütün günü sadece bu gün geçirdim. Keşke sana daha fazla oy verebilsem.
Dhaval Patel

0

Gezinme simgesinin rengini programlı olarak şu şekilde değiştirebilirsiniz:

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;
}

-1

Sadece temanızdan kaldırın android:homeAsUpIndicatorve homeAsUpIndicatoriyi olacak. colorSizin de nitelik DrawerArrowStyletarzı yeterli olmalıdır.


Bunu zaten denedim ve ok siyah. Bu okun, çekmeceyi açtığınızda gördüğünüz okla aynı olmadığını unutmayın (bu ok colorözellikten etkilenir ). Çekmece oku biraz daha büyük.
Ferran Maylinch

1
Yani, kendi çekilebilir kaynağınızı sağlamanız gerekecek gibi görünüyor. Bu aracı kullanarak oluşturabilirsiniz: shreyasachar.github.io/AndroidAssetStudio
Flávio Faria

-4

Daha iyi bir çözüm olmadığı sürece ...

Yaptığım @drawable/abc_ic_ab_back_mtrl_am_alpha, beyaz gibi görünen görüntüleri almak ve bir fotoğraf editörü kullanarak onları istediğim renkte boyamak.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.