Tạo bố cục thông báo tuỳ chỉnh

Để thông báo của bạn trông đẹp nhất trên các phiên bản Android, hãy sử dụng mẫu thông báo tiêu chuẩn để tạo thông báo. Nếu bạn muốn cung cấp thêm nội dung trong thông báo, hãy cân nhắc sử dụng một trong các mẫu thông báo có thể mở rộng.

Tuy nhiên, nếu các mẫu hệ thống không đáp ứng nhu cầu của bạn, thì bạn có thể sử dụng bố cục riêng cho thông báo.

Tạo bố cục tuỳ chỉnh cho vùng nội dung

Nếu cần bố cục tuỳ chỉnh, bạn có thể áp dụng NotificationCompat.DecoratedCustomViewStyle cho thông báo. API này cho phép bạn cung cấp bố cục tuỳ chỉnh cho vùng nội dung thường chứa tiêu đề và nội dung văn bản, trong khi vẫn sử dụng các trang trí hệ thống cho biểu tượng thông báo, dấu thời gian, văn bản phụ và nút hành động.

API này hoạt động tương tự như các mẫu thông báo có thể mở rộng bằng cách xây dựng trên bố cục thông báo cơ bản như sau:

  1. Tạo thông báo cơ bản bằng NotificationCompat.Builder.
  2. Gọi setStyle(), truyền cho nó một thực thể của NotificationCompat.DecoratedCustomViewStyle.
  3. Tăng bố cục tuỳ chỉnh của bạn dưới dạng một thực thể của RemoteViews.
  4. Gọi setCustomContentView() để đặt bố cục cho thông báo thu gọn.
  5. Bạn cũng có thể gọi setCustomBigContentView() để đặt một bố cục khác cho thông báo mở rộng.

Chuẩn bị bố cục

Bạn cần có bố cục small và large. Trong ví dụ này, bố cục small có thể trông như sau:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/notification_title"
        style="@style/TextAppearance.Compat.Notification.Title"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="Small notification, showing only a title" />
</LinearLayout>

Và bố cục large có thể trông như sau:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:orientation="vertical">

    <TextView
        android:id="@+id/notification_title"
        style="@style/TextAppearance.Compat.Notification.Title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Large notification, showing a title and a body." />

    <TextView
        android:id="@+id/notification_body"
        style="@style/TextAppearance.Compat.Notification.Line2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="This is the body. The height is manually forced to 300dp." />
</LinearLayout>

Tạo và hiển thị thông báo

Sau khi bố cục đã sẵn sàng, bạn có thể sử dụng chúng như trong ví dụ sau:

val notificationManager = getSystemService(Context.NOTIFICATION_SERVICE) as NotificationManager

// Get the layouts to use in the custom notification.
val notificationLayout = RemoteViews(packageName, R.layout.notification_small)
val notificationLayoutExpanded = RemoteViews(packageName, R.layout.notification_large)

// Apply the layouts to the notification.
val customNotification = NotificationCompat.Builder(context, CHANNEL_ID)
    .setSmallIcon(R.drawable.notification_icon)
    .setStyle(NotificationCompat.DecoratedCustomViewStyle())
    .setCustomContentView(notificationLayout)
    .setCustomBigContentView(notificationLayoutExpanded)
    .build()

notificationManager.notify(666, customNotification)

Xin lưu ý rằng màu nền của thông báo có thể khác nhau trên các thiết bị và phiên bản. Áp dụng các kiểu Thư viện hỗ trợ như TextAppearance_Compat_Notification cho văn bản và TextAppearance_Compat_Notification_Title cho tiêu đề trong bố cục tuỳ chỉnh của bạn, như trong ví dụ sau. Các kiểu này thích ứng với các biến thể màu để bạn không gặp phải tình trạng văn bản màu đen trên nền đen hoặc văn bản màu trắng trên nền trắng.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:text="@string/notification_title"
    android:id="@+id/notification_title"
    style="@style/TextAppearance.Compat.Notification.Title" />

Tránh đặt hình nền trên đối tượng RemoteViews, vì văn bản của bạn có thể trở nên không đọc được.

Khi bạn kích hoạt thông báo trong khi người dùng đang sử dụng một ứng dụng, kết quả sẽ tương tự như hình 1:

Bố cục thông báo tuỳ chỉnh được thu gọn
Hình 1. Bố cục thông báo nhỏ xuất hiện khi sử dụng các ứng dụng khác.

Khi bạn nhấn vào mũi tên mở rộng, thông báo sẽ mở rộng, như minh hoạ trong hình 2:

Bố cục thông báo tuỳ chỉnh được mở rộng
Hình 2. Bố cục thông báo lớn xuất hiện khi sử dụng các ứng dụng khác.

Sau khi hết thời gian chờ thông báo, thông báo chỉ xuất hiện trong thanh hệ thống, trông như hình 3:

Một thông báo đã thu gọn trong thanh hệ thống
Hình 3. Cách bố cục thông báo nhỏ xuất hiện trong thanh hệ thống.

Khi bạn nhấn vào mũi tên mở rộng, thông báo sẽ mở rộng, như minh hoạ trong hình 4:

Một thông báo mở rộng trong thanh hệ thống
Hình 4. Bố cục thông báo lớn xuất hiện trong thanh hệ thống.

Tạo bố cục thông báo hoàn toàn tuỳ chỉnh

Nếu bạn không muốn thông báo của mình được trang trí bằng biểu tượng và tiêu đề thông báo tiêu chuẩn, hãy làm theo các bước trước đó nhưng không gọi setStyle().