0Pricing
Android Academy · 课时

Material Design 基础

使用 Material 组件：MaterialButton、TextInputLayout、MaterialCardView、FloatingActionButton、Snackbar、Chip、BottomSheetDialog 和 Dynamic Color。

Material Design 基础 是 CoddyKit 上的免费 Android Academy 课时。 这是第 1 节课，共 5 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Android Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Android Academy 课程共包含 5 节课。

什么是 Material Design？

Material Design 是 Google 用于构建美观且一致的 Android 应用的设计系统。它提供：

  • 丰富的预构建界面组件
  • 一致的间距、排版和配色规则
  • 无障碍且响应式的组件
  • 内置动画和过渡效果

Material Components for Android 库（MDC）将 Material 3 带入 Jetpack。

添加 Material 组件

添加依赖项，并将应用主题设置为 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

将普通的 Button 替换为 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

TextInputLayout 包装 EditText，以提供浮动标签、错误消息和字符计数器：

<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 为容器添加阴影、圆角和描边：

<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 用于突出屏幕上的主要操作。Material 3 提供三种尺寸：

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

将默认的 ActionBar 替换为 MaterialToolbar，即可使用 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 会在屏幕底部显示简短且可操作的消息。相比 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()

标签与 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 — 动态颜色

Android 12 及更高版本支持动态颜色 — 应用的配色方案会自动适应用户的壁纸：

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

快速检查

要包装 EditText 以获得浮动标签和内联错误消息，应该使用哪个 Material 组件？

回顾：Material Design 基础

Material 组件让构建美观的应用变得简单：

  • MaterialButton — 填充、描边和文本样式
  • TextInputLayout + TextInputEditText — 浮动标签、错误消息
  • MaterialCardView — 带阴影和描边的卡片
  • FloatingActionButton — 主要操作按钮
  • Snackbar — 带操作且可关闭的消息
  • Chip — 标记、筛选和选择
  • 动态颜色 — 在 Android 12 及更高版本中适应壁纸

下一步：主题、样式和深色模式。

常见问题解答

「Material Design 基础」课时是免费的吗？

是的 — 「Material Design 基础」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Android Academy 课程的其余内容，请升级到 CoddyKit PRO。 Android Academy 课程共包含 5 节课。

「Material Design 基础」这节课中我会学到什么？

使用 Material 组件：MaterialButton、TextInputLayout、MaterialCardView、FloatingActionButton、Snackbar、Chip、BottomSheetDialog 和 Dynamic Color。 你通过在浏览器中直接运行的动手代码来练习 Android Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Android Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Android Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 5 节。

「Material Design 基础」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Android Academy 课中编写并运行代码吗？

能。每节 Android Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. Material Design 基础
  2. 主题与样式
  3. 自定义视图
  4. 动画与过渡
  5. 底部导航与标签页
← 返回 Android Academy