Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Create Custom Big Notifications

Tags:

I wanted to create a Notification including some controls. Since text and controls are small with default notification size (64dp), i wanted have it larger than default size.
It is possible to create larger notifications, and I think it is possible to have a custom layout, too, but I don't know how.

To be more specific, the following screenshot shows the notification from spotify (image take from here): Spotify notification

As you can see, the size is bigger than default. Further, it has some kind of ImageButtons without text - if you use Notification.Builder.addAction(), you may provide an icon but also need to provide a CharSequence as a description - if you leave the description empty, there will still be space reserved for the text and if you pass null, it will crash.

Can anybody tell me how to create a big notification with a custom layout?

Thanks

like image 724
MalaKa Avatar asked Jan 20 '14 15:01

MalaKa


People also ask

How do I create a custom notification?

Create a custom notificationTap More in the bottom navigation bar, then select Settings. Tap Custom notifications. If it is your first notification, tap Create. To add an additional notification, tap the "+" in the bottom right corner.

How do I make my Android notifications bigger?

Create an inbox-style notificationBigTextStyle . To add a new line, call addLine() up to 6 times. If you add more than 6 lines, only the first 6 are visible.


2 Answers

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

like image 170
MalaKa Avatar answered Sep 20 '22 14:09

MalaKa


enter image description hereUsing Kotlin make custom notification
dialog_custom_notification

                    <LinearLayout                         android:layout_width="match_parent"                         android:layout_height="wrap_content"                         android:layout_margin="@dimen/dp_10"                         android:background="@drawable/shape_bg_main_notification"                         android:gravity="center"                         android:orientation="horizontal"                         android:padding="@dimen/dp_10">                          <LinearLayout                             android:layout_width="wrap_content"                             android:layout_height="wrap_content"                             android:layout_gravity="top">                              <ImageView                                 android:id="@+id/ivAppIcon"                                 android:layout_width="@dimen/dp_36"                                 android:layout_height="@dimen/dp_36"                                 android:layout_gravity="top"                                 android:background="@mipmap/ic_launcher" />                         </LinearLayout>                          <LinearLayout                             android:layout_width="wrap_content"                             android:layout_height="wrap_content"                             android:layout_gravity="top"                             android:layout_marginLeft="@dimen/dp_10"                             android:layout_weight="1"                             android:orientation="vertical">                              <TextView                                 android:id="@+id/tvNotificationTitle"                                 android:layout_width="wrap_content"                                 android:layout_height="wrap_content"                                 android:text="Notification Tile"                                 android:textStyle="bold" />                              <TextView                                 android:id="@+id/tvNotificationDescription"                                 android:layout_width="wrap_content"                                 android:layout_height="wrap_content"                                 android:layout_marginTop="@dimen/dp_5"                                 android:text="Notification Description" />                          </LinearLayout>                          <LinearLayout                             android:layout_width="wrap_content"                             android:layout_height="wrap_content"                             android:layout_gravity="top">                              <TextView                                 android:id="@+id/tvDateTime"                                 android:layout_width="wrap_content"                                 android:layout_height="wrap_content"                                 android:layout_alignParentRight="true"                                 android:layout_gravity="top"                                 android:text="09:50" />                         </LinearLayout>                     </LinearLayout>                 </LinearLayout>          shape_bg_main_notification         <?xml version="1.0" encoding="utf-8"?>         <shape xmlns:android="http://schemas.android.com/apk/res/android"             android:shape="rectangle">             <solid android:color="@color/white" />              <corners android:radius="@dimen/dp_6" />          </shape>            @SuppressLint("WrongConstant")                     fun showOfflineNotification(context: Context, title: String, description: String) {                         val NOTIFICATION_CHANNEL_ID = "com.myapp"                         val intent = Intent(context, HomeActivity::class.java)                         intent.putExtra("notification", 1)                         intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP)                         if (intent != null) {                             val pendingIntent = PendingIntent.getActivity(                                 context, getTwoDigitRandomNo(), intent,                                 PendingIntent.FLAG_ONE_SHOT                             )                             val defaultSoundUri =                                 RingtoneManager.getDefaultUri(RingtoneManager.TYPE_NOTIFICATION)                              val remoteCollapsedViews = RemoteViews(packageName, R.layout.dialog_custom_notification)                             remoteCollapsedViews.setTextViewText(R.id.tvNotificationTitle, title)                             remoteCollapsedViews.setTextViewText(R.id.tvNotificationDescription, description)                             remoteCollapsedViews.setTextViewText(R.id.tvDateTime, getTime())                              val notificationBuilder = NotificationCompat.Builder(context)                             notificationBuilder.setCustomBigContentView(remoteCollapsedViews)                             notificationBuilder.setSmallIcon(R.mipmap.ic_launcher_round)                             notificationBuilder.setLargeIcon(                                 BitmapFactory.de          codeResource(                                         context.resources,                                         R.mipmap.ic_launcher                                     )                                 )                                 notificationBuilder.setBadgeIconType(R.mipmap.ic_launcher_round)                                 notificationBuilder.setContentTitle(title)                                 if (description != null) {                                     notificationBuilder.setContentText(description)                                     notificationBuilder.setStyle(                                         NotificationCompat.BigTextStyle().bigText(description)                                     )                                 }                                 notificationBuilder.setPriority(NotificationCompat.PRIORITY_HIGH)                                 notificationBuilder.setAutoCancel(true)                                 notificationBuilder.setSound(defaultSoundUri)                                 notificationBuilder.setVibrate(longArrayOf(1000, 1000))                                 notificationBuilder.setContentIntent(pendingIntent)                                  val notificationManager =                                     context.getSystemService(Context.NOTIFICATION_SERVICE) as NotificationManager                                 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {                                     val importance = NotificationManager.IMPORTANCE_MAX                                     val notificationChannel = NotificationChannel(                                         NOTIFICATION_CHANNEL_ID,                                         "NOTIFICATION_CHANNEL_NAME",                                         importance                                     )                                     notificationChannel.enableLights(true)                                     notificationChannel.lightColor = Color.RED                                     notificationChannel.enableVibration(true)                                     notificationChannel.vibrationPattern = longArrayOf(1000, 1000)                                     assert(notificationManager != null)                                     notificationBuilder.setChannelId(NOTIFICATION_CHANNEL_ID)                                     notificationManager.createNotificationChannel(notificationChannel)                                 }                                 notificationManager.notify(                                     getTwoDigitRandomNo()/*Id of Notification*/,                                     notificationBuilder.build()                                 )                             }                         }                          private fun getTime(): String {                             val calendar = Calendar.getInstance()                             val mdformat = SimpleDateFormat("HH:mm")                             val strDate = mdformat.format(calendar.time)                             return strDate                         }                          fun getTwoDigitRandomNo(): Int {                             return Random().nextInt(90) + 10                         }          [1]: https://me.stack.imgur.com/rQFP8.png     [1]: https://me.stack.imgur.com/fKM9C.png 
like image 42
Ashish Kumar Avatar answered Sep 21 '22 14:09

Ashish Kumar