【Android】ネイティブアプリでFlutterのようなマテリアルカラー指定ができるようにしたい！

この記事で分かること
Androidの色指定の方法
デフォルトで定義してある色が少なすぎ！Flutterみたいに色んな色使いたい
ではどうすればよいのか？
1. カラーパレットウェブサイトから毎回コピーして使う←手間がかかりすぎる
解決法！! materialuiの全ての色をcolors.xmlリソースに登録指定しまう！
1. 導入方法
Androidの勉強をするならUdemyがおすすめ！

この記事で分かること

・Flutterで指定できるマテリアルデザインのカラー(以下マテリアルカラー)を以下のようにネイティブアプリでも簡単に指定出来るようになります。

※javaで書いてますがKotlinでも同じことが可能だと思います。

Androidの色指定の方法

Androidで色指定する場合以下のような方法があります。

・Colors.xmlで色を定義してあるものを使う

int color = res.getColor(R.color.purple_200,getTheme());
textView.setTextColor(color);

・定義済みの色を使う

textView.setTextColor(Color.BLUE);

・ソースで指定（RGB、ARGBなど）

textView.setTextColor(Color.rgb(100,100,100));

デフォルトで定義してある色が少なすぎ！Flutterみたいに色んな色使いたい

上記のようにデフォルトで定義してある色は非常に少ないです。

Flutterだったらマテリアルカラーが全部選べるのに、、以下はFlutterの色指定です。Colursに全て入っています。

ではどうすればよいのか？

通常行う方法は以下かと思います。

カラーパレットウェブサイトから毎回コピーして使う←手間がかかりすぎる

materialuiやColurHuntなどではワンクリックでカラーコードのコピーが出来ます

ここでコピーしたカラーコードを以下のように使う

textView.setTextColor(Color.parseColor("F06292"));

でもこれでは手間がかかりすぎます。

解決法！! materialuiの全ての色をcolors.xmlリソースに登録指定しまう！

これは一度作ってしまえばその後のアプリ開発でも使い回しが効いて非常に便利です！

同じことを考えて作った方がいらっしゃったのでそちらを使わせて頂きます。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Material Design Colors -->
    <color name="Red">#f44336</color>
    <color name="Red50">#ffebee</color>
    <color name="Red100">#ffcdd2</color>
    <color name="Red200">#ef9a9a</color>
    <color name="Red300">#e57373</color>
    <color name="Red400">#ef5350</color>
    <color name="Red500">#f44336</color>
    <color name="Red600">#e53935</color>
    <color name="Red700">#d32f2f</color>
    <color name="Red800">#c62828</color>
    <color name="Red900">#b71c1c</color>
    <color name="RedA100">#ff8a80</color>
    <color name="RedA200">#ff5252</color>
    <color name="RedA400">#ff1744</color>
    <color name="RedA700">#d50000</color>
    <color name="Pink">#E91E63</color>
    <color name="Pink50">#FCE4EC</color>
    <color name="Pink100">#F8BBD0</color>
    <color name="Pink200">#F48FB1</color>
    <color name="Pink300">#F06292</color>
    <color name="Pink400">#EC407A</color>
    <color name="Pink500">#E91E63</color>
    <color name="Pink600">#D81B60</color>
    <color name="Pink700">#C2185B</color>
    <color name="Pink800">#AD1457</color>
    <color name="Pink900">#880E4F</color>
    <color name="PinkA100">#FF80AB</color>
    <color name="PinkA200">#FF4081</color>
    <color name="PinkA400">#F50057</color>
    <color name="PinkA700">#C51162</color>
    <color name="Purple">#9C27B0</color>
    <color name="Purple50">#F3E5F5</color>
    <color name="Purple100">#E1BEE7</color>
    <color name="Purple200">#CE93D8</color>
    <color name="Purple300">#BA68C8</color>
    <color name="Purple400">#AB47BC</color>
    <color name="Purple500">#9C27B0</color>
    <color name="Purple600">#8E24AA</color>
    <color name="Purple700">#7B1FA2</color>
    <color name="Purple800">#6A1B9A</color>
    <color name="Purple900">#4A148C</color>
    <color name="PurpleA100">#EA80FC</color>
    <color name="PurpleA200">#E040FB</color>
    <color name="PurpleA400">#D500F9</color>
    <color name="PurpleA700">#AA00FF</color>
    <color name="DeepPurple">#673AB7</color>
    <color name="DeepPurple50">#EDE7F6</color>
    <color name="DeepPurple100">#D1C4E9</color>
    <color name="DeepPurple200">#B39DDB</color>
    <color name="DeepPurple300">#9575CD</color>
    <color name="DeepPurple400">#7E57C2</color>
    <color name="DeepPurple500">#673AB7</color>
    <color name="DeepPurple600">#5E35B1</color>
    <color name="DeepPurple700">#512DA8</color>
    <color name="DeepPurple800">#4527A0</color>
    <color name="DeepPurple900">#311B92</color>
    <color name="DeepPurpleA100">#B388FF</color>
    <color name="DeepPurpleA200">#7C4DFF</color>
    <color name="DeepPurpleA400">#651FFF</color>
    <color name="DeepPurpleA700">#6200EA</color>
    <color name="Indigo">#3F51B5</color>
    <color name="Indigo50">#E8EAF6</color>
    <color name="Indigo100">#C5CAE9</color>
    <color name="Indigo200">#9FA8DA</color>
    <color name="Indigo300">#7986CB</color>
    <color name="Indigo400">#5C6BC0</color>
    <color name="Indigo500">#3F51B5</color>
    <color name="Indigo600">#3949AB</color>
    <color name="Indigo700">#303F9F</color>
    <color name="Indigo800">#283593</color>
    <color name="Indigo900">#1A237E</color>
    <color name="IndigoA100">#8C9EFF</color>
    <color name="IndigoA200">#536DFE</color>
    <color name="IndigoA400">#3D5AFE</color>
    <color name="IndigoA700">#304FFE</color>
    <color name="Blue">#2196F3</color>
    <color name="Blue50">#E3F2FD</color>
    <color name="Blue100">#BBDEFB</color>
    <color name="Blue200">#90CAF9</color>
    <color name="Blue300">#64B5F6</color>
    <color name="Blue400">#42A5F5</color>
    <color name="Blue500">#2196F3</color>
    <color name="Blue600">#1E88E5</color>
    <color name="Blue700">#1976D2</color>
    <color name="Blue800">#1565C0</color>
    <color name="Blue900">#0D47A1</color>
    <color name="BlueA100">#82B1FF</color>
    <color name="BlueA200">#448AFF</color>
    <color name="BlueA400">#2979FF</color>
    <color name="BlueA700">#2962FF</color>
    <color name="LightBlue">#03A9F4</color>
    <color name="LightBlue50">#E1F5FE</color>
    <color name="LightBlue100">#B3E5FC</color>
    <color name="LightBlue200">#81D4FA</color>
    <color name="LightBlue300">#4FC3F7</color>
    <color name="LightBlue400">#29B6F6</color>
    <color name="LightBlue500">#03A9F4</color>
    <color name="LightBlue600">#039BE5</color>
    <color name="LightBlue700">#0288D1</color>
    <color name="LightBlue800">#0277BD</color>
    <color name="LightBlue900">#01579B</color>
    <color name="LightBlueA100">#80D8FF</color>
    <color name="LightBlueA200">#40C4FF</color>
    <color name="LightBlueA400">#00B0FF</color>
    <color name="LightBlueA700">#0091EA</color>
    <color name="Cyan">#00BCD4</color>
    <color name="Cyan50">#E0F7FA</color>
    <color name="Cyan100">#B2EBF2</color>
    <color name="Cyan200">#80DEEA</color>
    <color name="Cyan300">#4DD0E1</color>
    <color name="Cyan400">#26C6DA</color>
    <color name="Cyan500">#00BCD4</color>
    <color name="Cyan600">#00ACC1</color>
    <color name="Cyan700">#0097A7</color>
    <color name="Cyan800">#00838F</color>
    <color name="Cyan900">#006064</color>
    <color name="CyanA100">#84FFFF</color>
    <color name="CyanA200">#18FFFF</color>
    <color name="CyanA400">#00E5FF</color>
    <color name="CyanA700">#00B8D4</color>
    <color name="Teal">#009688</color>
    <color name="Teal50">#E0F2F1</color>
    <color name="Teal100">#B2DFDB</color>
    <color name="Teal200">#80CBC4</color>
    <color name="Teal300">#4DB6AC</color>
    <color name="Teal400">#26A69A</color>
    <color name="Teal500">#009688</color>
    <color name="Teal600">#00897B</color>
    <color name="Teal700">#00796B</color>
    <color name="Teal800">#00695C</color>
    <color name="Teal900">#004D40</color>
    <color name="TealA100">#A7FFEB</color>
    <color name="TealA200">#64FFDA</color>
    <color name="TealA400">#1DE9B6</color>
    <color name="TealA700">#00BFA5</color>
    <color name="Green">#4CAF50</color>
    <color name="Green50">#E8F5E9</color>
    <color name="Green100">#C8E6C9</color>
    <color name="Green200">#A5D6A7</color>
    <color name="Green300">#81C784</color>
    <color name="Green400">#66BB6A</color>
    <color name="Green500">#4CAF50</color>
    <color name="Green600">#43A047</color>
    <color name="Green700">#388E3C</color>
    <color name="Green800">#2E7D32</color>
    <color name="Green900">#1B5E20</color>
    <color name="GreenA100">#B9F6CA</color>
    <color name="GreenA200">#69F0AE</color>
    <color name="GreenA400">#00E676</color>
    <color name="GreenA700">#00C853</color>
    <color name="LightGreen">#8BC34A</color>
    <color name="LightGreen50">#F1F8E9</color>
    <color name="LightGreen100">#DCEDC8</color>
    <color name="LightGreen200">#C5E1A5</color>
    <color name="LightGreen300">#AED581</color>
    <color name="LightGreen400">#9CCC65</color>
    <color name="LightGreen500">#8BC34A</color>
    <color name="LightGreen600">#7CB342</color>
    <color name="LightGreen700">#689F38</color>
    <color name="LightGreen800">#558B2F</color>
    <color name="LightGreen900">#33691E</color>
    <color name="LightGreenA100">#CCFF90</color>
    <color name="LightGreenA200">#B2FF59</color>
    <color name="LightGreenA400">#76FF03</color>
    <color name="LightGreenA700">#64DD17</color>
    <color name="Lime">#CDDC39</color>
    <color name="Lime50">#F9FBE7</color>
    <color name="Lime100">#F0F4C3</color>
    <color name="Lime200">#E6EE9C</color>
    <color name="Lime300">#DCE775</color>
    <color name="Lime400">#D4E157</color>
    <color name="Lime500">#CDDC39</color>
    <color name="Lime600">#C0CA33</color>
    <color name="Lime700">#AFB42B</color>
    <color name="Lime800">#9E9D24</color>
    <color name="Lime900">#827717</color>
    <color name="LimeA100">#F4FF81</color>
    <color name="LimeA200">#EEFF41</color>
    <color name="LimeA400">#C6FF00</color>
    <color name="LimeA700">#AEEA00</color>
    <color name="Yellow">#FFEB3B</color>
    <color name="Yellow50">#FFFDE7</color>
    <color name="Yellow100">#FFF9C4</color>
    <color name="Yellow200">#FFF59D</color>
    <color name="Yellow300">#FFF176</color>
    <color name="Yellow400">#FFEE58</color>
    <color name="Yellow500">#FFEB3B</color>
    <color name="Yellow600">#FDD835</color>
    <color name="Yellow700">#FBC02D</color>
    <color name="Yellow800">#F9A825</color>
    <color name="Yellow900">#F57F17</color>
    <color name="YellowA100">#FFFF8D</color>
    <color name="YellowA200">#FFFF00</color>
    <color name="YellowA400">#FFEA00</color>
    <color name="YellowA700">#FFD600</color>
    <color name="Amber">#FFC107</color>
    <color name="Amber50">#FFF8E1</color>
    <color name="Amber100">#FFECB3</color>
    <color name="Amber200">#FFE082</color>
    <color name="Amber300">#FFD54F</color>
    <color name="Amber400">#FFCA28</color>
    <color name="Amber500">#FFC107</color>
    <color name="Amber600">#FFB300</color>
    <color name="Amber700">#FFA000</color>
    <color name="Amber800">#FF8F00</color>
    <color name="Amber900">#FF6F00</color>
    <color name="AmberA100">#FFE57F</color>
    <color name="AmberA200">#FFD740</color>
    <color name="AmberA400">#FFC400</color>
    <color name="AmberA700">#FFAB00</color>
    <color name="Orange">#FF9800</color>
    <color name="Orange50">#FFF3E0</color>
    <color name="Orange100">#FFE0B2</color>
    <color name="Orange200">#FFCC80</color>
    <color name="Orange300">#FFB74D</color>
    <color name="Orange400">#FFA726</color>
    <color name="Orange500">#FF9800</color>
    <color name="Orange600">#FB8C00</color>
    <color name="Orange700">#F57C00</color>
    <color name="Orange800">#EF6C00</color>
    <color name="Orange900">#E65100</color>
    <color name="OrangeA100">#FFD180</color>
    <color name="OrangeA200">#FFAB40</color>
    <color name="OrangeA400">#FF9100</color>
    <color name="OrangeA700">#FF6D00</color>
    <color name="DeepOrange">#FF5722</color>
    <color name="DeepOrange50">#FBE9E7</color>
    <color name="DeepOrange100">#FFCCBC</color>
    <color name="DeepOrange200">#FFAB91</color>
    <color name="DeepOrange300">#FF8A65</color>
    <color name="DeepOrange400">#FF7043</color>
    <color name="DeepOrange500">#FF5722</color>
    <color name="DeepOrange600">#F4511E</color>
    <color name="DeepOrange700">#D84315</color>
    <color name="DeepOrange800">#E64A19</color>
    <color name="DeepOrange900">#BF360C</color>
    <color name="DeepOrangeA100">#FF9E80</color>
    <color name="DeepOrangeA200">#FF6E40</color>
    <color name="DeepOrangeA400">#FF3D00</color>
    <color name="DeepOrangeA700">#DD2C00</color>
    <color name="Brown">#795548</color>
    <color name="Brown50">#EFEBE9</color>
    <color name="Brown100">#D7CCC8</color>
    <color name="Brown200">#BCAAA4</color>
    <color name="Brown300">#A1887F</color>
    <color name="Brown400">#8D6E63</color>
    <color name="Brown500">#795548</color>
    <color name="Brown600">#6D4C41</color>
    <color name="Brown700">#5D4037</color>
    <color name="Brown800">#4E342E</color>
    <color name="Brown900">#3E2723</color>
    <color name="Grey">#9E9E9E</color>
    <color name="Grey50">#FAFAFA</color>
    <color name="Grey100">#F5F5F5</color>
    <color name="Grey200">#EEEEEE</color>
    <color name="Grey300">#E0E0E0</color>
    <color name="Grey400">#BDBDBD</color>
    <color name="Grey500">#9E9E9E</color>
    <color name="Grey600">#757575</color>
    <color name="Grey700">#616161</color>
    <color name="Grey800">#424242</color>
    <color name="Grey900">#212121</color>
    <color name="BlueGrey">#607D8B</color>
    <color name="BlueGrey50">#ECEFF1</color>
    <color name="BlueGrey100">#CFD8DC</color>
    <color name="BlueGrey200">#B0BEC5</color>
    <color name="BlueGrey300">#90A4AE</color>
    <color name="BlueGrey400">#78909C</color>
    <color name="BlueGrey500">#607D8B</color>
    <color name="BlueGrey600">#546E7A</color>
    <color name="BlueGrey700">#455A64</color>
    <color name="BlueGrey800">#37474F</color>
    <color name="BlueGrey900">#263238</color>
</resources>

https://aresei-note.com/711

大変だったと思います。誠に感謝致します！是非上記ブログもご参考にされてください。