Material Design 3 trong Compose

Jetpack Compose cung cấp cách triển khai Material Design 3, phiên bản cải tiến tiếp theo của Material Design. Material 3 bao gồm giao diện mới cập nhật, thành phần và các tính năng cá nhân hoá Material You như màu động, đồng thời được thiết kế để gắn kết với kiểu hình ảnh và giao diện người dùng hệ thống mới trên Android 12 trở lên.

Dưới đây, chúng tôi minh hoạ cách triển khai Material Design 3 bằng cách dùng ứng dụng mẫu Reply (Trả lời) làm ví dụ. Mẫu Reply (Trả lời) hoàn toàn dựa trên Material Design 3.

Ứng dụng mẫu Reply (Trả lời) bằng Material Design 3
Hình 1. Ứng dụng mẫu Reply (Trả lời) bằng Material Design 3

Phần phụ thuộc

Để bắt đầu sử dụng Material 3 trong ứng dụng Compose, hãy thêm phần phụ thuộc Compose Material 3 vào các tệp build.gradle:

implementation "androidx.compose.material3:material3:$material3_version"

Sau khi thêm phần phụ thuộc, bạn có thể bắt đầu thêm các hệ thống Material Design, bao gồm màu sắc, kiểu chữ và hình dạng, vào ứng dụng của mình.

API thử nghiệm

Một số API của M3 được coi là thử nghiệm. Trong những trường hợp như vậy, bạn cần chọn sử dụng ở cấp độ hàm hoặc tệp bằng cách sử dụng chú thích ExperimentalMaterial3Api:

// import androidx.compose.material3.ExperimentalMaterial3Api
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppComposable() {
    // M3 composables
}

Tuỳ chỉnh giao diện Material

Giao diện M3 chứa các hệ thống con sau: bảng phối màu, kiểu chữhình dạng. Khi bạn tuỳ chỉnh các giá trị này, thay đổi sẽ tự động phản ánh trong các thành phần M3 mà bạn sử dụng để xây dựng ứng dụng.

Các hệ thống con trong Material Design: Màu sắc, kiểu chữ và hình dạng
Hình 2. Các hệ thống con của Material Design: màu sắc, kiểu chữ và hình dạng

Jetpack Compose triển khai các khái niệm này bằng thành phần kết hợp MaterialTheme trong M3:

MaterialTheme(
    colorScheme = /* ...
    typography = /* ...
    shapes = /* ...
) {
    // M3 app content
}

Để tạo giao diện cho nội dung ứng dụng, hãy xác định bảng phối màu, kiểu chữ và hình dạng dành riêng cho ứng dụng.

Bảng phối màu

Nền tảng của bảng phối màu là bộ 5 màu chủ đạo. Mỗi màu trong số này liên quan đến một bảng sắc độ gồm 13 tông màu mà các thành phần Material 3 sử dụng. Ví dụ: đây là bảng phối màu cho giao diện sáng cho Phản hồi:

Bảng phối màu sáng của ứng dụng mẫu Reply (Trả lời)
Hình 3. Bảng phối màu sáng của ứng dụng mẫu Reply (Trả lời)

Đọc thêm về Bảng phối màu và vai trò của màu.

Tạo bảng phối màu

Mặc dù bạn có thể tạo ColorScheme tuỳ chỉnh theo cách thủ công, việc tạo một bảng phối màu bằng màu gốc trong thương hiệu thường sẽ dễ dàng hơn. Công cụ tạo giao diện Material cho phép bạn làm điều này và tuỳ ý xuất mã giao diện Compose. Các tệp sau đây được tạo:

  • Color.kt chứa màu cho giao diện của bạn, đồng thời xác định tất cả vai trò của màu sắc trên cả giao diện sáng lẫn tối.

val md_theme_light_primary = Color(0xFF476810)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
val md_theme_light_primaryContainer = Color(0xFFC7F089)
// ..
// ..

val md_theme_dark_primary = Color(0xFFACD370)
val md_theme_dark_onPrimary = Color(0xFF213600)
val md_theme_dark_primaryContainer = Color(0xFF324F00)
// ..
// ..

  • Theme.kt chứa thông tin thiết lập về bảng phối màu sáng và tối cũng như giao diện của ứng dụng.

private val LightColorScheme = lightColorScheme(
    primary = md_theme_light_primary,
    onPrimary = md_theme_light_onPrimary,
    primaryContainer = md_theme_light_primaryContainer,
    // ..
)
private val DarkColorScheme = darkColorScheme(
    primary = md_theme_dark_primary,
    onPrimary = md_theme_dark_onPrimary,
    primaryContainer = md_theme_dark_primaryContainer,
    // ..
)

@Composable
fun ReplyTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colorScheme =
        if (!darkTheme) {
            LightColorScheme
        } else {
            DarkColorScheme
        }
    MaterialTheme(
        colorScheme = colorScheme,
        content = content
    )
}

Để hỗ trợ các giao diện sáng và tối, hãy dùng isSystemInDarkTheme(). Dựa trên chế độ cài đặt hệ thống, hãy xác định bảng phối màu cần sử dụng: sáng hoặc tối.

Bảng phối màu linh động

Màu động là thành phần quan trọng của Material You, trong đó một thuật toán lấy màu sắc tuỳ chỉnh từ hình nền của người dùng để áp dụng cho ứng dụng và giao diện người dùng hệ thống của họ. Bảng màu này được dùng làm điểm bắt đầu để tạo bảng phối màu sáng và tối.

Tuỳ chỉnh giao diện động của ứng dụng mẫu Reply từ hình nền (bên trái) và giao diện mặc định của ứng dụng (bên phải)
Hình 4. Tuỳ chỉnh giao diện động của ứng dụng mẫu Reply từ hình nền (bên trái) và giao diện mặc định của ứng dụng (bên phải)

Màu động hiện có trên phiên bản Android 12 trở lên. Nếu màu linh động có sẵn, bạn có thể thiết lập ColorScheme linh động. Nếu không thể, bạn nên quay lại sử dụng ColorScheme tuỳ chỉnh sáng hoặc tối.

ColorScheme cung cấp các hàm trình tạo để tạo bảng phối màu động sáng hoặc tối:

// Dynamic color is available on Android 12+
val dynamicColor = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
val colors = when {
    dynamicColor && darkTheme -> dynamicDarkColorScheme(LocalContext.current)
    dynamicColor && !darkTheme -> dynamicLightColorScheme(LocalContext.current)
    darkTheme -> DarkColorScheme
    else -> LightColorScheme
}

Mức sử dụng màu sắc

Bạn có thể truy cập vào màu giao diện Material trong ứng dụng thông qua MaterialTheme.colorScheme:

Text(
    text = "Hello theming",
    color = MaterialTheme.colorScheme.primary
)

Mỗi vai trò của màu sắc có thể được sử dụng ở nhiều nơi, tuỳ thuộc vào trạng thái, làm nổi bật và tạo điểm nhất cho thành phần.

  • Màu chính là màu cơ bản, dùng cho các thành phần chính như nút nổi bật, trạng thái hoạt động và sắc thái màu của các giao diện nâng cao.
  • Màu chính phụ được dùng cho các thành phần ít nổi bật hơn trong giao diện người dùng (chẳng hạn như thẻ bộ lọc), đồng thời mở rộng cơ hội hiển thị biểu thức màu.
  • Màu chính thứ ba được dùng để lấy vai trò của các điểm nhấn tương phản có thể dùng để cân bằng màu chính và màu phụ hoặc tăng sự chú ý cho một phần tử.

Thiết kế ứng dụng mẫu Reply (Trả lời) sử dụng màu on-primary-container (vùng chứa chính) ở đầu vùng chứa chính để làm nổi bật mục đã chọn.

Vùng chứa và trường văn bản chính có màu trên vùng chứa chính.
Hình 5. Vùng chứa và trường văn bản chính có màu trên vùng chứa chính.

Card(
    colors = CardDefaults.cardColors(
        containerColor =
        if (isSelected) MaterialTheme.colorScheme.primaryContainer
        else
            MaterialTheme.colorScheme.surfaceVariant
    )
) {
    Text(
        text = "Dinner club",
        style = MaterialTheme.typography.bodyLarge,
        color =
        if (isSelected) MaterialTheme.colorScheme.onPrimaryContainer
        else MaterialTheme.colorScheme.onSurface,
    )
}

Ở đây, bạn có thể thấy trong ngăn Navigation Navigation (Điều hướng trả lời) cách các màu vùng chứa phụ và thứ ba được sử dụng tương phản với nhau để tạo điểm nhấn và tạo điểm nhấn.

Tổ hợp vùng chứa cấp ba và vùng chứa trên cấp ba cho nút Hành động nổi.
Hình 6. Tổ hợp vùng chứa cấp ba và vùng chứa trên cấp ba cho nút Hành động nổi.

Kiểu chữ

Material Design 3 xác định tỷ lệ cỡ chữ, bao gồm cả các kiểu văn bản đã được điều chỉnh từ Material Design 2. Cách đặt tên và phân nhóm đã được đơn giản hoá thành: hiển thị, dòng tiêu đề, tiêu đề, nội dung và nhãn, với kích thước lớn, trung bình và nhỏ cho mỗi nhóm.

Tỷ lệ kiểu chữ mặc định cho Material Design 3
Hình 7. Tỷ lệ kiểu chữ mặc định cho Material Design 3
M3 Kích thước phông chữ/Chiều cao dòng mặc định
displayLarge Roboto 57/64
displayMedium Roboto 45/52
displaySmall Roboto 36/44
headlineLarge Roboto 32/40
headlineMedium Roboto 28/36
headlineSmall Roboto 24/32
titleLarge New- Roboto Medium 22/28
titleMedium Roboto Medium 16/24
titleSmall Roboto Medium 14/20
bodyLarge Roboto 16/24
bodyMedium Roboto 14/20
bodySmall Roboto 12/16
labelLarge Roboto Medium 14/20
labelMedium Roboto Medium 12/16
labelSmall New Roboto Medium, 11/16

Xác định kiểu chữ

Compose cung cấp lớp Typography của M3 – cùng với các lớp TextStyleliên quan đến phông chữ hiện có – để lập mô hình thang loại Material 3. Hàm khởi tạo Typography cung cấp các giá trị mặc định cho từng kiểu để bạn có thể bỏ qua bất kỳ tham số nào mà bạn không muốn tuỳ chỉnh:

val replyTypography = Typography(
    titleLarge = TextStyle(
        fontWeight = FontWeight.SemiBold,
        fontSize = 22.sp,
        lineHeight = 28.sp,
        letterSpacing = 0.sp
    ),
    titleMedium = TextStyle(
        fontWeight = FontWeight.SemiBold,
        fontSize = 16.sp,
        lineHeight = 24.sp,
        letterSpacing = 0.15.sp
    ),
    // ..
)
// ..

Nội dung lớn, nội dung trung bình và nhãn trung bình để sử dụng kiểu chữ khác nhau.
Hình 8. Nội dung lớn, thân máy vừa và gắn nhãn trung bình để sử dụng kiểu chữ khác nhau.

Sản phẩm của bạn có thể sẽ không dùng đến toàn bộ 15 kiểu mặc định trong tỷ lệ kiểu chữ trên Material Design. Trong ví dụ này, 5 kích thước được chọn để giảm nhóm kích thước trong khi các kích thước còn lại bị bỏ qua.

Bạn có thể tuỳ chỉnh kiểu chữ bằng cách thay đổi các giá trị mặc định của TextStyle và các thuộc tính liên quan đến phông chữ như fontFamilyletterSpacing.

bodyLarge = TextStyle(
    fontWeight = FontWeight.Normal,
    fontFamily = FontFamily.SansSerif,
    fontStyle = FontStyle.Italic,
    fontSize = 16.sp,
    lineHeight = 24.sp,
    letterSpacing = 0.15.sp,
    baselineShift = BaselineShift.Subscript
),

Sau khi bạn xác định Typography, hãy truyền nó vào MaterialTheme của M3:

MaterialTheme(
    typography = replyTypography,
) {
    // M3 app Content
}

Sử dụng kiểu văn bản

Bạn có thể truy xuất kiểu chữ được cung cấp cho thành phần kết hợp MaterialTheme của M3 bằng cách sử dụng MaterialTheme.typography:

Text(
    text = "Hello M3 theming",
    style = MaterialTheme.typography.titleLarge
)
Text(
    text = "you are learning typography",
    style = MaterialTheme.typography.bodyMedium
)

Bạn có thể đọc thêm về nguyên tắc của Material về cách áp dụng kiểu chữ.

Hình dạng

Vùng hiển thị của Material có thể hiển thị ở nhiều hình dạng. Hình dạng thường chi phối sự chú ý, cách xác định các thành phần, trạng thái giao tiếp và thể hiện thương hiệu.

Tỷ lệ hình dạng xác định kiểu của các góc vùng chứa, cung cấp nhiều độ tròn từ hình vuông đến hình tròn hoàn toàn.

Xác định hình dạng

Compose cung cấp cho lớp Shapes của M3 các tham số mở rộng để hỗ trợ các hình dạng mới trong M3. Tỷ lệ hình dạng trong M3 giống với tỷ lệ cỡ chữ, cho phép nhiều hình dạng thể hiện được trên giao diện người dùng.

Hình dạng có nhiều kích thước:

  • Quá nhỏ
  • Nhỏ
  • Medium
  • Lớn
  • Rất lớn

Theo mặc định, mỗi hình dạng có một giá trị mặc định, nhưng bạn có thể ghi đè các giá trị đó:

val replyShapes = Shapes(
    extraSmall = RoundedCornerShape(4.dp),
    small = RoundedCornerShape(8.dp),
    medium = RoundedCornerShape(12.dp),
    large = RoundedCornerShape(16.dp),
    extraLarge = RoundedCornerShape(24.dp)
)

Sau khi xác định Shapes, bạn có thể truyền nó đến MaterialTheme của M3:

MaterialTheme(
    shapes = replyShapes,
) {
    // M3 app Content
}

Sử dụng hình dạng

Bạn có thể tuỳ chỉnh tỷ lệ hình dạng cho tất cả các thành phần trong MaterialTheme hoặc có thể tuỳ chỉnh theo từng thành phần.

Áp dụng hình dạng có kích thước trung bình và lớn với các giá trị mặc định:

Card(shape = MaterialTheme.shapes.medium) { /* card content */ }
FloatingActionButton(
    shape = MaterialTheme.shapes.large,
    onClick = {
    }
) {
    /* fab content */
}

Hình dạng trung bình cho Thẻ và Hình dạng lớn cho nút hành động nổi trong ứng dụng mẫu Reply (Trả lời).
Hình 9. Hình dạng trung bình cho Thẻ và Hình dạng lớn cho nút hành động nổi trong ứng dụng mẫu Reply

Có hai hình dạng khác – RectangleShapeCircleShape – cũng là một phần của Compose. Hình chữ nhật không có bán kính bo góc còn hình tròn hiển thị các cạnh tròn:

Card(shape = RectangleShape) { /* card content */ }
Card(shape = CircleShape) { /* card content */ }

Các ví dụ bên dưới minh hoạ một số thành phần được áp dụng các giá trị hình dạng mặc định:

Giá trị hình dạng mặc định cho tất cả thành phần trong Material 3.
Hình 10. Giá trị hình dạng mặc định cho tất cả thành phần trong Material 3.

Bạn có thể đọc thêm về nguyên tắc của Material để áp dụng hình dạng.

Điểm nhấn

Điểm nhấn trong M3 được cung cấp bằng cách sử dụng các biến thể màu sắc và sự kết hợp dựa trên màu sắc. Trong M3, có hai cách để tạo điểm nhấn cho giao diện người dùng:

  • Sử dụng surface (vùng hiển thị), surface-variant (biến thể của vùng hiển thị) cùng với màu on-surface (màu nền cho vùng hiển thị) và màu on-surface-variants (màu nền cho biến thể của vùng hiển thị) từ hệ thống màu sắc mở rộng của M3. Ví dụ: có thể sử dụng vùng hiển thị với on-surface-variant và biến thể vùng hiển thị có thể dùng với on-surface để tạo các mức độ nổi bật khác nhau.
Sử dụng kết hợp màu trung tính để tạo điểm nhấn.
Hình 11. Sử dụng kết hợp màu trung tính để tạo điểm nhấn.
  • Sử dụng nhiều độ đậm phông chữ cho văn bản. Ở trên, bạn có thể cung cấp trọng số tuỳ chỉnh cho kiểu chữ của chúng tôi để có mức độ nhấn khác nhau.

bodyLarge = TextStyle(
    fontWeight = FontWeight.Bold
),
bodyMedium = TextStyle(
    fontWeight = FontWeight.Normal
)

Độ nâng

Material 3 thể hiện độ nâng (elevation) chủ yếu bằng cách sử dụng lớp phủ sắc độ màu. Đây là một cách mới để phân biệt vùng chứa với bề mặt — sử dụng tông màu nổi bật để tăng độ nâng màu (bên cạnh hiệu ứng đổ bóng).

Độ nâng dùng sắc độ màu cùng với độ nâng dùng đổ bóng
Hình 12. Độ nâng dùng sắc độ màu với độ nâng dùng đổ bóngE

Lớp phủ độ nâng trong giao diện tối cũng đã thay đổi thành lớp phủ sắc độ màu trong Material 3. Màu của lớp phủ lấy dựa trên màu chính.

Độ nâng của bóng so với Độ nâng dùng sắc độ màu trong Material Design 3
Hình 13. Độ nâng của bóng đổ so với Độ nâng dùng sắc độ màu trong Material Design 3

Surface (vùng hiển thị) của M3 — thành phần kết hợp sao lưu là yếu tố cơ bản của hầu hết các thành phần trong M3 — có độ nâng dựa trên sắc độ và đổ bóng:

Surface(
    modifier = Modifier,
    tonalElevation = /*...
    shadowElevation = /*...
) {
    Column(content = content)
}

Thành phần Material

Material Design đi kèm một bộ thành phần Material phong phú (chẳng hạn như nút, khối, thẻ, thanh điều hướng) tuân theo tính năng Tuỳ chỉnh giao diện Material và giúp bạn tạo ra những ứng dụng Material Design đẹp mắt. Bạn có thể bắt đầu sử dụng các thành phần có thuộc tính mặc định ngay từ đầu.

Button(onClick = { /*..*/ }) {
    Text(text = "My Button")
}

M3 cung cấp nhiều phiên bản của cùng một thành phần được sử dụng cho nhiều vai trò, tuỳ theo mức độ nhấn mạnh và chú ý.

Nút nhấn mạnh từ FAB, nút chính chuyển xuống nút Văn bản
Hình 14. Nút nhấn mạnh từ FAB, nút chính chuyển xuống nút Văn bản
  • Nút thao tác nổi mở rộng cho thao tác nhấn mạnh cao nhất:

ExtendedFloatingActionButton(
    onClick = { /*..*/ },
    modifier = Modifier
) {
    Icon(
        imageVector = Icons.Default.Edit,
        contentDescription = stringResource(id = R.string.edit),
    )
    Text(
        text = stringResource(id = R.string.add_entry),
    )
}

  • Nút được tô màu nền cho thao tác nhấn mạnh:

Button(onClick = { /*..*/ }) {
    Text(text = stringResource(id = R.string.view_entry))
}

  • Nút văn bản cho một thao tác nhấn thấp:

TextButton(onClick = { /*..*/ }) {
    Text(text = stringResource(id = R.string.replated_articles))
}

Bạn có thể đọc thêm về các nút và các thành phần khác trong Material. Material 3 cung cấp nhiều bộ thành phần, chẳng hạn như Nút, Thanh ứng dụng, Thành phần Điều hướng được thiết kế riêng cho nhiều trường hợp sử dụng và kích thước màn hình.

Material cũng cung cấp một số thành phần điều hướng giúp bạn triển khai tính năng điều hướng, tuỳ thuộc vào nhiều kích thước và trạng thái màn hình.

NavigationBar được dùng cho các thiết bị nhỏ gọn khi bạn muốn nhắm đến 5 đích đến trở xuống:

NavigationBar(modifier = Modifier.fillMaxWidth()) {
    Destinations.entries.forEach { replyDestination ->
        NavigationBarItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { }
        )
    }
}

NavigationRail được dùng cho máy tính bảng hoặc điện thoại có kích thước từ nhỏ đến trung bình ở chế độ ngang. Điều này mang đến sự tiện dụng cho người dùng và cải thiện trải nghiệm người dùng trên các thiết bị đó.

NavigationRail(
    modifier = Modifier.fillMaxHeight(),
) {
    Destinations.entries.forEach { replyDestination ->
        NavigationRailItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { }
        )
    }
}

Giới thiệu câu trả lời của BottomNavigationBar(Trái) và NavigationRail(Phải)
Hình 15. Nội dung phản hồi của BottomNavigationBar (Trái) và NavigationRail (Phải)

Trả lời bằng cả hai giao diện mặc định để cung cấp trải nghiệm người dùng sống động cho mọi kích thước thiết bị.

NavigationDrawer được dùng cho các máy tính bảng có kích thước từ trung bình đến lớn, nếu bạn có đủ không gian để hiển thị chi tiết. Bạn có thể sử dụng cả PermanentNavigationDrawer hoặc ModalNavigationDrawer cùng với NavigationRail.

PermanentNavigationDrawer(modifier = Modifier.fillMaxHeight(), drawerContent = {
    Destinations.entries.forEach { replyDestination ->
        NavigationRailItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { },
            label = { }
        )
    }
}) {
}

Giới thiệu câu trả lời của Ngăn điều hướng cố định
Hình 16. Nội dung phản hồi của ngăn điều hướng cố định

Các tuỳ chọn điều hướng giúp nâng cao trải nghiệm người dùng, sự thoải mái và phạm vi tiếp cận. Bạn có thể tìm hiểu thêm về các thành phần điều hướng Material trong Lớp học lập trình thích ứng Compose.

Tuỳ chỉnh giao diện của thành phần

M3 khuyến khích hoạt động cá nhân hoá và tạo sự linh hoạt. Tất cả các thành phần đều được áp dụng màu mặc định, nhưng sẽ hiển thị các API linh hoạt để tuỳ chỉnh màu nếu cần.

Hầu hết các thành phần (như thẻ và nút) đều cung cấp một đối tượng mặc định hiển thị giao diện màu sắc và độ nâng có thể sửa đổi được để tuỳ chỉnh thành phần:

val customCardColors = CardDefaults.cardColors(
    contentColor = MaterialTheme.colorScheme.primary,
    containerColor = MaterialTheme.colorScheme.primaryContainer,
    disabledContentColor = MaterialTheme.colorScheme.surface,
    disabledContainerColor = MaterialTheme.colorScheme.onSurface,
)
val customCardElevation = CardDefaults.cardElevation(
    defaultElevation = 8.dp,
    pressedElevation = 2.dp,
    focusedElevation = 4.dp
)
Card(
    colors = customCardColors,
    elevation = customCardElevation
) {
    // m3 card content
}

Bạn có thể đọc thêm về cách tuỳ chỉnh Material 3.

Giao diện người dùng hệ thống

Một số khía cạnh của Material You bắt nguồn từ kiểu hình ảnh và giao diện người dùng hệ thống mới trên Android 12 trở lên. Hai khía cạnh chính có thay đổi là hiệu ứng gợn sóng và cuộn quá mức (overscroll). Bạn không cần làm gì thêm để triển khai những thay đổi này.

Gợn sóng

Hiệu ứng gợn sóng hiện sử dụng ánh sáng lấp lánh để chiếu sáng các bề mặt khi nhấn. Compose Material Ripple nâng cao sử dụng RippleDrawable trên nền tảng Android, vì vậy, hiệu ứng gợn sóng lấp lánh có sẵn trên Android 12 trở lên cho tất cả thành phần Material.

Ripple trong M2 so với M3
Hình 17. Ripple trong M2 so với M3

Cuộn xuống cuối cùng (overscroll)

Giờ đây, thao tác cuộn quá mức sẽ sử dụng hiệu ứng kéo giãn ở cạnh của vùng chứa cuộn. Theo mặc định, tính năng cuộn quá mức kéo giãn được bật trong các thành phần kết hợp vùng chứa cuộn – ví dụ: LazyColumn, LazyRowLazyVerticalGrid – trong Compose Foundation 1.1.0 trở lên, bất kể cấp độ API.

Cuộn quá mức sử dụng hiệu ứng kéo giãn ở cạnh vùng chứa
Hình 18. Cuộn quá mức bằng hiệu ứng kéo giãn ở cạnh vùng chứa

Hỗ trợ tiếp cận

Các tiêu chuẩn hỗ trợ tiếp cận tích hợp sẵn trong các thành phần Material được thiết kế để cung cấp nền tảng cho việc thiết kế sản phẩm toàn diện. Việc hiểu rõ khả năng hỗ trợ tiếp cận của sản phẩm có thể giúp nâng cao khả năng hữu dụng cho tất cả người dùng, bao gồm cả những người có thị lực kém, khiếm thị, suy giảm thính lực, suy giảm nhận thức, suy giảm vận động hoặc khuyết tật về tình trạng (chẳng hạn như gãy tay).

Hỗ trợ tiếp cận bằng màu sắc

Màu động được thiết kế để đáp ứng các tiêu chuẩn hỗ trợ tiếp cận về độ tương phản màu. Hệ thống bảng sắc độ là yếu tố quan trọng để làm cho mọi bảng phối màu đều có thể truy cập được theo mặc định.

Hệ thống màu của Material cung cấp thông tin đo lường và giá trị tông màu tiêu chuẩn có thể dùng để đáp ứng tỷ lệ tương phản dễ tiếp cận.

Ứng dụng mẫu Reply: Bảng sắc độ chính, cấp hai và cấp 3 (từ trên xuống dưới)
Hình 19. Ứng dụng mẫu Reply (Trả lời): Bảng sắc độ màu chính, phụ và trung gian (từ trên xuống dưới)

Tất cả thành phần Material và giao diện động đều đã sử dụng các vai trò của màu sắc ở trên từ một tập hợp bảng sắc độ, được chọn để đáp ứng các yêu cầu về khả năng hỗ trợ tiếp cận. Tuy nhiên, nếu bạn đang tuỳ chỉnh các thành phần, hãy nhớ sử dụng vai trò của màu sắc phù hợp và tránh trường hợp thông tin không khớp.

Dùng màu on-primary (màu nền của màu chính) trên màu chính và màu on-primary-container (màu nền của màu chính cho vùng chứa) trên vùng chứa chính. Tương tự, hãy dùng màu nhấn và màu trung tính khác để mang đến độ tương phản dễ tiếp cận cho người dùng.

Việc sử dụng vùng chứa thứ ba ở trên vùng chứa chính sẽ mang lại cho người dùng nút có độ tương phản kém:

// ✅ Button with sufficient contrast ratio
Button(
    onClick = { },
    colors = ButtonDefaults.buttonColors(
        containerColor = MaterialTheme.colorScheme.primary,
        contentColor = MaterialTheme.colorScheme.onPrimary
    )
) {
}

// ❌ Button with poor contrast ratio
Button(
    onClick = { },
    colors = ButtonDefaults.buttonColors(
        containerColor = MaterialTheme.colorScheme.tertiaryContainer,
        contentColor = MaterialTheme.colorScheme.primaryContainer
    )
) {
}

Độ tương phản đủ (trái) so với Độ tương phản kém (phải)
Hình 20. Đủ tương phản (trái) so với tương phản kém (phải)

Hỗ trợ tiếp cận về kiểu chữ

Tỷ lệ kiểu chữ M3 cập nhật các giá trị và đường nối kiểu tĩnh để cung cấp một khung đơn giản nhưng linh động của các danh mục kích thước và có thể thay đổi kích thước trên nhiều thiết bị.

Ví dụ: trong M3, Display Small có thể được gán các giá trị khác nhau tuỳ vào bối cảnh của thiết bị, chẳng hạn như điện thoại hoặc máy tính bảng.

Màn hình lớn

Material đưa ra hướng dẫn về bố cục thích ứng và thiết bị có thể gập lại để giúp người dùng dễ dàng truy cập vào ứng dụng của bạn, đồng thời cải thiện sự thoải mái cho người dùng cầm thiết bị lớn.

Material cung cấp nhiều loại điều hướng để giúp bạn mang lại trải nghiệm tốt hơn cho người dùng trên các thiết bị lớn.

Bạn có thể tìm hiểu thêm về các nguyên tắc về chất lượng của ứng dụng có màn hình lớn của Android và xem mẫu Reply của chúng tôi để biết thiết kế thích ứng và dễ tiếp cận.

Tìm hiểu thêm

Để tìm hiểu thêm về tính năng Tuỳ chỉnh giao diện Material trong Compose, hãy tham khảo các tài nguyên sau:

Ứng dụng mẫu

Tài liệu

Tài liệu tham khảo API và mã nguồn

Video