Getting Started With First Android Wearable App Using Xamarin

Introduction

We all knew Xamarin and Visual Studio are great. You are no longer restricted to developing only for phone and tablet. Now, you can develop Android wearable apps, using Xamarin. Android wear was officially released by Google in 2014.

In this article, I will show how to setup and create an Android wearable app, using Xamarin.

System Requirements

Mac / Windows 7++ Machine with 8 GB RAM.
Xamarin Studio 5.0 or new version/ Visual Studio 2012 or new version.
Visual Studio required professional or higher version because Xamarin extension for Visual Studio will only be supported for non-express editions. Download Visual Studio from here ( https://www.xamarin.com/visual-studio).

Install Android SDK & Tools

You can open Visual Studio in Windows machine. Open Visual Studio (Run => type “Devenev.exe”).

You can verify all the required SDKs, which were installed in Visual Studio. If you do not have the latest SDK and tools installed, download the required SDK tools and API. Go to Tools menu =>Android =>Android SDK manager. Android SDK manager Window will visible in your system, as shown below.

Create Android wear emulator

In order to run the Android wear Application we need to first setup an emulator. You can create one by following the steps given below. Go to Tools in Visual Studio > Andriod > Andriod Emulator Manager, as shown below.

In the screen given below, you will get to know the already created emulator. If you want to create a new emulator, click on “Create “button

After clicking on create button and providing the information as AVD name, Device Name, chose correct Target platform, click Create.

If you get any error "No CPU /ABI system image available for this target”, it means target SDK is not installed. You can choose different target or install specific target SDK. When creating the device, make sure that the correct target of the OS is selected, but especially that the CPU is Android wear ARM. After creating an emulator, you will receive the message for the confirmation

After clicking OK, you will get the screen given below for list of emulators.

Create New Project

You can follow the steps given below to create your first Android Wear app and run it on a Wear emulator. File => New => Project. You can select the project as Android and select the template as Wear app. Now, automatically project and wear reference will be added .

See the screen given below for the project structure and the reference.

In the Solution, include Xamarin Android wearable reference and icon for tile image, 3 layout for rectangle, round watch and phone layout with common MainActivity class.

Round / Rectangle Main.axml

I have included sample reference axaml code. You can modify, as per your requirement.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
tools:deviceIds="wear_round">
<Button
android:id="@+id/msdnbutton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/msdn" />
<Button
android:id="@+id/csharpbutton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/csharp" />
<Button
android:id="@+id/bloggerbutton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/blogger" />
</LinearLayout>

MainActivity.CS

In MainActivity class, create onbutton click and show the notification.

using System;
using Android.App;
using Android.Content;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;
using Android.Support.Wearable.Views;
using Android.Support.V4.App;
using Android.Support.V4.View;
using Java.Interop;
using Android.Views.Animations;
namespace DevEnvWear
{
[Activity(Label = "DevEnvWear", MainLauncher = true, Icon = "@drawable/icon")]
public class MainActivity : Activity
{
int count = 1;
protected override void OnCreate(Bundle bundle)
{
base.OnCreate(bundle);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.Main);
var v = FindViewById<WatchViewStub>(Resource.Id.watch_view_stub);
v.LayoutInflated += delegate
{
// Get our button from the layout resource,
// and attach an event to it
Button buttonmsdn = FindViewById<Button>(Resource.Id.msdnbutton);
Button buttoncsharp = FindViewById<Button>(Resource.Id.csharpbutton);
Button buttonblog = FindViewById<Button>(Resource.Id.bloggerbutton);
buttonmsdn.Click += delegate
{
var notification = new NotificationCompat.Builder(this)
.SetContentTitle("MSDN")
.SetContentText("https://social.msdn.microsoft.com/profile/j%20suthahar/")
.SetSmallIcon(Android.Resource.Drawable.StatNotifyVoicemail)
.SetGroup("group_key_demo").Build();
var manager = NotificationManagerCompat.From(this);
manager.Notify(1, notification);
};
buttoncsharp.Click += delegate
{
var notification = new NotificationCompat.Builder(this)
.SetContentTitle("C# Corner")
.SetContentText("http://www.c-sharpcorner.com/members/suthahar-j")
.SetSmallIcon(Android.Resource.Drawable.StatNotifyVoicemail)
.SetGroup("group_key_demo").Build();
var manager = NotificationManagerCompat.From(this);
manager.Notify(1, notification);
};
buttonblog.Click += delegate
{
var notification = new NotificationCompat.Builder(this)
.SetContentTitle("My Blog")
.SetContentText("www.devenvexe.com")
.SetSmallIcon(Android.Resource.Drawable.StatNotifyVoicemail)
.SetGroup("group_key_demo").Build();
var manager = NotificationManagerCompat.From(this);
manager.Notify(1, notification);
};
};
}
}
}

Output Screen

You can refer to the screen given below for an output. Click on tile => click on any button => swipe to home and see the notification.