Fullscreen Video Background in Xamarin.Forms

Motivation

A while ago, I stumbled upon an interesting blog post describing how to make a full-screen video background for a cross-platform app. At the time, the post was a using an older version Xamarin and I wondered to myself if I could simplify the solution somewhat. But, as often happens with “side projects”, I put a pin in the idea and… never came back to it. Until now! In this blog post, I’ll discuss how to make a full screen video background for Xamarin, inspired from the original post. The bad news is that this post comes years later than I originally intended. The good news, however, is that Xamarin is leaps and bounds ahead of where it was in 2018, so making this design is now easier than ever! No longer do we need to write custom-renderers or leverage platform-specifics in xaml – we can actually achieve this gorgeous landing page entirely in shared code!

Experimenting with Experimental

The only caveat to this experiment is that we’ll be using MediaElement, a control introduced in Xamarin.Forms 4.5, but is still in Preview as of time of writing (currently at 4.8). In my experience, “Preview” elements are generally pretty usable, but you’ll need to keep an eye out for odd quirks per-platform or interactions with layout (for example, I had a quite the struggle with CollectionView in early iterations when rotating the screen). So far, I’ve found MediaElement to be plenty capable for my simple use case, but look out for edge cases in more complex implementations.

With that in mind, we do need to set up some flags to enable our application to properly use the MediaElement. To get started, add the following line to your App.xaml.cs:

Device.SetFlags(new string[]{ "MediaElement_Experimental" });

Before we get too far along, we’ll need to organize some resources. Grab any looping video of your choice (I found one on coverr.co which suited my needs) and copy it to each platform resource folder. For android, that’ll be Resources/raw/your_file.mp4 (if you haven’t added platform resources before, you’ll probably need to create this folder) and set the build action to be AndroidResource. Likewise for iOS, add your file to Resources/your_file.mp4 and ensure the file is set to build as a BundleResource.

With that set, we’re ready to start constructing our page.

Building the Layout

Since our MediaElement is properly enabled, we can just drop the new element right on the page we want to display the video. For this example, I opted for a design that closely follows a sign-in screen; that is to say, interactive fields are roughly centered on top of the video background. We can achieve this with a Grid and proper ordering of our elements, like so:

    <ContentPage.Content>
        <Grid>
            <MediaElement Source="ms-appx:///double_espresso.mp4" Aspect="AspectFill" AutoPlay="True" Volume="0" IsLooping="True" />
            <StackLayout VerticalOptions="Center">
                <Label Text="Coffee Ipsum" Style="{StaticResource Title}"/>
                <Entry x:Name="Username" Placeholder="User name" Keyboard="Email" ReturnType="Next"/>
                <Entry x:Name="Password" Placeholder="Password" Keyboard="Text" IsPassword="True" ReturnType="Done"/>
                <Button Text="Sign In"/>
            </StackLayout>
        </Grid>
    </ContentPage.Content>

We’ll also need to add a few critical properties to the MediaElement to make it behave in a visually appealing way. First, we add our source:

Source="ms-appx:///double_espresso.mp4"

Xamarin automatically resolves the path up to the default resource folder per-platform. So, if for some reason you have nested folders in the directories discussed above, it’ll behoove you to have them match for both iOS and Android. Now is a good time to launch the app and make sure everything is behaving as intended; if the video doesn’t appear to load, double check you have the correct default resource folder and that the file is set to build properly. You can also easily check to make sure your MediaElement is rendered and functioning by changing the source to a web-hosted source, like so:

Source="https://sec.ch9.ms/ch9/5d93/a1eab4bf-3288-4faf-81c4-294402a85d93/XamarinShow_mid.mp4"

N.B – in my experience, the MediaElement doesn’t respond well to “Hot Reload”, so you may need to relaunch after making any changes. Assuming your video is playing as expected though, we can add a few more properties to make the user experience more pleasant:

• Aspect="AspectFill" – ensures the video covers the entirety of the screen without affecting the aspect ratio. If your video, like mine, is “landscape”, try a variety of view ports and screen resolutions to ensure the content appears visually appealing in most configurations, or crop the video to be portrait-oriented for a much closer approximation
• AutoPlay="True" – starts the video automatically. Since we’re hiding the playback controls from the user, we’ll need this in order for the video to play
• Volume="0" – effectively mutes the video. Adjust accordingly if you want your video to have some sound associated with playback
• IsLooping="True" – ensures our video will restart from the beginning once it reaches the end of playback

Wrapping Up

At this point, we can restart our app and should see something that looks and behaves as intended. I’ve added some other styles to my page to make it appear to my liking;

    <ContentPage.Resources>
        <Style TargetType="StackLayout">
            <Setter Property="Spacing" Value="0"/>
            <Setter Property="Margin" Value="35,0,35,150"/>
        </Style>
        <Style TargetType="Entry">
            <Setter Property="TextColor" Value="White"/>
            <Setter Property="PlaceholderColor" Value="#99ffffff"/>
            <Setter Property="BackgroundColor" Value="#66000000"/>
            <Setter Property="Margin" Value="0,0,0,15"/>
            <Setter Property="HeightRequest" Value="50"/>
        </Style>
        <Style TargetType="Button">
            <Setter Property="BackgroundColor" Value="Transparent"/>
            <Setter Property="TextColor" Value="White"/>
        </Style>

        <Style x:Key="Title" TargetType="Label">
            <Setter Property="FontAttributes" Value="Italic" />
            <Setter Property="FontSize" Value="40"/>
            <Setter Property="TextColor" Value="White"/>
            <Setter Property="Opacity" Value="0.85"/>
            <Setter Property="Margin" Value="0,0,0,20"/>
            <Setter Property="HorizontalOptions" Value="CenterAndExpand"/>
        </Style>
    </ContentPage.Resources>

With this configuration, our running app should now look like this:

Our video background plays behind the sign-in form as expected

Lovely! We have our video background for our sign-in screen with ease. For more uses and full details on MediaElement, take a look at the official documentation.