Làm thế nào để thay đổi màu sắc của mũi tên quay lại trong chủ đề vật liệu mới?

Tôi đã cập nhật SDK của mình lên API 21 và bây giờ biểu tượng sao lưu / lên là một mũi tên màu đen chỉ về bên trái.

Tôi muốn nó có màu xám. Làm thế nào tôi có thể làm điều đó?

Trong Cửa hàng Play, ví dụ, mũi tên có màu trắng.

Tôi đã làm điều này để thiết lập một số phong cách. Tôi đã sử dụng @drawable/abc_ic_ab_back_mtrl_am_alphacho homeAsUpIndicator. Drawable đó là trong suốt (chỉ alpha) nhưng mũi tên được hiển thị màu đen. Tôi tự hỏi nếu tôi có thể thiết lập màu sắc như tôi làm trong DrawerArrowStyle. Hoặc nếu giải pháp duy nhất là tạo của tôi @drawable/grey_arrowvà sử dụng nó cho 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>

Giải pháp của tôi cho đến nay là lấy @drawable/abc_ic_ab_back_mtrl_am_alphacái có vẻ là màu trắng và tô nó theo màu tôi muốn bằng trình chỉnh sửa ảnh. Nó hoạt động, mặc dù tôi muốn sử dụng @color/actionbar_textnhư trong DrawerArrowStyle.

Bạn có thể đạt được nó thông qua mã. Lấy mũi tên quay lại có thể vẽ được, sửa đổi màu của nó bằng bộ lọc và đặt nó làm nút quay lại.

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

Sửa đổi 1:

Bắt đầu từ API 23 (Marshmallow), tài nguyên abc_ic_ab_back_mtrl_am_alphacó thể rút được được đổi thành abc_ic_ab_back_material.

BIÊN TẬP:

Bạn có thể sử dụng mã này để đạt được kết quả bạn muốn:

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

Nhìn vào Toolbarvà TintManagernguồn, drawable/abc_ic_ab_back_mtrl_am_alphađược pha màu với giá trị của thuộc tính style colorControlNormal.

Tôi đã thử thiết lập điều này trong dự án của tôi (với <item name="colorControlNormal">@color/my_awesome_color</item>chủ đề của tôi), nhưng nó vẫn là màu đen đối với tôi.

Cập nhật :

Tìm thấy rồi. Bạn cần đặt actionBarThemethuộc tính ( không actionBarStyle ) với colorControlNormal.

Ví dụ:

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

Đã thử tất cả các đề xuất ở trên. Cách duy nhất mà tôi quản lý để thay đổi màu của biểu tượng điều hướng mặc định Mũi tên nút Quay lại trong thanh công cụ của tôi là đặt colorControlN normal trong chủ đề cơ sở như thế này. Có lẽ là do thực tế là cha mẹ đang sử dụng Theme.AppCompat.Light.NoActionBar

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

Cần thêm một thuộc tính cho chủ đề thanh công cụ của bạn -

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

Áp dụng thanh công cụ này_theme cho thanh công cụ của bạn.

HOẶC LÀ

bạn có thể trực tiếp áp dụng cho chủ đề của bạn -

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

Chỉ cần thêm

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

đến chủ đề ứng dụng hiện tại của bạn.

Nếu sử dụng Toolbar, bạn có thể thử điều này

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

Như đã nói trên hầu hết các ý kiến ​​trước đây, giải pháp là thêm

<item name="colorControlNormal">@color/white</item> đến chủ đề ứng dụng của bạn. Nhưng hãy xác nhận rằng bạn không có chủ đề khác được xác định trong thành phần Thanh công cụ trên bố cục của bạ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" />

Câu trả lời của Carles là câu trả lời đúng, nhưng một vài trong số các phương thức như getDrawable (), getColor () đã bị phản đối tại thời điểm tôi viết câu trả lời này . Vì vậy, câu trả lời cập nhật sẽ là

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

Sau một số truy vấn stackoverflow khác, tôi thấy rằng việc gọi ContextCompat.getDrawable () tương tự như

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

Và ContextCompat.getColor () tương tự như

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

Liên kết 1: ContextCompat.getDrawable ()

Liên kết 2: ContextCompat.getColor ()

Tôi tìm thấy một giải pháp hoạt động trước Lollipop. Đặt "colorControlN normal" trong "actionBarWidgetTheme" để thay đổi màu homeAsUpTheicator. Sửa đổi câu trả lời của rockgecko từ trên xuống để trông như thế này:

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

Trên compileSdkVersoin 25, bạn có thể làm điều này:

kiểu tệp

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

Sử dụng phương pháp dưới đây:

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

Bây giờ bạn có thể thiết lập drawable với:

getSupportActionBar().setHomeAsUpIndicator(getColoredArrow());

Thay đổi Menu Nav Icon Color

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

Một giải pháp khác có thể phù hợp với bạn là không khai báo thanh công cụ của bạn là thanh hành động của ứng dụng (bằng setActionBarhoặc setSupportActionBar) và đặt biểu tượng quay lại trong onActivityCreated của bạn bằng cách sử dụng mã được đề cập trong câu trả lời khác trên trang này

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

Bây giờ, bạn sẽ không nhận được cuộc onOptionItemSelectedgọi lại khi nhấn nút quay lại. Tuy nhiên, bạn có thể đăng ký sử dụng setNavigationOnClickListener. Đây là những gì tôi làm:

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

Tôi không chắc nó có hoạt động không nếu bạn làm việc với các mục menu.

Chúng tôi đã gặp phải cùng một vấn đề và tất cả những gì chúng tôi muốn là đặt

ứng dụng: sụp đổ

thuộc tính trong thanh công cụ cuối cùng, cái mà chúng ta không tìm thấy vì nó không được ghi chép tốt lắm :)

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

thử cái này

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

chức năng gọi:

enableActionBarHomeButton(this, R.color.white);

Đây là những gì làm việc cho tôi:

Thêm các thuộc tính dưới đây vào chủ đề của bạn.

Để thay đổi thanh công cụ / thanh tác động trở lại mũi tên phía trên api 21

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

Để thay đổi thanh công cụ / thanh tác động trở lại mũi tên bên dưới api 21

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

Để thay đổi mũi tên chế độ hành động trở lại

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

Để xóa bóng thanh công cụ / thanh hành động

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

Để thay đổi thanh hành động tràn

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

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

Lưu ý: 'srcCompat' được sử dụng thay vì 'android: src' vì hỗ trợ có thể vẽ vector cho api dưới 21

Tôi vừa thay đổi chủ đề thanh công cụ thành @ style / ThemeOverlay.AppCompat.Light

và mũi tên trở thành màu xám đen

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

Đây là cách tôi đã làm trong Thành phần Vật liệu:

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

Giải pháp rất đơn giản

Chỉ cần đặt dòng sau vào phong cách của bạn có tên là AppTheme

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

Bây giờ toàn bộ mã xml của bạn sẽ trông giống như hiển thị bên dưới (kiểu mặc định).

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

Bạn có thể thay đổi màu của biểu tượng điều hướng theo chương trình như sau:

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

Chỉ cần loại bỏ android:homeAsUpIndicatorvà homeAsUpIndicatortừ chủ đề của bạn và nó sẽ ổn thôi. Các colorthuộc tính trong DrawerArrowStylephong cách của bạn phải là đủ.

Trừ khi có một giải pháp tốt hơn ...

Những gì tôi đã làm là chụp những @drawable/abc_ic_ab_back_mtrl_am_alphabức ảnh dường như là màu trắng và vẽ chúng theo màu tôi muốn bằng trình chỉnh sửa ảnh.