Membuat tata letak notifikasi kustom

Agar notifikasi Anda terlihat terbaik di berbagai versi Android, gunakan template notifikasi standar untuk membuat notifikasi. Jika Anda ingin menyediakan lebih banyak konten dalam notifikasi, pertimbangkan untuk menggunakan salah satu template notifikasi yang dapat diperluas.

Namun, jika template sistem tidak memenuhi kebutuhan Anda, Anda dapat menggunakan tata letak Anda sendiri untuk notifikasi.

Membuat tata letak kustom untuk area konten

Jika memerlukan tata letak kustom, Anda dapat menerapkan NotificationCompat.DecoratedCustomViewStyle ke notifikasi. API ini memungkinkan Anda menyediakan tata letak kustom untuk area konten yang biasanya ditempati oleh konten judul dan teks, sekaligus menggunakan dekorasi sistem untuk ikon notifikasi, stempel waktu, sub-teks, dan tombol tindakan.

API ini berfungsi mirip dengan template notifikasi yang dapat diperluas dengan membuat tata letak notifikasi dasar sebagai berikut:

  1. Buat notifikasi dasar dengan NotificationCompat.Builder.
  2. Panggil setStyle(), dengan meneruskan instance NotificationCompat.DecoratedCustomViewStyle.
  3. Inflate tata letak kustom Anda sebagai instance RemoteViews.
  4. Panggil setCustomContentView() untuk menetapkan tata letak notifikasi yang diciutkan.
  5. Secara opsional, panggil juga setCustomBigContentView() untuk menetapkan tata letak yang berbeda untuk notifikasi yang diperluas.

Menyiapkan tata letak

Anda memerlukan tata letak small dan large. Untuk contoh ini, tata letak small mungkin terlihat seperti ini:

<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>

Dan tata letak large mungkin terlihat seperti ini:

<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>

Membuat dan menampilkan notifikasi

Setelah tata letak siap, Anda dapat menggunakannya seperti yang ditunjukkan dalam contoh berikut:

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)

Perhatikan bahwa warna latar belakang untuk notifikasi dapat bervariasi di berbagai perangkat dan versi. Terapkan gaya Support Library seperti TextAppearance_Compat_Notification untuk teks dan TextAppearance_Compat_Notification_Title untuk judul dalam tata letak kustom Anda, seperti yang ditunjukkan dalam contoh berikut. Gaya ini beradaptasi dengan variasi warna sehingga Anda tidak mendapatkan teks hitam-di-hitam atau putih-di-putih.

<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" />

Hindari menetapkan gambar latar belakang pada objek RemoteViews, karena teks Anda mungkin menjadi tidak terbaca.

Saat Anda memicu notifikasi saat pengguna menggunakan aplikasi, hasilnya mirip dengan gambar 1:

Tata letak notifikasi kustom yang diciutkan
Gambar 1. Tata letak notifikasi kecil muncul saat menggunakan aplikasi lain.

Mengetuk panah perluasan akan memperluas notifikasi, seperti yang ditunjukkan pada gambar 2:

Tata letak notifikasi kustom yang diperluas
Gambar 2. Tata letak notifikasi besar muncul saat menggunakan aplikasi lain.

Setelah waktu tunggu notifikasi habis, notifikasi hanya terlihat di kolom sistem, yang terlihat seperti gambar 3:

Notifikasi yang diciutkan di kolom sistem
Gambar 3. Cara tata letak notifikasi kecil muncul di panel sistem.

Mengetuk panah perluasan akan memperluas notifikasi, seperti yang ditunjukkan pada gambar 4:

Notifikasi yang diperluas di kolom sistem
Gambar 4. Tata letak notifikasi besar muncul di panel sistem.

Membuat tata letak notifikasi yang sepenuhnya kustom

Jika Anda tidak ingin notifikasi dihiasi dengan ikon dan header notifikasi standar , ikuti langkah-langkah sebelumnya, tetapi jangan panggil setStyle().