カスタムActionBarの色/スタイルを設定する方法は?


87

Android Navigation barプロジェクトで使用していますが、アクションバーの一番上の色を赤に変更したいのですが、どうすればよいですか?私はこのようなものを持っています、

トップブラック

そして私はこのようなものが欲しい、

トップレッド

どうすればそれを達成できますか?

回答:


174

カスタムスタイルを作成することで、ActionBar(およびその他のもの)の色を定義できます。

Androidプロジェクトのres / values /styles.xmlファイルを編集するだけです。

たとえば、次のようになります。

<resources>
    <style name="MyCustomTheme" parent="@android:style/Theme.Holo.Light">
        <item name="android:actionBarStyle">@style/MyActionBarTheme</item>
    </style>

    <style name="MyActionBarTheme" parent="@android:style/Widget.Holo.Light.ActionBar">
        <item name="android:background">ANY_HEX_COLOR_CODE</item>
    </style>
</resources>

次に、ActionBarを含むアクティビティのテーマとして「MyCustomTheme」を設定します。

次のように、ActionBarの色を設定することもできます。

ActionBar actionBar = getActionBar();
actionBar.setBackgroundDrawable(new ColorDrawable(Color.RED)); // set your desired color

ここからの抜粋:XMLを使用してActionBarActivityのActionBarの背景色を変更するにはどうすればよいですか?


2
「次に、「MyCustomTheme」をActionBarを含むアクティビティのテーマとして設定する」とはどういう意味ですか。それ、どうやったら出来るの?
カラJ

2
アクティビティXMLで、<android.support.v4.view.ViewPager ... />タグ内のパラメーターとしてandroid:theme = "@ style / MyCustomTheme"を追加する必要があります
PedroD 2015

2
Androidの残りのvaluesv14およびvaluesv21styles.xmlファイルはどうですか
Harsha

タイトルtextStyleを変更するにはどうすればよいですか?
Adam Hurwitz 2016年

@KalaJsetTheme(R.style.MyCustomTheme) は、アクティビティのonCreateメソッドで使用します。
NullByte 0819年

57

一般に、Android OSは「テーマ」を活用して、アプリ開発者がUI要素のスタイリングパラメーターのユニバーサルセットをAndroidアプリケーション全体に、または単一のアクティビティサブクラスにグローバルに適用できるようにします。

そのため、AndroidOSの主流の「システムテーマ」は3つあります。これらはバージョン3.0以降のバージョンのアプリを開発するときにAndroidマニフェストXMLファイルで指定できます。

ここで(APPCOMPAT)サポートライブラリを参照しています:-つまり、3つのテーマは1です。AppCompatLightテーマ(Theme.AppCompat.Light)

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

  1. AppCompatダークテーマ(Theme.AppCompat)、

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

  1. そして、これら2つのAppCompatLightテーマとDarkerActionBarのハイブリッド(Theme.AppCompat.Light.DarkActionBar)

AndroidManifest.xmlでタグを確認すると、Androidテーマは次のように記載されています。- android:theme = "@ style / AppTheme"

Styles.xmlを開くと、そこで基本アプリケーションテーマが宣言されています:-

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
  </style>

アクションバーのスタイルを設定するには、これらの親テーマ要素をオーバーライドする必要があります。

背景色が異なるActionBar:-

これを行うに は、Android ActionBarUI要素のスタイル特性を保持する@style / Widget.AppCompat.Light.ActionBar.Solid.Inverseへの親参照を使用して、新しいスタイルMyActionBar(任意の名前を付けることができます)を作成する必要があります。したがって、定義は

<style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
    <item name="background">@color/red</item>
</style>

そして、この定義をAppThemeで参照する必要があり、オーバーライドされたActionBarスタイリングを次のように指し示します。

@ style / MyActionBar ピンクの背景色のActionBar

タイトルバーのテキストの色を変更します(例:黒から白):-

タイトルテキストの色を変更するには、親参照parent = "@ style /TextAppearance.AppCompat.Widget.ActionBar.Title">をオーバーライドする必要があります。

したがって、スタイルの定義は次のようになります。

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

TitleTextStyleの変更はActionBarの親OSUI要素の子要素であるため、このスタイル定義をMyActionBarスタイル定義内で参照します。したがって、MyActionBarスタイル要素の最終的な定義は次のようになります。

<style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
    <item name="background">@color/red</item>
    <item name="titleTextStyle">@style/MyActionBarTitle</item>
</style>

これが最終的なStyles.xmlです

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <!-- This is the styling for action bar -->
        <item name="actionBarStyle">@style/MyActionBar</item>
    </style>

    <style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
        <item name="background">@color/red</item>
        <item name="titleTextStyle">@style/MyActionBarTitle</item>
    </style>

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

タイトルカラーが白のActionBar ActionBarオプションのメニュースタイルの詳細については、このリンクを参照してください


2
やあ、それはうまくいった。メニューオーバーフローアイコンの色を変更したい場合は、テーマに応じて色を変更しますか?ダークテーマの白いアイコンとライトテーマの暗いアイコン、どうすれば白に変更できますか?あなたの答えの最後の画像を考慮してください。
Ameen Maheen 2016年

33

Android3.0以降の場合のみ

Android 3.0以降のみをサポートする場合、アクションバーの背景を次のように定義できます。

res / values / themes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme" parent="@style/Theme.Holo.Light.DarkActionBar">
       <item name="android:actionBarStyle">@style/MyActionBar</item>
    </style>

<!-- ActionBar styles -->
  <style name="MyActionBar" parent="@style/Widget.Holo.Light.ActionBar.Solid.Inverse">
       <item name="android:background">#ff0000</item>
  </style>
</resources>

Android2.1以降の場合

サポートライブラリを使用する場合、スタイルXMLファイルは次のようになります。

<?xml version="1.0" encoding="utf-8"?>
  <resources>
  <!-- the theme applied to the application or activity -->
 <style name="CustomActionBarTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">
    <item name="android:actionBarStyle">@style/MyActionBar</item>

    <!-- Support library compatibility -->
    <item name="actionBarStyle">@style/MyActionBar</item>
</style>

<!-- ActionBar styles -->
<style name="MyActionBar"
       parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
    <item name="android:background">@drawable/actionbar_background</item>

    <!-- Support library compatibility -->
    <item name="background">@drawable/actionbar_background</item>
  </style>
 </resources>

次に、テーマをアプリ全体または個々のアクティビティに適用します。

詳細についてはDocumentaion


これは奇妙なことです。Android3.0以降に2.1以降よりも古いスタイル(ホロ)を与える(マテリアルデザイン/ Appcompat)...
Roel

@DalvikVMうん..Appcompatは古いバージョン用です。より高いバージョンに使用する必要はありません。この回答の時点では、マテリアルデザインは導入されていませんでした。
Ketan Ahir 2015年

エラーが発生しました:問題No resource found that matches the given name '@style/Widget.Holo.Light.ActionBar.Solid.Inverse'.android:style/Widget.Holo.Light.ActionBar.Solid.Inverse解決するために変更します。ありがとう。
アニーラガン2015

@ style / Theme.AppCompat.Light.DarkActionBarは私の場合(Android Studio)では解決できません-@ android:style / Theme.AppCompat.Light.DarkActionBarであってはなりません-つまり、スタイルの前に「android」が付加されていますか?
AgentKnopf 2015年

32

この方法でアクションバーの色を変更できます。

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/green_action_bar</item>
</style>

アクションバーの色を変更するために必要なのはこれだけです。

さらに、ステータスバーの色を変更したい場合は、次の行を追加するだけです。

 <item name="android:colorPrimaryDark">@color/green_dark_action_bar</item>

これは、開発者のAndroidサイトから取得したスクリーンショットで、より明確にしています。また、カラーパレットのカスタマイズについて詳しく読むためのリンクもあります。

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



5

titleTextColorを使用してActionBarのテキストの色を変更できます

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="titleTextColor">#333333</item>
</style>

3

カスタムカラー:

 <style name="AppTheme" parent="Theme.AppCompat.Light">

                <item name="colorPrimary">@color/ColorPrimary</item>
                <item name="colorPrimaryDark">@color/ColorPrimaryDark</item>
                <!-- Customize your theme here. -->
     </style>

カスタムスタイル:

 <style name="Theme.AndroidDevelopers" parent="android:style/Theme.Holo.Light">
        <item name="android:selectableItemBackground">@drawable/ad_selectable_background</item>
        <item name="android:popupMenuStyle">@style/MyPopupMenu</item>
        <item name="android:dropDownListViewStyle">@style/MyDropDownListView</item>
        <item name="android:actionBarTabStyle">@style/MyActionBarTabStyle</item>
        <item name="android:actionDropDownStyle">@style/MyDropDownNav</item>
        <item name="android:listChoiceIndicatorMultiple">@drawable/ad_btn_check_holo_light</item>
        <item name="android:listChoiceIndicatorSingle">@drawable/ad_btn_radio_holo_light</item>
    </style>

詳細:Android ActionBar


2

私がAppCompatActivity上記の答えを使っていたので、私にはうまくいきませんでした。しかし、以下の解決策は機能しました:

ではRES /のstyles.xml

<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
</style>


PS:colorPrimary代わりに使用しましたandroid:colorPrimary


1

style.xmlにこのコードを追加します

<resources>
    <style name="MyTheme" parent="@android:style/Theme.Holo.Light">
        <item name="android:actionBarStyle">@style/MyAction</item>
    </style>

    <style name="MyActionBarTheme" parent="@android:style/Widget.Holo.Light.ActionBar">
        <item name="android:background">#333333</item>
    </style>
</resources>

0

これを使用してください-http://jgilfelt.github.io/android-actionbarstylegenerator/

数分でライブプレビューを使用してアクションバーをカスタマイズするための優れたツール。


1
このリンクは質問に答えることができますが、ここに答えの本質的な部分を含めて、参照用のリンクを提供することをお勧めします。リンクされたページが変更されると、リンクのみの回答が無効になる可能性があります。
Roman Marusyk 2015
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.