昼/夜のテーマを切り替える

AndroidではUiModeManagerを用いると端末自体のモードを切り替えることができましたが、アプリ内のテーマやリソースを切り替えることができませんでした。
最近になってAndroidのSupport Libraryに端末モードの切替に応じてUIのテーマやリソースを切り替える機能が追加されたのでご紹介します。

テーマの手動切り替え

Android Support Library 23.2以降のライブラリにこのテーマ切り替えの機能が追加されました。
その追加の仕方なのですが次の手順を行います。

テーマ定義の変更
リソースファイルの追加
テーマの切り替え

それぞれのやり方を見てみましょう。

テーマ定義の変更

まずはAndroidManifestのapplicationにつけれているテーマの指定を変更します。
applicationの指定のテーマがAppThemeとした場合下記のようにstlyeを設定します。

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

styleのparentにTheme.AppCompat.DayNightと設定を施します。
これで予め用意されている昼用、夜用のスタイルが適応されます。

昼用は背景色は白の文字色黒となり、夜用は背景色は黒っぽく、文字色は白になります。
ここに文字色やや背景色を変更するには下記のように記載します。

    <style name="AppTheme" parent="Theme.AppCompat.DayNight">
        <item name="android:textColor">@color/primary_text</item>
        <item name="android:windowBackground">@color/background</item>
    </style>

android:textColorとandroid:windowBackgroundで参照されているカラーは昼用と夜用で切り替えられるように設定するには次の項目の対応を行うと実施できます。

リソースファイルの追加

リソースフォルダの種類が増え、valuesのパターンとして「values-night」と「values-nonight」それぞれ読み込まれるようになりました。そのためリソースフォルダを下記のように配置しました。

f:id:muchiki0226:20160522184244p:plain

今回は例のためにcolors.xmlとstrings.xmlを配置しました。それぞれのファイルの中に下記のように記載しました。 [res/values-nignt/colors.xml]

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="background">#828386</color>
    <color name="primary">#795548</color>
    <color name="primary_dark">#5D4037</color>
    <color name="primary_light">#D7CCC8</color>
    <color name="accent">#607D8B</color>
    <color name="primary_text">#212121</color>
    <color name="secondary_text">#727272</color>
    <color name="icons">#FFFFFF</color>
    <color name="divider">#B6B6B6</color>
</resources>

[res/values-nignt/strings.xml]

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">こんばんは</string>
</resources>

[res/values-nonight/colors.xml]

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="background">#423386</color>
    <color name="primary">#F44336</color>
    <color name="primary_dark">#D32F2F</color>
    <color name="primary_light">#FFCDD2</color>
    <color name="accent">#009688</color>
    <color name="primary_text">#FFFFFF</color>
    <color name="secondary_text">#727272</color>
    <color name="icons">#FFFFFF</color>
    <color name="divider">#B6B6B6</color>
</resources>

[res/values-nonight/strings.xml]

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">こんにちは</string>
</resources>

昼に切り替えた時にはvalues-nonightのフォルダ内に定義されているリソースが適用されます。
また、夜に切り替えた時にはvalues-nightのフォルダ内に定義されているリソースが適応されることになります。

テーマの切り替え

それではテーマを切り替えてみましょう。

右下に配置したFloatingActionButtonを押した時に昼夜の切り替えを行うコードは以下になります。
[res/layout/activity_main.xml]

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.hatenablog.techium.daynightsample.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/primary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_sync_white_24dp"
        android:backgroundTint="@color/accent"/>

</android.support.design.widget.CoordinatorLayout>

[res/layout/content_main.xml]

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.hatenablog.techium.daynightsample.MainActivity"
    tools:showIn="@layout/activity_main">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello" />
</RelativeLayout>

[java/main/MainActivity.java]

public class MainActivity extends AppCompatActivity {

    private UiModeManager mUiModeManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        mUiModeManager = (UiModeManager) getSystemService(Context.UI_MODE_SERVICE);

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(mUiModeManager.getNightMode() == UiModeManager.MODE_NIGHT_NO){
                    mUiModeManager.setNightMode(UiModeManager.MODE_NIGHT_YES);
                } else {
                    mUiModeManager.setNightMode(UiModeManager.MODE_NIGHT_NO);
                }
            }
        });
    }
}

MainActivityの中でUiModeManagerを取得し、FloatingActionButtonがクリックされた時に現在がMODE_NIGHT_NOならばMODE_NIGHT_YESをsetNightModeで設定し、MODE_NIGHT_YESならばMODE_NIGHT_NOを設定するコードになっています。
これを実行した結果は下図の様になります。

[昼用]
f:id:muchiki0226:20160522184252p:plain:w300

[夜用]
f:id:muchiki0226:20160522184303p:plain:w300

背景色および中央の文字色はApplicationに設定したテーマの色が適応され切り替わっているのが確認できます。
また、Toolbarの色はactivity_main.xmlのtoolbarのandroid:backgroundで設定されている色がvalues-nightとvalues-nonightの設定に応じて切り替わっているのがわかります。FloatingActionButtonの色が切り替わっているのも同様です。
最後にcontent_main.xmlのTextViewの文字列もvaluse-nightとvalues-nonightの内容によって切り替わっているのがわかります。

サンプルコード

github.com

テーマの自動切り替え

前節ではテーマを手動で切り替えましたが、自動で切り替えることもできます。次のようにソースコードを変更します。

[java/main/MainActivity.java]

public class MainActivity extends AppCompatActivity {

    private UiModeManager mUiModeManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        mUiModeManager = (UiModeManager) getSystemService(Context.UI_MODE_SERVICE);
        mUiModeManager.setNightMode(UiModeManager.MODE_NIGHT_AUTO);
    }
}

setNightModeでMODE_NIGHT_AUTOを設定するだけとなります。
ここで自動的に切り替わる時間はAndroidのTwilightServiceというところで計算されており、日の出と日の入り時間を地域を含めて計算しており、その時刻に合わせて自動的に切り替わるようになっています。