Membuat tata letak notifikasi kustom

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

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

Membuat tata letak kustom untuk area konten

Jika memerlukan tata letak kustom, Anda dapat menerapkan NotificationCompat.DecoratedCustomViewStyle ke notifikasi. API ini memungkinkan Anda memberikan tata letak kustom untuk area konten yang biasanya ditempati oleh judul dan konten teks, sambil tetap 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 sebagai instance RemoteViews.
  4. Panggil setCustomContentView() untuk menetapkan tata letak notifikasi yang diciutkan.
  5. Atau, panggil juga setCustomBigContentView() untuk menyetel 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:

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

Dan tata letak large mungkin terlihat seperti ini:

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

Mem-build dan menampilkan notifikasi

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

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

Perhatikan bahwa warna latar belakang 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 ditunjukkan dalam contoh berikut. Gaya ini beradaptasi dengan variasi warna sehingga Anda tidak akan 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 menyetel gambar latar pada objek RemoteViews karena teks mungkin tidak dapat dibaca.

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

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

Mengetuk panah luaskan akan memperluas notifikasi, seperti yang ditunjukkan dalam gambar 2:

Gambar yang menampilkan notifikasi yang diperluas di kolom sistem
Gambar 2. Tata letak notifikasi yang besar akan muncul saat menggunakan aplikasi lain.

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

Gambar yang menunjukkan notifikasi yang diciutkan di kolom sistem
Gambar 3. Bagaimana tata letak notifikasi kecil muncul di kolom sistem.

Mengetuk panah luaskan akan memperluas notifikasi, seperti yang ditunjukkan dalam gambar 4:

Gambar yang menampilkan notifikasi yang diperluas di kolom sistem
Gambar 4. Tata letak notifikasi besar akan muncul di kolom sistem.

Membuat tata letak notifikasi yang sepenuhnya kustom

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