Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/brminnick/accelerometerapp
An iOS and Android app that tracks the device's accelerometer using Xamarin.Essentials; created using Xamarin.Forms and Syncfusion
https://github.com/brminnick/accelerometerapp
syncfusion xamarin xamarin-android xamarin-essentials xamarin-forms xamarin-ios
Last synced: 2 months ago
JSON representation
An iOS and Android app that tracks the device's accelerometer using Xamarin.Essentials; created using Xamarin.Forms and Syncfusion
- Host: GitHub
- URL: https://github.com/brminnick/accelerometerapp
- Owner: brminnick
- License: mit
- Created: 2018-07-25T21:04:43.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2023-12-18T13:22:10.000Z (about 1 year ago)
- Last Synced: 2024-05-01T14:08:47.639Z (9 months ago)
- Topics: syncfusion, xamarin, xamarin-android, xamarin-essentials, xamarin-forms, xamarin-ios
- Language: C#
- Size: 977 KB
- Stars: 9
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
# Accelerometer App
Thanks to [Xamarin.Essentials](https://docs.microsoft.com/xamarin/essentials?WT.mc_id=mobile-0000-bramin) and [SyncFusion's Circular Gauge](https://www.syncfusion.com/products/xamarin/circular-gauge) control, creating a mobile app that monitors the accelerometer data has never been easier.
Let's take a look at how to implement this control in a Xamarin.Forms app.
## Walkthrough
### 1. Install NuGet Packages
1. Install the [Syncfusion.Xamarin.SfGauge NuGet Package](https://www.nuget.org/packages/Syncfusion.Xamarin.SfGauge) into each project, this includes the Xamarin.iOS, Xamarin.Android, and the .NET Standard Project (if one is being used).
2. Install the [Xamarin.Essentials NuGet Package](https://www.nuget.org/packages/Xamarin.Essentials) into each project, this includes the Xamarin.iOS, Xamarin.Android, and the .NET Standard Project (if one is being used).
### 2. Initialize SyncFusion on iOS
To utilize the SyncFusion Circular Gauge, we first need to initialize it in `AppDelegate.FinishedLaunching`:
```csharp
public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
{
...
public override bool FinishedLaunching(UIApplication uiApplication, NSDictionary launchOptions)
{
...
Syncfusion.SfGauge.XForms.iOS.SfGaugeRenderer.Init();
Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("Your SyncFusion License Key");
...
}
}
```
### 3. Initialize SyncFusion on Android
To utilize the SyncFusion Circular Gauge, we first need to initialize it `MainActivity.OnCreate`:
```csharp
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
{
...
protected override void OnCreate(Bundle savedInstanceState)
{
...
Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("Your SyncFusion License Key");
...
}
}
```
### 4. Reference Mono.Android.Export
1. In the Solution Explorer, in the Android project, right-click on **References**
2. In the **References** menu, select **Edit References**
3. In the **Edit References** window, select the **Packages** tab
4. In the **Packages** tab, locate `Mono.Android.Export`
5. In the **Packages** tab, ensure `Mono.Android.Export` is checked
6. In the **Edit References** window, click **OK**
### 5. Implement SfCircularGauge in Xamarin.Forms
This app requires 3 instances of the Circular Gauge Control in our app, so let's start by creating an implementation of `SfCircularGauge`
```csharp
using System.Collections.ObjectModel;
using Syncfusion.SfGauge.XForms;
using Xamarin.Forms;
namespace AccelerometerApp
{
class CircularGaugeView : SfCircularGauge
{
public CircularGaugeView(string headerText, double startValue, double endValue)
{
Pointer = new NeedlePointer { AnimationDuration = 0.5 };
var header = new Header
{
Text = headerText,
ForegroundColor = Color.Gray
};
var circularGaugeScale = new Scale
{
Interval = (endValue - startValue) / 10,
StartValue = startValue,
EndValue = endValue,
ShowTicks = true,
ShowLabels = true,
Pointers = { Pointer },
MinorTicksPerInterval = 4,
};
Scales = new ObservableCollection { circularGaugeScale };
Headers = new ObservableCollection { header };
}
public NeedlePointer Pointer { get; }
}
}
```
### 6. Create Accelerometer Page
In the Xamarin.Forms project, create a new class, `AccelerometerPage.cs`:
```csharp
using System.Linq;
using Xamarin.CommunityToolkit.Markup;
using Xamarin.Essentials;
using Xamarin.Forms;
using Xamarin.Forms.PlatformConfiguration.iOSSpecific;
using static Xamarin.CommunityToolkit.Markup.GridRowsColumns;
namespace AccelerometerApp
{
class AccelerometerPage : ContentPage
{
public AccelerometerPage()
{
InitializeAccelerometer();
Content = new Grid
{
Margin = new Thickness(0, 20),
RowDefinitions = Rows.Define(
(Row.xGauge, Star),
(Row.yGauge, Star),
(Row.zGauge, Star)),
ColumnDefinitions = Columns.Define(Star),
Children =
{
new CircularGaugeView("X-Axis", -1, 1).Row(Row.xGauge),
new CircularGaugeView("Y-Axis", -1, 1).Row(Row.yGauge),
new CircularGaugeView("Z-Axis", -10, 10).Row(Row.zGauge)
}
};
On().SetUseSafeArea(true);
}
enum Row { xGauge, yGauge, zGauge }
void InitializeAccelerometer()
{
try
{
Accelerometer.Start(SensorSpeed.Default);
Accelerometer.ReadingChanged += HandleAccelerometerReadingChanged;
}
catch (FeatureNotSupportedException)
{
System.Diagnostics.Debug.WriteLine("Accelerometer Unavailable");
}
}
void HandleAccelerometerReadingChanged(object sender, AccelerometerChangedEventArgs e)
{
var grid = (Grid)Content;
var xCircularGauge = (CircularGaugeView)grid.Children.First(x => Grid.GetRow(x) is (int)Row.xGauge);
var yCircularGauge = (CircularGaugeView)grid.Children.First(x => Grid.GetRow(x) is (int)Row.yGauge);
var zCircularGauge = (CircularGaugeView)grid.Children.First(x => Grid.GetRow(x) is (int)Row.zGauge);
MainThread.BeginInvokeOnMainThread(() =>
{
xCircularGauge.Pointer.Value = e.Reading.Acceleration.X;
yCircularGauge.Pointer.Value = e.Reading.Acceleration.Y;
zCircularGauge.Pointer.Value = e.Reading.Acceleration.Z;
});
}
}
}
```
### 7. Set AccelerometerPage as the MainPage
In `App.cs`, ensure that `MainPage = new AccelerometerPage();`:
```csharp
using Xamarin.Forms;
namespace AccelerometerApp
{
public class App : Application
{
public App() => MainPage = new AccelerometerPage();
}
}
```
### 8. Launch the app on an iOS or Android Device
## About The Author
Brandon Minnick is a Developer Advocate at Microsoft specializing in Xamarin and Azure. As a Developer Advocate, Brandon works closely with the mobile app community, helping them create 5-star apps and provide their feedback to the Microsoft product teams to help improve our tools and empower every person and every organization on the planet to achieve more.
[@TheCodeTraveler](https://twitter.com/intent/user?user_id=3418408341)
## Resources
- [Xamarin](https://visualstudio.microsoft.com/xamarin?WT.mc_id=mobile-0000-bramin)
- [Xamarin.Essentials](https://docs.microsoft.com/xamarin/essentials/?WT.mc_id=mobile-0000-bramin)
- [Azure IoT Central](https://azure.microsoft.com/services/iot-central/?WT.mc_id=mobile-0000-bramin)
- [SyncFusion's Circular Gauge](https://www.syncfusion.com/products/xamarin/circular-gauge)