web-dev-qa-db-ja.com

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

私は新しいv7ツールバーを使っています、そして私の人生のためにはタイトルの色を変える方法を理解することができません。ツールバーの@styleをstyles.xmlで宣言されているスタイルに設定し、textColorを持つtitleTextStyleを適用しました。私は何かが足りないのですか?私はLollipop用にコーディングしていますが、現在KitKatデバイスでテストしています。

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"/>
99
Dennis

オプション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>

R23までのappcompat-v7にはバグがありました。そのため、ネイティブの対応物も上書きする必要がありました。

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

助けて!私のSearchViewはめちゃくちゃです!

注:このセクションはおそらく時代遅れです。

何らかの理由でappcompat-v7に含まれているものとは異なる逆向きの矢印(視覚的にも技術的にも)を使用しない検索ウィジェットを使用するため、app's themeに手動で設定する必要があります。サポートライブラリのドロアブルは正しく着色されます。そうでなければ、それは常に白になります。

<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>
213
Eugen Pechanec

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

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も設定できます。

36
Peter Knut

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);
11
fractalwrench

私のapp:titleTextColorAndroid.support.v7.widget.Toolbarを設定することは、Android 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" />
10
hunyadym

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

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>
9
Stimsoni

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>   
4
Surender Kumar

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

以下のスタイルを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
Poras Bhardwaj

これは私のために働きました

<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
Hitesh Sahu

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 ...と入力するだけで、intelisenseはAndroidスタジオでのオプションを提供します。

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

 <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);

がんばろう

2
RileyManda

色を変える

<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
Mourad MAMASSI
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>
0
IQ.feature

非常に単純な、これは私のために働いた(タイトルとアイコン白):

    <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
Clever Almeida

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
shaby
<?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
Vipin Sharma