このページは Cloud Translation API によって翻訳されました。

カスタム通知レイアウトを作成する

さまざまなバージョンの Android 間で通知の表示を最適にするには、標準の通知テンプレートを使用して通知を作成します。通知に表示するコンテンツを増やす場合は、展開可能な通知テンプレートのいずれかの使用を検討してください。

ただし、システムテンプレートがニーズに合わない場合は、通知に独自のレイアウトを使用できます。

コンテンツ領域用のカスタムレイアウトを作成する

カスタムレイアウトが必要な場合は、通知に NotificationCompat.DecoratedCustomViewStyle を適用できます。この API を使用すると、通常はタイトルとテキストコンテンツが占めるコンテンツ領域にカスタムレイアウトを指定でき、通知アイコン、タイムスタンプ、サブテキスト、アクションボタンにはシステムデコレーションを使用できます。

この API は、次のように基本的な通知レイアウトをベースとすることで、展開可能な通知テンプレートと同様に機能します。

NotificationCompat.Builder を使用して基本的な通知を作成します。
setStyle() を呼び出して、NotificationCompat.DecoratedCustomViewStyle のインスタンスを渡します。
カスタムレイアウトを RemoteViews のインスタンスとしてインフレートします。
setCustomContentView() を呼び出して、折りたたまれた通知のレイアウトを設定します。
必要に応じて、setCustomBigContentView() を呼び出して、展開可能通知用に別のレイアウトを設定することもできます。

レイアウトを準備する

small レイアウトと large レイアウトが必要です。この例では、small レイアウトは次のようになります。

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

large レイアウトは次のようになります。

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

通知をビルドして表示する

レイアウトの準備ができたら、次の例に示すようにそれらを使用できます。

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

通知の背景色は、デバイスやバージョンによって異なる場合があることにご注意ください。次の例に示すように、カスタムレイアウト内のテキストに TextAppearance_Compat_Notification とタイトルに TextAppearance_Compat_Notification_Title とサポートライブラリのスタイルを適用します。これらのスタイルはカラーバリエーションに適応するため、最終的に黒地に白のテキストになることはありません。

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

RemoteViews オブジェクトに背景画像を設定しないでください。テキストが読み取れなくなる可能性があります。

ユーザーがアプリの使用中に通知をトリガーすると、結果は図 1 のようになります。