Androidアプリの作り方

画面の色の変更

マテリアルテーマを使用して画面の色を変更。

マテリアルデザインはAndroid5.0(API level 21)から導入され、マテリアルテーマによる画面の色の変更やリストやアニメーションによる遷移などを作成できる。 ※マテリアルデザインのガイドライン


画面の色の変更

色を設定するにはスタイル(スタイルでは他に文字サイズなどを設定)ファイルであるres\valuesフォルダのstyle.xmlの編集します。

AppTheme(AndroidManifest.xmlで設定)という名前でスタイルを定義し、AppCompatというAndroidが用意しているテーマを使用する。

<resources>

    <style name="AppTheme" parent="Theme.AppCompat">
        <!-- ActionBarの背景色 -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <!-- ステータスバーの背景色 -->
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <!-- TabLayoutの下線やRadioButton選択時などの色 -->
        <item name="colorAccent">@color/colorAccent</item>
         <!--ActionBarの文字色 -->
        <item name="android:textColorPrimary">@color/textColorPrimary</item>
        <!-- ウィンドウ背景色 -->
        <item name="android:windowBackground">@color/windowBackground</item>
        <!-- ナビゲーションバー(戻るキー・ホームキーなどがあるバー)の背景色 -->
        <item name="android:navigationBarColor">@color/navigationBarColor</item>
    </style>

</resources>

スタイルやレイアウトに使用するカラーコードを設定するにはres\valuesフォルダのcolor.xmlを編集します。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- ActionBarの背景色 -->
    <color name="colorPrimary">#f2e422</color>
    <!-- ステータスバーの背景色 -->
    <color name="colorPrimaryDark">#46453b</color>
    <!-- TabLayoutの下線やRadioButton選択時などの色 -->
    <color name="colorAccent">#ed082e</color>
    <!-- ActionBarの文字色 -->
    <color name="textColorPrimary">#110f12</color>
    <!-- ウィンドウ背景色 -->
    <color name="windowBackground">#a9a9a9</color>
    <!-- ナビゲーションバー(戻るキー・ホームキーなどがあるバー)の背景色 -->
    <color name="navigationBarColor">#21a625</color>
</resources>

MainActivity.javaの設定例

AppCompatActivityクラスを継承(extends)。

package sample.co.jp.myapplication;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

AndroidManifest.xmlの設定例

アプリのテーマ(10行目android:theme)で@style/AppThemeを適用。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
          package="sample.co.jp.myapplication">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>

                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>

</manifest>

属性

属性 説明
colorPrimary アクションバーの背景色
colorPrimaryDark ステータスバーの背景色
navigationBarColor ナビゲーションバーの背景色
windowBackground アプリケーションボディの背景色
textColorPrimary アクションバーのタイトル文字色
colorAccent コントロールの基本色