Как изменить цвет кнопки возврата на панели инструментов в Android?

100

Я не мог изменить цвет кнопки возврата. Я использую материальный дизайн панели инструментов. В моем приложении я применяю черный фон панели инструментов, но дизайн спины по умолчанию черный, поэтому я просто хочу изменить цвет этой кнопки возврата. Пожалуйста, дайте мне решения.

Спасибо

Назима Каузер ММЖ
источник
3
<style name = "MyMaterialTheme.Base" parent = "Theme.AppCompat.Light.DarkActionBar">
Назима Каузер MMF

Ответы:

79

используйте этот стиль

<style name="Theme.MyFancyTheme" parent="android:Theme.Holo">
    <item name="android:homeAsUpIndicator">@drawable/back_button_image</item>
</style>
Ахил Джаякумар
источник
я использую этот стиль. что мне нужно изменить в этом стиле?
Назима Каузер MMF
вы можете использовать пользовательские файлы изображений для кнопки «Назад». просто назовите их в `@ drawable / your_image '
Ахил Джаякумар,
Это лучший способ сделать это. Поскольку использование R.drawable.abc_ic_ab_back_mtrl_am_alpha для изменения цвета имеет риски, так как версия поддержки часто меняет ресурс для рисования.
Мостафа Имран
196

Вы можете добавить стиль в свой файл styles.xml,

<style name="ToolbarTheme" parent="@style/ThemeOverlay.AppCompat.ActionBar">
  <!-- Customize color of navigation drawer icon and back arrow --> 
  <item name="colorControlNormal">@color/toolbar_color_control_normal</item>
</style>

и добавьте это как тему на свою панель инструментов в toolbar layout.xml с помощью app: theme , проверьте ниже

<?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:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:theme="@style/ToolbarTheme" >
</android.support.v7.widget.Toolbar>
Раджен Райярела
источник
4
Работает как шарм, и звучит как нельзя лучше.
Виджай Кумар Канта
1
Штопать. Оно работает. Теперь мне просто нужно что-то эквивалентное для iOS. Благодарность!
Эрнесто
Хотя лучше было бы назвать это ToolbarTheme
Leo Droidcoder 01
1
Для меня <style name = "ToolbarTheme" parent = "@ style / Theme.AppCompat.NoActionBar"> работал. Моя основная тема приложения - <style name = "AppTheme" parent = "Theme.AppCompat.NoActionBar">
Яр
3
Это сработало. Это более уместно, чем принятый ответ.
Доменико
86

Вот самый простой способ получить светлую и темную тему для app:themeпанели инструментов. Вам нужно изменить значение тега панели инструментов.

  • Для черного заголовка панели инструментов и черной стрелки вверх ваша панель инструментов должна реализовывать следующую тему:

app: theme = "@ style / ThemeOverlay.AppCompat.Light"

Черный заголовок панели инструментов и стрелка вверх

  • За белого заголовка панели инструментов и белой стрелки вверх ваша панель инструментов должна реализовывать следующую тему:

app: theme = "@ style / ThemeOverlay.AppCompat"

Белый заголовок панели инструментов и стрелка вверх

ch3tanz
источник
66
Для белого заголовка панели инструментов и белой стрелки вверх используйте следующую тему: android: theme = "@ style / ThemeOverlay.AppCompat.Dark.ActionBar"
Амол Патил
Я пытаюсь понять, почему он называется ThemeOverlay? Почему я не могу использовать здесь простой Theme.AppCompat.Dark.ActionBar?
Gaket
@ ch3tanz Вы используете ActionBar или Toolbar? Почему вы используете стили ActionBar?
f470071
@ f470071 Я использую панель инструментов. Это просто стиль, который будет поддерживать во всех версиях. Вы можете использовать стили материального дизайна, если ваше приложение нацелено выше Lollipop.
ch3tanz
Theme.AppCompat.Light.DarkActionBarв моем случае.
Evi Song
30

Для белого заголовка панели инструментов и белой стрелки вверх используйте следующую тему:

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
Панкадж Талавия
источник
Большое спасибо, прежде всего решение, только оно работает для меня.
Md Juyel Rana
20

Использовать это:

<style name="BaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="colorControlNormal">@color/white</item> 
</style>
Сабин Ачарья
источник
5
Это следует принять. Каждый ответ здесь - просто заменить значок, а не его цвет.
Michał Jabłoński
12

Попробуй это,

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);
Партх Бхаяни
источник
6

Для этого не нужно менять стиль. После настройки панели инструментов в качестве панели действий вы можете написать такой код

android.getSupportActionBar().setDisplayHomeAsUpEnabled(true);
android.getSupportActionBar().setHomeAsUpIndicator(R.drawable.back);
//here back is your drawable image

Но вы не можете изменить цвет стрелки назад этим методом.

Невил Гелани
источник
6

Если вам нужна белая кнопка возврата (←) и белый заголовок панели инструментов, выполните следующие действия:

<android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    </android.support.design.widget.AppBarLayout>

Измените тему с Darkна, Lightесли вам нужна черная кнопка «Назад» (←) и черный заголовок панели инструментов.

nhp
источник
5

Вы можете использовать свой собственный значок, используя app:navigationIconи для цвета заголовкаapp:titleTextColor

Пример:

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        android:background="@color/colorPrimary"
        app:navigationIcon="@drawable/ic_arrow_back_white_24dp"
        app:titleTextColor="@color/white" />
Мохамед Нагех
источник
Это сработало для меня, просто установил любой значок, используя эту строкуapp:navigationIcon="@drawable/ic_back_black"
Абхишек
поляна это помогло.
Mohamed Nageh
5

Просто используйте MaterialToolbarи замените цвета по умолчанию:

    <com.google.android.material.appbar.MaterialToolbar
        style="@style/Widget.MaterialComponents.Toolbar.Primary"
        android:theme="@style/MyThemeOverlay_Toolbar"
        ..>

с участием:

  <style name="MyThemeOverlay_Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
    <!-- color used by navigation icon and overflow icon -->
    <item name="colorOnPrimary">@color/...</item>
  </style>

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

Если вы используете androidx.appcompat.widget.Toolbarили MaterialToolbar со стилем по умолчанию ( Widget.MaterialComponents.Toolbar), вы можете использовать:

<androidx.appcompat.widget.Toolbar
    android:theme="@style/MyThemeOverlay_Toolbar2"

с участием:

  <style name="MyThemeOverlay_Toolbar2" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
    <!-- This attributes is used by title -->
    <item name="android:textColorPrimary">@color/white</item>

    <!-- This attributes is used by navigation icon and overflow icon -->
    <item name="colorOnPrimary">@color/secondaryColor</item>
  </style>
Габриэле Мариотти
источник
4

Я думаю, что если тема должна быть сгенерирована какой-то проблемой, но с ее динамически устанавливаемой черной стрелкой, поэтому я предложил попробовать эту.

Drawable backArrow = getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
backArrow.setColorFilter(getResources().getColor(R.color.md_grey_900), PorterDuff.Mode.SRC_ATOP);
getSupportActionBar().setHomeAsUpIndicator(backArrow);
Сиддхарт Патель
источник
2
Чем ваше решение отличается от @Parth Bhayani?
CoolMind
3

Я использую <style name="BaseTheme" parent="Theme.AppCompat.Light.NoActionBar>тему в своем приложении для Android и в теме NoActionBar,colorControlNormal свойство используется для изменения цвета значка навигации по умолчанию, стрелки кнопки «Назад» на моей панели инструментов.

styles.xml

<style name="BaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="colorControlNormal">@color/your_color</item> 
</style>
Android Player_Shreeya
источник
2

Просто и без забот

 <?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:titleTextColor="@color/white"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        </android.support.design.widget.AppBarLayout>

        <include layout="@layout/testing" />

    </android.support.design.widget.CoordinatorLayout>
исключение нулевого указателя
источник
2

Я сделал это так, используя библиотеку компонентов материала:

<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>
Сэм
источник
это работает: это позволяет вам изменить цвет значка меню гамбургера.
lnaie
1

Вы можете добавить этот код в свой класс java. Но вы должны создать векторный актив раньше, чтобы вы могли настроить стрелку назад.

actionBar.setHomeAsUpIndicator(R.drawable.ic_arrow_back_black_24dp);
Мохамад Фанди
источник
0

Стиль панели инструментов на Android 21+ немного отличается.

<style name="DarkTheme.v21" parent="DarkTheme.v19">
        <!-- toolbar background color -->
        <item name="android:navigationBarColor">@color/color_primary_blue_dark</item>
        <!-- toolbar back button color -->
        <item name="toolbarNavigationButtonStyle">@style/Toolbar.Button.Navigation.Tinted</item>
    </style>

    <style name="Toolbar.Button.Navigation.Tinted" parent="Widget.AppCompat.Toolbar.Button.Navigation">
        <item name="tint">@color/color_white</item>
    </style>
Педро Ромао
источник
-1

Если вам нужен белый цвет системы, вы можете использовать этот код

<com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:elevation="0dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar_notification"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:contentInsetLeft="0dp"
            app:contentInsetStart="0dp"
            app:contentInsetStartWithNavigation="0dp">

            <include layout="@layout/action_bar_notification" />
        </androidx.appcompat.widget.Toolbar>
    </com.google.android.material.appbar.AppBarLayout>

Заметка:- android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" ключ

Паста находится в вашем действии, где вы хотите отобразить кнопку возврата на панели действий.

final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar_notification);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(false);
iamkdblue
источник