2.3 DelayedConfirmationView

Hey, everyone. This is Paul with tuts+ and you are watching the Developing for Android Wear course. In the previous lesson, we went over how to use the wearable list view, so we could place a list view in the main activity of our application and add content to it. So, in this lesson we're going to make it so that when you click on an item within that list it will open up a new activity that displays another kind of view that was recently added for Android wear called the delayed confirmation view. So if we go to our web browser we can see that the delayed confirmation view has a documentation page here. And it goes over the different methods that are available, such as setting a total time in milliseconds, and a listener for if it is canceled, or if the time runs out on it. So essentially, what the delayed confirmation view is for, is when your user performs an action, you can give them a set amount of time to cancel that action before it actually goes through. So say they sent a text message off from their watch, they can actually hit the cancel button and then recompose their text message so they can send whatever they intended to send in the first place. So if we come back to Android Studio, the first thing we're gonna do is let's go ahead and create a activities package here under our main package. Let's call this activities. And let's go ahead and move main activity within that. And then we're going to create another new activity within that activity's package. So we'll go for a new Java class. We'll call this delayed confirmation view activity. And we'll just simply extend activity. And because this is a new activity, to work with this we will need to reference it within our manifest. So under the wear module let's go down to source and the AndroidManifest.xml file. And let's add a new activity node underneath the main activity node. We'll say activity, and then we'll use delayed confirmation view activity, and that will just have it referenced within our manifest, so that we can actually open the activity without the app crashing on us. Now to finish our setup, let's go ahead and go into our strings array. And let's change item one to be at string, and we'll say delayed confirmation_view_activity and we'll add this to our strings.xml file. So that we can have this easily changeable and that we can check against it later. So I'll go to string name, we'll paste in the id that we want to use. I'll just say delayed confirmation view. I'll save that. We can close strings.xml. So we can close our manifest. And let's go back to our main activity and in onClick, let's go ahead and take the string we are using for this toast message and save that as a string. So we'll say string title is equal to 2 and we'll just paste that content in there. And we need to use .toString. And we can go ahead and just get rid of it being cast here in this text message. And we'll just say title, and we'll move it below our string declaration. Now if getstring, r.string.delayed_confirmation_view_activi- ty.equalsignorecase title. Then we know that we've clicked on the delay confirmation view activity item within our wearable list view. All we're going to do is say intent, intent is equal to new intent, parse in our context, and delayed_confirmation_view_activity.class. Let's go ahead and import intent, and we'll use start activity with that intent. Now that that's all set we can actually go ahead and start working on our delayed confirmation view activity. So in our delayed confirmation view activity we're gonna go ahead and set a new layout in onCreate. And we'll just use setContentView R.layout.activity_delayed_confirmation_v- iew. Let's go ahead and import R, and then we need to actually create this layout. So let's go ahead and go to the res folder, and under layout, we'll go ahead and right click, create a new layout resource file. Let's go ahead and paste that name in there for the layout file that we wanna create. We'll go to the text tab. And because this is a new activity, it's just a linear layout. We're actually gonna wanna change this over to be another box inset layout. Just so everything kind of floats into the middle. So if we look at activity_main, we can actually copy how this is done here. So I just put the tabs vertically so we can read both things at the same time. So I'm gonna go ahead and just copy this entire layout. And paste it into activity_delayed_confirmation_view. And we're gonna change this wearable list view out, so instead of it being Android.support.variable.view.variablelis- tview, it'll be android.support.variable.view.delayedconf- irmationview which, again, if we go back to the documentation, we can see the full package name for this class. So let's just go ahead and copy that. And just to make sure we have this correct, we'll paste it in. And we'll give this an ID of delayed_confirmation. We'll leave it as match_parent, match_parent. We're going to go ahead and set the layout gravity to center_horizontal. We'll go ahead and give this an Androidsource is equal to at mitmap/ic_launcher. Because the delayed confirmation view, as you can see here in the documentation, actually extends the circle to image view, which is Itself is similar to an image view. So it has a lot of the same properties that you would have with a standard image view, except it's going to be in a circle format. So, if we come back to Android Studio, we'll go ahead and add a couple more properties here. So, this has some of it's own special attributes, such as the circle border color, which we will just go ahead and say is at color/green. And then we'll go ahead and add a circle border width, and we'll say that's gonna be 16dp. We'll give this a circle_color of @android:color/white. So the inner circle will be white, and then there will be another circle that appears around the main circle that'll be green. So as the timer runs, it'll just kinda tick along. Let's give this a circle radius of 60dp which generally defines the size of the circle within our view, a circle padding of 16dp, and finally we'll add an update interval of 100 so that it has a possibility of 100 ticks in between it. So, once that's done, we can actually save and close this layout file. We'll close the activity_main layout file that we used as a reference. And here in our delayed confirmation view activity, we're gonna start adding in our Java code to actually interact with this new view. So, let's go ahead and add a private delayed confirmation view. And we'll just call it, mDelayedConfirmationView, throw in our semi-colon. And back in onCreate we're gonna say mDelayedConfirmationView is equal to a casted delayConfirmationView. Find view bar id, r to id.delayed_confirmation. And then we're gonna use that mDelayedConfirmationView to set total time in milliseconds and we will go with 3,000 because that is 3 seconds for the view to actually be available. And then, we are going to want to add a delayed confirmation listener so let's actually go ahead and implement that here. So, right after extend activity let's use implement delayed confirmation listener we will click on the red lightbulb and implement our methods. So we have on timer finish and on timer selected. So, when the 3 seconds run out on timer finish will be called and that's when we can do whatever action we're gonna do that the user had requested. And, on timer selected is as if the user actually clicks on the view so they can cancel whatever was supposed to happen. So we'll go ahead and include those. We'll go ahead and associate our mDelayedConfirmationView using setListener with this. And we'll use mDelayedConfirmationView.start. So as soon as this activity starts up, it will start counting down for those three seconds. And the user will have that amount of time to stop the action. So let's just go ahead and add some toast messages here. We're gonna go down to onTimerFinished and use Toast.makeText. This will say timer finished so we know if the timer's actually finished, and then Toast.lengthShort and show. And then we'll use mDelayedConfirmationView and set our listener to null, just so that it's not holding a reference to it. And then we will call finish to close this activity and go back to our list. And then we're gonna do the exact same thing here in onTimerSelected except we're gonna change our toast message. So let's go ahead and just paste that in there. And instead of timer finished, we're gonna use timer selected. So if we go ahead and hit Run, we can launch our emulator. So we'll hit OK. And we'll just wait for our emulator to start up. And as you can see, we now how delayed confirmation view within our list view. And when we click on that, our toast message kind of covered it up, but you do see the actual activity pop up and it has a timer that runs on our device. And when that finishes, it just says finished. Now if we go through and we click on that, it will actually go back and say that the timer was selected. And that's because her on-timer selected callback was triggered. So, yeah, that it pretty much for the Delayed Confirmation View. It's a pretty useful pattern when you're actually developing Android Wear apps, simply because there's not a lot of screen real estate for you users. So when there's something that could possibly be wrong, you can display this for them. So they have a chance to fix it if there is something that shouldn't go out. So in the next lesson we're gonna go over the view grid pager and how to use an adapter with that so that you can display cards to your user from within your app. So I will see you in the next lesson.