Building Advanced Uis for Android Wear

MARK RENOUF: Hi, my name is Mark Renouf, and I'm an engineer with the Android Wear team. Today, I'm going to talk to you about how you can create apps that look and feel right at home on Android Wear. The home stream is the primary user interface. You can think of it as the launcher for Android Wear. It provides quick access to the information you need in the form of a stream of cards. Navigation is done by paging through them one at a time. Each row represents a single piece of content, and additional details and actions are available at pages to the side. By customizing notifications provided by your app, you can control the look and features of the cards that appear. This is the first step you should take. And you'll find details about this from our other team members. Now I'm going to show you how to take it to the next level. Wearable apps are standard Android apps designed with a small screen in mind. They run full screen with no system UI or status bar. The development process is similar to a standard app, but does require some slightly different approaches to UI. The biggest thing to keep in mind is that your interface shouldn't require touches to small points or precise dragging. For example, in the Wear system UI, you'll notice frequent use of swipe gestures and scrolling which snaps into place. This works well because it doesn't require close attention to exactly where to touch on the screen. To help you out with all this, we're providing a UI library for Wear apps. It provides components which have been designed to maximize usability. In this talk, I'm going to cover GridViewPager. This is what you'll want to use to provide an interface similar to the home stream. It's like a ViewPager, except it moves both horizontally and vertically. You'll find the latest details on downloading and configuring the library for your app at developer.android.com/wear. The first step is to create a layout. These few lines are all you'll need for your main activity. Here, the pager is configured to expand to fill the screen. Next up, we need an adapter. This provides the content for each page as the user navigates around. For this example, I'm extending from a base class with fragment support. Only these three methods are needed to create a working adapter. The first two provide the size of the content available in terms of rows and pages. Notice that the column count depends on a row parameter. The reason for this is that each row may have a different number of columns. One special feature is the option to control where in each row the pager is positioned. Instead of a fixed grid layout, it's possible to change columns while scrolling vertically between rows. We play some tricks in the layout to accomplish this, but the result feels seamless. Why do we do this? Well, recall that each row is a single piece of content. In the home stream, these are notifications or Google Now cards. When the user moves up or down from one of the action pages to the right, it would be confusing to land on an action for a different item. To solve this, paging up or down always moves back to the first column. This is also the default mode for GridViewPager. To adjust this, you can override one additional method. This method is called whenever the pager needs to know what should be shown above or below the current position. The current column position is also supplied. To return to fixed movement system, you could choose to return column. You might even want to save the last column viewed for that row and return to it the next time the row is selected. Finally, the most important method here is getItem. This is where you'll provide a fragment to be displayed for a page. Here, you'll just return your fragment and the pager handles everything else. Fragments will be kept as long as needed and detached and reattached as appropriate. Again, this is very similar to a ViewPager, just with an added vertical dimension. To help with creating your page content, we've provided card fragment. Using this will automatically apply styles, which match the system cards. All you'll need to do is provide your content. This fragment will also give several additional features. First, if your content is larger than a single page, it allows for scrolling in place. You can also have it started out as a single page, which can be expanded with a tap. In this case, the content overflow feed is handled automatically. You'll find more details in the sample code and documentation. Some things to keep in mind. Try to have only a single action per page. If possible, the entire card should be the tap target and the action to perform should be clearly indicated. Now all that's left to do is wire everything up. The adapter class handles all of the fragment operations, so it'll need a reference to the fragment manager. Assign your adapter to the pager and you're done. Now you have a paging card stream style UI. It's that simple. We've provided a full example app using GridViewPager along with the library, which I recommend you investigate further. In it, you'll learn some of the more advanced features of GridViewPager that I didn't cover here. And don't forget, there are other useful UI elements that are part of the wearable UI library. Visit developer.android.com/wear for the latest on all of this. We hope these components make writing great Android Wear apps easy and fun. And as always, we'd love to hear your feedback. We can't wait to see what you build. Thanks.