Appcompat 21에서 툴바 색상 변경


93

새로운 Appcompat 21 Material Design 기능을 테스트하고 있습니다. 따라서 다음과 같은 툴바를 만들었습니다.

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_my_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="@style/ThemeOverlay.AppCompat.ActionBar"/>

내 기본 레이아웃 파일에 포함 시켰습니다.

그런 다음 다음과 같이 supportActionBar로 설정했습니다.

Toolbar toolBar = (Toolbar)findViewById(R.id.activity_my_toolbar);
setSupportActionBar(toolBar);

작동하지만 어떻게 든 도구 모음을 사용자 정의하는 방법을 알 수 없습니다. 회색이고 텍스트는 검은 색입니다. 배경 및 텍스트 색상은 어떻게 변경해야합니까?

이 지침을 살펴 보았습니다.

http://android-developers.blogspot.de/2014/10/appcompat-v21-material-design-for-pre.html

색상을 변경하기 위해 무엇을 감독 했습니까?

 <style name="AppTheme" parent="Theme.AppCompat.Light">
    <item name="android:windowActionBar" tools:ignore="NewApi">false</item>
    <item name="windowActionBar">false</item>
</style>

수정 :

테마에 다음 코드 줄을 추가하여 배경색을 변경할 수있었습니다.

<item name="colorPrimary">@color/actionbar</item>
<item name="colorPrimaryDark">@color/actionbar_dark</item>

그러나 텍스트 색상에는 영향을주지 않습니다. 내가 무엇을 놓치고 있습니까? 검은 색 텍스트와 검은 색 메뉴 버튼 대신 흰색 텍스트와 흰색 메뉴 버튼을 선호합니다.

여기에 이미지 설명 입력


활동에 대한 테마는 어떻게 생겼습니까? 툴바의 색상을 원하는대로 설정 했습니까?
tyczj

@tyczj 내 게시물에 테마를 추가하고 있습니다
user2410644 2014-10-24

확인 잘 당신이 당신의 색상을 설정 해달라고 대답이
tyczj

@tyczj, 그래, 내 게시물을 다시 편집하고 primarycolor와 primarydarkcolor를 추가했지만 어떤 속성이 텍스트 색상을 변경합니까?
user2410644 2014-10-24

답변:


185

다시 이것은 당신이 제공 한 링크에 모두 있습니다

텍스트를 흰색으로 변경하려면 테마를 변경하기 만하면됩니다.

이 테마 사용

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_my_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

4
예, 방금 똑같은 것을 알아 차 렸습니다. 어두운 액션 바에 밝은 텍스트와 밝은 액션 바 어두운 텍스트가 있다는 것이 갑자기 혼란 스러웠습니다. 감사합니다!
user2410644 2014-10-24

4
이렇게 해봤지만 여전히 검은 색 글꼴이 있는데 뭔가 빠졌나요?
alijandro

6
따라서 app : theme 의 @ style / ThemeOverlay.AppCompat.Dark.ActionBar 가 도구 모음의 텍스트를 흰색으로 변경하고 @ style / ThemeOverlay.AppCompat.Light가이를 검정색으로 변경하는 것처럼 보입니다. 배경색은 android : background 속성에서 선택됩니다. 반면 app : popupTheme : @ style / ThemeOverlay.AppCompat.Dark는 흰색 텍스트와 검정색 배경을 제공하고 @ style / ThemeOverlay.AppCompat.Light는 검정색 텍스트와 흰색 배경을 제공합니다. gist.github.com/mnemonicflow/7cba09f6461ec86b22b7
bitek

1
감사! : D google은 안드로이드에서 툴바의 스타일링을 정말 망쳤습니다. 이 질문에 50 개의 찬성 투표와 22 개의 시작이 있다는 사실이 그 증거입니다.
FRR

1
스타일을 설정 한 후에도 제목이 여전히 검은 색으로 유지되는 경우. 당신이 확장 확인 AppCompatActivity대신 Activity.
stefana

59

2019 년 12 월 11 일 업데이트 : 재료 구성 요소 라이브러리

Material Components 및 Androidx 라이브러리를 사용하여 다음을 사용할 수 있습니다.

  • android:background레이아웃 의 속성 :

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
  • 기본 스타일을 적용 style="@style/Widget.MaterialComponents.Toolbar.Primary"하거나 상속 된 스타일을 사용자 정의합니다.

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        style="@style/Widget.MaterialComponents.Toolbar.Primary"
  • android:theme속성을 사용하여 기본 색상을 재정의 합니다.

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:theme="@style/MyThemeOverlay_Toolbar"

와:

  <style name="MyThemeOverlay_Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
    <item name="android:textColorPrimary">....</item>
    <item name="colorPrimary">@color/.....
    <item name="colorOnPrimary">@color/....</item>
  </style>

OLD : 지원 라이브러리 :
당신은 사용할 수있는 app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"다른 답변에 제안 테마를,하지만 당신은 또한이 같은 솔루션을 사용할 수 있습니다 :

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    style="@style/HeaderBar"
    app:theme="@style/ActionBarThemeOverlay"
    app:popupTheme="@style/ActionBarPopupThemeOverlay"/>

그리고 다음 스타일로 ui 요소를 완전히 제어 할 수 있습니다.

<style name="ActionBarThemeOverlay" parent="">
    <item name="android:textColorPrimary">#fff</item>
    <item name="colorControlNormal">#fff</item>
    <item name="colorControlHighlight">#3fff</item>
</style>

<style name="HeaderBar">
    <item name="android:background">?colorPrimary</item>
</style>

<style name="ActionBarPopupThemeOverlay" parent="ThemeOverlay.AppCompat.Light" >
    <item name="android:background">@android:color/white</item>
    <item name="android:textColor">#000</item>
</style>

이것은 나를 위해 작동하지 않습니다. 팝업 메뉴는 여전히 흰색 텍스트가있는 검은 색 배경입니다
Sunkas 2015-08-11

1
도움이되지 않습니다. Min API 레벨 21
Vaibhav Gupta

3
@VaibhavGupta APPCOMPAT는 minSdk = 7 없습니다 (21)가 필요합니다
가브리엘 MARIOTTI

10

안녕하세요, Android 5.0에만 Material 테마를 적용하려면이 테마를 추가 할 수 있습니다.

<style name="AppHomeTheme" parent="@android:style/Theme.Material.Light">

        <!-- customize the color palette -->
        <item name="android:colorPrimary">@color/blue_dark_bg</item>
        <item name="android:colorPrimaryDark">@color/blue_status_bar</item>
        <item name="android:colorAccent">@color/blue_color_accent</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="android:textColorPrimary">@android:color/white</item>
        <item name="android:actionMenuTextColor">@android:color/black</item>
    </style> 

아래 줄은 머티리얼 디자인 액션 바의 텍스트 색상을 담당합니다.

<item name="android:textColorPrimary">@android:color/white</item>

6

사용자 정의 도구 모음 클래스를 만들어 사용자 정의 도구 모음 항목 색상을 동적으로 설정할 수 있습니다 .

package view;

import android.app.Activity;
import android.content.Context;
import android.graphics.ColorFilter;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffColorFilter;
import android.support.v7.internal.view.menu.ActionMenuItemView;
import android.support.v7.widget.ActionMenuView;
import android.support.v7.widget.Toolbar;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AutoCompleteTextView;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.TextView;

public class CustomToolbar extends Toolbar{

    public CustomToolbar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // TODO Auto-generated constructor stub
    }

    public CustomToolbar(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
    }

    public CustomToolbar(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
        ctxt = context;
    }

    int itemColor;
    Context ctxt;

    @Override 
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        Log.d("LL", "onLayout");
        super.onLayout(changed, l, t, r, b);
        colorizeToolbar(this, itemColor, (Activity) ctxt);
    } 

    public void setItemColor(int color){
        itemColor = color;
        colorizeToolbar(this, itemColor, (Activity) ctxt);
    }



    /**
     * Use this method to colorize toolbar icons to the desired target color
     * @param toolbarView toolbar view being colored
     * @param toolbarIconsColor the target color of toolbar icons
     * @param activity reference to activity needed to register observers
     */
    public static void colorizeToolbar(Toolbar toolbarView, int toolbarIconsColor, Activity activity) {
        final PorterDuffColorFilter colorFilter
                = new PorterDuffColorFilter(toolbarIconsColor, PorterDuff.Mode.SRC_IN);

        for(int i = 0; i < toolbarView.getChildCount(); i++) {
            final View v = toolbarView.getChildAt(i);

            doColorizing(v, colorFilter, toolbarIconsColor);
        }

      //Step 3: Changing the color of title and subtitle.
        toolbarView.setTitleTextColor(toolbarIconsColor);
        toolbarView.setSubtitleTextColor(toolbarIconsColor);
    }

    public static void doColorizing(View v, final ColorFilter colorFilter, int toolbarIconsColor){
        if(v instanceof ImageButton) {
            ((ImageButton)v).getDrawable().setAlpha(255);
            ((ImageButton)v).getDrawable().setColorFilter(colorFilter);
        }

        if(v instanceof ImageView) {
            ((ImageView)v).getDrawable().setAlpha(255);
            ((ImageView)v).getDrawable().setColorFilter(colorFilter);
        }

        if(v instanceof AutoCompleteTextView) {
            ((AutoCompleteTextView)v).setTextColor(toolbarIconsColor);
        }

        if(v instanceof TextView) {
            ((TextView)v).setTextColor(toolbarIconsColor);
        }

        if(v instanceof EditText) {
            ((EditText)v).setTextColor(toolbarIconsColor);
        }

        if (v instanceof ViewGroup){
            for (int lli =0; lli< ((ViewGroup)v).getChildCount(); lli ++){
                doColorizing(((ViewGroup)v).getChildAt(lli), colorFilter, toolbarIconsColor);
            }
        }

        if(v instanceof ActionMenuView) {
            for(int j = 0; j < ((ActionMenuView)v).getChildCount(); j++) {

                //Step 2: Changing the color of any ActionMenuViews - icons that
                //are not back button, nor text, nor overflow menu icon.
                final View innerView = ((ActionMenuView)v).getChildAt(j);

                if(innerView instanceof ActionMenuItemView) {
                    int drawablesCount = ((ActionMenuItemView)innerView).getCompoundDrawables().length;
                    for(int k = 0; k < drawablesCount; k++) {
                        if(((ActionMenuItemView)innerView).getCompoundDrawables()[k] != null) {
                            final int finalK = k;

                            //Important to set the color filter in seperate thread, 
                            //by adding it to the message queue
                            //Won't work otherwise. 
                            //Works fine for my case but needs more testing

                            ((ActionMenuItemView) innerView).getCompoundDrawables()[finalK].setColorFilter(colorFilter);

//                              innerView.post(new Runnable() {
//                                  @Override
//                                  public void run() {
//                                      ((ActionMenuItemView) innerView).getCompoundDrawables()[finalK].setColorFilter(colorFilter);
//                                  }
//                              });
                        }
                    }
                }
            }
        }
    }



}

그런 다음 레이아웃 파일에서 참조하십시오. 이제 다음을 사용하여 사용자 정의 색상을 설정할 수 있습니다.

toolbar.setItemColor(Color.Red);

출처 :

이 작업을 수행하기위한 정보를 찾았습니다. Android 툴바 아이콘 색상을 동적으로 변경하는 방법

그런 다음 편집하고 개선하여 여기에 게시했습니다. GitHub : AndroidDynamicToolbarItemColor


5

이것은 DarkActionBar로 알려진 것으로, 원하는 스타일을 얻으려면 다음 테마를 사용해야 함을 의미합니다.

<android.support.v7.widget.Toolbar  
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="@dimen/triple_height_toolbar"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

2

다음과 같이 툴바에서 텍스트 색상을 변경할 수 있습니다.

<item name="android:textColorPrimary">#FFFFFF</item>
<item name="android:textColor">#FFFFFF</item>

2

다음 toolbar과 같이 사용하여이를 달성하십시오 .

<android.support.v7.widget.Toolbar
        android:id="@+id/base_toolbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

1

styles.xml에서 이것을 시도하십시오.

colorPrimary는 도구 모음 색상입니다.

<resources>

<style name="AppTheme" parent="Theme.AppCompat">
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_pressed</item>
    <item name="colorAccent">@color/accent</item>
</style>

그런데 이클립스에서 빌드 했나요?


1

나는 더 많은 연구 후에이 문제를 해결했습니다.

Api21 이상 사용

   <item name="android:textColorPrimary">@color/white</item>

낮은 버전 용

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

1

앱 전체에서 툴바의 색상을 변경하려면 styles.xml을 활용하십시오. 일반적으로 프로그래밍 방식으로 무언가를 시도하지 않는 한 Java 코드에서 UI 구성 요소를 변경하지 않습니다. 이것이 한 번만 설정된 경우 코드를 더 깔끔하게 만들기 위해 xml에서 수행해야합니다. styles.xml은 다음과 같습니다.

    <!-- Base application theme. -->
<style name="YourAppName.AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Color Primary will be your toolbar color -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <!-- Color Primary Dark will be your default status bar color -->
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
</style>

AndroidManifext.xml에서 위의 스타일을 다음과 같이 사용해야합니다.

    <application
        android:theme="@style/YourAppName.AppTheme">
    </application>

활동마다 다른 도구 모음 색상을 원했습니다. 그래서 다음과 같이 스타일을 다시 활용했습니다.

    <style name="YourAppName.AppTheme.Activity1">
    <item name="colorPrimary">@color/activity1_primary</item>
    <item name="colorPrimaryDark">@color/activity1_primaryDark</item>
</style>

<style name="YourAppName.AppTheme.Activity2">
    <item name="colorPrimary">@color/activity2_primary</item>
    <item name="colorPrimaryDark">@color/activity2_primaryDark</item>
</style>

다시, AndroidManifest.xml의 각 활동에 다음과 같이 스타일을 적용하십시오.

<activity
    android:name=".Activity2"
    android:theme="@style/YourAppName.AppTheme.Activity2"
</activity>

<activity
    android:name=".Activity1"
    android:theme="@style/YourAppName.AppTheme.Activity1"
</activity>

0

툴바와 함께 AppCompatActivity를 흰색 배경으로 사용하는 사람들을위한 것입니다. 이 코드를 사용하십시오.

업데이트 : 2017 년 12 월

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

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_edit"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:popupTheme="@style/AppTheme.AppBarOverlay"
        app:title="Edit Your Profile"/>

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

1
기본 툴바와의 차이점은 무엇입니까?
CoolMind
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.