How to create a notification similar to Play Music app from Google

Question

I\'m trying to create a notification that is very similar to what the \"Play Music\" app from Google uses.

Answer 1

Yes, all of that is done with custom RemoteViews. You'll see in the docs for Notification, there's a field for bigContentView along with contentView.

Answer 2

1. create statusbar_expanded.xml in res/layout-v16/

<ImageView
    android:id="@+id/thumbnail"
    android:layout_width="@dimen/notification_expanded_height"
    android:layout_height="@dimen/notification_expanded_height"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:src="@drawable/notification"
    android:scaleType="fitXY" />

<LinearLayout
    android:id="@+id/buttons"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_toRightOf="@id/thumbnail"
    android:divider="?android:listDivider"
    android:dividerPadding="12.0dip"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:showDividers="middle" >

    <ImageButton
        android:id="@+id/prev"
        android:layout_width="0.0dip"
        android:layout_height="@dimen/play_controls_notification"
        android:layout_weight="1.0"
        android:background="?android:selectableItemBackground"
        android:padding="10.0dip"
        android:scaleType="fitCenter"
        android:src="@drawable/btn_playback_rew_jb_dark" />

    <ImageButton
        android:id="@+id/playpause"
        android:layout_width="0.0dip"
        android:layout_height="@dimen/play_controls_notification"
        android:layout_weight="1.0"
        android:background="?android:selectableItemBackground"
        android:padding="10.0dip"
        android:scaleType="fitCenter"
        android:src="@drawable/btn_playback_pause_jb_dark" />

    <ImageButton
        android:id="@+id/next"
        android:layout_width="0.0dip"
        android:layout_height="@dimen/play_controls_notification"
        android:layout_weight="1.0"
        android:background="?android:selectableItemBackground"
        android:padding="10.0dip"
        android:scaleType="fitCenter"
        android:src="@drawable/btn_playback_ff_jb_dark" />
</LinearLayout>

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="1.0px"
    android:layout_above="@id/buttons"
    android:layout_alignParentRight="true"
    android:layout_toRightOf="@id/thumbnail"
    android:background="?android:dividerHorizontal" />

<ImageButton
    android:id="@+id/stop"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:background="?android:selectableItemBackground"
    android:padding="8.0dip"
    android:src="@drawable/ic_close_notification_holo_dark" />

<LinearLayout
    android:id="@+id/textarea"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_gravity="center_vertical"
    android:layout_toLeftOf="@id/stop"
    android:layout_toRightOf="@id/thumbnail"
    android:orientation="vertical"
    android:paddingLeft="@dimen/notification_padding"
    android:paddingTop="8.0dip" >

    <TextView
        android:id="@+id/trackname"
        style="@android:style/TextAppearance.StatusBar.EventContent.Title"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:ellipsize="marquee"
        android:fadingEdge="horizontal"
        android:focusable="true"
        android:singleLine="true" />

    <Chronometer
        android:id="@+id/duration"
        style="@android:style/TextAppearance.StatusBar.EventContent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:ellipsize="marquee"
        android:layout_marginTop="6dp"
        android:fadingEdge="horizontal"
        android:maxLines="1" />

</LinearLayout>

2. notification.bigContentView assiginment RemoteView

Answer 3

I know I am very late to answer, but this is for new people trying out media notifications.

1. No need to use RemoteViews. We can now simply use NotificationCompat.MediaStyle(). It works perfectly as needed, and brings uniformity in the Media consumption experience.

2. When using MediaStyle notifications there will be no X button for versions > Lollipop. Rather we make the notification dismissable when in Paused state. In such cases the process to be followed is shown in the this link.

3. The MediaStyle notification has setShowActionsInCompactView() to define which all actions to show in Compact mode. The following is a snippet:

       notificationBuilder.addAction(R.drawable.notification_play, "Play",
                   createPlayIntent());
   
       notificationBuilder.addAction(R.drawable.notification_next, "Next", createNextIntent())
               .setVisibility(NotificationCompat.VISIBILITY_PUBLIC)
               .setPriority(NotificationCompat.PRIORITY_MAX)
               .setStyle(new NotificationCompat.MediaStyle()
                       .setShowCancelButton(true)
                       .setCancelButtonIntent(createPlayIntent())
                       .setShowActionsInCompactView(0, 1, 2);
   

This should help you in setting up the whole Media notification as needed. Happy coding!