Edited at

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

More than 3 years have passed since last update.


問題



  • 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>



終わりに

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