Asas Material Design
Gunakan Komponen Material: MaterialButton, TextInputLayout, MaterialCardView, FloatingActionButton, Snackbar, Chip, BottomSheetDialog dan Dynamic Color.
Asas Material Design ialah pelajaran Android Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 5. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Android Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Android Academy merangkumi sejumlah 5 pelajaran.
Apakah Itu Material Design?
Material Design ialah sistem reka bentuk Google untuk membina aplikasi Android yang menarik dan konsisten. Sistem ini menyediakan:
- Set komponen UI siap bina yang lengkap
- Peraturan jarak, tipografi dan warna yang konsisten
- Komponen yang boleh dicapai dan responsif
- Animasi dan peralihan terbina dalam
Pustaka Material Components for Android (MDC) membawa Material 3 ke Jetpack.
Menambah Komponen Material
Tambahkan kebergantungan dan tetapkan tema aplikasi anda kepada tema Material:
// app/build.gradle:
dependencies {
implementation 'com.google.android.material:material:1.12.0'
}
// res/values/themes.xml:
<style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
<item name="colorPrimary">@color/primary</item>
<item name="colorSecondary">@color/secondary</item>
<!-- ... -->
</style>MaterialButton
Gantikan Button biasa dengan MaterialButton untuk mendapatkan bucu bulat, kesan riak dan sokongan ikon:
<!-- Filled (default) -->
<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Save"
app:icon="@drawable/ic_save" />
<!-- Outlined style -->
<com.google.android.material.button.MaterialButton
style="@style/Widget.Material3.Button.OutlinedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancel" />
<!-- Text button -->
<com.google.android.material.button.MaterialButton
style="@style/Widget.Material3.Button.TextButton"
android:text="Learn more" />TextInputLayout & TextInputEditText
TextInputLayout membungkus EditText untuk menyediakan label terapung, mesej ralat dan pembilang aksara:
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/tilEmail"
style="@style/Widget.Material3.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Email address"
app:helperText="We will never share your email">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress" />
</com.google.android.material.textfield.TextInputLayout>MaterialCardView
MaterialCardView menambahkan ketinggian, bucu bulat dan garis pada bekas:
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
app:cardCornerRadius="12dp"
app:cardElevation="4dp"
app:strokeColor="@color/outline"
app:strokeWidth="1dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:orientation="vertical">
<TextView android:text="Card Title" />
<TextView android:text="Card content goes here" />
</LinearLayout>
</com.google.android.material.card.MaterialCardView>FloatingActionButton (FAB)
FAB menonjolkan tindakan utama pada skrin. Material 3 menawarkan tiga saiz:
<!-- Standard FAB -->
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:contentDescription="Add item"
app:srcCompat="@drawable/ic_add" />
<!-- Extended FAB (icon + text) -->
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:text="New Note"
app:icon="@drawable/ic_edit"
android:layout_gravity="bottom|end" />MaterialToolbar
Gantikan ActionBar lalai dengan MaterialToolbar untuk mendapatkan gaya Material 3:
<!-- In layout XML -->
<com.google.android.material.appbar.MaterialToolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorSurface"
app:title="My App"
app:navigationIcon="@drawable/ic_menu" />
// In Activity:
setSupportActionBar(binding.toolbar)
binding.toolbar.setNavigationOnClickListener {
onBackPressedDispatcher.onBackPressed()
}Snackbar
Snackbar memaparkan mesej ringkas yang boleh diambil tindakan di bahagian bawah skrin. Utamakan penggunaannya berbanding Toast:
// Simple message:
Snackbar.make(binding.root, "Item deleted", Snackbar.LENGTH_SHORT).show()
// With action:
Snackbar.make(binding.root, "Item deleted", Snackbar.LENGTH_LONG)
.setAction("Undo") {
viewModel.undoDelete()
}
.setAnchorView(binding.fab) // appears above the FAB
.show()Cip & ChipGroup
Cip ialah elemen padat untuk penapis, teg dan pilihan:
<com.google.android.material.chip.ChipGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:singleSelection="true">
<com.google.android.material.chip.Chip
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Kotlin"
style="@style/Widget.Material3.Chip.Filter" />
<com.google.android.material.chip.Chip
android:text="Android"
style="@style/Widget.Material3.Chip.Filter" />
<com.google.android.material.chip.Chip
android:text="Jetpack"
style="@style/Widget.Material3.Chip.Filter" />
</com.google.android.material.chip.ChipGroup>BottomSheetDialog
Helaian Bawah Modal meluncur ke atas dari bahagian bawah dan mengandungi kandungan atau tindakan:
class OptionsBottomSheet : BottomSheetDialogFragment() {
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
): View {
return inflater.inflate(R.layout.bottom_sheet_options, container, false)
}
}
// Show it from a Fragment:
val sheet = OptionsBottomSheet()
sheet.show(parentFragmentManager, "options")Material You — Warna Dinamik
Android 12+ menyokong Warna Dinamik — skema warna aplikasi menyesuaikan diri dengan kertas dinding pengguna secara automatik:
// In Application.onCreate():
override fun onCreate() {
super.onCreate()
DynamicColors.applyToActivitiesIfAvailable(this)
}
// That's it! Colors automatically extract from wallpaper on Android 12+
// On older Android, fallback colors from your theme are used.Semakan Pantas
Komponen Material manakah yang patut anda gunakan untuk membungkus EditText supaya mendapatkan label terapung dan mesej ralat sebaris?
Imbas Kembali: Asas Material Design
Material Components memudahkan pembinaan aplikasi yang menarik:
MaterialButton— gaya terisi, bergaris luar dan teksTextInputLayout+TextInputEditText— label terapung, ralatMaterialCardView— kad dengan ketinggian dan garisFloatingActionButton— butang tindakan utamaSnackbar— mesej yang boleh ditutup bersama tindakanChip— teg, penapis dan pilihan- Warna Dinamik — menyesuaikan diri dengan kertas dinding pada Android 12+
Seterusnya: tema, gaya dan mod gelap.
Pelajari Kotlin dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 36
- Pelajaran
- 152
Soalan Lazim
Adakah pelajaran “Asas Material Design” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Android Academy, termasuk “Asas Material Design”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Android Academy merangkumi sejumlah 5 pelajaran.
Apakah yang akan saya pelajari dalam “Asas Material Design”?
Gunakan Komponen Material: MaterialButton, TextInputLayout, MaterialCardView, FloatingActionButton, Snackbar, Chip, BottomSheetDialog dan Dynamic Color. Anda berlatih Android Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Android Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Android Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 5.
Berapa lamakah pelajaran “Asas Material Design” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Android Academy ini?
Ya. Setiap pelajaran Android Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Asas Material Design
- Tema & Gaya
- View Tersuai
- Animasi & Peralihan
- Navigasi Bawah & Tab