Để 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:
- Tạo thông báo cơ bản bằng
NotificationCompat.Builder
. - Gọi
setStyle()
, truyền vào đó một thực thể củaNotificationCompat.DecoratedCustomViewStyle
. - Tăng cường bố cục tuỳ chỉnh dưới dạng một thực thể của
RemoteViews
. - Gọi
setCustomContentView()
để đặt bố cục cho thông báo đã thu gọn. - 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:
Kotlin
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)
Java
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:
![Hình ảnh cho thấy một thông báo đã thu gọn](https://developer.android.google.cn/static/images/ui/notifications/custom_notification_small_inapp.png?authuser=6&hl=vi)
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:
![Hình ảnh hiển thị một thông báo mở rộng trên thanh hệ thống](https://developer.android.google.cn/static/images/ui/notifications/custom_notification_large_inapp.png?authuser=6&hl=vi)
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:
![Hình ảnh cho thấy một thông báo đã thu gọn trong thanh hệ thống](https://developer.android.google.cn/static/images/ui/notifications/custom_notification_small_system.png?authuser=6&hl=vi)
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:
![Hình ảnh hiển thị một thông báo mở rộng trên thanh hệ thống](https://developer.android.google.cn/static/images/ui/notifications/custom_notification_large_system.png?authuser=6&hl=vi)
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()
.