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


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.