Logo Material Design

Penggunaan Material Design pada Aplikasi Android (Android Studio)

Juli 26, 2020 9:34 am Dipublikasikan oleh

Artikel ini membahas cara menggunakan Material Design pada aplikasi Android, meliputi konfigurasi dependensi build.gradle, Tema Material Design dan fix Error inflating com.google.android.material.*. , serta Typografinya.

Perkenalan Material Design

Aplikasi yang bagus tidak hanya mampu menyelesaikan permasalahan dan berjalan dengan baik namun juga memiliki desain tampilan yang bagus dan nyaman bagi pengguna. Pembuatan desain tampilan aplikasi yang bisa bikin nyaman pengguna ini adalah tugas dari seorang Desainer UI/UX. Karena cukup banyak pertimbangan serta resource untuk mendesain aplikasi, maka biasanya sebuah perusahaan memiliki divisi UI/UX tersendiri. Nah permasalahan baru terjadi ketika desain yang telah dibuat tidak bisa diterapkan oleh programmer karena adanya keterbatasan pada Android itu sendiri.

Permasalahan penerapan desain aplikasi bisa diatasi jika desainer UI/UX dan programmer menggunakan pedoman tertentu. Google pada tanggal 25 Juni 2014 memperkenalkan Material Design sebagai pedoman desain aplikasi Android. Oleh karena itu, Desainer UI/UX aplikasi Android pun perlu mempelajari pedoman desain Material agar desain yang dihasilkan bisa diterapkan pada aplikasi.

Catatan : artikel ini tidak membahas tentang pedoman desain Material.

Pengaturan Dependensi Material Design pada build.gradle Module

Sebelum memulai mengatur dependensi, tentu kita buat sebuah project baru dulu dengan pengaturan berikut :

Empty Activity, Lang : Kotlin, Minimum SDK : API 21, untuk nama project terserah Anda

Selanjutnya, buka build.gradle (Module: App) atau modul lain (jika ada), kemudian masukkan kode implementasi library Material berikut :

ubah bagian <version> dengan versi stabil terbaru, yakni dengan menekan tombol [Alt] + [Shift] + [Enter] atau arahkan kursor pada kode tersebut dan ubah dari dialog box seperti gambar berikut ini :

Change Version Material Design

saat artikel ini dibuat, versi terbaru dari Google Material adalah 1.1.0

Pengaturan Tema atau Styles Material Design

Tema Aplikasi perlu disesuaikan dengan Material agar tidak terjadi Error inflating com.google.android.material.*, pun jikalau Anda menemukan error itu sebelumnya maka kemungkinan tema yang Anda gunakan belum Material.

Untuk mengubah tema, buka res -> values -> styles.xml. Pada pengaturan standar awal, ada bisa mengubah parent tema menjadi Theme.MaterialComponents.Light seperti kode ini :

Tema pada MaterialComponenst cukup banyak, yang perlu diingat bagi seorang developer junior mungkin hanya tema yang berhubungan dengan ActionBar, seperti DarkActionBar, NoActionBar, maupun default seperti kode di atas.

Anda bisa melihat apa saja tema yang tersedia pada Material Design menggunakan autocomplete yang ada pada Android Studio, caranya ketik Theme.MaterialComponents. dan tunggu kotak autocomplete muncul seperti pada gambar berikut ini :

Daftar Tema Material Design Android Studio

Tema NoActionBar biasanya digunakan saat kita ingin menggunakan Custom ToolBar. Pembahasan mengenai Custom ToolBar akan diulas pada artikel lainnya ya.

Typografi pada Material Design Android

Material Design memiliki cukup banyak Typografi atau gaya tulis. Dikarenakan Material Design adalah sebuah pedoman desain multiplatform yang dibuat oleh Google, maka typografi yang ada mirip typografi pada website, seperti textAppearanceHeadline1 sampai textAppearanceHeadline6, textAppearanceSubtitle1, textAppearanceSubtitle1, textAppearanceBody1, textAppearanceBody2, textAppearanceCaption, textAppearanceButton, dan textAppearanceOverline.

Cara menggunakan typografi material yaitu dengan menambahkan atribut android:textAppearance pada widget yang dituju, gambar berikut adalah contoh penambahan atribut textAppearance pada TextView :

Cara Menambah Typografi pada Widget Android

Cukup sekian informasi mengenai cara menggunakan Material Design kali ini, selanjutnya artikel mengenai aplikasi Android yang menggunakan desain Material akan dipublikasikan dalam tag Material Design.

Resource yang mungkin anda butuhkan : Material Design Components for Android 1.1.0

Label :

Dikategorikan pada: ,

Loading comments…