👒 ➗ 👨‍🎓 Tema dan gaya di aplikasi Android 👨🏻‍⚕️ ✋🏼 👨🏿‍🏭

Setiap pengembang Android harus bekerja dengan gaya. Seseorang merasa percaya diri dengan mereka, seseorang hanya memiliki pengetahuan yang dangkal, yang seringkali tidak memungkinkan mereka untuk menyelesaikan masalah sendiri.

Untuk mengantisipasi pelepasan tema gelap, diputuskan untuk menyegarkan semua informasi yang berkaitan dengan tema dan gaya dalam aplikasi Android.

Apa yang akan dibahas:

Pertimbangkan konsep dasar tema dan gaya dalam aplikasi Android, lihat peluang apa yang mereka berikan kepada kami;
Mari kita membuat tema sederhana menggunakan Komponen Bahan dan bermain dengan mendefinisikan ulang gaya;
Mari kita lihat bagaimana tema gelap bekerja;
Merumuskan rekomendasi untuk bekerja dengan gaya.

Mari kita mulai dengan dasar-dasarnya

Dalam strukturnya, tema dan gaya memiliki struktur yang sama:

<style name="MyStyleOrTheme"> <item name="key">value</item> </style>

Untuk membuat, gunakan tag style . Setiap gaya memiliki nama dan menyimpan parameter key-value .

Semuanya cukup sederhana. Tapi apa perbedaan antara tema dan gaya?

Satu-satunya perbedaan adalah bagaimana kita menggunakannya.

Tema

Tema adalah seperangkat parameter yang berlaku untuk seluruh aplikasi, Aktivitas, atau komponen Tampilan. Ini berisi warna-warna dasar aplikasi, gaya untuk merender semua komponen aplikasi dan berbagai pengaturan.

Contoh topik:

 <style name="Theme.MyApp.Main" parent="Theme.MaterialComponents.Light.NoActionBar"> <!--Base colors--> <item name="colorPrimary">@color/color_primary</item> <item name="colorPrimaryVariant">@color/color_primary_variant</item> <item name="colorSecondary">@color/color_secondary</item> <item name="colorOnPrimary">@color/color_on_primary</item> <item name="colorOnError">@color/color_on_error</item> <!--Style attributes--> <item name="textAppearanceHeadline1">@style/TextAppearance.MyTheme.Headline1</item> <item name="bottomSheetDialogTheme">@style/ThemeOverlay.MyTheme.BottomSheetDialog</item> <item name="chipStyle">@style/Widget.MaterialComponents.Chip.Action</item> <item name="textInputStyle">@style/Widget.MaterialComponents.TextInputLayout.FilledBox</item> <!--Params--> <item name="android:windowTranslucentStatus">true</item> <!-- ... --> </style>

Tema telah mendefinisikan ulang warna utama aplikasi ( colorPrimary , colorSecondary ), gaya untuk teks ( textAppearanceHeadline1 ) dan beberapa komponen aplikasi standar, serta opsi untuk bilah status transparan.

Agar gaya menjadi topik nyata, perlu mewarisi (kita akan berbicara tentang pewarisan sedikit kemudian) dari implementasi standar topik.

Gaya

Gaya adalah seperangkat parameter untuk menata komponen Tampilan tunggal.

Gaya sampel untuk TextInputLayout :

 <style name="Widget.MyApp.CustomTextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.FilledBox"> <item name="boxBackgroundMode">outline</item> <item name="boxStrokeColor">@color/color_primary</item> <item name="shapeAppearanceOverlay">@style/MyShapeAppearanceOverlay</item> </style>

Atribut

Atribut adalah gaya atau kunci tema. Ini adalah batu bata kecil tempat semuanya dibangun:

 colorPrimary colorSecondary colorOnError boxBackgroundMod boxStrokeColor shapeAppearanceOverlay ...

Semua kunci ini adalah atribut standar.

Kita dapat membuat atribut kita sendiri:

 <attr name="myFavoriteColor" format="color|reference" />

Atribut myFavoriteColor akan menunjuk ke warna atau tautan ke sumber daya warna.

Dalam format, kita dapat menentukan nilai yang cukup standar:

warna
referensi
tali
enum
sebagian kecil
dimensi
boolean
bendera
mengapung
bilangan bulat

Pada dasarnya, atribut adalah antarmuka . Itu harus diimplementasikan dalam topik:

 <style name="Theme.MyApp.Main" parent="Theme.MaterialComponents.Light.NoActionBar"> <!-- ... --> <item name="myFavoriteColor">@color/color_favorite</item> </style>

Sekarang kita bisa merujuknya. Struktur umum banding terlihat seperti ini:

 1 —   ,     ; 2 — namespace   (   Material Components Library); 3 —   ,     (); 4 —  .

Nah, akhirnya, mari kita ubah, misalnya, warna teks bidang:

 <androidx.appcompat.widget.AppCompatTextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="?attr/myFavoriteColor"/>

Berkat atributnya, kami dapat menambahkan segala jenis abstraksi yang akan berubah di dalam topik.

Mewarisi tema dan gaya

Seperti dalam OOP, kita dapat mengadopsi fungsionalitas dari implementasi yang ada. Ada dua cara untuk melakukan ini:

Eksplisit (eksplisit)
Tersirat (tersirat)

Untuk pewarisan eksplisit, kami menetapkan induk menggunakan kata kunci parent :

 <style name="SnackbarStyle" parent="Widget.MaterialComponents.Snackbar"> <!-- ... --> </style>

Untuk warisan implisit, kami menggunakan dot-notation untuk menunjukkan induk:

 <style name="SnackbarStyle.Green"> <!-- ... --> </style>

Tidak ada perbedaan dalam pekerjaan pendekatan ini.

Sangat sering kita dapat bertemu gaya yang sama:

 <style name="Widget.MyApp.Snackbar" parent="Widget.MaterialComponents.Snackbar"> <!-- ... --> </style>

Tampaknya gaya ini diciptakan oleh pewarisan ganda. Ini sebenarnya tidak demikian. Warisan berganda dilarang. Dalam definisi ini, warisan eksplisit selalu menang .

Artinya, sebuah gaya akan dibuat dengan nama Widget.MyApp.Snackbar , yang merupakan turunan dari Widget.MaterialComponents.Snackbar .

Hamparan tema

ThemeOverlay - ini adalah tema "ringan" khusus yang memungkinkan Anda untuk mengganti atribut tema utama untuk komponen-Tampilan.

Kami tidak akan pergi jauh untuk contoh, tetapi mengambil kasus dari aplikasi kami. Desainer memutuskan bahwa kita perlu membuat bidang login standar, yang akan memiliki warna yang berbeda dari gaya utama.

Dengan topik utama, bidang input terlihat seperti ini:

Itu tampak hebat, tetapi para desainer bersikeras bahwa bidangnya harus dalam gaya cokelat.

Oke, bagaimana kita bisa menyelesaikan masalah ini?

Ganti gaya?

Ya, kami dapat mendefinisikan ulang gaya dan secara manual mengubah warna utama tampilan, tetapi untuk ini Anda perlu menulis banyak kode, dan ada kemungkinan bahwa kami akan melupakan sesuatu.
Tuliskan pandangan Anda tentang pedoman dan dengan parameter khusus?

Pilihan yang bagus, sehingga kami dapat memuaskan setiap Daftar Keinginan dari para desainer dan pada saat bersamaan memompa keterampilan, tetapi semua ini melelahkan dan dapat menyebabkan bug yang tidak diinginkan.
Mengganti warna utama dalam tema?

Kami menemukan bahwa untuk tipe yang kami butuhkan, ubah saja colorPrimary pada topik. Opsi yang berfungsi, tetapi dengan cara ini kita akan memengaruhi tampilan komponen yang tersisa, tetapi kita tidak membutuhkannya.

Solusi yang benar adalah dengan menggunakan ThemeOverlay .

Buat ThemeOverlay dan ThemeOverlay kembali warna utama tema :

 <style name="ThemeOverlay.MyApp.Login" parent="ThemeOverlay.MaterialComponents.TextInputEditText"> <item name="colorPrimary">@color/colorBrown</item> </style>

Selanjutnya, kami menentukannya menggunakan tag khusus android:theme di TextInputLayout kami:

 <com.google.android.material.textfield.TextInputLayout android:theme="@style/ThemeOverlay.MyApp.Login" android:hint="Login" ... > <com.google.android.material.textfield.TextInputEditText ... /> </com.google.android.material.textfield.TextInputLayout>

Semuanya bekerja sesuai kebutuhan.

Tentu saja, muncul pertanyaan - bagaimana cara kerjanya di bawah tenda?

Sihir ini memungkinkan Anda untuk ContextThemeWrapper . Saat membuat Tampilan di LayoutInflater , konteks akan dibuat di mana tema saat ini akan diambil sebagai dasar dan parameter yang kami tentukan dalam tema Hamparan kami akan didefinisikan ulang di dalamnya.

 ../LayoutInflater.java final TypedArray ta = context.obtainStyledAttributes(attrs, ATTRS_THEME); final int themeResId = ta.getResourceId(0, 0); if (themeResId != 0) { context = new ContextThemeWrapper(context, themeResId); } ta.recycle();

Demikian pula, kita dapat secara independen mengganti parameter tema apa pun dalam aplikasi.

Urutan penerapan tema dan gaya ke komponen Lihat

Prioritas utama adalah file markup. Jika suatu parameter didefinisikan di dalamnya, maka semua parameter serupa akan diabaikan.
```
 <Button android:textColor="@color/colorRed" ... /> 
```

Prioritas berikutnya adalah gaya Tampilan:

 <Button style=“@Widget.MyApp.ButtonStyle" ... />

Berikut ini menggunakan gaya yang telah ditentukan untuk komponen:

 <style name="Theme.MyApp.Main" parent="Theme..."> <item name=“materialButtonStyle”>@Widget.MyApp.ButtonStyle</item> <!-- ... --> </style>

Jika tidak ada parameter yang ditemukan, maka atribut tema digunakan:

 <style name="Theme.MyApp.Main" parent="Theme..."> <item name=“colorPrimary”>@colorPrimary</item> <!-- ... --> </style>

Secara umum, ini semua yang perlu Anda ketahui untuk mulai bekerja dengan topik. Sekarang mari kita lihat sekilas perpustakaan desain Material Komponen yang diperbarui.

Semoga Komponen Material Datang Bersama Kami

Komponen Material diperkenalkan di Google I / O 2018 dan merupakan pengganti Perpustakaan Dukungan Desain.

Perpustakaan memberi kita kesempatan untuk menggunakan komponen yang diperbarui dari Material Design 2.0. Selain itu, banyak opsi penyesuaian yang menarik muncul di dalamnya. Semua ini memungkinkan Anda untuk menulis aplikasi yang cerah dan unik.

Berikut adalah beberapa contoh aplikasi dalam gaya baru: Owl , Balas , Derek .

Mari kita lanjutkan berlatih

Untuk membuat topik, Anda harus mewarisi dari topik dasar:

 Theme.MaterialComponents Theme.MaterialComponents.NoActionBar Theme.MaterialComponents.Light Theme.MaterialComponents.Light.NoActionBar Theme.MaterialComponents.Light.DarkActionBar Theme.MaterialComponents.DayNight Theme.MaterialComponents.DayNight.NoActionBar Theme.MaterialComponents.DayNight.DarkActionBar

Semuanya sangat mirip dengan tema AppCompat , tetapi memiliki atribut dan pengaturan tambahan.

Anda dapat mempelajari lebih lanjut tentang atribut baru di material.io .

Jika karena alasan tertentu Anda tidak dapat beralih ke topik baru sekarang, maka tema Bridge akan dilakukan. Mereka mewarisi dari tema AppCompat dan memiliki semua atribut Komponen Bahan baru. Anda hanya perlu menambahkan postfix Bridge dan menggunakan semua fitur tanpa rasa takut:

 <!-- ... --> Theme.MaterialComponents.Light.Bridge <!-- ... -->

Dan inilah topik kita:

 <style name="Theme.MyApp.Main" parent="Theme.MaterialComponents.Light.NoActionBar"> <item name="colorPrimary">@color/color_primary</item> <item name="colorPrimaryVariant">@color/color_primary_variant</item> <item name="colorSecondary">@color/color_secondary</item> <item name="colorSecondaryVariant">@color/color_secondary_variant</item> <style>

Nama warna primer (warna merek) telah berubah:

 colorPrimary —       (   AppCompat); colorPrimaryVariant —    ( colorPrimaryDark  AppCompat); colorSecondary —        ( colorAccent  AppCompat); colorSecondaryVariant —   .

Informasi lebih lanjut tentang warna dapat ditemukan di material.io .

Saya sudah menyebutkan bahwa tema berisi gaya standar untuk setiap komponen Lihat. Misalnya, untuk Snackbar gaya akan disebut snackbarStyle , untuk checkbox - checkboxStyle dan kemudian semuanya akan serupa. Contoh akan meletakkan segala sesuatu di tempatnya:

Buat gaya Anda sendiri dan terapkan pada tema:

 <style name="Theme.MyApp.Main" parent="Theme.MaterialComponents.Light.NoActionBar"> <!-- ... --> <item name="snackbarStyle">@style/Widget.MyApp.SnackbarStyle</item> </style> <style name="Widget.MyApp.SnackbarStyle" parent="Widget.MaterialComponents.Snackbar"> <!-- ... --> </style>

Penting untuk dipahami bahwa ketika Anda mendefinisikan kembali suatu gaya dalam suatu tema, itu akan berlaku untuk semua Tampilan jenis ini dalam aplikasi (Aktivitas).

Jika Anda ingin menerapkan gaya hanya untuk satu tampilan tertentu, maka Anda perlu menggunakan tag style dalam file dengan markup:

  <com.google.android.material.button.MaterialButton style="@style/Widget.MyApp.SnackbarStyle" ... />

Salah satu inovasi yang sangat mengesankan saya adalah ShapeAppearance . Ini memungkinkan Anda untuk mengubah bentuk komponen tepat di subjek!

Setiap komponen tampilan milik grup tertentu:

shapeAppearance Small Component
Komponen Bentuk bentuk Appearance
shapeAppearance Komponen Besar

Seperti yang dapat kita pahami dari namanya, dalam kelompok tampilan dengan ukuran berbeda.

Periksa dalam praktik:

 <style name="Theme.MyApp.Main" parent="Theme.MaterialComponents.Light.NoActionBar"> <!-- ... --> <item name="shapeAppearanceSmallComponent">@style/Widget.MyApp.SmallShapeAppearance</item> </style> <style name="Widget.MyApp.SmallShapeAppearance" parent=“ShapeAppearance.MaterialComponents.SmallComponent”> <item name="cornerFamilyTopLeft">rounded</item> <item name="cornerFamilyBottomRight">cut</item> <item name="cornerSizeTopLeft">20dp</item> <item name="cornerSizeBottomRight">15dp</item> <!--<item name="cornerFamily">cut</item>--> <!--<item name="cornerSize">8dp</item>--> </style>

Kami membuat Widget.MyApp.SmallShapeAppearance untuk komponen "kecil". Kami membulatkan sudut kiri atas sebesar 20dp dan sudut kanan bawah dipotong sebesar 15dp .

Mendapat hasil ini:

Itu terlihat menarik. Apakah ini akan berhasil dalam kehidupan nyata? Waktu akan memberi tahu.

Seperti gaya, kami hanya dapat menerapkan ShapeAppearance ke satu komponen Tampilan.

Apa yang ada di topik gelap?

Rilis Android Q akan berlangsung segera, dan dengan itu tema gelap resmi akan datang kepada kita.

Mungkin salah satu fitur paling menarik dan spektakuler dari versi baru Android adalah aplikasi otomatis tema gelap untuk seluruh aplikasi dengan satu baris kode.

Kedengarannya bagus, mari kita coba. Saya sarankan mengambil klien gitlab favorit dari terrakok .

Izinkan mengecat ulang aplikasi (dinonaktifkan secara default):

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- ... --> <item name="android:forceDarkAllowed">true</item> </style>

android:forceDarkAllowed tersedia dengan API 29 (Android Q).

Kita mulai, lihat apa yang terjadi:

Setuju bahwa untuk satu baris kode itu terlihat sangat keren.

Tentu saja, ada masalah - BottomNavigationBar menyatu dengan latar belakang, loader tetap berwarna putih, pemilihan kode menderita dan, sepertinya, semuanya, setidaknya tidak ada yang serius telah menimpa saya.

Saya yakin bahwa menghabiskan waktu tidak banyak dapat menyelesaikan masalah utama. Misalnya, mematikan mode gelap otomatis untuk tampilan individual (ya, itu juga mungkin - android:forceDarkAllowed tersedia untuk Lihat dalam file markup).

Harus diingat bahwa mode ini hanya tersedia untuk tema terang, jika Anda menggunakan yang gelap, maka tema gelap yang dipaksakan tidak akan berfungsi.

Rekomendasi pekerjaan dapat ditemukan di dokumentasi dan di material.io .

Dan jika kita ingin melakukan semuanya sendiri?

Tidak peduli betapa mudahnya menggunakan tema gelap yang dipaksakan, mode ini tidak memiliki fleksibilitas. Faktanya, semuanya berjalan sesuai dengan aturan yang telah ditentukan yang mungkin tidak sesuai dengan kita dan, yang lebih penting, pelanggan. Saya pikir keputusan seperti itu bisa dianggap sementara, sampai kita membuat implementasi topik gelap.

Di API 8 (Froyo), kualifikasi -night telah ditambahkan, yang hingga hari ini digunakan untuk menerapkan tema gelap. Ini memungkinkan Anda untuk secara otomatis menerapkan tema yang diinginkan tergantung pada waktu hari itu.

Dalam tema DayNight , implementasi semacam itu sudah digunakan, cukup bagi kita untuk mewarisi darinya.

Mari kita coba menulis sendiri:

 ../values/themes.xml <style name="Theme.DayNight.Base" parent="Theme.MaterialComponents.Light"/> <style name="Theme.MyApp.Main" parent="Theme.DayNight.Base> <!-- ... --> </style> ../values-night/themes.xml <style name="Theme.DayNight.Base" parent="Theme.MaterialComponents"/>

Di sumber yang biasa untuk tema ( values/themes.xml ) kami mewarisi dari tema terang, di "malam" ( values-night/themes.xml ) kami warisi dari tema gelap.

Itu saja. Kami mendapat implementasi perpustakaan dari tema gelap. Sekarang kita harus mendukung sumber daya untuk dua topik.

Untuk beralih antar tema saat aplikasi sedang berjalan, Anda dapat menggunakan AppCompatDelegate.setDefaultNightMode , yang mengambil parameter berikut:

MODE_NIGHT_NO - Tema ringan;
MODE_NIGHT_YES - Tema gelap;
MODE_NIGHT_AUTO_BATTERY - Mode otomatis. Tema gelap menyala jika mode hemat daya aktif;
MODE_NIGHT_FOLLOW_SYSTEM - Mode berdasarkan pada pengaturan sistem.

Apa yang harus kita pertimbangkan ketika bekerja dengan tema dan gaya?

Seperti yang saya perhatikan, Google telah secara resmi mulai memaksakan topik yang gelap. Saya yakin banyak pelanggan mulai menerima pertanyaan - “Bisakah kita menambahkan tema gelap?”. Baik jika Anda melakukan semuanya dengan benar dari awal dan mudah bagi Anda untuk mengubah warna terang menjadi gelap, sambil menerima aplikasi yang dicat ulang sepenuhnya.

Sayangnya, ini tidak selalu terjadi. Ada aplikasi lama yang membutuhkan upaya besar untuk membuat perubahan yang diperlukan.

Mari kita coba merumuskan rekomendasi untuk bekerja dengan gaya bersama:

1. Pemilih warna

Saya pikir setiap pengembang dihadapkan pada situasi ketika beberapa warna aneh muncul di tata letak baru yang belum didefinisikan dalam palet aplikasi. Apa yang harus dilakukan dalam kasus ini?

Jawaban yang benar adalah berbicara dengan perancang dan mencoba mengembangkan palet warna. Sekarang ada banyak program (Zeplin, Sketsa, dll.) Yang memungkinkan Anda untuk membuat warna primer dan kemudian menggunakannya kembali.

Semakin cepat Anda melakukan ini, semakin sedikit sakit kepala yang Anda miliki di masa depan.

2. Eja warna dengan nama yang tepat

Di setiap aplikasi, ada warna yang memiliki banyak opsi kecerahan. Anda dapat mulai menemukan nama untuk mereka:

 <color name="green_tiny">...</color> <color name="green_light">...</color> <color name="green_dark">...</color>

Setuju, itu tidak terlihat sangat bagus. Pertanyaan segera muncul - warna mana yang lebih terang dari tiny atau light ? Dan jika kita memiliki selusin opsi?

Yang terbaik adalah tetap menggunakan konsep Google dan menambahkan kecerahan yang sesuai untuk nama warna (Google menyebut opsi warna ini - colorVariant ):

 <color name="material_green_300">...</color> <color name="material_green_700">...</color> <color name="material_green_900">...</color>

Dengan pendekatan ini, kami dapat memiliki sejumlah opsi kecerahan dengan satu warna dan kami tidak perlu membuat nama tertentu, yang sangat sulit.

3. Untuk abstrak dari warna tertentu jika itu berubah dalam berbagai topik

Karena kami sedang menulis aplikasi di mana setidaknya akan ada dua topik, kami tidak mampu merujuk ke warna tertentu jika diterapkan dalam tema dengan cara yang berbeda.

Mari kita lihat sebuah contoh:

Kita melihat bahwa dalam tema terang, misalnya, bilah alat berwarna ungu, dan dalam gelap itu abu-abu gelap. Bagaimana kita menerapkan perilaku ini hanya dengan menggunakan kemampuan tema?

Semuanya cukup sederhana - kita akan membuat atribut dan menerapkannya dalam tema terang dan gelap dengan warna yang sesuai, seperti yang dijelaskan sebelumnya.

Google merekomendasikan mengaitkan nama atribut dengan semantik penggunaan.

4. Jangan takut untuk membuat file sumber daya

Ketika banyak gaya, tema, dan atribut yang berbeda diketik dalam styles.xml , itu menjadi sulit untuk dipertahankan.

Yang terbaik adalah mengelompokkan semuanya menjadi file terpisah:

 themes.xml — Theme & ThemeOverlay styles.xml — Widget styles type.xml — TextAppearance, text size etc shape.xml — ShapeAppearance motion.xml — Animations styles system_ui.xml — Booleans, colors for UI control //may be other files

Aturan sederhana seperti itu akan menghindari arsip-arsip Tuhan dan, karenanya, akan lebih mudah untuk mempertahankan gaya.

5. Gunakan kembali secara maksimal

Apa yang akan kita lakukan jika kita ingin mendefinisikan ulang atribut yang hanya tersedia dari versi API tertentu?

Kami dapat membuat dua topik terpisah:

 ../values/themes.xml <style name="Theme.MyApp.Main" parent=”Theme.MaterialComponents.NoActionBar”> <!--Many definition--> </style> ../values-v27/themes.xml <style name="Theme.MyApp.Main" parent=”Theme.MaterialComponents.NoActionBar”> <!--Many definition--> <name="android:windowLightNavigationBar">...</item> </style>

Apakah sekarang kita memiliki tema dengan semua parameter untuk setiap versi API? Tentu tidak! Kami akan membuat topik dasar di mana atribut dasar yang tersedia untuk semua versi API akan ditentukan dan diwarisi darinya dalam versi API yang diinginkan:

 ../values/themes.xml <style name="Theme.MyApp.Base" parent=”Theme.MaterialComponents.DayNight.NoActionBar”> <!--Many definition--> </style> <style name="Theme.MyApp.Main" parent=”Theme.MyApp.Base”/> ../values-v27/themes.xml <style name="Theme.MyApp.Base.V27" parent="Theme.MyApp.Base"> <name="android:windowLightNavigationBar">...</item> </style> <style name="Theme.MyApp.Main" parent=”Theme.MyApp.Base.V27”/>

Dengan prinsip ini, semua topik di perpustakaan standar dibangun.

6. Gunakan sumber daya vektor dan warna

Saya pikir tidak layak untuk mengatakan mengapa sumber daya vektor bagus. Semua orang sudah tahu (kalau-kalau, tautan ke dokumentasi ). Nah, pewarnaan akan membantu kita mewarnai mereka dalam warna tema.

Anda dapat melihat apa itu pewarnaan dan bagaimana cara menggunakannya dalam contoh ini .

7.? Android: attr / ... vs? Attr / ...

Saat mengakses sumber daya, kami memiliki kesempatan untuk menggunakan atribut sistem dan atribut dari pustaka Komponen Material. Penting untuk dipahami bahwa beberapa atribut hanya ada dengan versi API tertentu. Seperti yang kita semua tahu, mengakses sumber daya yang tidak ada menyebabkan crash (misalnya, serat memberitahu kita jika ada sesuatu yang salah, tetapi Anda tidak harus selalu mengandalkannya)

 android:background="?android:attr/selectableItemBackgroundBorderless" android:background="?attr/selectableItemBackgroundBorderless"

Dalam kasus pertama, kami mengakses sumber daya sistem, seperti yang ditunjukkan oleh android . Dalam kasus kedua, ke atribut dari perpustakaan tempat kompatibilitas mundur diimplementasikan.

Lebih baik selalu menggunakan opsi kedua.

8. Selalu tentukan induk untuk gaya

Mungkin ada parameter dalam gaya induk, yang tanpanya komponen akan dirender secara salah, jadi Anda harus selalu menentukan induknya.

 <style name="Widget.MyApp.LoginInputLayout" parent="Widget.MaterialComponents.TextInputLayout.FilledBox"> <item name="errorTextColor">@color/colorError</item> </style>

9. Tema, gaya atau ...?

Saat membuat tema dan gaya Anda sendiri, alangkah baiknya jika Anda menentukan awalan yang menyebutkan jenis gaya apa dan untuk apa definisi itu. Penamaan seperti itu akan membuatnya sangat mudah untuk menyusun dan memperluas gaya.

 <style name="Theme.MyApp.Main" parent=”...”/> <style name="Widget.MyApp.LoginInputLayout" parent="..."/> <style name="Widget.MyApp.LoginInputLayout.Brown"/> <style name="ThemeOverlay.MyApp.Login" parent=”...”/>

10. Gunakan TextAppearance

Ini akan menjadi nada yang bagus untuk memperluas gaya dasar untuk teks dan menggunakannya di mana-mana.

Material Design: Typography , Typography Theming .

Kesimpulan

, — , . - . Material Components. . Sketch — Material Theme Editor . . , .

Material Components GitHub — Modular and customizable Material Design UI components for Android . . , — sample, .

Tema dan gaya di aplikasi Android