새로운 머티리얼 테마에서 뒤로 화살표의 색을 바꾸는 방법은 무엇입니까?


193

SDK를 API 21로 업데이트했으며 이제 뒤로 / 위로 아이콘이 왼쪽을 가리키는 검은 색 화살표입니다.

검은 뒤로 화살표

회색으로 표시하고 싶습니다. 어떻게해야합니까?

예를 들어 Play 스토어에서 화살표는 흰색입니다.

스타일을 설정하기 위해이 작업을 수행했습니다. 에 사용 @drawable/abc_ic_ab_back_mtrl_am_alpha했습니다 homeAsUpIndicator. 드로어 블은 투명하지만 (알파 만) 화살표는 검은 색으로 표시됩니다. 에서처럼 색상을 설정할 수 있는지 궁금합니다 DrawerArrowStyle. 또는 유일한 해결책은 my를 만들어서 @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

기본 설정은 툴바 XML 태그 내에 android : theme = "@ style / Widget.AppCompat.Light.ActionBar"를 사용하여 약간 회색으로되어 있습니다. 색상은 # 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
이것은 colorControlNormal을 사용하여 다른 모든 위젯의 색조를 변경하지 않고 나를 위해 일한 유일한 것입니다
— Joris

4
이 솔루션의 문제점은 하나만 바꾸고 나머지는 흰색으로 남겨두고 싶다면 다른 모든 뒤로 화살표를 페인트한다는 것입니다.
— dabluck

24
효과가있다. 당신이 사용해야 있습니다 ContextCompat.getDrawable(this, R.drawable.abc_ic_ab_back_mtrl_am_alpha)때문에 getResources.getDrawable(int)사용되지 않습니다
— mrroboaat

3
당신이 그 자원을 직접 취득하고 당김 폴더 :)에 넣어하는 또 다른 가능한 해결책은 될 것이다
— Mauker

12
abc_ic_ab_back_mtrl_am_alpha는 23.2.0 지원 라이브러리
— Jon

206

Toolbar및 TintManager소스를 보면 drawable/abc_ic_ab_back_mtrl_am_alphastyle 속성 값으로 표시 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가 확장되었을 때 표시된 화살표를 색칠하는 스타일을 찾을 수 없습니다. 실마리? 분명히이 답변의 영향을받지 않습니다.
— Daniel Ochoa

6
android : prefix
— Seraphim의

7
불행히도 이것은 레벨 21 API이며 아래의 것을 지원하려는 경우 작동하지 않습니다.
— gphilip

10
부모 테마가 "NoActionBar"테마 중 하나에서 파생 colorControlNormal된 경우 루트가 아닌 루트 테마 를 설정 하는 것이 좋습니다 actionBarTheme.
— Jason Robinson

3
검색에 실패하고 실패하고 다시 검색하는 데 2 ​​시간이 걸렸습니다. 때로는 안드로이드의 스타일 '시스템'이 나를 미치게합니다! 이 방법은 다른 활동과 동일한 스타일을 사용하지 않는 활동이있는 경우에 특히 중요합니다.
— Bron Davies

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
— 다루는

3
colorControlNormal에는 API 21이 필요합니다.
— Adnan Ali

3
@AdnanAli AppCompat를 사용하는 경우 <API 21에서도 작동합니다. 분명히, APPCOMPAT이 되고 여기에 사용하고 있기 때문에 colorControlNormal되어 있지 접두사 android:.
— Vicky Chijwani 2016 년

3
그러나 이것은 다른 모든 위젯에서도 색조를 변경합니다. 확인란 및 라디오 버튼과 같은 다른 위젯에 영향을 미치지 않는 방법은 무엇입니까?
— Bruce

2
그러나 이것은 라디오 버튼 및 텍스트 편집 아래의 선과 같은 다른 컨트롤의 색상도 변경합니다.
— daka

66

툴바 테마에 단일 속성을 추가해야합니다.

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

이 toolbar_theme를 툴바에 적용하십시오.

또는

테마에 직접 적용 할 수 있습니다.

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

5
허용 대답 (아마도 가장 인기있는 솔루션은 그물에 발견을) 시도는 나를 위해 일을하지 않습니다하지만 이 하나 개의 작품 : 그래서 미친 안드로이드 프로그래밍 할 때.
— 국왕 킹

4
가장 간단한 답변. 다른 컨트롤 테마를 변경하지 않고도 작동합니다. 사용자 정의 도구 모음 테마를 도구 모음으로 설정하기 만하면됩니다. :)
— SimplyProgrammer

1
오, 당신은 단지 하나의 아이콘의 색상을 변경하기 위해 겪어야 할 고통. 첫 번째는 나를 위해 작동합니다. 두 번째는 사용자 정의 툴바 (및 다른 것에서도 분명히 작동)입니다. 3 년 후, 네오에게 감사드립니다.
— Aba

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

가장 좋은 답변! 감사합니다.
— shariful 이슬람

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 : theme = "@ style / ThemeOverlay.AppCompat.ActionBar"속성이 있습니다. 일단 제거하면 작동하기 시작했습니다.
— Rahul Hawge

10

Carles의 대답은 정답이지만 getDrawable (), 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.getDrawable () 호출 이 다음과 유사 하다는 것을 알았 습니다.

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.
— Narendra Singh

7

롤리팝 이전에 작동하는 솔루션을 찾았습니다. "actionBarWidgetTheme"내에서 "colorControlNormal"을 설정하여 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

여기에 이미지 설명을 입력하십시오

메뉴 탐색 아이콘 색상 변경

최종 변환 메뉴 아이콘 색상

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) 선언하지 않고이 페이지의 다른 답변에 언급 된 코드를 사용하여 onActivityCreated에서 뒤로 아이콘을 설정하는 것입니다

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

우리는 같은 문제에 부딪 쳤고 우리가 원하는 것은

앱 : collapseIcon

끝에 툴바의 속성, 잘 문서화되지 않았기 때문에 찾지 못했습니다 :)

<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} 표시 옵션을 설정하면 홈 버튼이 자동으로 활성화됩니다.
— P. Savrov

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>

참고 : 21 이하의 API에 대한 벡터 드로어 블 지원으로 인해 'android : src'대신 'srcCompat'이 사용됩니다.


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>

버디, 당신은 내 하루를 구했다. 나는 이것 만 하루 종일 보냈다. 나는 당신에게 더 많은 표를 줄 수 있기를 바랍니다.
— Dhaval Patel

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속성의 영향을받습니다 ). 서랍 화살표가 약간 큽니다.
— Ferran Maylinch

1
따라서 자체 드로어 블 리소스를 제공해야 할 것 같습니다. 이 도구를 사용하여 생성 할 수 shreyasachar.github.io/AndroidAssetStudio
— 인 Flávio 파리 아에게

-4

더 나은 해결책이 없다면 ...

내가 한 일은 @drawable/abc_ic_ab_back_mtrl_am_alpha이미지를 흰색으로 보이고 사진 편집기를 사용하여 원하는 색상으로 페인트하는 것입니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.