マテリアルデザインの色をリソースに登録して簡単に使えるようにする | Androidアプリ開発

Androidアプリ開発を行う上でマテリアルデザインの色を使うことがよくあります。

マテリアルデザインの色はこのようなサイトで簡単にピックアップすることができますが、Androidアプリ開発で色を選択するときに一々ブラウザを開くのは面倒です。

この記事ではマテリアルデザインの全色をcolors.xmlリソースファイルに登録する方法を紹介します。
スポンサーリンク

登録する色

登録する色は以下のマテリアルデザインの全色です。
マテリアルデザインの色一覧
https://www.materialui.co/colors より引用
スポンサーリンク

colors.xmlリソース

マテリアルデザインの全色を登録するためにはcolors.xmlファイルに以下を追加するだけでOKです。
<?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>
スポンサーリンク

まとめ

この記事ではマテリアルデザインの全色を登録する方法を紹介しました。
一度登録してしまえば、簡単にマテリアルデザインの色をピックアップすることができますので、是非登録してみましょう。
Androidアプリ開発
スポンサーリンク
Androidアプリ開発 記事一覧
Androidアプリ開発 記事一覧
Androidアプリ開発の記事一覧を以下にまとめています。
良かったらご覧ください。

Androidアプリ開発 記事一覧
カテゴリ広告: Androidアプリ開発
スポンサーリンク: Androidアプリ開発を個人レッスンで学ぶなら...?
Androidアプリ開発は一人で学んでいても限界があります。
そこでオススメなのがオンラインでAndroidアプリ開発を学べる「コードキャンプ」。
個人レッスンで丁寧に教えてくれます。

無料レッスン体験も可能なので、まずは無料体験から試してみてはいかがでしょうか?

Androidアプリ開発個人レッスン
一般広告: モバイルバッテリー
スポンサーリンク
Aresei-note
タイトルとURLをコピーしました