Як змінити колір стрілки назад у новій темі матеріалу?


193

Я оновив свій SDK до API 21, і тепер значок резервного копіювання - вгору - це чорна стрілка, яка спрямована зліва.

Чорна стрілка назад

Я хотів би, щоб він був сірим. Як я можу це зробити?

Наприклад, у магазині Play, стрілка біла.

Я зробив це, щоб встановити деякі стилі. Я використовував @drawable/abc_ic_ab_back_mtrl_am_alphaдля homeAsUpIndicator. Цей малюнок прозорий (лише альфа), але стрілка відображається чорним кольором. Цікаво, чи можу я встановити колір, як у мене DrawerArrowStyle. Або якщо єдине рішення - створити мій @drawable/grey_arrowі використовувати його для 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>

Наразі моїм рішенням було взяти той @drawable/abc_ic_ab_back_mtrl_am_alpha, який, здається, білий, та пофарбувати його в той колір, який я бажаю за допомогою редактора фотографій. Це працює, хоча я хотів би використовувати @color/actionbar_textяк в DrawerArrowStyle.


Жоден із відповідей на основі XML поки що не вирішив цю проблему для мене, але я успішно використовував ваш homeAsUpIndicator/ @drawable/abc_ic_ab_back_mtrl_am_alphaкод, щоб зробити стрілку білою білою. Я вважаю за краще це, ніж злом на Java.
заборона-геоінженерія

Старий, але все ж. Чи використовували ви (чи використовували ви) ActionBar або нову Панель інструментів?
f470071

За замовчуванням має бути трохи сірим, використовуючи android: theme = "@ style / Widget.AppCompat.Light.ActionBar" всередині тегу XML панелі інструментів. Її колір №737373
розробник андроїд

Відповіді:


354

Ви можете досягти цього за допомогою коду. Отримайте стрілку назад, яку можна намалювати, змінити її колір за допомогою фільтра та встановити його як кнопку назад.

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

Версія 1:

Починаючи з API 23 (Marshmallow), ресурс, що звертається abc_ic_ab_back_mtrl_am_alpha, змінюється на abc_ic_ab_back_material.

Редагувати:

Ви можете використовувати цей код для досягнення бажаних результатів:

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

4
Це єдине, що працювало для мене, не змінюючи відтінок усіх інших віджетів з кольоромControlNormal
Joris

4
Проблема з цим рішенням полягає в тому, що він малює всі інші стрілки спини, якщо ви хочете лише змінити одну, а решту залишити білою
dabluck

24
Це працює. Зауважте, що вам слід скористатися, ContextCompat.getDrawable(this, R.drawable.abc_ic_ab_back_mtrl_am_alpha)тому що getResources.getDrawable(int)застаріло
mrroboaat

3
Іншим можливим рішенням стане те, щоб ви самі отримали цей ресурс і розмістили його на своїх папках, що
малюються

12
Зауважте, що abc_ic_ab_back_mtrl_am_alpha змінився на abc_ic_ab_back_material у бібліотеці підтримки 23.2.0
Jon

206

Дивлячись на джерело Toolbarта TintManagerджерело, drawable/abc_ic_ab_back_mtrl_am_alphaтонірується значення атрибуту стилю colorControlNormal.

Я намагався встановити це в своєму проекті (з <item name="colorControlNormal">@color/my_awesome_color</item>моєю темою), але він все ще чорний для мене.

Оновлення :

Знайшов це. Потрібно встановити actionBarThemeатрибут ( не actionBarStyle ) за допомогою colorControlNormal.

Наприклад:

<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
Це має бути прийнятою відповіддю. Дякую за це. Питання, я не можу знайти стиль розфарбування стрілки, що відображається при розширенні SearchView. Якась підказка? Очевидно, ця відповідь не впливає.
Даніель Очоа

6
Мені потрібно додати також <item name = "android: colorControlNormal"> ... </item> з андроїдом: префіксом
Серафіма

7
На жаль, це API рівня 21, і якщо ви хочете підтримати що-небудь нижче, він не працює.
gphilip

10
Якщо ваша батьківська тема походить з однієї з тем "NoActionBar", то для встановлення colorControlNormalкореневої теми, а не для actionBarThemeмаршруту, слід пройти шлях.
Джейсон Робінсон

3
На це мені знадобилося лише 2 години пошуку та невдачі та пошуку, щоб нарешті дійти до цього. Іноді стиль «система» в андроїді зводить мене з гайки! Цей метод особливо важливий для використання, коли у вас є одна діяльність, яка не використовує таку саму стилістику, як інші.
Брон Девіс

119

Спробував усі пропозиції вище. Єдиний спосіб, який мені вдалося змінити колір піктограми навігації за замовчуванням, стрілка кнопки Назад на панелі інструментів - це встановити colorControlNormal в базовій темі. Можливо, через те, що батько використовує Theme.AppCompat.Light.NoActionBar

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

6
Найпростіша відповідь з усіх, замість того, щоб поспішати з іншим кодом, просто додайте цей рядок у свійstyle.xml
Rohan Kandwal

3
пам’ятайте, що colorControlNormal вимагає API 21
Аднан Алі

3
@AdnanAli, якщо ви використовуєте AppCompat, він також буде працювати над <API 21. Очевидно, що AppCompat в даний час використовується тут , тому що colorControlNormalце НЕ з префіксом android:.
Vicky Chijwani

3
Але це також змінює відтінок усіх інших віджетів .. будь-який спосіб не впливати на інші віджети, такі як прапорець і радіо кнопки?
Брюс

2
Але це також змінює колір інших елементів керування, наприклад радіо кнопок і рядка під редагуванням тексту.
дака

66

Потрібно додати один атрибут до теми панелі інструментів -

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

Застосуйте цю панель інструментів на панелі інструментів.

АБО

ви можете безпосередньо застосувати до своєї теми -

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

5
Спроба прийнятої відповіді (можливо, найпопулярніше рішення, знайдене в мережі) для мене не працює, але це працює :) настільки шалено під час програмування з Android.
Король Кінг

4
Найпростіша відповідь. Це працює без зміни інших тем управління. Все, що вам потрібно, це встановити власну тему панелі інструментів на свою панель інструментів. :)
SimplyProgrammer

1
О болі, які вам доведеться пережити, щоб змінити колір всього 1 значка. Перший працює на мене. Другий працює для користувальницьких панелей інструментів (та інших речей теж очевидно). Через 3 роки, дякую Нео.
Аба

45

Просто додайте

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

до вашої поточної теми програми.


2
Це також змінює колір android.support.v7.widget.AppCompatCheckBox
Udi Oshi

34

якщо використовувати Toolbar, ви можете спробувати це

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

Це повинна бути прийнята відповідь, imho - вона націлена лише на стрілку, отримує стрілку для встановлення за допомогою найпростіших засобів, а також сумісна нижче API 21
Antek

Якщо ви шукаєте більше користувальницького рішення (у моєму випадку різні кольори для заголовків та піктограм меню), то це саме рішення, яке ви хочете
TheJudge

3
Зауважте, що вам може знадобитися зателефонувати до цього, перш ніж намагатися викликати getNavigationIcon (): getSupportActionBar (). SetDisplayHomeAsUpEnabled (true);
rrbrambley

Найкраща відповідь! Дякую.
похмурий іслам

32

Як сказано в більшості попередніх коментарів, рішення слід додати

<item name="colorControlNormal">@color/white</item> до теми вашого додатка. Але підтвердьте, що у вас немає іншої теми, визначеної на елементі панелі інструментів у вашій макетці.

     <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
Блискуче ... Я спробував усі відповіді про те, щоб додати його в тему, але це не вийшло ... Як ви вже згадували, у мене на панелі інструментів була властивість android: topic = "@ style / ThemeOverlay.AppCompat.ActionBar". Як тільки я його зняв, він почав працювати.
Рахул Хоуг

10

Відповідь Карлеса - правильна відповідь, але мало хто з таких методів, як getDravable (), getColor (), застаріло в той час, коли я пишу цю відповідь . Тож оновлена ​​відповідь була б

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

Після деяких запитів stackoverflow я виявив, що виклик ContextCompat.getDravable () схожий на

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

І ContextCompat.getColor () схожий на

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

Посилання 1: ContextCompat.getDrawable ()

Посилання 2: ContextCompat.getColor ()


Це має бути abc_ic_ab_back_materialзамість abc_ic_ab_back_mtrl_am_alpha.
Нарендра Сінгх

7

Я знайшов рішення, яке працює до Lollipop. Встановіть "colorControlNormal" в межах "actionBarWidgetTheme", щоб змінити колір homeAsUpIndicator. Змінення відповіді rockgecko зверху, щоб виглядати так:

<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 ви можете це зробити:

styles.xml

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

6

Використовуйте метод нижче:

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

Тепер ви можете встановити схему:

getSupportActionBar().setHomeAsUpIndicator(getColoredArrow());

6

введіть тут опис зображення

Зміна кольору меню Nav Color

Остаточне перетворення кольору меню

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

5

Іншим рішенням, яке може допомогти вам, є не оголошувати панель інструментів як панель дій програми ( setActionBarабо setSupportActionBar) та встановлювати значок спинки у вашій програмі onActivityCreate за допомогою коду, зазначеного в іншій відповіді на цій сторінці

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

Тепер ви не отримаєте onOptionItemSelectedзворотний дзвінок, натиснувши кнопку назад. Однак ви можете зареєструватися для цього, використовуючи setNavigationOnClickListener. Це те, що я роблю:

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

Я не впевнений, чи спрацює це, якщо ви працюєте з пунктами меню.


3

Ми зіткнулися з тією ж проблемою, і все, що ми хотіли, - це встановити

додаток: колапсIcon

атрибут на панелі інструментів у підсумку, який ми не знайшли, оскільки він не дуже добре задокументований :)

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

3

спробуйте це

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

виклик функції:

enableActionBarHomeButton(this, R.color.white);

Якщо встановити {@link #DISPLAY_HOME_AS_UP} параметр відображення, автоматично увімкнеться домашня кнопка.
П. Савров

2

Це для мене працювало:

Додайте нижче атрибути до своєї теми.

Щоб змінити стрілку повернення назад / панель дій над api 21

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

Щоб змінити стрілку повернення назад / панель дій під api 21

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

Для зміни режиму дії стрілка назад

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

Щоб видалити тінь панелі інструментів / панелі дій

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

Щоб змінити переповнення панелі дій, що перетягується

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

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

Примітка: 'srcCompat' використовується замість 'android: src' через підтримку векторної програми для api нижче 21


2

Рішення дуже просте

Просто введіть наступний рядок у свій стиль, названий AppTheme

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

Тепер весь ваш XML-код буде виглядати так, як показано нижче (стиль за замовчуванням).

<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

Я щойно змінив тему панелі інструментів на @ style / ThemeOverlay.AppCompat.Light

і стріла стала темно-сірою

            <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

Ось як я це зробив у "Матеріальні компоненти":

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

Друже, ти врятував мені день. Я цілий день провів лише на цьому. Я хочу, щоб я міг дати вам більше голосів.
Дхаваль Патель

0

Ви можете змінити колір навігаційної піктограми програмно так:

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

Просто видаліть android:homeAsUpIndicatorі homeAsUpIndicatorз вашої теми, і це буде добре. colorАтрибут у вашому DrawerArrowStyleстилі має бути достатньо.


Я вже пробував це, і стрілка чорна. Зверніть увагу, що ця стрілка не є тією самою стрілкою, яку ви бачите, коли ви відкриваєте ящик (ця стрілка впливає на colorатрибут). Стрілка ящика трохи більша.
Ферран Мейлінч

1
Отже, схоже, вам доведеться забезпечити власний ресурс, який можна отримати. Ви можете створити його за допомогою цього інструменту: shreyasachar.github.io/AndroidAssetStudio
Flávio Faria

-4

Якщо немає кращого рішення ...

Що я зробив, це взяти @drawable/abc_ic_ab_back_mtrl_am_alphaзображення, які здаються білими, і пофарбувати їх у потрібний колір за допомогою редактора фотографій.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.