Aplikasi Andaroid dengan lebih dari satu warna ActionBar bisa membuat aplikasi yang kita buat menjadi lebih menarik. Misal, jika aplikasi kita mempunyai beberapa menu, contohnya: menu Transaksi, menu Pembayaran, menu Profil, dan setiap form/activity yang mewakili menu-menu tersebut mempunyai warna berbeda pada tiap ActionBar tentu cukup membantu pengguna untuk mengingatkan menu apa yang sedang diakses.
Contoh aplikasi berikut ini akan memperlihatkan bagaimana cara mengubah warna ActionBar secara langsung melalui penekanan pada tombol.
Buatlah sebuah proyek baru pada Android Studio Anda. Pilih Basic Activity sebagai main activity saat ditampilkan dialog Create New Project. Kemudian pada wisaya (wizard) berikutnya, ubah nilai Package name menjadi com.inochi.theme, walaupun sebetulnya bebas saja Anda untuk memberi nama paket (package) aplikasi Anda.
Setelah lingkungan pengembangan proyek Anda siap, unduh berkas sumber daya (resource) warna Material Design di https://gist.github.com/kalehv/bae765c756e94455ed88. Ubah nama berkas menjadi md_colors.xml, kemudian tempel di \app\src\main\res\values.
Berikut ini skrip lengkap untuk md_colors.xml.
<?xml version="1.0" encoding="utf-8"?>
<!--
Google Material Design Color Palette for Android http://www.google.com/design/spec/style/color.html#color-ui-color-palette
Spreadsheet used to create this reosurce - http://bit.ly/mdcolor_spreadsheet
Link to this colors.xml resource file - http://bit.ly/mdcolorsxml
Harshad Kale
https://github.com/kalehv
-->
<resources>
<color name="red_50">#FFEBEE</color>
<color name="red_100">#FFCDD2</color>
<color name="red_200">#EF9A9A</color>
<color name="red_300">#E57373</color>
<color name="red_400">#EF5350</color>
<color name="red_500">#F44336</color>
<color name="red_600">#E53935</color>
<color name="red_700">#D32F2F</color>
<color name="red_800">#C62828</color>
<color name="red_900">#B71C1C</color>
<color name="red_A100">#FF8A80</color>
<color name="red_A200">#FF5252</color>
<color name="red_A400">#FF1744</color>
<color name="red_A700">#D50000</color>
<color name="deep_purple_50">#EDE7F6</color>
<color name="deep_purple_100">#D1C4E9</color>
<color name="deep_purple_200">#B39DDB</color>
<color name="deep_purple_300">#9575CD</color>
<color name="deep_purple_400">#7E57C2</color>
<color name="deep_purple_500">#673AB7</color>
<color name="deep_purple_600">#5E35B1</color>
<color name="deep_purple_700">#512DA8</color>
<color name="deep_purple_800">#4527A0</color>
<color name="deep_purple_900">#311B92</color>
<color name="deep_purple_A100">#B388FF</color>
<color name="deep_purple_A200">#7C4DFF</color>
<color name="deep_purple_A400">#651FFF</color>
<color name="deep_purple_A700">#6200EA</color>
<color name="light_blue_50">#E1F5FE</color>
<color name="light_blue_100">#B3E5FC</color>
<color name="light_blue_200">#81D4FA</color>
<color name="light_blue_300">#4FC3F7</color>
<color name="light_blue_400">#29B6F6</color>
<color name="light_blue_500">#03A9F4</color>
<color name="light_blue_600">#039BE5</color>
<color name="light_blue_700">#0288D1</color>
<color name="light_blue_800">#0277BD</color>
<color name="light_blue_900">#01579B</color>
<color name="light_blue_A100">#80D8FF</color>
<color name="light_blue_A200">#40C4FF</color>
<color name="light_blue_A400">#00B0FF</color>
<color name="light_blue_A700">#0091EA</color>
<color name="green_50">#E8F5E9</color>
<color name="green_100">#C8E6C9</color>
<color name="green_200">#A5D6A7</color>
<color name="green_300">#81C784</color>
<color name="green_400">#66BB6A</color>
<color name="green_500">#4CAF50</color>
<color name="green_600">#43A047</color>
<color name="green_700">#388E3C</color>
<color name="green_800">#2E7D32</color>
<color name="green_900">#1B5E20</color>
<color name="green_A100">#B9F6CA</color>
<color name="green_A200">#69F0AE</color>
<color name="green_A400">#00E676</color>
<color name="green_A700">#00C853</color>
<color name="yellow_50">#FFFDE7</color>
<color name="yellow_100">#FFF9C4</color>
<color name="yellow_200">#FFF59D</color>
<color name="yellow_300">#FFF176</color>
<color name="yellow_400">#FFEE58</color>
<color name="yellow_500">#FFEB3B</color>
<color name="yellow_600">#FDD835</color>
<color name="yellow_700">#FBC02D</color>
<color name="yellow_800">#F9A825</color>
<color name="yellow_900">#F57F17</color>
<color name="yellow_A100">#FFFF8D</color>
<color name="yellow_A200">#FFFF00</color>
<color name="yellow_A400">#FFEA00</color>
<color name="yellow_A700">#FFD600</color>
<color name="deep_orange_50">#FBE9E7</color>
<color name="deep_orange_100">#FFCCBC</color>
<color name="deep_orange_200">#FFAB91</color>
<color name="deep_orange_300">#FF8A65</color>
<color name="deep_orange_400">#FF7043</color>
<color name="deep_orange_500">#FF5722</color>
<color name="deep_orange_600">#F4511E</color>
<color name="deep_orange_700">#E64A19</color>
<color name="deep_orange_800">#D84315</color>
<color name="deep_orange_900">#BF360C</color>
<color name="deep_orange_A100">#FF9E80</color>
<color name="deep_orange_A200">#FF6E40</color>
<color name="deep_orange_A400">#FF3D00</color>
<color name="deep_orange_A700">#DD2C00</color>
<color name="blue_grey_50">#ECEFF1</color>
<color name="blue_grey_100">#CFD8DC</color>
<color name="blue_grey_200">#B0BEC5</color>
<color name="blue_grey_300">#90A4AE</color>
<color name="blue_grey_400">#78909C</color>
<color name="blue_grey_500">#607D8B</color>
<color name="blue_grey_600">#546E7A</color>
<color name="blue_grey_700">#455A64</color>
<color name="blue_grey_800">#37474F</color>
<color name="blue_grey_900">#263238</color>
<color name="pink_50">#FCE4EC</color>
<color name="pink_100">#F8BBD0</color>
<color name="pink_200">#F48FB1</color>
<color name="pink_300">#F06292</color>
<color name="pink_400">#EC407A</color>
<color name="pink_500">#E91E63</color>
<color name="pink_600">#D81B60</color>
<color name="pink_700">#C2185B</color>
<color name="pink_800">#AD1457</color>
<color name="pink_900">#880E4F</color>
<color name="pink_A100">#FF80AB</color>
<color name="pink_A200">#FF4081</color>
<color name="pink_A400">#F50057</color>
<color name="pink_A700">#C51162</color>
<color name="indigo_50">#E8EAF6</color>
<color name="indigo_100">#C5CAE9</color>
<color name="indigo_200">#9FA8DA</color>
<color name="indigo_300">#7986CB</color>
<color name="indigo_400">#5C6BC0</color>
<color name="indigo_500">#3F51B5</color>
<color name="indigo_600">#3949AB</color>
<color name="indigo_700">#303F9F</color>
<color name="indigo_800">#283593</color>
<color name="indigo_900">#1A237E</color>
<color name="indigo_A100">#8C9EFF</color>
<color name="indigo_A200">#536DFE</color>
<color name="indigo_A400">#3D5AFE</color>
<color name="indigo_A700">#304FFE</color>
<color name="cyan_50">#E0F7FA</color>
<color name="cyan_100">#B2EBF2</color>
<color name="cyan_200">#80DEEA</color>
<color name="cyan_300">#4DD0E1</color>
<color name="cyan_400">#26C6DA</color>
<color name="cyan_500">#00BCD4</color>
<color name="cyan_600">#00ACC1</color>
<color name="cyan_700">#0097A7</color>
<color name="cyan_800">#00838F</color>
<color name="cyan_900">#006064</color>
<color name="cyan_A100">#84FFFF</color>
<color name="cyan_A200">#18FFFF</color>
<color name="cyan_A400">#00E5FF</color>
<color name="cyan_A700">#00B8D4</color>
<color name="light_green_50">#F1F8E9</color>
<color name="light_green_100">#DCEDC8</color>
<color name="light_green_200">#C5E1A5</color>
<color name="light_green_300">#AED581</color>
<color name="light_green_400">#9CCC65</color>
<color name="light_green_500">#8BC34A</color>
<color name="light_green_600">#7CB342</color>
<color name="light_green_700">#689F38</color>
<color name="light_green_800">#558B2F</color>
<color name="light_green_900">#33691E</color>
<color name="light_green_A100">#CCFF90</color>
<color name="light_green_A200">#B2FF59</color>
<color name="light_green_A400">#76FF03</color>
<color name="light_green_A700">#64DD17</color>
<color name="amber_50">#FFF8E1</color>
<color name="amber_100">#FFECB3</color>
<color name="amber_200">#FFE082</color>
<color name="amber_300">#FFD54F</color>
<color name="amber_400">#FFCA28</color>
<color name="amber_500">#FFC107</color>
<color name="amber_600">#FFB300</color>
<color name="amber_700">#FFA000</color>
<color name="amber_800">#FF8F00</color>
<color name="amber_900">#FF6F00</color>
<color name="amber_A100">#FFE57F</color>
<color name="amber_A200">#FFD740</color>
<color name="amber_A400">#FFC400</color>
<color name="amber_A700">#FFAB00</color>
<color name="brown_50">#EFEBE9</color>
<color name="brown_100">#D7CCC8</color>
<color name="brown_200">#BCAAA4</color>
<color name="brown_300">#A1887F</color>
<color name="brown_400">#8D6E63</color>
<color name="brown_500">#795548</color>
<color name="brown_600">#6D4C41</color>
<color name="brown_700">#5D4037</color>
<color name="brown_800">#4E342E</color>
<color name="brown_900">#3E2723</color>
<color name="purple_50">#F3E5F5</color>
<color name="purple_100">#E1BEE7</color>
<color name="purple_200">#CE93D8</color>
<color name="purple_300">#BA68C8</color>
<color name="purple_400">#AB47BC</color>
<color name="purple_500">#9C27B0</color>
<color name="purple_600">#8E24AA</color>
<color name="purple_700">#7B1FA2</color>
<color name="purple_800">#6A1B9A</color>
<color name="purple_900">#4A148C</color>
<color name="purple_A100">#EA80FC</color>
<color name="purple_A200">#E040FB</color>
<color name="purple_A400">#D500F9</color>
<color name="purple_A700">#AA00FF</color>
<color name="blue_50">#E3F2FD</color>
<color name="blue_100">#BBDEFB</color>
<color name="blue_200">#90CAF9</color>
<color name="blue_300">#64B5F6</color>
<color name="blue_400">#42A5F5</color>
<color name="blue_500">#2196F3</color>
<color name="blue_600">#1E88E5</color>
<color name="blue_700">#1976D2</color>
<color name="blue_800">#1565C0</color>
<color name="blue_900">#0D47A1</color>
<color name="blue_A100">#82B1FF</color>
<color name="blue_A200">#448AFF</color>
<color name="blue_A400">#2979FF</color>
<color name="blue_A700">#2962FF</color>
<color name="teal_50">#E0F2F1</color>
<color name="teal_100">#B2DFDB</color>
<color name="teal_200">#80CBC4</color>
<color name="teal_300">#4DB6AC</color>
<color name="teal_400">#26A69A</color>
<color name="teal_500">#009688</color>
<color name="teal_600">#00897B</color>
<color name="teal_700">#00796B</color>
<color name="teal_800">#00695C</color>
<color name="teal_900">#004D40</color>
<color name="teal_A100">#A7FFEB</color>
<color name="teal_A200">#64FFDA</color>
<color name="teal_A400">#1DE9B6</color>
<color name="teal_A700">#00BFA5</color>
<color name="lime_50">#F9FBE7</color>
<color name="lime_100">#F0F4C3</color>
<color name="lime_200">#E6EE9C</color>
<color name="lime_300">#DCE775</color>
<color name="lime_400">#D4E157</color>
<color name="lime_500">#CDDC39</color>
<color name="lime_600">#C0CA33</color>
<color name="lime_700">#AFB42B</color>
<color name="lime_800">#9E9D24</color>
<color name="lime_900">#827717</color>
<color name="lime_A100">#F4FF81</color>
<color name="lime_A200">#EEFF41</color>
<color name="lime_A400">#C6FF00</color>
<color name="lime_A700">#AEEA00</color>
<color name="orange_50">#FFF3E0</color>
<color name="orange_100">#FFE0B2</color>
<color name="orange_200">#FFCC80</color>
<color name="orange_300">#FFB74D</color>
<color name="orange_400">#FFA726</color>
<color name="orange_500">#FF9800</color>
<color name="orange_600">#FB8C00</color>
<color name="orange_700">#F57C00</color>
<color name="orange_800">#EF6C00</color>
<color name="orange_900">#E65100</color>
<color name="orange_A100">#FFD180</color>
<color name="orange_A200">#FFAB40</color>
<color name="orange_A400">#FF9100</color>
<color name="orange_A700">#FF6D00</color>
<color name="grey_50">#FAFAFA</color>
<color name="grey_100">#F5F5F5</color>
<color name="grey_200">#EEEEEE</color>
<color name="grey_300">#E0E0E0</color>
<color name="grey_400">#BDBDBD</color>
<color name="grey_500">#9E9E9E</color>
<color name="grey_600">#757575</color>
<color name="grey_700">#616161</color>
<color name="grey_800">#424242</color>
<color name="grey_900">#212121</color>
<color name="black">#000000</color>
<color name="white">#FFFFFF</color>
<color name="transparent">#00000000</color>
<!--Light Background Dark Text-->
<color name="light_bg_dark_primary_text">#DE000000</color>
<color name="light_bg_dark_secondary_text">#8A000000</color>
<color name="light_bg_dark_disabled_text">#61000000</color>
<color name="light_bg_dark_hint_text">#61000000</color>
<!--Dark Background Light Text-->
<color name="dark_bg_light_primary_text">#FFFFFFFF</color>
<color name="dark_bg_light_secondary_text">#B3FFFFFF</color>
<color name="dark_bg_light_disabled_text">#80FFFFFF</color>
<color name="dark_bg_light_hint_text">#80FFFFFF</color>
</resources>
Buat beberapa berkas resource baru di \app\src\main\res\values, dengan nama dan skrip seperti di bawah ini.
style_amber.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.Amber" parent="AppTheme">
<item name="colorPrimary">@color/amber_600</item>
<item name="colorPrimaryDark">@color/amber_900</item>
<item name="colorAccent">@color/amber_300</item>
</style>
<style name="Theme.Amber.NoActionBar" parent="Theme.Amber">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="Theme.Amber.ActionBar" parent="Theme.Amber">
<item name="android:colorBackground">@color/amber_600</item>
<item name="android:colorBackgroundCacheHint">@color/amber_400</item>
</style>
<style name="Theme.Amber.AppBarOverlay" parent="AppTheme.AppBarOverlay" />
<style name="Theme.Amber.PopupOverlay" parent="AppTheme.PopupOverlay" />
</resources>
style_blue.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.Blue" parent="AppTheme">
<item name="colorPrimary">@color/blue_600</item>
<item name="colorPrimaryDark">@color/blue_900</item>
<item name="colorAccent">@color/blue_300</item>
</style>
<style name="Theme.Blue.NoActionBar" parent="Theme.Blue">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="Theme.Blue.ActionBar" parent="Theme.Blue">
<item name="android:colorBackground">@color/blue_600</item>
<item name="android:colorBackgroundCacheHint">@color/blue_400</item>
</style>
<style name="Theme.Blue.AppBarOverlay" parent="AppTheme.AppBarOverlay" />
<style name="Theme.Blue.PopupOverlay" parent="AppTheme.PopupOverlay" />
</resources>
style_blue_grey.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.BlueGrey" parent="AppTheme">
<item name="colorPrimary">@color/blue_grey_600</item>
<item name="colorPrimaryDark">@color/blue_grey_900</item>
<item name="colorAccent">@color/blue_grey_300</item>
</style>
<style name="Theme.BlueGrey.NoActionBar" parent="Theme.BlueGrey">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="Theme.BlueGrey.ActionBar" parent="Theme.BlueGrey">
<item name="android:colorBackground">@color/blue_grey_600</item>
<item name="android:colorBackgroundCacheHint">@color/blue_grey_400</item>
</style>
<style name="Theme.BlueGrey.AppBarOverlay" parent="AppTheme.AppBarOverlay" />
<style name="Theme.BlueGrey.PopupOverlay" parent="AppTheme.PopupOverlay" />
</resources>
style_brown.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.Brown" parent="AppTheme">
<item name="colorPrimary">@color/brown_600</item>
<item name="colorPrimaryDark">@color/brown_900</item>
<item name="colorAccent">@color/brown_300</item>
</style>
<style name="Theme.Brown.NoActionBar" parent="Theme.Brown">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="Theme.Brown.ActionBar" parent="Theme.Brown">
<item name="android:colorBackground">@color/brown_600</item>
<item name="android:colorBackgroundCacheHint">@color/brown_400</item>
</style>
<style name="Theme.Brown.AppBarOverlay" parent="AppTheme.AppBarOverlay" />
<style name="Theme.Brown.PopupOverlay" parent="AppTheme.PopupOverlay" />
</resources>
style_cyan.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.Cyan" parent="AppTheme">
<item name="colorPrimary">@color/cyan_600</item>
<item name="colorPrimaryDark">@color/cyan_900</item>
<item name="colorAccent">@color/cyan_300</item>
</style>
<style name="Theme.Cyan.NoActionBar" parent="Theme.Cyan">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="Theme.Cyan.ActionBar" parent="Theme.Cyan">
<item name="android:colorBackground">@color/cyan_600</item>
<item name="android:colorBackgroundCacheHint">@color/cyan_400</item>
</style>
<style name="Theme.Cyan.AppBarOverlay" parent="AppTheme.AppBarOverlay" />
<style name="Theme.Cyan.PopupOverlay" parent="AppTheme.PopupOverlay" />
</resources>
style_deep_orange.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.DeepOrange" parent="AppTheme">
<item name="colorPrimary">@color/deep_orange_600</item>
<item name="colorPrimaryDark">@color/deep_orange_900</item>
<item name="colorAccent">@color/deep_orange_300</item>
</style>
<style name="Theme.DeepOrange.NoActionBar" parent="Theme.DeepOrange">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="Theme.DeepOrange.ActionBar" parent="Theme.DeepOrange">
<item name="android:colorBackground">@color/deep_orange_600</item>
<item name="android:colorBackgroundCacheHint">@color/deep_orange_400</item>
</style>
<style name="Theme.DeepOrange.AppBarOverlay" parent="AppTheme.AppBarOverlay" />
<style name="Theme.DeepOrange.PopupOverlay" parent="AppTheme.PopupOverlay" />
</resources>
style_deep_purple.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.DeepPurple" parent="AppTheme">
<item name="colorPrimary">@color/deep_purple_600</item>
<item name="colorPrimaryDark">@color/deep_purple_900</item>
<item name="colorAccent">@color/deep_purple_300</item>
</style>
<style name="Theme.DeepPurple.NoActionBar" parent="Theme.DeepPurple">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="Theme.DeepPurple.ActionBar" parent="Theme.DeepPurple">
<item name="android:colorBackground">@color/deep_purple_600</item>
<item name="android:colorBackgroundCacheHint">@color/deep_purple_400</item>
</style>
<style name="Theme.DeepPurple.AppBarOverlay" parent="AppTheme.AppBarOverlay" />
<style name="Theme.DeepPurple.PopupOverlay" parent="AppTheme.PopupOverlay" />
</resources>
style_green.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.Green" parent="AppTheme">
<item name="colorPrimary">@color/green_600</item>
<item name="colorPrimaryDark">@color/green_900</item>
<item name="colorAccent">@color/green_300</item>
</style>
<style name="Theme.Green.NoActionBar" parent="Theme.Green">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="Theme.Green.ActionBar" parent="Theme.Green">
<item name="android:colorBackground">@color/green_600</item>
<item name="android:colorBackgroundCacheHint">@color/green_400</item>
</style>
<style name="Theme.Green.AppBarOverlay" parent="AppTheme.AppBarOverlay" />
<style name="Theme.Green.PopupOverlay" parent="AppTheme.PopupOverlay" />
</resources>
style_grey.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.Grey" parent="AppTheme">
<item name="colorPrimary">@color/grey_600</item>
<item name="colorPrimaryDark">@color/grey_900</item>
<item name="colorAccent">@color/grey_300</item>
</style>
<style name="Theme.Grey.NoActionBar" parent="Theme.Grey">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="Theme.Grey.ActionBar" parent="Theme.Grey">
<item name="android:colorBackground">@color/grey_600</item>
<item name="android:colorBackgroundCacheHint">@color/grey_400</item>
</style>
<style name="Theme.Grey.AppBarOverlay" parent="AppTheme.AppBarOverlay" />
<style name="Theme.Grey.PopupOverlay" parent="AppTheme.PopupOverlay" />
</resources>
style_indigo.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.Indigo" parent="AppTheme">
<item name="colorPrimary">@color/indigo_600</item>
<item name="colorPrimaryDark">@color/indigo_900</item>
<item name="colorAccent">@color/indigo_300</item>
</style>
<style name="Theme.Indigo.NoActionBar" parent="Theme.Indigo">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="Theme.Indigo.ActionBar" parent="Theme.Indigo">
<item name="android:colorBackground">@color/indigo_600</item>
<item name="android:colorBackgroundCacheHint">@color/indigo_400</item>
</style>
<style name="Theme.Indigo.AppBarOverlay" parent="AppTheme.AppBarOverlay" />
<style name="Theme.Indigo.PopupOverlay" parent="AppTheme.PopupOverlay" />
</resources>
style_light_blue.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.LightBlue" parent="AppTheme">
<item name="colorPrimary">@color/light_blue_600</item>
<item name="colorPrimaryDark">@color/light_blue_900</item>
<item name="colorAccent">@color/light_blue_300</item>
</style>
<style name="Theme.LightBlue.NoActionBar" parent="Theme.LightBlue">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="Theme.LightBlue.ActionBar" parent="Theme.LightBlue">
<item name="android:colorBackground">@color/light_blue_600</item>
<item name="android:colorBackgroundCacheHint">@color/light_blue_400</item>
</style>
<style name="Theme.LightBlue.AppBarOverlay" parent="AppTheme.AppBarOverlay" />
<style name="Theme.LightBlue.PopupOverlay" parent="AppTheme.PopupOverlay" />
</resources>
style_light_green.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.LightGreen" parent="AppTheme">
<item name="colorPrimary">@color/light_green_600</item>
<item name="colorPrimaryDark">@color/light_green_900</item>
<item name="colorAccent">@color/light_green_300</item>
</style>
<style name="Theme.LightGreen.NoActionBar" parent="Theme.LightGreen">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="Theme.LightGreen.ActionBar" parent="Theme.LightGreen">
<item name="android:colorBackground">@color/light_green_600</item>
<item name="android:colorBackgroundCacheHint">@color/light_green_400</item>
</style>
<style name="Theme.LightGreen.AppBarOverlay" parent="AppTheme.AppBarOverlay" />
<style name="Theme.LightGreen.PopupOverlay" parent="AppTheme.PopupOverlay" />
</resources>
style_lime.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.Lime" parent="AppTheme">
<item name="colorPrimary">@color/lime_600</item>
<item name="colorPrimaryDark">@color/lime_900</item>
<item name="colorAccent">@color/lime_300</item>
</style>
<style name="Theme.Lime.NoActionBar" parent="Theme.Lime">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="Theme.Lime.ActionBar" parent="Theme.Lime">
<item name="android:colorBackground">@color/lime_600</item>
<item name="android:colorBackgroundCacheHint">@color/lime_400</item>
</style>
<style name="Theme.Lime.AppBarOverlay" parent="AppTheme.AppBarOverlay" />
<style name="Theme.Lime.PopupOverlay" parent="AppTheme.PopupOverlay" />
</resources>
style_orange.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.Orange" parent="AppTheme">
<item name="colorPrimary">@color/orange_600</item>
<item name="colorPrimaryDark">@color/orange_900</item>
<item name="colorAccent">@color/orange_300</item>
</style>
<style name="Theme.Orange.NoActionBar" parent="Theme.Orange">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="Theme.Orange.ActionBar" parent="Theme.Orange">
<item name="android:colorBackground">@color/orange_600</item>
<item name="android:colorBackgroundCacheHint">@color/orange_400</item>
</style>
<style name="Theme.Orange.AppBarOverlay" parent="AppTheme.AppBarOverlay" />
<style name="Theme.Orange.PopupOverlay" parent="AppTheme.PopupOverlay" />
</resources>
style_pink.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.Pink" parent="AppTheme">
<item name="colorPrimary">@color/pink_600</item>
<item name="colorPrimaryDark">@color/pink_900</item>
<item name="colorAccent">@color/pink_300</item>
</style>
<style name="Theme.Pink.NoActionBar" parent="Theme.Pink">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="Theme.Pink.ActionBar" parent="Theme.Pink">
<item name="android:colorBackground">@color/pink_600</item>
<item name="android:colorBackgroundCacheHint">@color/pink_400</item>
</style>
<style name="Theme.Pink.AppBarOverlay" parent="AppTheme.AppBarOverlay" />
<style name="Theme.Pink.PopupOverlay" parent="AppTheme.PopupOverlay" />
</resources>
style_purple.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.Purple" parent="AppTheme">
<item name="colorPrimary">@color/purple_600</item>
<item name="colorPrimaryDark">@color/purple_900</item>
<item name="colorAccent">@color/purple_300</item>
</style>
<style name="Theme.Purple.NoActionBar" parent="Theme.Purple">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="Theme.Purple.ActionBar" parent="Theme.Purple">
<item name="android:colorBackground">@color/purple_600</item>
<item name="android:colorBackgroundCacheHint">@color/purple_400</item>
</style>
<style name="Theme.Purple.AppBarOverlay" parent="AppTheme.AppBarOverlay" />
<style name="Theme.Purple.PopupOverlay" parent="AppTheme.PopupOverlay" />
</resources>
style_red.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.Red" parent="AppTheme">
<item name="colorPrimary">@color/red_600</item>
<item name="colorPrimaryDark">@color/red_900</item>
<item name="colorAccent">@color/red_300</item>
</style>
<style name="Theme.Red.NoActionBar" parent="Theme.Red">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="Theme.Red.ActionBar" parent="Theme.Red">
<item name="android:colorBackground">@color/red_600</item>
<item name="android:colorBackgroundCacheHint">@color/red_400</item>
</style>
<style name="Theme.Red.AppBarOverlay" parent="AppTheme.AppBarOverlay" />
<style name="Theme.Red.PopupOverlay" parent="AppTheme.PopupOverlay" />
</resources>
style_teal.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.Teal" parent="AppTheme">
<item name="colorPrimary">@color/teal_600</item>
<item name="colorPrimaryDark">@color/teal_900</item>
<item name="colorAccent">@color/teal_300</item>
</style>
<style name="Theme.Teal.NoActionBar" parent="Theme.Teal">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="Theme.Teal.ActionBar" parent="Theme.Teal">
<item name="android:colorBackground">@color/teal_600</item>
<item name="android:colorBackgroundCacheHint">@color/teal_400</item>
</style>
<style name="Theme.Teal.AppBarOverlay" parent="AppTheme.AppBarOverlay" />
<style name="Theme.Teal.PopupOverlay" parent="AppTheme.PopupOverlay" />
</resources>
style_yellow.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.Yellow" parent="AppTheme">
<item name="colorPrimary">@color/yellow_600</item>
<item name="colorPrimaryDark">@color/yellow_900</item>
<item name="colorAccent">@color/yellow_300</item>
</style>
<style name="Theme.Yellow.NoActionBar" parent="Theme.Yellow">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="Theme.Yellow.ActionBar" parent="Theme.Yellow">
<item name="android:colorBackground">@color/yellow_600</item>
<item name="android:colorBackgroundCacheHint">@color/yellow_400</item>
</style>
<style name="Theme.Yellow.AppBarOverlay" parent="AppTheme.AppBarOverlay" />
<style name="Theme.Yellow.PopupOverlay" parent="AppTheme.PopupOverlay" />
</resources>
Tambahkan sebuah kelas baru dengan nama Setting pada paket aplikasi Anda.
Lengkapi kode sumbernya menjadi seperti di bawah ini.
package com.inochi.theme;
import android.content.Context;
import android.content.SharedPreferences;
public class Setting {
private SharedPreferences settings;
private Context context;
private String name;
public Setting(Context context, String name){
this.context = context;
this.name = name;
settings = context.getSharedPreferences(name, Context.MODE_PRIVATE);
}
public void setSetting(String key, String value){
SharedPreferences.Editor editor = settings.edit();
editor.putString(key, value);
editor.apply();
}
public void deleteSetting(){
settings = context.getSharedPreferences(name, Context.MODE_PRIVATE);
settings.edit().clear().apply();
}
public String getSetting(String key, String defVal){
return settings.getString(key, defVal);
}
public String getSetting(String key){
return settings.getString(key, "");
}
public int getIntSetting(String strKey, int defVal){
String strValue = String.valueOf(defVal);
String strSetting = getSetting(strKey, strValue);
return Integer.parseInt(strSetting);
}
public int getIntSetting(String strKey){
String strSetting = getSetting(strKey);
return Integer.parseInt(strSetting);
}
public void setIntSetting(String strKey, int defVal){
String strValue = String.valueOf(defVal);
setSetting(strKey, strValue);
}
public short getShortSetting(String strKey, short defVal){
String strValue = String.valueOf(defVal);
String strSetting = getSetting(strKey, strValue);
return Short.parseShort(strSetting);
}
public void setShortSetting(String strKey, short defVal){
String strValue = String.valueOf(defVal);
setSetting(strKey, strValue);
}
public long getLongSetting(String strKey, long defVal){
String strValue = String.valueOf(defVal);
String strSetting = getSetting(strKey, strValue);
return Long.parseLong(strSetting);
}
public long getLongSetting(String strKey){
String strSetting = getSetting(strKey);
return Long.parseLong(strSetting);
}
public void setLongSetting(String strKey, long defVal){
String strValue = String.valueOf(defVal);
setSetting(strKey, strValue);
}
}
Kelas Setting ini akan kita gunakan untuk menyimpan perubahan saat pemilihan warna tema pada aplikasi.
Selanjutnya ubah berkas layout content_main.xml di \app\src\main\res\layout menjadi seperti di bawah ini.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="@layout/activity_main">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<Button
android:id="@+id/btnRed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/deep_purple_300"
android:text="Red" />
<Button
android:id="@+id/btnGreen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/deep_orange_300"
android:text="Green" />
<Button
android:id="@+id/btnBlue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/yellow_300"
android:text="Blue" />
<Button
android:id="@+id/btnBrown"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/blue_grey_300"
android:text="Brown" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<Button
android:id="@+id/btnGrey"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/cyan_300"
android:text="Grey" />
<Button
android:id="@+id/btnPink"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/light_green_300"
android:text="Pink" />
<Button
android:id="@+id/btnPurple"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/light_blue_300"
android:text="Purple" />
<Button
android:id="@+id/btnTeal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/orange_300"
android:text="Teal" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<Button
android:id="@+id/btnIndigo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/lime_300"
android:text="Indigo" />
<Button
android:id="@+id/btnAmber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/brown_300"
android:text="Amber" />
<Button
android:id="@+id/btnLime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/blue_300"
android:text="Lime" />
<Button
android:id="@+id/btnOrange"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/indigo_300"
android:text="Orange" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<Button
android:id="@+id/btnYellow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/green_300"
android:text="Yellow" />
<Button
android:id="@+id/btnCyan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/red_300"
android:text="Cyan" />
<Button
android:id="@+id/btnLightGreen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/purple_300"
android:text="Light Green" />
<Button
android:id="@+id/btnLightBlue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/deep_orange_300"
android:text="Light Blue" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<Button
android:id="@+id/btnBlueGrey"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/lime_300"
android:text="Blue Grey" />
<Button
android:id="@+id/btnDeepPurple"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/amber_300"
android:text="Deep Purple" />
<Button
android:id="@+id/btnDeepOrange"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/pink_300"
android:text="Deep Orange" />
</LinearLayout>
</LinearLayout>
</FrameLayout>
Sehingga tampilan layout content_main.xml berubah menjadi seperti gambar di bawah ini.
Selanjutnya ubah kode sumber kelas MainActivity menjadi seperti di bawah ini.
package com.inochi.theme;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Button;
public class MainActivity extends AppCompatActivity {
private Setting setting;
private final String THEME_NAME = "THEME_NAME";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setting = new Setting(this, getPackageName());
int theme = setting.getIntSetting(THEME_NAME, R.style.Theme_Red_NoActionBar);
setTheme(theme);
setContentView(R.layout.activity_main);
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
Button btnRed = findViewById(R.id.btnRed);
Button btnGreen = findViewById(R.id.btnGreen);
Button btnBlue = findViewById(R.id.btnBlue);
Button btnBrown = findViewById(R.id.btnBrown);
Button btnGrey = findViewById(R.id.btnGrey);
Button btnPink = findViewById(R.id.btnPink);
Button btnPurple = findViewById(R.id.btnPurple);
Button btnTeal = findViewById(R.id.btnTeal);
Button btnIndigo = findViewById(R.id.btnIndigo);
Button btnAmber = findViewById(R.id.btnAmber);
Button btnLime = findViewById(R.id.btnLime);
Button btnOrange = findViewById(R.id.btnOrange);
Button btnYellow = findViewById(R.id.btnYellow);
Button btnCyan = findViewById(R.id.btnCyan);
Button btnLightGreen = findViewById(R.id.btnLightGreen);
Button btnLightBlue = findViewById(R.id.btnLightBlue);
Button btnBlueGrey = findViewById(R.id.btnBlueGrey);
Button btnDeepPurple = findViewById(R.id.btnDeepPurple);
Button btnDeepOrange = findViewById(R.id.btnDeepOrange);
btnRed.setOnClickListener(buttonClick);
btnGreen.setOnClickListener(buttonClick);
btnBlue.setOnClickListener(buttonClick);
btnBrown.setOnClickListener(buttonClick);
btnGrey.setOnClickListener(buttonClick);
btnPink.setOnClickListener(buttonClick);
btnPurple.setOnClickListener(buttonClick);
btnTeal.setOnClickListener(buttonClick);
btnIndigo.setOnClickListener(buttonClick);
btnAmber.setOnClickListener(buttonClick);
btnLime.setOnClickListener(buttonClick);
btnOrange.setOnClickListener(buttonClick);
btnYellow.setOnClickListener(buttonClick);
btnCyan.setOnClickListener(buttonClick);
btnLightGreen.setOnClickListener(buttonClick);
btnLightBlue.setOnClickListener(buttonClick);
btnBlueGrey.setOnClickListener(buttonClick);
btnDeepPurple.setOnClickListener(buttonClick);
btnDeepOrange.setOnClickListener(buttonClick);
}
private void rerunActivity(){
finish();
Intent intent = new Intent(MainActivity.this, MainActivity.class);
intent.putExtras(getIntent());
startActivity(intent);
}
private View.OnClickListener buttonClick = new View.OnClickListener(){
@Override
public void onClick(View v) {
int id = v.getId();
switch (id){
case R.id.btnRed:
setting.setIntSetting(THEME_NAME, R.style.Theme_Red_NoActionBar);
rerunActivity();
break;
case R.id.btnGreen:
setting.setIntSetting(THEME_NAME, R.style.Theme_Green_NoActionBar);
rerunActivity();
break;
case R.id.btnBlue:
setting.setIntSetting(THEME_NAME, R.style.Theme_Blue_NoActionBar);
rerunActivity();
break;
case R.id.btnBrown:
setting.setIntSetting(THEME_NAME, R.style.Theme_Brown_NoActionBar);
rerunActivity();
break;
case R.id.btnGrey:
setting.setIntSetting(THEME_NAME, R.style.Theme_Grey_NoActionBar);
rerunActivity();
break;
case R.id.btnPink:
setting.setIntSetting(THEME_NAME, R.style.Theme_Pink_NoActionBar);
rerunActivity();
break;
case R.id.btnPurple:
setting.setIntSetting(THEME_NAME, R.style.Theme_Purple_NoActionBar);
rerunActivity();
break;
case R.id.btnTeal:
setting.setIntSetting(THEME_NAME, R.style.Theme_Teal_NoActionBar);
rerunActivity();
break;
case R.id.btnIndigo:
setting.setIntSetting(THEME_NAME, R.style.Theme_Indigo_NoActionBar);
rerunActivity();
break;
case R.id.btnAmber:
setting.setIntSetting(THEME_NAME, R.style.Theme_Amber_NoActionBar);
rerunActivity();
break;
case R.id.btnLime:
setting.setIntSetting(THEME_NAME, R.style.Theme_Lime_NoActionBar);
rerunActivity();
break;
case R.id.btnOrange:
setting.setIntSetting(THEME_NAME, R.style.Theme_Orange_NoActionBar);
rerunActivity();
break;
case R.id.btnYellow:
setting.setIntSetting(THEME_NAME, R.style.Theme_Yellow_NoActionBar);
rerunActivity();
break;
case R.id.btnCyan:
setting.setIntSetting(THEME_NAME, R.style.Theme_Cyan_NoActionBar);
rerunActivity();
break;
case R.id.btnLightGreen:
setting.setIntSetting(THEME_NAME, R.style.Theme_LightGreen_NoActionBar);
rerunActivity();
break;
case R.id.btnLightBlue:
setting.setIntSetting(THEME_NAME, R.style.Theme_LightBlue_NoActionBar);
rerunActivity();
break;
case R.id.btnBlueGrey:
setting.setIntSetting(THEME_NAME, R.style.Theme_BlueGrey_NoActionBar);
rerunActivity();
break;
case R.id.btnDeepPurple:
setting.setIntSetting(THEME_NAME, R.style.Theme_DeepPurple_NoActionBar);
rerunActivity();
break;
case R.id.btnDeepOrange:
setting.setIntSetting(THEME_NAME, R.style.Theme_DeepOrange_NoActionBar);
rerunActivity();
break;
}
}
};
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
Sudah selesai, silakan coba jalankan aplikasi Anda. Klik pada salah satu tombol warna untuk mengubah warna tema ActionBar.
Kode sumber ini dapat Anda unduh di https://github.com/InochiSoft/Android-Theme.
