3.4 Creating Custom UI Notifications

Hey everyone and welcome back to the Developing for AndroidWare course. I'm Paul with Tuts Plus and in this lesson we will go over the last notification type which allows you to display a custom activity within the notification stream. So, since we are gonna display a custom activity, we will need to create that activity. So let's go to our project > wear. We'll go down to src > main > java > activities. And let's go ahead and right click on activities. We'll go to New and Java Class. And we'll just call this CustomNotificationActivity, and this will extend activity, so let's go ahead and extends activity. And we will need to override onCreate so that we can add a custom layout for this. So let's use setContentView R.layout.activity activity_custom_notification. We can go ahead and import R. And let's go ahead and copy activity_custom_notification so we can make a layout file with that title. So we'll go back to src>Main>res>layout, and then we can right click New Layout Resource File. We'll just go ahead and paste in that name. And let's go ahead and make this a BoxInsetLayout. So this will be android.support.wearable.view.BoxInsetLay- out. Let's go ahead and hit okay. We'll go to the text tab, and we will need to add a new xmlns for this. So let's go ahead and make a new line just after the previous one. And this will be xmlns: app="HTTP, and then we will use the one that ends in resauto, and then within our box inset layout let's create a frame layout, which will have a match parent width and height. And we will use app:layout_box="all". And then within our frame layout let's use a TextView, that will also be match_parent and match_parent. And then we can give this a set of text, so Android:text= we'll just say this is a custom notification. And since we're here, let's go ahead and add a background image to our BoxInset layout. So we'll come back up to the BoxInset layout. We'll say android:background=@drawable/bg1. So this will have our cityscape as the background for this notification page. Now that we have that done, we can go ahead and save and close the layout file as well as the custom notification activity. But we will need to go to the Android manifest to XML file and add in a line for the notification customization activity. So we'll just go ahead and add in activity and then the option here will be the custom notification activity. And then there's a few items that we need to add into this manifest. So if we go to our browser, we can actually look up the WearableExtender documentation. And the method that we will use is called setDisplayIntent. So let's go down to that. And you'll notice that right here it says, the activity launch needs to allow embedding, must be exported, and must have an empty task affinity. So let's just go ahead and copy the lines out of the manifest example that they have here for exported, allow embedded and task affinity. So we'll copy those. We'll go back to our Android manifest. We'll paste them in, and then we can close this off. And with that we can go ahead and close out the manifest. And then in main activity we can start adding in our custom notification. So let's go ahead and go back down to onclick and underneath all the other else if statements, we'll add a new one. So else if getString, R.string.notification_custom_string, .equalsIgnoreCase( title ). We'll go ahead and say showCustomNotification and then we'll call finish. And then we need to define showCustomNotification. So let's scroll down a little bit and let's add a private void method for this. And for this example, what we will do is we will add multiple pages for various sizes for this notification screen. So let's actually make a helper method here that will create the notification that we will add as our pages for the main notification. So let's go ahead and type in private Notification getCustomSizeNotificationPage. Which will accept an int size. And what we will do is we'll pass in the size to this and it will return a notification that we can use as the page within our main notification. So since our custom notification will use that set display intent method to display our custom page, we will need to create an intent and a pending intent. So we'll start off with Intent intent=new Intent pass in our context and then CustomNotificationActivity.class. And then we'll create our pending intent with PendingIntent pendingIntent = PendinIntent.getActivity. We pas in our context, 0, the intent. And then PendingIntent.FLAG_UPDATE_CURRENT. Now we can start building out the notification that we will return to our other method. So we'll use NotificationCompat.Builder builder = getBaseNotificationBuilder and then we can use builder.extend new_NotificationCompat.WearableExtender and then we need a call .setDisplayIntent with our pendingIntent. And finally, we can use .setCustomSizePreset with our size. Once we have the builder all set, we can just return bilder.build. And this will return our notification built so that we can use it as a page within our overall notification. So let's go back up to showCustomNotification. And we will need to use NotificationCompat.builder builder = getBaseNotificationBuilder. In this builder we'll also extend the wearable extender so we'll just go ahead and do that real quick. So extend new NotificationCompat. And we will use the wearable extender to add a set of pages. So we'll just say .addPage GetCustomSizedNotificationPage and our sizes will be Notification.WearableExtender.size_and we'll start with x small. And we can go ahead and copy this line because we're going to do this another four times. So I'll just add those in real fast. Make sure they align correctly. And instead of x small, the next one will be small, and then we'll use a medium. Next we have a large. And finally we will use full screen. Lets go ahead an add our semicolon and it will display this notification using the notification manager. So NotificationManagerCompat.from, we'll pass in our context. And then notify with an ID of 1 and then builder.build. So go ahead and save that, and there is one thing to know about custom notifications when you're testing things. When you run them in the emulator it will actually just display a black box, so let me go ahead and hit run and we'll look at it on the emulator. Let's go ahead and hit OK, and then we'll come back to emulator. Let's go head and scroll down to the bottom where we have our custom notification screen item. And you'll notice that as we scroll over, we actually just have a set of black boxes. Because the custom notification screen has a bug with the emulator, where it wont display the activity when you're using and emulator. However if we use a real device you will see the custom screen. So I'm gonna go ahead and close our emulator and I actually recorded my screen on my Moto 360 so you can see what it will look like on a real device. So we play this. We have the notification, and then we see the background image and our text. And as it scrolls through we actually have our full screen notification with our text, and it doesn't fit into the card format like the others do. One of the nice things that you can do with the custom notification screens is you can add buttons to them as well. So if you want to have controls for one of your apps, you can display it as a notification, and your user will be able to control your app without having to open up an activity. That being said, custom notification screens do need to be launched from the wearable device, in an application installed on the wearable, rather than from your phone, which the other notifications can be launched from your phone. So that's just something to be aware of. Other than that, you can go ahead and create custom notifications, and they are real useful when you're working with wearable devices. So, that concludes are section on notifications. So, in the next section, we will start looking over how to build your own custom watch faces. So, we'll go over a digital watch face, the different life cycle methods that you need to be aware of, and how to add a customization screen to your wearable watch face. So, I will see you then.