新しいツールバーのタイトル色をどのように設定しますか?


119

新しいv7ツールバーを使用していますが、私は一生、タイトルの色を変更する方法を理解できません。ツールバーの@styleをstyles.xmlで宣言されたスタイルに設定し、textColorでtitleTextStyleを適用しました。何か不足していますか?私はロリポップをコーディングしていますが、現在キットカットのデバイスでテストしています。

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="@style/Theme.AppCompat.Light">
        <item name="android:windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
    </style>

    <style name="ActionBar" parent="Theme.AppCompat">
        <item name="android:background">@color/actionbar_background</item>
        <item name="android:titleTextStyle">@style/ActionBar.TitleTextStyle</item>
    </style>

    <style name="ActionBar.TitleTextStyle" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="android:textColor">@color/actionbar_title_text</item>
    </style>

</resources>

actionbar.xml:

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar_actionbar"
    android:layout_width="match_parent"
    android:layout_height="?actionBarSize"
    style="@style/ActionBar"/>

回答:


241

オプション1)すばやく簡単な方法(ツールバーのみ)

appcompat-v7-r23以降、次の属性を自分のToolbarスタイルで直接使用できます。

app:titleTextColor="@color/primary_text"
app:subtitleTextColor="@color/secondary_text"

最小SDKが23でネイティブを使用している場合はToolbar、名前空間プレフィックスをに変更するだけandroidです。

Javaでは、次のメソッドを使用できます。

toolbar.setTitleTextColor(Color.WHITE);
toolbar.setSubtitleTextColor(Color.WHITE);

これらのメソッドは、カラーリソースIDではなくcolor intを取ります。

オプション2)ツールバーのスタイルとテーマの属性を上書きする

layout / xxx.xml

<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="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.MyApp.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    style="@style/Widget.MyApp.Toolbar.Solid"/>

values / styles.xml

<style name="Widget.MyApp.Toolbar.Solid" parent="Widget.AppCompat.ActionBar">
    <item name="android:background">@color/actionbar_color</item>
    <item name="android:elevation" tools:ignore="NewApi">4dp</item>
    <item name="titleTextAppearance">...</item>
</style>

<style name="ThemeOverlay.MyApp.ActionBar" parent="ThemeOverlay.AppCompat.ActionBar">
    <!-- Parent theme sets colorControlNormal to textColorPrimary. -->
    <item name="android:textColorPrimary">@color/actionbar_title_text</item>
</style>

助けて!私のアイコンも色が変わりました!

@PeterKnutさんは、これがオーバーフローボタン、ナビゲーションドロワーボタン、戻るボタンの色に影響することを報告しました。また、テキストの色を変更しますSearchView

アイコンの色について:colorControlNormal継承元

  • android:textColorPrimary 暗いテーマ(黒地に白)
  • android:textColorSecondary 明るいテーマ用(白地に黒)

これをアクションバーのテーマに適用すると、アイコンの色をカスタマイズできます。

<item name="colorControlNormal">#de000000</item>

appcompat-v7にはr23までのバグがあり、次のようにネイティブの対応物もオーバーライドする必要があります。

<item name="android:colorControlNormal" tools:ignore="NewApi">?colorControlNormal</item>

助けて!私のSearchViewは混乱しています!

注:このセクションは廃止されている可能性があります。

何らかの理由で、appcompat-v7に含まれているものとは異なる視覚的、技術的にではない戻る矢印を使用する検索ウィジェットを使用するため、アプリのテーマで手動で設定する必要があります。サポートライブラリのドローアブルは正しく色付けされます。それ以外の場合は常に白になります。

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

検索ビューのテキストについては...簡単な方法はありません。ソースを掘り下げた後、私はテキストビューにアクセスする方法を見つけました。私はこれをテストしていませんので、これがうまくいかなかったらコメントで知らせてください。

SearchView sv = ...; // get your search view instance in onCreateOptionsMenu
// prefix identifier with "android:" if you're using native SearchView
TextView tv = sv.findViewById(getResources().getIdentifier("id/search_src_text", null, null));
tv.setTextColor(Color.GREEN); // and of course specify your own color

ボーナス:ActionBarスタイルとテーマ属性をオーバーライドする

デフォルトアクションappcompat-v7アクションバーの適切なスタイルは次のようになります。

<!-- ActionBar vs Toolbar. -->
<style name="Widget.MyApp.ActionBar.Solid" parent="Widget.AppCompat.ActionBar.Solid">
    <item name="background">@color/actionbar_color</item> <!-- No prefix. -->
    <item name="elevation">4dp</item> <!-- No prefix. -->
    <item name="titleTextStyle">...</item> <!-- Style vs appearance. -->
</style>

<style name="Theme.MyApp" parent="Theme.AppCompat">
    <item name="actionBarStyle">@style/Widget.MyApp.ActionBar.Solid</item>
    <item name="actionBarTheme">@style/ThemeOverlay.MyApp.ActionBar</item>
    <item name="actionBarPopupTheme">@style/ThemeOverlay.AppCompat.Light</item>
</style>

2
このソリューションにはさまざまな副作用があります。textColorPrimaryは、ナビゲーションドロワーボタンと検索ウィジェットのテキストにも適用されます。また、戻るボタンの色が白に設定されています(理由は問わないでください)。
Peter Knut

@PeterKnut当時、私は提案されたソリューションがいかに不完全であるかを理解していませんでした。編集後-これは私がそれを使用する方法であり、機能します。ただし、検索ビューのテキストの色のスニペットを確認してください。
Eugen Pechanec 2015年

今ではほぼ正しく動作します。2つの注意:検索ウィジェットでテキストを掘るのは良い考えではありません。IDは将来変更される可能性があります。Widget.MyApp.ActionBarのBackgroundプロパティは、ボタンやツールチップの背景にも影響します。背景は<android.support.v7.widget.Toolbar>で直接設定する必要があります。
Peter Knut

私は同意します。それは良い考えではありません。少なくともそこにnullチェックを追加します(ただし、そのIDが変更される確率は何ですか)。背景について:そうではありません。ツールバー要素にスタイルとして追加した場合、背景はツールバーウィジェットにのみ適用されます。で背景を定義ThemeOverlayしてテーマとして使用すると、すべての子要素の背景にも色が付きます。
Eugen Pechanec、2015年

OK、あなたはスタイル対テーマで正しいです。私の間違い。
Peter Knut

40

検索ウィジェットでテキストの色ではなくタイトルの色のみを変更する必要がある場合の解決策は次のとおりです。

layout / toolbar.xml

<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:background="@color/toolbar_bg"
    app:theme="@style/AppTheme.Toolbar"
    app:titleTextAppearance="@style/AppTheme.Toolbar.Title"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"/>

values / themes.xml

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="windowActionBar">false</item>
    </style>

    <style name="AppTheme.Toolbar" parent="ThemeOverlay.AppCompat.ActionBar">
        <!-- Customize color of navigation drawer icon and back arrow --> 
        <item name="colorControlNormal">@color/toolbar_icon</item>
    </style>

    <style name="AppTheme.Toolbar.Title" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
        <!-- Set proper title size -->
        <item name="android:textSize">@dimen/abc_text_size_title_material_toolbar</item>
        <!-- Set title color -->
        <item name="android:textColor">@color/toolbar_title</item>
    </style>
</resources>

同様に、subtitleTextAppearanceも設定できます。


ツールバーがフラグメントに存在するかアクティビティに存在するかによって、タイトルの色が異なるという問題がありました。このトリックを使用して色をオーバーライドすることは、私が見つけた唯一の修正でした(色を変更する他の方法は機能しませんでした)。これがもっと多くの人の役に立つことを願っています。ありがとう!
Pedro Loureiro、2015

3
これを指定する必要がある@Peter Knutは、API21以降でのみ機能します。これにより、役に立たなくなります
DoruChidean

@DoruChideanはJelly Bean(API 16)でテストされました:チャームのように動作します!
crubio 2016年

アクティビティにテーマを設定することはできません。IE、<activity android:name = "。SomeActivity" android:theme = "@ style / AppTheme.Toolbar"
lostintranslation 2017年

11

API 23以降をサポートしている場合、titleTextColor属性を使用してツールバーのタイトル色を設定できるようになりました

layout / toolbar.xml

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:titleTextColor="@color/colorPrimary"
        />

MyActivity.java

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar)
toolbar.setTitleTextColor(Color.WHITE);

これらはappcompatライブラリでもサポートされているようです。
Eugen Pechanec 2016年

10

設定app:titleTextColor私の上android.support.v7.widget.Toolbarであまりにもアンドロイド4.4にと6.0に私のための作品com.android.support:appcompat-v7:23.1.0

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:titleTextColor="@android:color/white" />

4
名前空間はappではなくandroidであることに注意してください。
Tommie

この行を追加するだけでapp:titleTextColor = "@ android:color / white"がキットカット以上で機能しました。ありがとう@hunyadym
Ghanshyam Nayma 2017

9

これはしばらくの間私を悩ませ、与えられた答えのどれも好きではなかったので、それがどのように機能するかを知るためにソースを調べました。

FractalWrenchは正しいパスにありますが、API 23の下で使用でき、ツールバー自体に設定する必要はありません。

他の人が言ったように、あなたはツールバーでスタイルを設定することができます

app:theme="@style/ActionBar"

そのスタイルでは、タイトルのテキストの色を設定できます

<item name="titleTextColor">#00f</item>

API 23以前または23以降

<item name="android:titleTextColor">your colour</item>

完全なxml

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


<style name="ActionBar" parent="@style/ThemeOverlay.AppCompat.ActionBar">
    <item name="android:titleTextStyle">@style/ActionBarTextStyle</item>
    <item name="titleTextColor">your colour</item>
    <item name="android:background">#ff9900</item>
</style>

ツールバーに設定できるすべての属性を示します

<declare-styleable name="Toolbar">
    <attr name="titleTextAppearance" format="reference" />
    <attr name="subtitleTextAppearance" format="reference" />
    <attr name="title" />
    <attr name="subtitle" />
    <attr name="gravity" />
    <attr name="titleMargins" format="dimension" />
    <attr name="titleMarginStart" format="dimension" />
    <attr name="titleMarginEnd" format="dimension" />
    <attr name="titleMarginTop" format="dimension" />
    <attr name="titleMarginBottom" format="dimension" />
    <attr name="contentInsetStart" />
    <attr name="contentInsetEnd" />
    <attr name="contentInsetLeft" />
    <attr name="contentInsetRight" />
    <attr name="maxButtonHeight" format="dimension" />
    <attr name="navigationButtonStyle" format="reference" />
    <attr name="buttonGravity">
        <!-- Push object to the top of its container, not changing its size. -->
        <flag name="top" value="0x30" />
        <!-- Push object to the bottom of its container, not changing its size. -->
        <flag name="bottom" value="0x50" />
    </attr>
    <!-- Icon drawable to use for the collapse button. -->
    <attr name="collapseIcon" format="reference" />
    <!-- Text to set as the content description for the collapse button. -->
    <attr name="collapseContentDescription" format="string" />
    <!-- Reference to a theme that should be used to inflate popups
         shown by widgets in the toolbar. -->
    <attr name="popupTheme" format="reference" />
    <!-- Icon drawable to use for the navigation button located at
         the start of the toolbar. -->
    <attr name="navigationIcon" format="reference" />
    <!-- Text to set as the content description for the navigation button
         located at the start of the toolbar. -->
    <attr name="navigationContentDescription" format="string" />
    <!-- Drawable to set as the logo that appears at the starting side of
         the Toolbar, just after the navigation button. -->
    <attr name="logo" />
    <!-- A content description string to describe the appearance of the
         associated logo image. -->
    <attr name="logoDescription" format="string" />
    <!-- A color to apply to the title string. -->
    <attr name="titleTextColor" format="color" />
    <!-- A color to apply to the subtitle string. -->
    <attr name="subtitleTextColor" format="color" />
</declare-styleable>

4

Toolbarタイトルの色を変更する最も簡単な方法CollapsingToolbarLayout

以下のスタイルを追加 CollapsingToolbarLayout

<android.support.design.widget.CollapsingToolbarLayout
        app:collapsedTitleTextAppearance="@style/CollapsedAppBar"
        app:expandedTitleTextAppearance="@style/ExpandedAppBar">

styles.xml

<style name="ExpandedAppBar" parent="@android:style/TextAppearance">
        <item name="android:textSize">24sp</item>
        <item name="android:textColor">@android:color/black</item>
        <item name="android:textAppearance">@style/TextAppearance.Lato.Bold</item>
    </style>

    <style name="CollapsedAppBar" parent="@android:style/TextAppearance">
        <item name="android:textColor">@android:color/black</item>
        <item name="android:textAppearance">@style/TextAppearance.Lato.Bold</item>
    </style>

3

appcompat-v7 app:titleTextColor = "#fff"> を使用できる場合

<android.support.v7.widget.Toolbar  
        android:id="@+id/toolbar"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:background="@color/colorPrimary"   
        android:visibility="gone"   
        app:titleTextColor="#fff">   
    </android.support.v7.widget.Toolbar>   

2

これは私のために働いた

<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="wrap_content"
    android:background="?attr/colorPrimary"
    android:fitsSystemWindows="true"
    android:minHeight="?attr/actionBarSize"
    app:navigationIcon="@drawable/ic_back"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:subtitleTextColor="@color/white"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:title="This week stats"
    app:titleTextColor="@color/white">


    <ImageView
        android:id="@+id/submitEditNote"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_gravity="right"
        android:layout_marginRight="10dp"
        android:src="@android:drawable/ic_menu_manage" />
</android.support.v7.widget.Toolbar>

2

xml ... toolbar.xmlにツールバーを作成します。

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"

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

次に、toolbar.xmlに以下を追加します。

app:titleTextColor="@color/colorText"
app:title="@string/app_name">

Remeber @ color / colorTextは、colorTextという名前のcolor属性とcolorを持つcolor.xmlファイルです。これは、toolbar.xml内に色をハードコーディングするのではなく、文字列を呼び出すための最良の方法です。テキストを変更する他のオプションもあります。たとえば、textAppearance ...など... app:textと入力するだけです。Intellisenseは、Android Studioでオプションを提供します。

最終的なツールバーは次のようになります。

 <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_weight="1"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/Theme.AppCompat"
       app:subtitleTextAppearance="@drawable/icon"
        app:title="@string/app_name">
    </android.support.v7.widget.Toolbar>

注:このツールバーは、activity_main.xml内にある必要があります。EasyPeasie

別のオプションは、すべてをクラスで行うことです。

Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
toolbar.setTitleTextColor(Color.WHITE);

幸運を


こんにちは、この作品に感謝します。しかし、その属性をスタイルでのみ使用する方法を知っていますか?面倒なxmlを作成する代わりに。ありがとう:)
Greggz

@colorは文字列リソースから直接取得されます。そのため、xmlは色をハードコーディングするよりも優れています。
RileyManda 2017

1

色を変える

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:background="?attr/colorPrimary"

/>

Toolbar myToolbar = (Toolbar) findViewById(R.id.toolbar);
        myToolbar.setTitleTextColor(ContextCompat.getColor(getApplicationContext(), R.color.Auth_Background));
        setSupportActionBar(myToolbar);

1

これらの答えはすべてMDCと新しいテーマ設定機能では時代遅れになっているので、今日数時間これに苦労しましたapp:titleTextColor。スタイル全体としてアプリ全体をオーバーライドする方法を見ることができませんでした。

答えはtitleTextColor、styles.xmlで利用できるということWidget.AppCompat.Toolbarです。今日、私は最良の選択は次のようになるはずだと思いますWidget.MaterialComponents.Toolbar

<style name="Widget.LL.Toolbar" parent="@style/Widget.MaterialComponents.Toolbar">
     <item name="titleTextAppearance">@style/TextAppearance.LL.Toolbar</item>
     <item name="titleTextColor">@color/white</item>
     <item name="android:background">?attr/colorSecondary</item>
</style>

<style name="TextAppearance.LL.Toolbar" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
     <item name="android:textStyle">bold</item>
</style>

アプリのテーマで、toolbarStyleを指定します。

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

これで、ツールバーを指定するxmlを変更せずに残すことができます。長い間android:textColor、ツールバーのタイトルテキストの外観を変更することで機能すると考えていましたが、何らかの理由で機能しません。


0
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          xmlns:app="http://schemas.android.com/apk/res-auto">

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:titleTextColor="@color/white"
    android:background="@color/green" />


0
public class MyToolbar extends android.support.v7.widget.Toolbar {

public MyToolbar(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
}

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
    super.onLayout(changed, l, t, r, b);
    AppCompatTextView textView = (AppCompatTextView) getChildAt(0);
    if (textView!=null) textView.setTextAppearance(getContext(), R.style.TitleStyle);
}

}

またはMainActivityからの単純な使用:

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbarMain);
setSupportActionBar(toolbar);
((AppCompatTextView) toolbar.getChildAt(0)).setTextAppearance(this, R.style.TitleStyle);

style.xml

<style name="TileStyle" parent="TextAppearance.AppCompat">
    <item name="android:textColor">@color/White</item>
    <item name="android:shadowColor">@color/Black</item>
    <item name="android:shadowDx">-1</item>
    <item name="android:shadowDy">1</item>
    <item name="android:shadowRadius">1</item>
</style>

このコードは質問に答えることがありますが、それがどのように機能し、いつ使用するかを説明するコンテキストを含めることをお勧めします。コードのみの回答は、長期的には役に立ちません。
Aditi Rawat

0

でそれを行う toolbar.setTitleTextAppearance(context, R.style.TitleTextStyle);

//これは、配色をカスタマイズできるスタイルです

 <style name="TitleTextStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">
    <item name="android:fontFamily">@string/you_font_family</item>
    <item name="android:textStyle">normal</item>
    <item name="android:textAppearance">@style/you_text_style</item>
    <item name="android:textColor">#000000</item>
    <item name="android:textSize">20sp</item>
</style>

0

非常にシンプルで、これは私にとってうまくいきました(タイトルとアイコンは白):

    <android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:background="@color/PrimaryColor"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    android:elevation="4dp" />

0

Material Components Libraryを使用すると、app:titleTextColor属性を使用できます。

ではレイアウト、あなたのようなものを使用することができます。

<com.google.android.material.appbar.MaterialToolbar
    app:titleTextColor="@color/...."
    .../>

カスタムスタイルを使用することもできます。

<com.google.android.material.appbar.MaterialToolbar
     style="@style/MyToolbarStyle"
    .../>

with(Widget.MaterialComponents.Toolbar.Primaryスタイルを拡張する):

  <style name="MyToolbarStyle" parent="Widget.MaterialComponents.Toolbar.Primary">
       <item name="titleTextColor">@color/....</item>
  </style>

または(Widget.MaterialComponents.Toolbarスタイルを拡張する):

  <style name="MyToolbarStyle" parent="Widget.MaterialComponents.Toolbar">
       <item name="titleTextColor">@color/....</item>
  </style>

ここに画像の説明を入力してください

(スタイルを使用して)属性を使用して、スタイルによって定義された色をオーバーライドすることもできますandroid:themeWidget.MaterialComponents.Toolbar.Primary

    <com.google.android.material.appbar.MaterialToolbar
        style="@style/Widget.MaterialComponents.Toolbar.Primary"
        android:theme="@style/MyThemeOverlay_Toolbar"
        />

と:

  <style name="MyThemeOverlay_Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
    <!-- This attributes is also used by navigation icon and overflow icon -->
    <item name="colorOnPrimary">@color/...</item>
  </style>

ここに画像の説明を入力してください

または(Widget.MaterialComponents.Toolbarスタイルを使用):

    <com.google.android.material.appbar.MaterialToolbar
        style="@style/Widget.MaterialComponents.Toolbar"
        android:theme="@style/MyThemeOverlay_Toolbar2"

と:

  <style name="MyThemeOverlay_Toolbar3" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
    <!-- This attributes is used by title -->
    <item name="android:textColorPrimary">@color/white</item>

    <!-- This attributes is used by navigation icon and overflow icon -->
    <item name="colorOnPrimary">@color/secondaryColor</item>
  </style>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.