Trong phiên bản 28 của thư viện hỗ trợ Android có một số thành phần thú vị mà bạn có thể chưa biết . Chúng ta hãy cúng tìm hiểu nào.

Cách sử dụng: Thêm dependencies

implementation 'com.android.support:design:28.0.0'

Material Button

Material Button là một widget có thể được sử dụng để hiển thị một button với material style trong giao diện app của bạn. Lớp này extends từ lớp AppCompatButton mà bạn có thể đã sử dụng trong các dự án của mình, nhưng điều gì làm cho điều này khác đi? Đơn giản là button này đi theo phong cách thiết kế "Material Design" của google thôi :v. Giúp chúng ta "look-and-feel" như nó như một "material nature". Chúng ta thêm Material Button vào file layout giống như các thành phần khác thôi.

<android.support.design.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="MATERIAL BUTTON"
    android:textSize="18sp"
    app:icon="@drawable/ic_android_white_24dp" />

Theo mặc định, lớp này sẽ sử dụng accent color của chủ đề của bạn cho màu nền cùng với màu trắng cho text. Một số attributes của Material Button:

app:icon : Được sử dụng để xác định một drawable sẽ được hiển thị ở đầu nút

app:iconTint: Được sử dụng để tô màu cho biểu tượng được sử dụng từ thuộc tính app: icon

app:iconTintMode: Xác định chế độ được sử dụng cho biểu tượng màu

app:iconPadding: Padding được áp dụng cho biểu tượng được sử dụng từ thuộc tính app: icon app:additionalPaddingLeftForIcon : Xác định phần padding được áp dụng ở bên trái của biểu tượng được sử dụng từ thuộc tính app: icon app:additionalPaddingRightForIcon: Xác định phần padding được áp dụng ở bên phải biểu tượng được sử dụng từ thuộc tính app: icon app:rippleColor : Màu được sử dụng cho hiệu ứng gợn - ripple effect.

app:backgroundTint: Được sử dụng để áp dụng một tông màu cho nền của nút. Nếu bạn muốn thay đổi màu nền của nút, hãy sử dụng thuộc tính này thay vì background để tránh phá vỡ button style.

app:backgroundTintMode: Được sử dụng để xác định chế độ được sử dụng cho tông màu nền app:strokeColor : Màu được sử dụng cho viền

app:strokeWidth : Chiều rộng của viền

app:cornerRadius : Bán kính để bo tròn button

Chip

Chip cho phép chúng ta hiển thị 1 chip view bên trong 1 layout. Về bản chất, đây là 1 view hiển thị text bên trong 1 background tròn, mục đích giúp hiển thị tập hợp các textual được lựa chọn. Mình đang hiểu view này sẽ giúp ta hiển thị danh sách kiểu như các tag hay hashtag hay danh sách các đề suất cho ứng dụng (kiểu như catelogy) được chọn -> Cái này trên github khá nhiều library và mình cũng đã phải sử dụng cho dự án các lib này phục vụ cho việc hiển thị list tag, tuy nhiên việc custom hay tuỳ biến lại khá mệt …. nên nếu có CHIP view thì có thể sẽ giảm thời gian code hơn Chúng ta có thể thêm Chip vào layout như sau, sử dụng thuộc tính app: chipText để đặt văn bản được hiển thị trên chip:

<android.support.design.chip.Chip
    android:id="@+id/some_chip"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:chipText="This is a chip" />

Ngoài ra còn có một tập hợp các thuộc tính khác có thể được sử dụng để tạo kiểu cho chip:

app:checkable  : Được sử dụng để khai báo check được selected / not selected ? Nếu bị tắt, kiểm tra sẽ hoạt động giống như một nút

app:chipIcon  : Được dùng để hiển thị icon trong chip app:closeIcon  : Được dùng để hiển thị close icon trong chip Ngoài ra, chip còn support 2 listerner là :

setOnCheckedChangeListener : Nếu chip là checkable, có khả năng chúng ta sẽ muốn lắng nghe khi trạng thái kiểm tra này đã được thay đổi:

some_chip.setOnCheckedChangeListener { button, checked ->  }

setOnCloseIconClickListener : Điều tương tự cũng áp dụng khi chúng ta muốn lắng nghe sự tương tác với biểu tượng đóng khi nó được sử dụng.

some_chip.setOnCloseIconClickListener {  }

Chip group

Đây là 1 view tập hợp các Chip. Các bạn có thể tưởng tượng nó giống như quan hệ RadioButton và RadioGroup. Nó đảm bảo rằng chip được nhóm chính xác với nhau. Ví dụ : Code:

<android.support.design.chip.ChipGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <android.support.design.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:chipText="This" />

    <android.support.design.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:chipText="is" />

    // more chips...

</android.support.design.chip.ChipGroup>

Mặc định, các chip sẽ được xuất hiện có thể khá chật chội trong ChipGroup. Để khắc phục việc đó, bạn có thể tạo spacing giữa các chip view:

app:chipSpacing :  Thêm spacing giữa các chip cả trên trục dọc và trục ngang. app:chipSpacingHorizontal  : Thêm spacing giữa các chip trên trục ngang. app:chipSpacingVertical  : Thêm spacing giữa các chip trên trục dọc. app:singleLine : Cho phép hiển thị GroupChip trên 1 row. Khi sử dụng attribute này, vì chỉ hiển thị trên 1 row nên chúng ta cần cho chúng có thể scroll được để có thể xem được tất cả các chip:

<HorizontalScrollView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <android.support.design.chip.ChipGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:singleLine="true">

        <android.support.design.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Some chip" />

        // more chips...
    </android.support.design.chip.ChipGroup>

</HorizontalScrollView>

Material Card View

Đây là class được thừa hưởng nhiều điểm giống với CardView và được cung cấp material style. Được thêm vào layout như sau :

<android.support.design.card.MaterialCardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp">
    ... child views ...
</android.support.design.card.MaterialCardView>

Bạn có thể định kiểu thêm cho cardview bằng cách sử dụng hai trong số các thuộc tính đi kèm với nó:

app:strokeColor :  Màu viền cho CardView

app:strokeWidth : Độ rộng của viền cho CardView

Cũng như hai thuộc tính này, bạn vẫn có thể tạo kiểu cho cardview bằng cách sử dụng các thuộc tính có sẵn ban đầu như ứng dụng: cardBackgroundColor.

Bottom App Bar

Đây là một widget mới, có thể mở ra một style design mới cho màn hình, rất có ích cho những màn hình đòi hỏi nhiều property hay nhiều setting …

Bottom App Bar là một component hoàn toàn mới cho phép chúng ta hiển thị toolbar ở phía dưới đáy của màn hình – cũng tương tự như thanh công cụ toolbar mà ta thường sử dụng (nhưng ở phía trên cùng của màn hình).

<android.support.design.bottomappbar.BottomAppBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:backgroundTint="@color/colorPrimary"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

Nó cũng được gán một thanh menu như toolbar bằng cách:

bottom_app_bar.replaceMenu(R.menu.main)

Khi nói đến một số kiểu thiết kế cho Bottom App Bar, một số thuộc tính bạn có thể dùng như:

app:fabAttached : Trạng thái cho phép có hay không việc đính kèm thêm FAB (Floating action button) và trong bottom app bar. Bạn có thể đính kèm fab bằng cách sử dụng app: layout_anchor. Nếu FAB được đính kèm, nó sẽ được chèn vào bottom app bar app:fabAlignmentMode  :  Khai báo vị trí của FAB được gắn vào. Nó có thể là end: Hoặc cũng có thể là center: app:fabCradleVerticalOffset :  Khai báo toạ độ theo chiều dọc so với FAB. Mặc định sẽ là 0dp Hoặc nâng cao hơn chút:

app:backgroundTint :  Được sử dụng cho việc áp dụng tô màu cho background của view.

Lưu ý:

1. Chúng ta muốn sử dụng cả FAB và BottomAppBar thì phải để chúng bên trong CoordinatorLayout
2. Nên gọi “app:backgroundTint” thay cho việc gọi setBackground để quản lý background tốt hơn.
3. Gọi setTitle or setSubtitle sẽ không hiệu quả vì nó sẽ bị override hoặc empty.

Bài viết được tham khảo từ đây