Belajar Membuat Style Material Design di Android Studio

Assalamualaikum Warahmatullahi Wabarakatuh.

Kali ini saya akan mengajarkan pada kalian, tentang bagaimana cara membuat tema dengan style Material Design pada Aplikasi Android. Bisa kita bandingkan Tema atau Style yang menggunakan Material Design, dengan tema yang belum menggunakan Material Design, yaitu pada bagian warnanya, tema Material Design menggunakan warna-warna yang memang sudah dirancang oleh programmer, supaya enak dilihat. Style atau Tema Material Design mempunyai sebuah color palette sendiri, yang berisi warna-warna untuk kita digunakan pada aplikasi, seperti colorPrimary, colorPrimaryDark, dan sebagainya.

Materi Lainnya Yang Direkomendasikan:

• Mengenal AppCompat Library pada Android Studio
• Cara Membuat Custom Toolbar Material Design
• Cara Membuat Floating Action Button Material Design

Membuat Tema dengan Style Material Design di Android Studio

Google sendiri sudah menyediakan referensi warna untuk Material Design yang bisa kalian cek di sini atau pada website materialpalette.com, yang akan membantu pada developer dalam meng-generate warna yang akan dipakai pada Aplikasi Android. Untuk membuat Style atau Tema Material Design, pertama buka file colors.xml, yang terdapat pada Direktori /res/values.

Berikut ini merupakan beberapa Style/Tema Color Default yang sudah saya ubah dan tambahkan, dengan menggunakan Warna yang sudah saya dari situs https://www.materialpalette.com/ atau kalian juga dapat mendownloadnya secara langsung. #009688#009688

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#536DFE</color>
    <color name="lightPrimaryColor">#C5CAE9</color>
    <color name="icom">#FFFFFF</color>
    <color name="secondaryText">#757575</color>
    <color name="primaryText">#212121</color>
    <color name="DividerColor">#BDBDBD</color>
</resources>

Dengan menggunakan situs tersebut, kita dapat dengan praktis menentukan warna-warna untuk Style Material Design pada Aplikasi kita.

Membuat Theme Material Design pada style.xml

Jika resources colornya sudah beres, selanjutnya kita akan membuat tema kita sendiri dengan style Material Design, Caranya, bukalah file /res/values/styles.xml, lalu ubah baris kode tersebut menjadi seperti berikut ini.

<resources>

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

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

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

        <!--   theme UI controls seperti radioButton atau checkbox dan FloatActionButton -->
        <item name="colorAccent">@color/colorAccent</item>

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

        <!--   warna untuk menu overflow icon -->
        <item name="android:textColorSecondary">@color/secondaryText</item>

    </style>

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

    </style>

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

    </style>

</resources>

Secara otomatis komponen yang terdapat pada Aplikasi kita, akan diwarnai sesuai dengan Style yang sudah kita atur didalam file color.xml dan style.xml.

Untuk mengimplementasikan tema tersebut pada aplikasi kita, kita harus mensettingnya pada AndroidManifest.xml. Caranya buka file AndroidManifest.xml yang terdapat pada Direktori app/src/main, dialam Tag, <Application>, terdapat sebuah field, bernama android:theme, lalu masukan nama tema kita, yaitu AppTheme. Seperti berikut ini:

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

Demo:

Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Berbagi :