Text fields theo chuẩn Material design

Tram Ho

Text field giúp người dùng nhập và chỉnh sửa text.

1. Using text field

Text filed chia làm 2 loại:

  • Filled text fields
  • Outlined text fields.

Các thành phần của Text field:

Trước khi có thể sử dụng được Material text fields, bạn cần phải thêm dependence cho Material Components:

Kiểm tra xem đã có Google’s Maven Repository google() chưa:

Add thư viện:

Sau khi hoàn tất thì mình sẽ implement Text field vào file xml:

Một text field bao gồm một TextInputLayout và một TextInputEditText là con.

Thêm một leading icon cho text field:

Thêm một trailing icon cho text field: Password touggle:

Clear text:

Thêm helper text cho text field:

Thêm một counter text cho text filed:

Thêm error text cho text field:

2. Filled text field

Dưới đây là một filled text field:

3. Outlined text fields

Dưới đây là một outlined text field:

4. Theming text fields

Dưới đây là ví dụ của filled và oulined text fields sử dụng Material Theming:

Implement text filed theming:

Sử dụng theme attributes và styles in res/values/styles.xml:

Hoặc là sử dụng default style theme attributes, styles and theme overlays:

Hoặc sử dụng một style trong layout:

Tham khảo: Material.io https://material.io/components/text-fields

Chia sẻ bài viết ngay