DEV Community: Mike Grant

.NET MAUI - Auto Scaling App Icons & App Image Resources

Mike Grant — Mon, 31 Jan 2022 00:00:00 +0000

Managing images in your .NET MAUI application is a lot easier than with Xamarin.Forms. .NET MAUI removes the need to scale and resize your images for each platform and screen resolution. Better than that, it saves you having to remember that website that generates it all for you. Add your images to your project, ensure the build actions are configured, and boom! .NET MAUI will handle the process for you at build time.

If you’re interested in how .NET MAUI is resizing the images at build time, you can view the source of the tool (ResizetizerNT) over at GitHub. During the build process, ResizetizerNT processes the shared resources and resizes them to the appropriate resolution for each platform and screen size. It’s important to note that whilst .svg files are the recommended and preferred format, it will also handle .png and bitmaps.

App Icons

To add your app icon to your project, drag the image into the Resources\ folder within your project. Then by changing the Build Action of the image to MauiIcon in the Properties window, this will let .NET MAUI know to configure each platform to use this image as the icon, as well as resizing the icon at build time.

It’s worth being aware that the .svg file format is recommended for app icons with MAUI compared to .png files which are regularly used when developing a Xamarin.Forms application.

You can also configure this manually by adding the following to your project file

<MauiIcon Include="Resources\Images\appicon.svg">

You can find all of the images created as a result of the resizer by running a build, navigating to the obj folder, and browsing into one of the builds (e.g. net6.0-android). For example with Android, go into the build output and select

App Images

You can also resize images that you want to show in the application in a similar way to how app icons are handled. Again, these images will be resized at build time.

By default, your project will be set up to automatically resize any images that are placed in the Resources\Images folder. If you wish to use a different folder structure for your project, you can edit this line in your .csproj file and change it to point to a location that suits you.

<MauiImage Include="Resources\Images\*">

You can also add specific images outside of this file by changing the Build Action to MauiImage or even add extra folder locations by adding the following to your .csproj file.

<MauiImage Include="YourFolder\ExtraImages\*">

.NET MAUI is still a preview release. Whilst this blog post is accurate for .NET MAUI Preview 12, this does not guarantee that it will be correct when .NET MAUI is officially released.

Controlling Streaming Services with Alexa - Part 1

Mike Grant — Thu, 12 Aug 2021 23:00:00 +0000

One of the biggest problems that I’ve found with the sheer amount of streaming services is which one has what? Sometimes I’ll miss great content on Amazon Prime because I get frustrated browsing their app on my TV, or I want to watch a certain film, can’t find it on Netflix, and just assume that it’s not available to be streamed from anywhere. Why can’t I just ask my voice assistant (Alexa) to play a TV show or film and it plays on my TV irrespective of which streaming service it is on?

I currently use Alexa to control a lot of things in my house through Home Assistant and a custom skill for some of the more complicated tasks, so I set about creating a custom Alexa skill that will allow me to play content from the streaming services that I’ve subscribed to, on my TV. (Think “Okay Google, play Stranger Things on TV”)

What do I need?

Before starting working on this project, I sat down and thought about what I needed to make this work, and the list was surprisingly small.

Control of my TVs (via ADB)
Intent information for each streaming service
Data about what content is available on each service
Alexa Skill

Controlling the TV

Before we can play anything on the TV, we need to find a way to open the content that we want on the TV. As I have Android based devices, this is relatively easy for me. I can use ADB and intents. As part of my home automation system, I already have an ADB server running in a container, which is connected to my TVs. This saves me having to open and close connections to each of my TVs everytime I want to control them.

To open content on the TV, I’ve used the intent URL scheme so that everything is uniform and easier to work with. After trawling the internet I compiled this list of intents for the three main streaming services that I use.

Netflix - intent://www.netflix.com/watch/CONTENTID#Intent;launchFlags=0x00800000;scheme=https;package=com.netflix.ninja;S.source=30;end Amazon Prime - intent://com.amazon.tv.launcher/detail?provider=aiv&providerId=ASIN#Intent;package=com.amazon.tv.launcher;scheme=amzn;end Disney+ - intent://disneyplus.com/VIDEOID#Intent;launchFlags=0x00800000;scheme=https;package=com.disney.disneyplus;end

We can validate these intents are working by using an adb shell that is connected to one of the TVs.

am start intent://www.netflix.com/watch/CONTENTID#Intent;launchFlags=0x00800000;scheme=https;package=com.netflix.ninja;S.source=30;end

This will start Netflix on the device and the content will beging playing within a couple of seconds.

Playing content on the TV

Now that we can control our TV using ADB, we can build upon this by creating a simple script that takes a Netflix video link and sends the command to my TV via the ADB server.

var adb = require('@devicefarmer/adbkit') var client = adb.createClient({ host: '127.0.0.1', port: '5037' }) contentIntent = 'intent://www.netflix.com/watch/80126025#Intent;launchFlags=0x00800000;scheme=https;package=com.netflix.ninja;S.source=30;end' client.shell('192.168.1.1', `am start "${contentIntent}"`).then(function (response) { console.log(response) }).catch(function (err) { console.log(err); })

Running this script will open Star Trek: Discovery on the TV and we’ve validated that the idea will work.

Seeing it in action

Check back soon for more details on this project.

Xamarin Let’s Build - Biometric Support

Mike Grant — Mon, 08 Mar 2021 00:00:00 +0000

Biometrics is a commonly seen security feature on your phone. Whether it’s fingerprint or facial recognition, you’ll see it when you log in to your bank or using Google / Apple Pay. We’ll find out how to add biometric authentication to your Xamarin.Forms application.

Getting Started
Configuring Android
Configuring iOS
Implementing the biometric check
Testing
Resources

Getting Started

Before we start adding support for Biometrics to our application, it’s worth understanding that this functionality works with the built in Biometric support of the OS on the users device. This won’t allow you to capture fingerprints within your app. This will ask the OS to prompt the user, and report back to your app whether they are authenticated or not.

Add the Plugin.Fingerprint NuGet package to all of your projects (Shared and platform specific)

Configuring Android

For this to work properly, we need to ensure that the target SDK version for our app is greater than 6.0, and if you have migrated your Xamarin.Forms app to using the AndroidX packages then you won’t need to install the Xamarin.AndroidX.Migration NuGet package as the documentation suggests.

To start, our app requires permissions to access the fingerprint.

<uses-permission android:name="android.permission.USE_FINGERPRINT" />

Now that the permissions are set up, the plugin needs to know which activity we’re working in so that it can show the prompt on the correct activity. As Xamarin.Essentials is bundled as part of a new Xamarin Project we’ll use that to establish the current activity (If you’re still using James Montemagno’s Current Activity Plugin then this will work as well).

CrossFingerprint.SetCurrentActivityResolver(() => Xamarin.Essentials.Platform.CurrentActivity);

As we’re using Xamarin.Essentials to help us work out the current activity, we need to ensure that the activity resolver is declared after we have initialised Xamarin.Essentials.

protected override void OnCreate(Bundle savedInstanceState)
{
    base.OnCreate(savedInstanceState);

    Xamarin.Essentials.Platform.Init(this, savedInstanceState);
    CrossFingerprint.SetCurrentActivityResolver(() => Xamarin.Essentials.Platform.CurrentActivity);
    global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
    LoadApplication(new App());
}

Configuring iOS

To start, our app requires permissions to access the fingerprint.

<key>NSFaceIDUsageDescription</key>
<string>Need your face to unlock secrets!</string>

Unlike with Android, that’s actually all that is required. Simple!

Implementing the biometric check

Now that we have the the platform specific projects configured, we can move on to actually using the biometric authentication to check if a user is authenticated or not.

bool supported = await CrossFingerprint.Current.IsAvailableAsync(true);
if (supported)
{
    AuthenticationRequestConfiguration conf = new AuthenticationRequestConfiguration("Access your account", "Access your account");
    var result = await CrossFingerprint.Current.AuthenticateAsync(conf);

    if (result.Authenticated)
    {
        await DisplayAlert("Success!", "Authentication successful!", "Ok");
    }
    else
    {
        await DisplayAlert("Sorry!", "Authentication failed!", "Ok");
    }
}
else
{
    await DisplayAlert("Sorry!", "Biometrics are not available on your device", "Ok");
}

There are a couple of things happening in that sample, so lets pick out some of the key parts.

bool supported = await CrossFingerprint.Current.IsAvailableAsync(true);

This will tell you whether Biometric is supported by the device that you’re running on. It’s always worth remembering that you need a fallback for users that either don’t enable biometrics, or their device doesn’t support it. Checking whether the authentication is available for use before using it is best practice.

AuthenticationRequestConfiguration conf = new AuthenticationRequestConfiguration("Access your account", "Access your account");
var result = await CrossFingerprint.Current.AuthenticateAsync(conf);

This will configure the prompt that is shown to the user, (note: on iOS this will only take the title and ignore the description), and then return the result of that authentication.

if (result.Authenticated)
{
    await DisplayAlert("Authenticated", "Congrats you were authenticated!", "Ok");
}
else
{
    await DisplayAlert("Sorry", "You were not authenticated", "Ok");
}

This will handle the result of the check, we simply want to check whether the returned value of Authenticated is true and you can then do the action you want, in the example we’re displaying an alert, for example taking the user to a secure page within your app, or before they take an action that you want to confirm the identity of the user.

This should leave you with a prompt that looks similar to this:

Testing

You’re able to test biometric authentication in both the Android and iOS emulators. With Android, just ensure that you have setup the finger print within the specific emulator that you’re running.

iPhone - Device > Features > Face ID > Enrolled
Android - Settings (…) > Touch the Sensor

Resources

You can find a link to the GitHub repo with the code for this post here

Xamarin Let’s Build - App Themes

Mike Grant — Mon, 22 Feb 2021 00:00:00 +0000

The theme of your app is what makes it stand out, fit in with your brand identity and create a lasting impression. With Xamarin.Forms it’s simple to implement multiple themes and styles, and then use them throughout your application.

Defining the theme colours

The most important aspect of styling your application is the colours that you use. When it comes to creating themes for your application, it’s a good idea to keep the colours separate from the rest of the theme. This allows you to make changes to the app colours without worrying about breaking other elements of the visual style as well as making generating new colour schemes for your app easier, as you won’t have to worry about copying the whole theme everytime you want to create a set of colours.

Below is an example of a minimal set of colours for a light theme in Xamarin.Forms.

<ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms"
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                    x:Class="XamarinFormsDarkTheme.Styles.LightTheme">
    <Color x:Key="NavigationPrimary">#2196F3</Color>
    <Color x:Key="BackgroundColor">#FFFFFF</Color>
    <Color x:Key="TextPrimaryColor">#B00000</Color>
    <Color x:Key="TextSecondaryColor">#800000</Color>
    <Color x:Key="TextTernaryColor">#C8C8C8</Color>
</ResourceDictionary>

Creating the app theme

Now that we have the colours defined, we can use them to make our app pop. Currently, we’re not using any of the colours that we’ve defined in our app. To do this, we need to start building the app theme. Before we start, there are a couple of terms to be aware of when working with styles in Xamarin.Forms.

Explicit Styles - An explicit style is used for when you want to target a XAML element by using a key. These will have a x:Key defined.
Implicit Styles - An implicit style will apply to all XAML elements of the targetted type.

If you want more information regarding any of these terms, Microsoft’s documentation explains explicit and implicit styles in more detail.

To start with, we need to import the colours that we defined earlier. This is achieved by adding a ResourceDictionary to the Application.Resources that references our colours. From there we can begin to build up the styles that we want to use throughout our application. I would recommend if you’re planning on adding theme switching of any kind (user selectable, or based on the device theme) to make sure that you reference the colours as a DyanmicResource. This will allow you to update the resource dynamically, which is not achievable with a StaticResource.

Below is an example of an app theme, using one set of colours

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamFormsAppTheme.App">
    <Application.Resources>
        <ResourceDictionary Source="/Themes/LightTheme.xaml"/>
        <Style TargetType="NavigationPage">
            <Setter Property="BarBackgroundColor" Value="{DynamicResource NavigationPrimary}" />
            <Setter Property="BarTextColor" Value="White" />
            <Setter Property="BackgroundColor" Value="{DynamicResource BackgroundColor}" />
        </Style>
        <Style TargetType="Label">
            <Setter Property="TextColor" Value="{DynamicResource TextPrimaryColor}" />
        </Style>
    </Application.Resources>
</Application>

Let’s break the example code from above down further to examine what is happening.

<ResourceDictionary Source="/Themes/LightTheme.xaml"/>

This will import the colours that we defined earlier, and make them available for use throughout your application. It’s merely a pointer to our LightTheme.xaml file and will make the colours that we have set in there available to use.

<Style TargetType="Label">
    <Setter Property="TextColor" Value="{DynamicResource TextPrimaryColor}" />
</Style>

This is an implicit style, that will target all XAML elements with a type of Label. We’re using the TextPrimaryColor that we previously declared in LightTheme.xaml and we’re setting the TextColor to be that, in our example this will make all of the text contained in a Label use the colour grey. Any property that you can alter on a XAML element can be overridden in this part.

Resources

If you want to read more about app themes, for example implementing dark mode, you can find more information in my other posts

You can find a link to the GitHub repo with the code for this post here

Xamarin Tips - Screenshot your Android Phone from ADB

Mike Grant — Wed, 02 Sep 2020 23:00:00 +0000

Having the ability to take a screenshot directly from your command prompt will save you a lot of time over the duration of a project. When I’m building an app I know I regularly take screenshots to show features, bugs or just general UI weirdness to others and the time I lose taking it, transferring it to be emailed or shared on Teams is frustrating. A handy one liner can be used to speed this process up.

Taking a screenshot on your Android device

Using the adb command prompt from Visual Studio (Or if you have ADB in your path)

adb exec-out screencap -p > screenshot.png

That’s it! Your screenshot is now saved to the location specified.