Using Blazor components to build an Android mobile app
Introduction
Blazor was initially developed to build interactive web applications using C#, but can now be used in many platforms when used together with .NET MAUI.
In this post, I’ll show how to use Blazor Hybrid to develop a Who’s that Pokémon game for Android.
What is MAUI?
MAUI (Multi-platform App UI) is a cross-platform framework to create native mobile apps and desktop apps with .NET.
Using MAUI, we can create apps that run on multiple platforms (Windows, MacOS, Android and iOS) with the same codebase (and some specific code for each platform, if necessary).
What is Blazor Hybrid?
Blazor Hybrid allows us to run Blazor components natively in mobile and desktop apps using a Web View with full access to the devices capabilities. There is no need for a server to render the components and WebAssembly isn’t involved.
Installing MAUI
MAUI doesn’t come with Visual Studio or the .NET SDK by default. We need to install its workload manually using the dotnet workload install command:
dotnet workload install maui
ℹ️ The installation process may take some time to complete.
After installing, the MAUI templates will show in Visual Studio. We’ll use the .NET MAUI Blazor Hybrid App.
.NET MAUI Blazor Hybrid App Template
The components
The app is composed mainly of the four components marked in the image and described below.
App components
WhosThatPokemon: Renders the other components + logic to select a random pokemon and check if Pokémon selected by the user is correct;
WhosThatPokemonData: Renders the Pokémon image and name;
PokemonSelector: Component to search and select a Pokémon;
WhosThatPokemonResult: Show if the selected Pokémon was the right one.
Creating a service to store the Pokémon information
First, I created a service to get the list of Pokémon from a public API (PokéAPI) using Refit and cache it locally to be used by any component. This information is static, so there is no need to go to the API every time.
The app uses the MudBlazor library, a free open-source component library for Blazor build entirely with C# (not Javascript wrapped components). The list of components and how to use them can be seen here.
Instructions on how to install may change for newer versions, so I’ll link the official docs.
Configuring the app layout
The Blazor Hybrid app template comes with a MAUI app rendering an Index.razor component page.
Let’s edit it to render the WhosThatPokemon component we’ll create:
1
2
3
@page "/"
<WhosThatPokemon></WhosThatPokemon>
Then, let’s modify the MainLayout.razor removing the menu:
usingBlazorHybridApp.Components.Domain;usingBlazorHybridApp.Components.Services;usingMicrosoft.AspNetCore.Components;usingMudBlazor;namespaceBlazorHybridApp.Components;publicpartialclassPokemonSelector{ [Inject]privatePokemonDataServicePokemonDataService{get;init;}=default!;privateMudAutocomplete<PokemonInfo>_selectedPokemon=default!;privateList<PokemonInfo>?_pokemon;publicPokemonInfo?SelectedPokemon{get;set;}publicvoidClear(){_selectedPokemon.Clear();}protectedoverrideasyncTaskOnInitializedAsync(){awaitGetPokemonListAsync();}privateTask<IEnumerable<PokemonInfo>?>Search(stringvalue){// if text is null or empty, show complete listif(string.IsNullOrEmpty(value))returnTask.FromResult(_pokemon?.Take(10));returnTask.FromResult(_pokemon?.Where(pokemon=>pokemon.Name.Contains(value,StringComparison.InvariantCultureIgnoreCase)).Take(10));}protectedasyncTaskGetPokemonListAsync(){_pokemon=awaitPokemonDataService.GetPokemonListAsync();}}
WhosThatPokemonResult
WhosThatPokemonResult Component
WhosThatPokemonResult.razor
Nothing fancy here, this component just shows the result after selecting a Pokémon.
Here we have to use ::deep to set the css properties for the MudButton. This is necessary because Blazor CSS isolation only works for elements directly below its component hierarchy in the DOM.
To change the status bar color for the app, we have to create a style tag and define the android:statusBarColor and android:navigationBarColor elements in the Platforms/Android/Resources/values/colors.xml file:
Since MAUI applications run on multiple platforms, we can run the app on Windows to debug or do quicker tests. Just select Windows Machine from the Run menu:
Running on Windows
💡 I recommend using an Android physical device when running/debugging on Android, as it is many times faster than running on an emulator. Just connect the device to the computer using an USB cable and the ADB drivers installed, and it will show up in the Run menu: