Mengubah Warna Tema ActionBar dengan Warna Material Design

Bagikan jika Anda sukai postingan ini!

ActionBar dengan warna tema pink
ActionBar dengan warna tema pink

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.

Lokasi penyimpanan berkas md_colors.xml
Lokasi penyimpanan berkas md_colors.xml

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.

Menambahkan kelas Setting pada paket
Menambahkan kelas Setting pada paket

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.

Tampilan layout content_main.xml
Tampilan layout content_main.xml

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.

Warna tema deep purple
Warna tema deep purple

Kode sumber ini dapat Anda unduh di https://github.com/InochiSoft/Android-Theme.