動的なテーマで、スタイリングを楽にする（メモ）

問題

• UX: 午前中で、Theme.AppCompat.Lightを利用し、しかし、寝る前に目に優しく利用したいからTheme.AppCompatに切り替えたい。

  • 今回は、テーマとともに、textColorを動的に切り替える

• 開発者側：（あくまでも自分が今まで）よくやっているのがこうなる

style.xml

<resources>
	
	<!-- Dark theme -->
	<style name="TextAppearance.MyDarkTheme.Small" parent="TextAppearance.AppCompat.Small">
        <item name="android:textColor">@color/text_color_dark</item>
    </style>
    
   	<!-- Light theme -->
	<style name="TextAppearance.MyLightTheme.Small" parent="TextAppearance.AppCompat.Small">
        <item name="android:textColor">@color/text_color_light</item>
    </style>
    
</resources>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
    
    <!-- Default theme is Light -->
    <TextView 
	    ...
    	android:textAppearance="@style/TextAppearance.MyLightTheme.Small"
    />
    
</RelativeLayout>
    

MainActivity.java

// onCreate()
// 1. getTheme value from Preference
// 2. call setTheme for current Activity
// 3. change TextAppearance on specific TextViews <-- ここでテキストのスタイリングを切り替える
// ...

解決

style.xml

<resources>
	
	<!-- BEGIN: Custom attributes -->
    <attr name="myCustomTextColor" format="color"/>
    <!-- END: Custom attributes -->
    
	<!-- Dark theme -->
	<!-- Base application theme. -->
    <style name="MyTheme.Dark" parent="Theme.AppCompat">
        <item name="myCustomTextColor">@color/text_color_dark</item>
    </style>
    
   	<!-- Light theme -->
    <style name="MyTheme.Light" parent="Theme.AppCompat.Light">
        <item name="myCustomTextColor">@color/text_color_light</item>
    </style>

	<!-- 一つのスタイリングだけでオッケー -->
	<style name="TextAppearance.MyTheme.Small" parent="TextAppearance.AppCompat.Small">
        <item name="android:textColor">?attr/myCustomTextColor</item>
    </style>
    
</resources>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
    
    <!-- Default theme is Light -->
    <TextView 
	    ...
    	android:textAppearance="@style/TextAppearance.MyTheme.Small"
    />
    
</RelativeLayout>
    

終わりに

その他に、カスタマイズなものがあれば同じく〜。２つ以上のテーマをサポートしたい時に、楽