ズボラ応援ブログ始めました

AndroidStudioでアプリのテーマカラーを変更する方法

プログラミング

AndroidStudioで作ったアプリにデフォルトで設定される、ステータスバーやアクションバーなどの色を変更する方法の紹介です。

アプリのテーマカラー変更方法

アプリの色の設定が記載されているのは「app」-「res」-「value」-「styles.xml」です。styles.xmlはウェブサイトのcssのような役割をするファイルです。

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

Theme.AppCompatというのは、APIレベル21(Android5.0)未満の機種にもマテリアルデザインを適用させるためのテーマだそうです。

各itemに対応する位置は次の画像の通りです。

設定値を見ると@color/colorPrimaryとなっています。この色が設定されているのはcolors.xmlです。styles.xmlと同じ階層にあります。

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
</resources>

colorPrimaryは#3F51B5です~という定義がされているので、アクションバーの背景色がインディゴになっていたのです。

styles.xmlに直接カラーコードを指定しても動作するのですが、colors.xmlで定義しておくことで一元管理できるようになります。colors.xmlで定義した色はjavaファイルやレイアウトファイルから参照することができます。

view.setBackgroundColor(getResources().getColor(R.color.colorPrimary));
activity_main.xml

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:background="@color/colorPrimary" />

色を変更したいときはcolors.xmlを修正するだけで、複数箇所の色を変更できるようになります。

参考Styles and Themes  |  Android Developers


色選びの参考になるツール

マテリアルデザインの色の使い方には特徴があります。使う色数を制限し、通常は3~4色で構成します。メインとなる色(プライマリカラー)が1色、メインと同じ色合いの補助色(サブカラー)が1~2色、協調するための色(アクセントカラー)が1色です。

色を選ぶときはGoogleが公開しているカラーパレットがあるので、参考になるかと思います。

リンクMaterial Design-Style-Color

また選んだ色を配置したサンプルが見て見たい場合、下記のツールが便利です。

リンクCOLOR TOOL

タイトルとURLをコピーしました