พื้นฐาน Material Design

Material Design คืออะไร

การเพิ่ม Material Components

// 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

<!-- 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

<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

<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)

<!-- 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

<!-- 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

// 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()

ชิปและ ChipGroup

<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

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 — สีแบบไดนามิก

// 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.

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทบทวน: พื้นฐาน Material Design