2.1 Round and Square Device Support

Hey everyone. This is Paul, with tuts+, and you're watching the Developing for Android Wear course. In this lesson, we're going to look over the general structure of an Android Wear application, and how that relates to an Android phone application, and then we're going to look over some of the files that were generated with our helloworld application, so you can see how they work with rounded and square devices. So the first thing we're gonna do is we're gonna go into the project section of Android Studio, and we're going to change from Android to Project so that you can see the actual folder structure of the application. So if we go into the main project, you'll notice that we have a mobile and a wear module. If we go into mobile and go into the build.gradle file, you'll notice that there's this line that says wearApp project:wear. What this line does is it takes the wear module and associates the APK that's generated from that module with the mobile APK so that when your user downloads your app from the Play Store, their phone will know that there is a wear app associated with it. And it will automatically install that onto the physical wear device for your user. So, let's go ahead and close this. And we'll come into the wear module. And then we'll go into source > Java and then we'll go into the MainActivity. And you'll notice that we have the watch view sub view associated with this activity. What this does it is allows you to use two different layouts, one for rectangular watches and one for round watches so that your app will look correct on both kind systems. So if we go into Source > main > res and down to layout you'll notice that we have activity_main, rect_activity main, and round_activity main. So round_activity main will have text that says hello round world, whereas rect_activity main will have hello square world. So if we go into our emulator, we'll notice that we have two different texts and two different layouts. Where the round world is associated with the middle of the screen and square world will just pop up in the corner. If we look at activity_main, you'll see that this is done through the rectLayout and roundLayout parameters within WatchViewStub. To get more information on watch view stub, you can go ahead and go to your browser and look up the WatchViewStub documentation. Back in Android Studio in Main activity you'll see that all we're doing is taking the stub and using setOnLayoutInflaterListener to determine when that layout has been inflated, and then grab views based off of IDs from both layouts so that we can display our text. So, the reason this is important is because of the way round devices work. If you look at the round device, if we had hello square world in the top corner, it would actually be cut off here in the top left corner, because the device is rounded. So to demonstrate this, let's go ahead and get rid of the WatchViewStub. And then we're gonna get rid of the rect and round activity main files. We'll delete them anyway. We'll go into activity main and we'll just turn this into a standard text view. And then we'll go ahead and clean this up by removing the round and rect layouts, the device ID and context, and then we'll get rid of these two grayed outlines as well. And then let's go ahead and add in some text here so that it'll just say hello world, and then we'll go ahead and run this onto our round device so you see how the text is cut off. So as you can see we kind of have the text from world in here, but the hello and the first part of world are actually cut off by the edge of the screen. So let's say you didn't wanna have two different layout files because you have a fairly simple application and layout. What you can do is use something called a BoxInsetLayout with the documention here on the Android developers site. And what this does is it allows you to tell your view to shrink in, so it doesn't interfere with the edges of a round screen. So let's go ahead and go back to Android Studio. And let's go ahead and change this TextView to be a android.support.wearable.view.BoxInsetLay- out. Go ahead and make this a new line. Let's get rid of the text here. We'll change this ID to parent. And then within this, let's go ahead and add a frame layout with a matched parent width, matched parent height. And then there's going to be a special value that we want to throw in here, so what we need to do is add a new XMLNS. So it's xlmns:app="http", and then we're just going to use the res auto scheme. Within our frame layout we'll use app: and then it's going to use the layout box and we'll just go ahead and say all. So if you look at our emulator, what this will do is it will add a square within our round layout that all of our content will stay within. So within our frame layout, let's go ahead and set out another text view. We'll say match_parent, match_parent, and text "hello World". So let's run this on our round device. And while that's installing let's also go ahead and run this on our square device. So we'll pull up our emulators and just see what they look like side by side. So as you can see, we're actually displaying hello world and it's no longer cut off on the corner, and it still looks all right on the square device as well as the round device. So in this lesson, you've seen how the WatchViewStub, as well as the BoxInsetLayout work, so that you can accommodate for round and square devices within your UI layouts. In the next lesson, we're gonna look over the WearableListView, which is an extension of the recycler view. Which takes care of a special use-case of a list view on Android Wear devices. So I will see you then.