How to Create a Custom Notification Layout in 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);

Change Notification Layout

First create an xml for your notification.

custom_notification.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dp" >
<ImageView android:id="@+id/image"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_marginRight="10dp" />
<TextView android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/image"
style="Custom Notification Title" />
<TextView android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/image"
android:layout_below="@id/title"
style="Custom Notification Text" />
</RelativeLayout>

Now the java code:

public class MainActivity extends Activity {

@SuppressWarnings("deprecation")
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

int icon = R.drawable.ic_launcher;
long when = System.currentTimeMillis();
Notification notification = new Notification(icon, "Custom Notification", when);

NotificationManager mNotificationManager = (NotificationManager)getSystemService(NOTIFICATION_SERVICE);

RemoteViews contentView = new RemoteViews(getPackageName(), R.layout.custom_notification);
contentView.setImageViewResource(R.id.image, R.drawable.ic_launcher);
contentView.setTextViewText(R.id.title, "Custom notification");
contentView.setTextViewText(R.id.text, "This is a custom layout");
notification.contentView = contentView;

Intent notificationIntent = new Intent(this, MainActivity.class);
PendingIntent contentIntent = PendingIntent.getActivity(this, 0, notificationIntent, 0);
notification.contentIntent = contentIntent;

notification.flags |= Notification.FLAG_NO_CLEAR; //Do not clear the notification
notification.defaults |= Notification.DEFAULT_LIGHTS; // LED
notification.defaults |= Notification.DEFAULT_VIBRATE; //Vibration
notification.defaults |= Notification.DEFAULT_SOUND; // Sound

mNotificationManager.notify(1, notification);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}

Hope this thing works for you.

Edit: You can also visit if you come across problem like this.

Also, you can visit here for more information.

Edit April 26 2016 You can use NotificationCompat.Builder for creating Notification instance as below:

NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder(this)
.setSmallIcon(icon)
.setContent(contentView)
.setContentTitle("Custom Notification")
.setWhen(when);
...
mNotificationManager.notify(1, notificationBuilder.build());

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



Related Topics



Leave a reply



Submit