Jak zmienić kolor przycisku Wstecz paska Toolbar w systemie Android?

104

Nie mogłem zmienić koloru przycisku Wstecz. Używam Material Design na pasku narzędzi. W mojej aplikacji stosuję czarne tło paska narzędzi, ale projekt tyłu jest domyślnie czarny, dlatego chcę tylko zmienić kolor tego przycisku Wstecz. Proszę, daj mi rozwiązania.

Dziękuję Ci

Nazima Kauser MMF
źródło
3
<style name = "MyMaterialTheme.Base" parent = "Theme.AppCompat.Light.DarkActionBar">
Nazima Kauser MMF

Odpowiedzi:

82

użyj tego stylu

<style name="Theme.MyFancyTheme" parent="android:Theme.Holo">
    <item name="android:homeAsUpIndicator">@drawable/back_button_image</item>
</style>
Akhil Jayakumar
źródło
używam tego stylu. co mam zmienić w tym stylu?
Nazima Kauser MMF
możesz użyć niestandardowych plików graficznych dla przycisku Wstecz. po prostu nazwij to w `@ drawable / your_image '
Akhil Jayakumar
To najlepszy sposób na zrobienie tego. Ponieważ użycie R.drawable.abc_ic_ab_back_mtrl_am_alpha do zmiany koloru wiąże się z ryzykiem, ponieważ wersja wsparcia często zmienia zasób do rysowania.
Mostafa Imran
200

Możesz dodać styl do pliku 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>

i dodaj to jako motyw do paska narzędzi w toolbar layout.xml za pomocą app: theme , sprawdź poniżej

<?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>
Rajen Raiyarela
źródło
4
Działał jak urok i brzmi najbardziej stosownie.
Vijay Kumar Kanta
1
Cerować. To działa. Teraz potrzebuję tylko odpowiednika na iOS. Dzięki!
Ernesto
Lepiej byłoby jednak nazwać to ToolbarTheme
Leo Droidcoder
1
Dla mnie <style name = "ToolbarTheme" parent = "@ style / Theme.AppCompat.NoActionBar"> działało. Moim głównym tematem jest aplikacja <nazwa style = "AppTheme" rodzic = "Theme.AppCompat.NoActionBar">
Yar
3
Zadziałało. To jest bardziej odpowiednie niż zaakceptowana odpowiedź.
Domenico
87

Oto najprostszy sposób uzyskania Jasnego i ciemnego motywu dla app:themepaska narzędzi Toolbar.Musisz zmienić wartość tagu Toolbar

  • W przypadku czarnego tytułu paska narzędzi i czarnej strzałki w górę pasek narzędzi powinien zawierać następujący motyw:

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

Czarny tytuł paska narzędzi i strzałka w górę

  • W przypadku Białego tytułu paska narzędzi i Białej strzałki w górę pasek narzędzi powinien implementować następujący motyw:

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

Biały tytuł paska narzędzi i strzałka w górę

ch3tanz
źródło
68
W przypadku białego tytułu paska narzędzi i białej strzałki w górę użyj następującego motywu: android: theme = "@ style / ThemeOverlay.AppCompat.Dark.ActionBar"
Amol Patil,
Próbuję zrozumieć, dlaczego nazywa się ThemeOverlay? Dlaczego nie mogę użyć tutaj prostego Theme.AppCompat.Dark.ActionBar?
Gaket
@ ch3tanz Czy używasz ActionBar czy Toolbar? Dlaczego używasz stylów ActionBar?
f470071
@ f470071 Używam paska narzędzi. To tylko styl, który będzie wspierać we wszystkich wersjach. Możesz używać stylów Material Design, jeśli Twoja aplikacja jest kierowana na wersję wyższą niż Lollipop.
ch3tanz
Theme.AppCompat.Light.DarkActionBarw moim przypadku.
Evi Song
30

W przypadku białego tytułu paska narzędzi i białej strzałki w górę użyj następującego motywu:

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
Pankaj Talaviya
źródło
Wielkie dzięki, przede wszystkim rozwiązanie tylko u mnie działa.
Md Juyel Rana
23

Użyj tego:

<style name="BaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="colorControlNormal">@color/white</item> 
</style>
Sabin Acharya
źródło
5
Należy to zaakceptować. Każda odpowiedź to tylko zmiana ikony, a nie jej koloru.
Michał Jabłoński
12

Spróbuj tego,

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);
Parth Bhayani
źródło
7

Po prostu użyj MaterialToolbari zastąp domyślne kolory:

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

z:

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

wprowadź opis obrazu tutaj

Jeśli używasz androidx.appcompat.widget.Toolbarlub MaterialToolbar z domyślnym stylem ( Widget.MaterialComponents.Toolbar), możesz użyć:

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

z:

  <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>
Gabriele Mariotti
źródło
6

Możesz użyć własnej ikony, używając app:navigationIconi jako koloru tytułuapp:titleTextColor

Przykład:

<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" />
Mohamed Nageh
źródło
To zadziałało dla mnie, po prostu ustaw dowolną ikonę za pomocą tej liniiapp:navigationIcon="@drawable/ic_back_black"
Abhishek
polana to pomogło.
Mohamed Nageh
6

Nie musisz zmieniać stylu. Po skonfigurowaniu paska narzędzi jako paska akcji możesz kodować w ten sposób

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

Ale nie możesz zmienić koloru strzałki wstecz tą metodą

Nevil Ghelani
źródło
6

Jeśli chcesz mieć biały przycisk Wstecz (←) i biały tytuł paska narzędzi, wykonaj następujące czynności:

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

Zmień motyw z Darkna, Lightjeśli chcesz czarny przycisk Wstecz (←) i czarny tytuł paska narzędzi.

nhp
źródło
4

Myślę, że jeśli temat powinien być generowany jakiś problem, ale jego dynamicznie ustawiona czarna strzałka, więc zasugerowałem wypróbowanie tego.

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);
siddharth patel
źródło
2
Czym różni się Twoje rozwiązanie od @Parth Bhayani?
CoolMind
3

Używam <style name="BaseTheme" parent="Theme.AppCompat.Light.NoActionBar>motywu w mojej aplikacji na Androida oraz w motywie NoActionBar, colorControlNormalwłaściwość służy do zmiany koloru domyślnej ikony nawigacji Strzałka przycisku Wstecz na pasku narzędzi

style.xml

<style name="BaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="colorControlNormal">@color/your_color</item> 
</style>
Android Player_Shreeya
źródło
2

Proste i bez obaw

 <?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>
Wyjątek zerowego wskaźnika
źródło
2

Zrobiłem to w ten sposób korzystając z biblioteki Material Components:

<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
źródło
to działa: umożliwia zmianę koloru ikony menu hamburgera.
lnaie
2

Styl paska narzędzi w systemie Android 21+ jest nieco inny.

<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>
Pedro Romão
źródło
1

Możesz dodać ten kod do swojej klasy java. Ale musisz wcześniej utworzyć zasób wektorowy, aby móc dostosować strzałkę wstecz.

actionBar.setHomeAsUpIndicator(R.drawable.ic_arrow_back_black_24dp);
Mochamad Fandi
źródło
-1

Jeśli chcesz, aby system był w kolorze białym, możesz użyć tego kodu

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

Uwaga: - android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" jest kluczem

Wklej znajduje się w Twojej aktywności, w której chcesz wyświetlić przycisk Wstecz na pasku akcji

final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar_notification);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(false);
iamkdblue
źródło