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


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

ToolbarTintManager소스를 보면 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:homeAsUpIndicatorhomeAsUpIndicator테마에서 그것은 잘 될 것입니다. 스타일 의 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.