Tutorial Membuat Tema Material Design untuk Aplikasi Android

Last Updated on 8 years by Mas Herdi

Hey all, bagaimana puasanya? Masih kuat kan… hehe. Kali ini saya akan berbagi tentang bagaimana membuat tema dengan style Material Design untuk aplikasi Android buatan kalian. Bagi yang telah mencoba dan melihat aplikasi yang menggunakan Material Design, ada perbedaan yang lumayan mencolok dibandingkan dengan aplikasi yang belum menggunakan Material Design, yaitu pada bagian warna. Yup, tema Material Design menggunakan warna-warna yang memang sudah dirancang supaya sinkron dan enak dilihat. Tema Material Design juga mempunyai color palette sendiri, yang berisi warna-warna yang akan digunakan untuk aplikasi, seperti colorPrimary, colorPrimaryDark, dan sebagainya.

Membuat Theme Style untuk Material Design

Bagaimana cara membuat tema yang sesuai untuk Material Design? Google sendiri sebenarnya sudah menyediakan referensi warna untuk Material Design yang bisa dicek di sini. Namun developer biasanya kurang ahli dalam pemilihan warna, dan ingin yang praktis sehingga bisa tinggal dipakai. Karena itu kalian bisa mencoba website materialpalette.com, yang akan membantu kalian dalam meng-generate warna yang akan dipakai untuk Material Design. Kalian cukup memilih dua warna utama, setelah itu kalian bisa mendownloadnya dalam bentuk file xml resource Android, yang bisa langsung dicopy-pastekan ke folder /res/values dengan nama file colors.xml. Berikut adalah contoh isi dari colors.xml setelah saya memilih dua warna pada materialpalette.com :

colors.xml

<!-- Palette generated by Material Palette - materialpalette.com/red/teal -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
  <color name="primary">#F44336</color>
  <color name="primary_dark">#D32F2F</color>
  <color name="primary_light">#FFCDD2</color>
  <color name="accent">#009688</color>
  <color name="primary_text">#212121</color>
  <color name="secondary_text">#727272</color>
  <color name="icons">#FFFFFF</color>
  <color name="divider">#B6B6B6</color>
</resources>

Praktis bukan? Pada file colors.xml tersebut sudah tersedia warna-warna Material Design yang serasi dan siap digunakan. Langkah selanjutnya adalah…

Membuat Theme Material Design di style.xml

Jika resources colornya sudah tersedia, selanjutnya kita akan membuat tema kita sendiri dengan Material Design style :D. Caranya, bukalah file /res/values/styles.xml, dan kemudian copy-pastekan kode di bawah ini :

<resources>

    <style name="Base.Theme.TWOHThemeApp" parent="Theme.AppCompat.NoActionBar">

        <item name="colorPrimary">@color/primary</item>

        <!--   warna gelap untuk status bar dan contextual app bars -->
        <item name="colorPrimaryDark">@color/primary_dark</item>

        <!--   theme UI controls seperti checkboxes dan text fields e.g. FloatActionButton -->
        <item name="colorAccent">@color/accent</item>

        <!--   warna untuk Title Text  -->
        <item name="android:textColorPrimary">@color/primary_text</item>

        <!--   warna untuk menu overflow icon (tiga titik vertical) -->
        <item name="android:textColorSecondary">@color/secondary_text</item>

    </style>

    <!-- Base application theme. -->
    <style name="AppBaseTheme" parent="Base.Theme.TWOHThemeApp">

    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">

    </style>

</resources>

Jika sudah, Material Design kemudian akan secara otomatis mewarnai komponen-komponen pada aplikasi kita berdasarkan style tema di atas, seperti Toolbars akan diberi warna dari colorPrimaryDark, dan sebagainya. Hal itu memudahkan kita sehingga kita tidak perlu mendefinisikan warna untuk masing-masing komponen layout. Setelah itu, langkah berikutnya adalah…

Mengaplikasikan Tema Material Design pada Android Manifest

Untuk bisa mengimplementasikan tema tersebut pada aplikasi kita, kita perlu mensetting-nya pada AndroidManifest.xml. Caranya buka file AndroidManifest.xml, dan pada tag, Application, isilah field android:theme, dengan nama tema buatan kita, yaitu AppTheme.

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme">

    <!-- application content -->

    </application>

Jika sudah, maka ketika dijalankan aplikasi kalian akan otomatis mempunyai tema yang sesuai dengan warna-warna Material Design style seperti gambar berikut.

Material Design color theme

That’s all. Tutorial tentang Material Design berikutnya akan menyusul, karena itu jangan lupa untuk langganan blog ini ya guyysss… !