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 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 những 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 được nhu cầu của bạn, thì bạn có thể sử dụng bố cục riêng của mình 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 của mình. 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 chiếm tiêu đề và nội dung văn bản, trong khi vẫn sử dụng 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 dựa 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 vào đó một thực thể của NotificationCompat.DecoratedCustomViewStyle.
3. Tăng cường bố cục tuỳ chỉnh 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 bố cục khác cho thông báo mở rộng (không bắt buộc).

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ể có dạng như sau:

<?xml version="1.0" encoding="utf-8"?>
<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ể có dạng như sau:

<?xml version="1.0" encoding="utf-8"?>
<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)

NotificationManager notificationManager = (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);

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

// Apply the layouts to the notification.
Notification customNotification = new NotificationCompat.Builder(context, CHANNEL_ID)
        .setSmallIcon(R.drawable.notification_icon)
        .setStyle(new 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ể thay đổi tuỳ theo 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, như trong ví dụ sau. Các kiểu này thích ứng với các biến thể màu sắc, vì vậy, bạn không tạo ra văn bản trắng đen.

<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 một thông báo trong khi người dùng đang dùng ứng dụng, kết quả sẽ tương tự như hình 1:

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

Sau khi hết thời gian chờ thông báo, thông báo sẽ chỉ hiển thị trên thanh hệ thống, như hình 3:

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

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 tiêu đề và biểu tượng thông báo chuẩn, hãy làm theo các bước trước đó nhưng không gọi setStyle().