Xamarin.Forms Communication Between Two Pages Within Same App on Different Devices

Issue

Technologies, frameworks and devices I'm using:

• Framework: Xamarin.Forms
• IDE: Visual Studio 2022
• Physical Device (smartphone): Zebra TC26 (Android 10)
• Physical Device (smartwatch): Samsung Galaxy Watch4 (Android 11)

Problem definition

Currently I have a test Xamarin.Forms project that consists of two different UIs (XAML files):

• User Interface 1: HomePage.XAML - This screen should be displayed on the smartphone
• User Interface 2: WatchScreen.XAML - This screen should be displayed on the smartwatch

With code below I make sure HomePage.XAML is deployed to a smartphone and watchscreen is deployed to a smartwatch:

Page homePage = new NavigationPage(new HomePage());

// BuildVersionCodes.R is a reference to Android version 11 (mostly now used by Wear OS 3.x)
if (Build.VERSION.SdkInt == BuildVersionCodes.R)
{
    // SM-R870 is a reference to the Samsung Galaxy Watch4
    // Note: This is needed to ensure the UI is specific to the UI of a smartwatch
    if (Build.Model == "SM-R870")
    {
        Page watchScreen = new NavigationPage(new WatchScreen());
        MainPage = watchScreen;
    }
}
else
{
    MainPage = homePage;
}

Now I want to make these pages on different devices communicate with each other. HomePage.xaml exists within the main Xamarin.Forms project as well as WatchScreen.xaml. The way I want them to communicate with each other is by sending a message or something. A Xamarin.Forms project also comes with a native project. In this native Xamarin.Android project I try to retrieve inside the MainActivity.cs the button that exists within the main project by using (in WatchScreen.xaml this button exists and in WatchScreen.xaml.cs I have a method that gives this button back).

Method in WatchScreen.xaml.cs that gives button back:

public Button GetSendButtonFromWearableUI() => btnSendMessage;

In MainActivity.cs I get this method by using:

Button button = (App.Current.MainPage.Navigation.NavigationStack.LastOrDefault() as WatchScreen)
.GetSendButtonFromWearableUI();

Whenever I click on the button by doing this:

button.Clicked += delegate
{
    SendData();
};

Some data should be sent from MainActivity.cs and catched by HomePage.xaml and displayed on it. I tried several approaches but I didn't succeed in achieving what needs to happen.. Therefore, I'm wondering if you guys could help me out with this and would be much appreciated.

Solution

In the meantime I've been investigating this issue and came up with a solution. Follow steps below to get the same result. To make this solution work I've combined the Wearable Data Layer API from Google and MessagingCenter from Microsoft.

Also the example below shows only the communication from the smartwatch to the smartphone. In order to reverse processes you can put the send button on the HomePage instead of the smartwatch screen and make sure to subscribe to the correct messages.

One last note: keep in mind that code used below from Google is deprecated but it still works...

References used to make this work: Syncing Data Between Wearable and Handheld Devices Using Xamarin in Android

Installed dependencies on the Xamarin.Android project within Xamarin.Forms project:

• Xamarin.Android.Support.v4
• Xamarin.GooglePlayServices.Base
• Xamarin.GooglePlayServices.Wearable

MessageKeys.cs

This class is used to declare message keys that are being used to send and receive messages between devices.

public class MessageKeys
{
   public const string Smartwatch = "Smartwatch";
   public const string Smartphone = "Smartphone";
}

Xamarin.Forms (Base project) - App.xaml.cs

In the App.xaml.cs, as pointed out earlier, I'm making sure the wearable UI displays WatchScreen.xaml and any other devices display regular Android UI -> HomePage.xaml.

Xamarin.Forms (Base project) - WatchScreen.xaml.cs

Send message from Wearable device to Android smartphone.

private void btnSendMessage_Clicked(object sender, EventArgs e)
{
    MessagingCenter.Send(Xamarin.Forms.Application.Current, MessageKeys.Smartwatch);
}

Xamarin.Forms (Base project) - HomePage.xaml.cs

public HomePage()
{
    InitializeComponent();

    MessagingCenter.Subscribe<Xamarin.Forms.Application>(Xamarin.Forms.Application.Current, MessageKeys.Smartphone, (sender) =>
    {
        DisplayAlert("Message", "Wearable message received!", "OK");
    });
 }

Xamarin.Forms (Native Android Project) - MainActivity.cs

Within MainActivity.cs I implement the following interfaces:

public class MainActivity : WearableActivity, DataClient.IOnDataChangedListener,
    GoogleApiClient.IConnectionCallbacks, GoogleApiClient.IOnConnectionFailedListener

Variables:

private GoogleApiClient client;
    const string syncPath = "/[project name]/[subdirectory for watch]";

Internal class 'MessageReceiver' for receiving broadcast messages:

[BroadcastReceiver]
public class MessageReciever : BroadcastReceiver
{
    MainActivity main;

    public MessageReciever() { }
    public MessageReciever(MainActivity owner) { this.main = owner; }

    public override void OnReceive(Context context, Intent intent)
    {
            main.ProcessMessage(intent);
    }
 }

Registering receiver (to receive through Wearable Data Layer API), creating Google Client and Subscribing to smartwatch message (to retrieve message through MessagingCenter)

protected override void OnCreate(Bundle bundle)
{
    IntentFilter filter = new IntentFilter(Intent.ActionSend);
    MessageReciever receiver = new MessageReciever(this);
    LocalBroadcastManager.GetInstance(this).RegisterReceiver(receiver, filter);

    client = new GoogleApiClient.Builder(this, this, this)
       .AddApi(WearableClass.Api)
       .Build();

    MessagingCenter.Subscribe<Xamarin.Forms.Application>(Xamarin.Forms.Application.Current, MessageKeys.Smartwatch, (sender) =>
    {
        SendData();
    });
}

ProcessMessage method: sends received message from wearable to smartphone

public void ProcessMessage(Intent intent)
{
    // For now I'm not sending the payload...
    string message = intent.GetStringExtra("WearMessage");
    MessagingCenter.Send(Xamarin.Forms.Application.Current, MessageKeys.Smartphone);
}

SendData(), OnStart(), OnStop(), OnDataChanged (didn't do anything with this part, because this is to receive messages outside the project and I don't need it for now), OnConnected(), OnConnectionSuspended(), OnConnectionFailed():

See the reference to see what code has been used, since code is exactly the same... P.S.: one thing for SendData has been changed. If you want to keep sending data, remove 'client.Disconenct()' from finally after the try and catch block.

Xamarin.Forms (Native Android Project) - WearableService inherits from WearableListenerService:

WearableService is a new class and created within the native project. Also for this part see the reference, because it's the exact same code being used within my project.

To get an overall overview of what's happening, I've visualized this in the diagram below: (example shows how communication works from smartwatch to smartphone)

If you want to communicate from smartphone to smartwatch, you could do something like this:

That's it guys. Now you will receive messages within the same application using the Wearable Data Layer API and MessagingCenter. Instead of having separate projects, we just use separate UIs to make this happen...

Answered By - user16906859