ブログ

テーマ

テーマの確認
[app] > [res] > [values] > [themes] > themes.xml
※ダークテーマはthemes.xml(night)

親テーマをparent属性で指定する
ex parent=”Theme.MaterialComponents.DayNight.DarkActionBar”

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.22_Theme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

カラーの確認

[app] > [res] > [values] > colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
</resources>

COLOR TOOLにてテーマ色を選択する

COLOR TOOL

https://material.io/resources/color/#!/?view.left=0&view.right=0

・COLOR TOOLへアクセス
・USER INTERFACES にて Primary,Secondary,Text on P,Text on Sそれぞれにてカラーを選択（彩度は通常画面が50～200、ダークテーマは500～900程度）
・ACCESSIBILITYにてカラーを確認
・「EXPORT」をクリックしてcolors.xmlをダウンロード
・themes.xmlを編集

トレーニング > KOTLIN を用いた ANDROID の基本 > レイアウト > ユーザー入力2 > アプリのテーマを変更する > 4.アプリテーマカラーを選択する

タグ: , ,