Tạo nút

Nút cho phép người dùng kích hoạt một hành động đã xác định. Có 5 loại nút:

Loại

Diện mạo

Mục đích

Đã điền

Nền đồng nhất với văn bản tương phản.

Đối với các thao tác chính, chẳng hạn như "Gửi" và "Lưu". Hiệu ứng bóng nhấn mạnh tầm quan trọng của nút.

Tonal

Màu nền thay đổi để phù hợp với bề mặt.

Đối với các hành động chính hoặc quan trọng. Nút có màu sẽ tạo điểm nhấn về mặt hình ảnh và phù hợp với các hành động như "Thêm vào giỏ hàng" và "Đăng nhập".

Hơi cao

Bóng giúp nó nổi bật.

Đối với các hành động chính hoặc quan trọng. Tăng độ cao để nút nổi bật hơn.

Đã vẽ đường viền

Có đường viền không có màu nền.

Đối với các thao tác quan trọng nhưng không phải là thao tác chính. Các nút có đường viền kết hợp tốt với các nút khác để biểu thị các hành động phụ, thay thế như "Huỷ" hoặc "Quay lại".

Văn bản

Văn bản không có nền hoặc đường viền.

Đối với các hành động ít quan trọng hơn như đường liên kết điều hướng hoặc hành động phụ như "Tìm hiểu thêm" hoặc "Xem chi tiết".

Khả năng tương thích của phiên bản

Phương thức triển khai này yêu cầu bạn phải đặt minSDK của dự án thành API cấp 21 trở lên.

Phần phụ thuộc

Tạo nút được tô màu nền

Thành phần nút được tô màu sử dụng thành phần kết hợp Button cơ bản. Theo mặc định, hình này được tô bằng một màu đồng nhất.

Kết quả

Một nút được tô màu nền màu tím có nội dung "filled" (đã tô màu).
Hình 1. Nút được tô màu nền.

Tạo nút có màu sắc đồng nhất

Thành phần nút tông màu được tô màu sử dụng thành phần kết hợp FilledTonalButton. Theo mặc định, vùng này được tô bằng màu sắc.

Kết quả

Một nút có màu sắc với nền màu tím nhạt có nội dung "đã điền".
Hình 2. Nút có sắc độ.

Tạo nút có đường viền

Thành phần nút có đường viền sử dụng thành phần kết hợp OutlinedButton. Theo mặc định, thành phần hiển thị này sẽ có đường viền.

Kết quả

Một nút có đường viền trong suốt với đường viền màu tối có nội dung "Outlined" (Đường viền).
Hình 3. Một nút có đường viền.

Tạo nút nâng cao

Thành phần nút nâng cao sử dụng thành phần kết hợp ElevatedButton. Theo mặc định, nút này có một bóng đổ thể hiện hiệu ứng nâng và xuất hiện dưới dạng một nút được viền có bóng đổ.

Kết quả

Một nút nổi có nền màu xám với nội dung "Nổi".
Hình 4. Một nút nâng cao.

Tạo nút văn bản

Thành phần nút văn bản sử dụng thành phần kết hợp TextButton. Cho đến khi được nhấp vào, nút này chỉ xuất hiện dưới dạng văn bản. Theo mặc định, hình dạng này không có đường viền hoặc màu nền đồng nhất.

Kết quả

Một nút văn bản có nội dung "Text Button" (Nút văn bản)
Hình 5. Một nút văn bản.

Điểm chính

  • onClick: Hàm được gọi khi người dùng nhấn vào nút.
  • enabled: Khi có giá trị false, tham số này sẽ khiến nút không xuất hiện và không hoạt động.
  • colors: Một thực thể của ButtonColors xác định màu sắc được sử dụng trong nút.
  • contentPadding: Khoảng đệm trong nút.

Các bộ sưu tập chứa hướng dẫn này

Hướng dẫn này là một phần của các bộ sưu tập Hướng dẫn nhanh được tuyển chọn này, bao gồm các mục tiêu phát triển Android rộng hơn:

Tìm hiểu cách các hàm có khả năng kết hợp giúp bạn dễ dàng tạo các thành phần giao diện người dùng đẹp mắt dựa trên hệ thống thiết kế Material Design.

Bạn có câu hỏi hoặc ý kiến phản hồi

Truy cập vào trang câu hỏi thường gặp để tìm hiểu về các hướng dẫn nhanh hoặc liên hệ với chúng tôi để cho chúng tôi biết suy nghĩ của bạn.