{"id":13438,"date":"2014-08-27T13:24:44","date_gmt":"2014-08-27T20:24:44","guid":{"rendered":"http:\/\/blog.xamarin.com\/?p=13438"},"modified":"2014-08-27T13:24:44","modified_gmt":"2014-08-27T20:24:44","slug":"tips-for-your-first-android-wear-app","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/tips-for-your-first-android-wear-app\/","title":{"rendered":"Tips for your First Wear App"},"content":{"rendered":"<p>\t\t\t\tAndroid Wear was officially released at Google I\/O 2014, giving developers a unique opportunity to create Android apps for a new class of devices.<\/p>\n<p>With our <a href=\"\/android-l-developer-preview-android-wear-support\/\">recently announced preliminary support<\/a> in Xamarin.Android you are not only able to extend your current application with enhanced notifications, but also develop an app that runs directly on the wearable and can sync data between your handheld app and wearable app.<\/p>\n<p>In this article, we will cover the basics of Android Wear. For more information, I also invite you to bookmark Chris Hardy&#8217;s <b><a href=\"http:\/\/evolve.xamarin.com\" title=\"Evolve 2014\">&#8220;C# is in my ears and my eyes&#8221;<\/a><\/b> Evolve 2014 session, where he will cover Android Wear among other emerging devices goodness.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-13513\" src=\"\/wp-content\/uploads\/sites\/44\/2019\/04\/wear_long1.png\" alt=\"wear_long\" width=\"562\" height=\"135\" \/><\/p>\n<h2>Add Wearable Features to Notifications<\/h2>\n<p>The simplest way to support the new Wear platform is to take advantage of the shared nature of notifications between the phone and the wearable. By using the support v4 notification API and the <code>WearableExtender<\/code> class available <a href=\"http:\/\/www.nuget.org\/packages\/Xamarin.Android.Support.v4\/\">with our NuGet package<\/a>, you can also tap into the native features of the platform, like inbox style cards or voice input by spicing up your existing Notifications.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-medium wp-image-13675\" src=\"\/wp-content\/uploads\/sites\/44\/2019\/04\/03_actions-253x300.png\" alt=\"03_actions\" width=\"253\" height=\"300\" \/><img decoding=\"async\" class=\"alignnone size-medium wp-image-13677\" src=\"\/wp-content\/uploads\/sites\/44\/2019\/04\/13_voicereply-253x300.png\" alt=\"13_voicereply\" width=\"253\" height=\"300\" \/><\/p>\n<h2>Companion Applications<\/h2>\n<p><img decoding=\"async\" class=\"alignright size-medium wp-image-13451\" src=\"\/wp-content\/uploads\/sites\/44\/2019\/04\/screenshot-framed-168x300.png\" alt=\"screenshot-framed\" width=\"168\" height=\"300\" \/>Another strategy is to create a complete companion application that runs natively on the wearable. This is\u00a0easier than you might think because, in essence, developing for Android Wear is just like developing for\u00a0your Android phone, since it&#8217;s running the same Android platform.<\/p>\n<p>As an example (among all the <a href=\"https:\/\/github.com\/xamarin\/monodroid-samples\/tree\/master\/wear\">other fantastic ones<\/a>), I added a simple <a href=\"https:\/\/github.com\/garuma\/xamarin-store-app\/tree\/wear-support\">Wear companion<\/a> to our <a href=\"https:\/\/xamarin.com\/c-sharp-shirt\">Xamarin Store app<\/a>, allowing you to browse the catalog from your wrist and add\/remove items from your order<\/p>\n<p>Below you&#8217;ll find\u00a0some tips to get you started on your own Wear applications.<\/p>\n<h2>Getting Started<\/h2>\n<p>As part of the last release of Xamarin Studio, we have added a new template to easily create a new Android Wear application:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-large wp-image-13441\" src=\"\/wp-content\/uploads\/sites\/44\/2019\/04\/Screen-Shot-2014-08-19-at-6.44.02-PM-1024x662.png\" alt=\"Screen Shot 2014-08-19 at 6.44.02 PM\" width=\"1024\" height=\"662\" \/><\/p>\n<p>The template automatically created references\u00a0<a href=\"http:\/\/www.nuget.org\/packages\/Xamarin.Android.Wear\/\">our Wearable NuGet<\/a>, giving you access to the wear UI toolkit and communication API.<\/p>\n<h2>User Interface<\/h2>\n<p>The primary navigation pattern for Wear is a series of cards arranged vertically. Each of these cards can have associated actions that are layered out on the same row. The pattern is more generally called <a href=\"http:\/\/developer.android.com\/design\/wear\/structure.html#2DPicker\">2D Picker<\/a>.<\/p>\n<p>The <code>GridViewPager<\/code> class part of the Wearable NuGet allows you to just do that. Adhering to the same adapter concept as\u00a0<code>ListView<\/code> and friends, you generally associate it with a <code>FragmentGridPagerAdapter<\/code> that lets you represent each row and column cells as a <code>Fragment<\/code>.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-large wp-image-13718\" src=\"\/wp-content\/uploads\/sites\/44\/2019\/04\/2D_picker1-1024x657.png\" alt=\"2D_picker\" width=\"1024\" height=\"657\" \/><\/p>\n<p>There is also a Wear specific design for <a href=\"http:\/\/developer.android.com\/design\/wear\/patterns.html#Actions\">action buttons<\/a>, consisting of a big colored circle and a small description text underneath. Although there is currently no built-in widget to do this in the library, it&#8217;s very easy to do it yourself by using a <a href=\"https:\/\/github.com\/garuma\/xamarin-store-app\/blob\/wear-support\/XamarinStore.Droid.Wear\/Resources\/layout\/ActionButtonLayout.axml\">simple custom layout<\/a> and a <a href=\"https:\/\/github.com\/garuma\/xamarin-store-app\/blob\/wear-support\/XamarinStore.Droid.Wear\/Resources\/drawable\/cart_button.xml\">state-list drawable<\/a> file.<\/p>\n<h2>Communication<\/h2>\n<p>Being companion to a phone application, wearable apps need to be able to communicate with their host. Android Wear gives you access to two different communication APIs to do this.<\/p>\n<p>First is the <strong>Data API,<\/strong> which is akin to a synchronized datastore between the wearable and the phone. The platform will take care of propagating changes to the other side when it&#8217;s optimal\u00a0to do so. It&#8217;s also able to smartly detect when the wearable is out of range and queue up the synchronization for later.<\/p>\n<p>Second is the <strong>Message API,<\/strong> which allows you to use a lower level, small payload, fire-and-forget type of communication. With this API you can craft small message to which you associate a URL path and a byte array content that you can send directly to a node in the Wear network.<\/p>\n<p>The Xamarin Store wear app uses both APIs for different purposes. The Data API is used to transfer the available products and their associated image assets whereas the Message API allows the wearable to send order to the phone like refresh the store information or add\/remove item from the cart.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-large wp-image-13720\" src=\"\/wp-content\/uploads\/sites\/44\/2019\/04\/wear_phone_communication-1024x415.png\" alt=\"wear_phone_communication\" width=\"1024\" height=\"415\" \/><\/p>\n<p>These APIs are available as part of our <a href=\"https:\/\/www.nuget.org\/packages\/Xamarin.Android.Wear\/1.0.0-preview7\" title=\"Xamarin Wearable NuGet\">Wearable NuGet<\/a> on the wearable and via our <a href=\"http:\/\/www.nuget.org\/packages\/Xamarin.GooglePlayServicesJellyBean\/\">Google Play Services preview NuGet<\/a> on the phone (version 19). You can register the API through the now-uniform Google Play Services connection service.<\/p>\n<p>The main entry points for the two APIs are respectively <code>WearableClass.DataApi<\/code> and <code>WearableClass.MessageApi<\/code>. You can choose to register callbacks for receiving those messages via each of the API listener interfaces or alternatively <a href=\"https:\/\/github.com\/garuma\/xamarin-store-app\/blob\/wear-support\/XamarinStore.Droid\/WearService.cs#L23\">implement a service<\/a> in your app deriving from <code>WearableListenerService<\/code>\u00a0that will automatically be instantiated by the Wear Android subsystem.<\/p>\n<h2>Deployment<\/h2>\n<p>Wearable applications are deployed as their own APK file embedded inside the main application APK. Since this is a preview release, we haven&#8217;t yet ironed out the perfect way to automate this process, but for now it&#8217;s still possible and easy to <a href=\"http:\/\/developer.android.com\/training\/wearables\/apps\/packaging.html#PackageManually\">manually package your Wear application<\/a>.<\/p>\n<p>Note that if your wearable application wants to communicate with your phone application, you will need to properly install the phone app APK containing the Wear child APK at least once on your phone device so that the initial binding is done. Afterwards, you can directly deploy and debug your Wear app from the wearable.\t\t<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Android Wear was officially released at Google I\/O 2014, giving developers a unique opportunity to create Android apps for a new class of devices. With our recently announced preliminary support in Xamarin.Android you are not only able to extend your current application with enhanced notifications, but also develop an app that runs directly on the [&hellip;]<\/p>\n","protected":false},"author":1925,"featured_media":39167,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[5,4],"class_list":["post-13438","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developers","tag-android","tag-xamarin-platform"],"acf":[],"blog_post_summary":"<p>Android Wear was officially released at Google I\/O 2014, giving developers a unique opportunity to create Android apps for a new class of devices. With our recently announced preliminary support in Xamarin.Android you are not only able to extend your current application with enhanced notifications, but also develop an app that runs directly on the [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/13438","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/users\/1925"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/comments?post=13438"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/posts\/13438\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media\/39167"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/media?parent=13438"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/categories?post=13438"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/xamarin\/wp-json\/wp\/v2\/tags?post=13438"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}