Create Custom Notification, Android

How to create a Custom Notification Layout in android?

I used BitTextStyle() to add highlighted text in notification.

return new NotificationCompat.Builder(context)
       .setSmallIcon(R.drawable.ic_mono)
       .setContentTitle(title)
       .setContentText(message)
       .setLargeIcon(icon)
       .setColor(ContextCompat.getColor(context, R.color.notification_color))
       .setStyle(new NotificationCompat.BigTextStyle().bigText(title))
       .setStyle(new NotificationCompat.BigTextStyle().bigText(message).setSummaryText("#hashtag"))
       .setShowWhen(true)
       .setAutoCancel(true);

Create a Custom Notification

There is an in-built way to show a progress bar with react-native-background-actions. Did you check this?

You can actually pass it as a taskProgressBarOptions to the configuration.

const options = {
    taskName: 'Example',
    taskTitle: 'ExampleTask title',
    taskDesc: 'ExampleTask description',
    taskIcon: {
        name: 'ic_launcher',
        type: 'mipmap',
    },
    color: '#ff00ff',
    linkingURI: 'yourSchemeHere://chat/jane', // See Deep Linking for more info
    parameters: {
        delay: 1000,
    },
    taskProgressBarOptions:{
        max: 100,
        value: 80,
    }
};

So when the progress changes you need to call the below method with the updated progress value.

await BackgroundService.updateNotification({taskProgressBarOptions:{
        max: 100,
        value: 80,
}}); // Only Android, iOS will ignore this call

Create Custom Big Notifications

Update due to API changes:

From API 24 on, the Notification.Builder contains a setCustomBigContentView(RemoteViews)-method. Also the NotificationCompat.Builder (which is part of the support.v4 package) contains this method.

Please note, that the documentation for the NotificationCompat.Builder.setCustomBigContentView states:

Supply custom RemoteViews to use instead of the platform template in the expanded form. This will override the expanded layout that would otherwise be constructed by this Builder object. No-op on versions prior to JELLY_BEAN.

Therefore, this will also only work for API >= 16 (JELLY_BEAN).

---

Original Answer

So after excessive google usage, I found this tutorial explaining how to use custom big layouts. The trick is not to use setStyle() but manually set the bigContentView field of the Notification after building it. Seems a bit hacky, but this is what I finally came up with:

notification_layout_big.xml:

<?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="100dp" <!-- This is where I manually define the height -->
    android:orientation="horizontal" >

    <!-- some more elements.. --> 
</LinearLayout>

Building Notification in code:

Notification foregroundNote;

RemoteViews bigView = new RemoteViews(getApplicationContext().getPackageName(),
    R.layout.notification_layout_big);

// bigView.setOnClickPendingIntent() etc..

Notification.Builder mNotifyBuilder = new Notification.Builder(this);
foregroundNote = mNotifyBuilder.setContentTitle("some string")
        .setContentText("Slide down on note to expand")
        .setSmallIcon(R.drawable.ic_stat_notify_white)
        .setLargeIcon(bigIcon)
        .build();

foregroundNote.bigContentView = bigView;

// now show notification..
NotificationManager mNotifyManager = (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);
mNotifyManager.notify(1, foregroundNote);

Edit

As noted by chx101, this only works for API >= 16. I did not mention it in this answer, yet it was mentioned in the given linked tutorial above:

Expanded notifications were first introduced in Android 4.1 JellyBean [API 16].

Create custom notification, android

Add RemoteViews in notification. Here is a sample:

var remoteViews = new RemoteViews(getPackageName(), R.layout.widget);
var mBuilder = new NotificationCompat.Builder(this)
    .setSmallIcon(R.drawable.ic_launcher)
    .setContent(remoteViews);

// Creates an explicit intent for an Activity in your app
Intent resultIntent = new Intent(this, test.class);

// The stack builder object will contain an artificial back stack for
// the started Activity.
// This ensures that navigating backward from the Activity leads out of
// your application to the Home screen.
TaskStackBuilder stackBuilder = TaskStackBuilder.create(this);

// Adds the back stack for the Intent (but not the Intent itself)
stackBuilder.addParentStack(test.class);

// Adds the Intent that starts the Activity to the top of the stack
stackBuilder.addNextIntent(resultIntent);

PendingIntent resultPendingIntent = stackBuilder.getPendingIntent(0, PendingIntent.FLAG_UPDATE_CURRENT);
remoteViews.setOnClickPendingIntent(R.id.button1, resultPendingIntent);

var notificationManager = (NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);

// mId allows you to update the notification later on.
notificationManager.notify(100, mBuilder.build()); 

widget.xml

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    android:orientation="horizontal">
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="DJ notification"
        android:textAppearance="?android:attr/textAppearanceMedium" />
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Close Me" />
</LinearLayout> 

check this article there is more style avaialbe

Android Developer

Edited:

The NotificationCompat.Builder is the most easy way to create Notifications on all Android versions. You can even use features that are available with Android 4.1. If your app runs on devices with Android >=4.1 the new features will be used, if run on Android <4.1 the notification will be an simple old notification.

for < 11 API use http://www.framentos.com/en/android-tutorial/2012/02/20/how-to-create-a-custom-notification-on-android/

---

Related Topics