툴바 텍스트 및 뒤로 화살표 색상을 설정하는 방법


116

툴바 배경은 어두운 색입니다. 텍스트와 뒤로 화살표를 흰색으로하고 싶습니다. 다음을 시도했지만 작동하지 않습니다.

<style name="Theme.MyTheme" parent="Theme.AppCompat.Light.NoActionBar">

        <item name="colorPrimary">@color/blue</item>
        <item name="colorPrimaryDark">@color/blue_darker</item>
        <item name="colorAccent">@color/purple</item>
        <!-- item name="android:textColorPrimary">@color/white</item--> // I don't want to set this, changes everywhere. 
        <item name="android:textColorSecondary">@color/white</item>
        <item name="android:toolbarStyle">@style/AppTheme.ToolbarStyle</item>
        <item name="toolbarStyle">@style/AppTheme.ToolbarStyle</item>

        <item name="drawerArrowStyle">@style/AppTheme.DrawerArrowStyle</item>

    </style>

    <style name="AppTheme.ToolbarStyle" parent="Base.Widget.AppCompat.Toolbar">
        <!--<item name="actionOverflowButtonStyle">@style/AppTheme.OverflowButtonStyle</item>-->
        <item name="android:textColor">@color/white</item> // doesn't work
        <item name="titleTextAppearance">@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse</item>
        <item name="android:titleTextAppearance">@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse</item>
        <item name="subtitleTextAppearance">@style/TextAppearance.Widget.AppCompat.Toolbar.Subtitle</item>
    </style>

10
에 추가 app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"하십시오 <android.support.v7.widget.Toolbar>; @yubarajpoudel이 말한 것처럼 뒤로 화살표와 텍스트는 흰색으로 표시됩니다.
1111161171159459134 2016-02-21

답변:


153

잘못된 부모로부터 연장 될 가능성이 있습니다. 그렇지 않은 경우에는 추가 시도 할 수 있습니다 style받는 toolbar당신이 테마의 설정을 무시하려면, 직접 레이아웃.

툴바 레이아웃에서 :

 <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/toolbar"
      android:layout_width="match_parent"
      android:layout_height="?attr/actionBarSize"
      android:minHeight="?attr/actionBarSize"
      app:theme="@style/ToolBarStyle"
      app:popupTheme="@style/ToolBarPopupStyle"
      android:background="@color/actionbar_color" />

스타일 :

 <!-- ToolBar -->
  <style name="ToolBarStyle" parent="Theme.AppCompat">
      <item name="android:textColorPrimary">@android:color/white</item>
      <item name="android:textColorSecondary">@android:color/white</item>
      <item name="actionMenuTextColor">@android:color/white</item>      
      <item name="actionOverflowButtonStyle">@style/ActionButtonOverflowStyle</item>
      <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
 </style>

5
이 스타일을 추가하는 동안 오류를주는 styles.xml파일
고팔 싱 Sirvi

1
당신은 질문에 대답 drawerArrowStyle 부분을 할 필요가 없습니다
luckyhandler

124

다음을 toolbar.xml로 추가합니다.

<?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:id="@+id/toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:fitsSystemWindows="true"
    android:minHeight="?attr/actionBarSize"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    android:background="?attr/colorPrimary">

</android.support.v7.widget.Toolbar>

그런 다음 필요한 레이아웃에서

<include layout="@layout/toolbar"/>

즐겨


10
예, 작동합니다! 특히 app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar".
1111161171159459134 2016-02-21

1
되어야합니다<include layout="@layout/toolbar"/>
Tim

63

활동 내부에서 사용할 수 있습니다.

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    toolbar.setTitleTextColor(getResources().getColor(android.R.color.white));

제목 색상 및 뒤로 화살표 흰색 모두에 대해 xml을 선택하려면 style.xml에이 스타일을 추가하면됩니다.

 <style name="ToolBarStyle" parent="Theme.AppCompat">
    <item name="android:textColorPrimary">@android:color/white</item>
    <item name="android:textColorSecondary">@android:color/white</item>
    <item name="actionMenuTextColor">@android:color/white</item>
</style>

툴바는 다음과 같습니다.

 <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        app:theme="@style/ToolBarStyle"
        android:layout_height="?attr/actionBarSize"
  />

1
이 작동합니다! 너무 많은 무작위 답변-주목해야 할 점은 android.support.v7.widget.Toolbar 중첩 : android.support.design.widget.AppBarLayout 많은 감사
Sagar Patel

1
자바 솔루션은 화살표 색상 변경되지 않습니다
자바 - 사랑

19

이 솔루션이 더 쉬울 수 있습니다. 그러나 더 높은 API 버전이 필요합니다 (23). 이 코드를 XML로 툴바에 추가하면됩니다.

<Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?android:attr/actionBarSize"
    android:background="?android:attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    android:titleTextColor="#ffffffff" />

사실 @VygintasB
톰 Esendam

1
android : titleTextColor = "# ffffffff"를 설정할 필요는 없습니다. android : theme = "@ style / ThemeOverlay.AppCompat.Dark.ActionBar"및 app : popupTheme = "@ style / ThemeOverlay.AppCompat.Light"
Almeida

16

사용하는 경우 AndroidX(2019 년 7 월 현재) 다음을 추가 할 수 있습니다.

<androidx.appcompat.widget.Toolbar
  android:id="@+id/toolbar"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  app:layout_collapseMode="pin"
  app:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar"
  app:popupTheme="@style/ThemeOverlay.MaterialComponents.Light"/>

노트! 이것은 Toolbar내부가 AppBarLayout아닌 내부 에 직접 배치되는 경우 작동하도록 테스트되었습니다.CollapsingToolbarLayout


9
<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/colorPrimaryDark"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>

이것은 appbarlayout. 감사!
Nuhman

8

이 방법이 도움이되었습니다.

<style name="AppTheme" parent="Theme.AppCompat.Light">
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">@color/primaryDark</item>
        <item name="colorAccent">@color/highlightRed</item>
        <item name="actionBarTheme">@style/ToolbarStyle</item>
</style>

<style name="ToolbarStyle" parent="Widget.AppCompat.ActionBar">
        <item name="android:textColorPrimary">@color/white</item>
</style>

6
<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/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/actionBar"
app:titleTextAppearance="@style/ToolbarTitleText"
app:theme="@style/ToolBarStyle">

<TextView
    android:id="@+id/title"
    style="@style/ToolbarTitleText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="hh"/>

<!-- ToolBar -->
<style name="ToolBarStyle" parent="Widget.AppCompat.Toolbar">
    <item name="actionMenuTextColor">#ff63BBF7</item>
</style>

app : theme = "@ style / ToolBarStyle"사용

참고 자료 : http : //blog.csdn.net/wyyl1/article/details/45972371


1
답변을 설명해주세요. 코드를 게시하는 것만으로는 질문에 대한 답변이 명확하지 않습니다.
SuperBiasedMan

3

XML 파일에서 시도하십시오.

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        app:titleTextColor="@color/colorAccent"
        app:theme="@style/ToolbarColoredBackArrow"
        app:subtitleTextColor="@color/colorAccent"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay" />

그리고 이것은 colors.xml 파일입니다.

    <color name="colorAccent">YOUR_COLOR</color>

1
당신은 응용 프로그램에 있었는지 우리와 함께 공유 할 수 있습니다하십시오 : 테마 = "@ 스타일 / ToolbarColoredBackArrow"
사이먼

3

이 줄을에 추가합니다 Toolbar. 100 % 작동

android:theme="@style/Theme.AppCompat.Light.DarkActionBar"

1

낮은 버전의 API에서 많은 방법을 시도해보십시오. 가능한 방법은 <item name="actionMenuTextColor">@color/your_color</item>Android 네임 스페이스를 사용하는 것입니다.

추신:

  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>

    <!-- change the textColor -->
    <item name="actionMenuTextColor">@color/actionMenuTextColor</item>
</style>

1

원래 스타일의 상속을 계속 유지하고 싶을 수 있으므로 자리 표시자를 사용 했으므로 그대로 따르십시오.

전에

<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/{{originalBaseStyle}}"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

후:

styles.xml

<style name="{{yourToolbarStyle}}" parent="{{originalBaseStyle}}">
    <item name="android:textColorPrimary">@android:color/white</item>
    <item name="android:textColorSecondary">@android:color/white</item>
    <item name="actionMenuTextColor">@android:color/white</item>
    <item name="actionOverflowButtonStyle">@style/ActionButtonOverflowStyle</item>
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>

따라서

<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/{{yourToolbarStyle}}"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

1

Android Studios에서 생성 한 활동 템플릿을 따르는 경우, styles.xml에 정의해야하는 AppBarOverlay의 Android 테마가 필요한 것은 AppBarLayout입니다. 그러면 흰색의 toobar / actionbar 색상 텍스트가 표시됩니다.

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">  ...

styles.xml에서 다음이 있는지 확인하십시오.

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

1

이 접근 방식은 Material Components 라이브러리를 사용하여 저에게 효과적이었습니다.

에서 styles.xml:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <!-- Your styles here -->

    <item name="toolbarStyle">@style/AppTheme.Toolbar</item>
</style>

<style name="AppTheme.Toolbar" parent="Widget.MaterialComponents.Toolbar">
    <item name="titleTextColor">@android:color/white</item>
</style>

이 답변에서 수정 : https://stackoverflow.com/a/48205577/238753


0

툴바의 뒤로 아이콘 드로어 블을 변경하려면 다음을 사용할 수 있습니다 . 테마에을
추가합니다 <item name="toolbarStyle">@style/ToolbarStyle</item>.
그리고 여기에 그 ToolbarStyle자체 가 있습니다 :

<style name="ToolbarStyle" parent="Widget.AppCompat.Toolbar">
    <item name="navigationIcon">@drawable/ic_up_indicator</item>
</style>

0

Android Studio 3.0의 최신 반복을 사용하고 활동 클래스를 생성하는 경우 스타일 파일에서 다음을 변경합니다.

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

이에:

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.ActionBar" />
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.