Xamarin Android 9-Patch Image Splashscreen

Splashscreen images for Xamarin Android can be tricky to create, as you must account for portrait and landscape modes in a large array of possible screen resolutions and density’s. Fortunately, Android has a solution for this called a 9-Patch image.

This post teaches you how to create a 9-Patch image and correctly scale them for portrait and landscape. It assumes you have already created a splashscreen. Creating a Splashscreen on Xamarin Forms details how to create a Xamarin Android splashscreen if you need to complete this first.

Image Dimensions

Android has many different screen size dimensions as listed below.

 PortraitLandscape
LDPI200x320px320x200px
MDPI320x480px480x320px
HDPI480x800px800x480px
XHDPI720px1280px1280x720px
XXHDPI960x1600px1600x960px
XXXHDPI1280x1920px1920x1280px

I recommend you generate an image for the highest resolution for portrait and landscape. We can then generate a number of 9-Patch Images from these.

9- Patch Image

A 9-patch image is a png that marks a stretchable area of the image using a 1 pixel black line around all 4 edges of the image. These images are saved as <imagename>.9.png. When it has the 9.png as the extension, Android will recognize it is a 9-patch image and use the black lines as a guide to stretch only certain parts of the image.

A 9-Patch image can be created in Android Studio’s 9-Patch tool but considering we are all Xamarin developers, there is a free utility, Simple Nine-patch Generator, that can generate these for you.

9patchimage

The image inside the square will not be distorted on any screen size, but it may be stretched. Using the highest resolution files possible. I recommend you also generate these for a landscape mode as well.

9patchimagelandscape

Once you have defined your aspect ratio locked area, download the zip. It will contain all the resolutions with your <imagename>.9.png.

For your portrait images, copy these files into the drawable folders as detailed in the zip.

Note: When referencing this image in your theme, you do not need to put .9 at the end. Continue to use just <imagename> with no extension. Android figures out the rest.

Support Landscape

Android uses folder suffixes to determine the best image to use for the resolution and mode. Providing resources details this and what order they are appear in. To support Landscape, take your landscape 9-Patch images and place them in the following folders.

  • drawable-land
  • drawable-land-hdpi
  • drawable-land-xhdpi
  • and so on.
Microsoft MVP | Xamarin MVP | Xamarin Certified Developer |
Exrin MVVM Framework | Xamarin Forms Developer | Melbourne, Australia

Related Posts

10 Comments

  1. Don

    Hi Adam,

    I added splash.9.png to drawable folder, but it gives compilation error:

    Xamarin.Android.Common.targets(1790,3): error MSB3375: The file “obj\Debug\android\bin\packaged_resources” does not exist.

    It’s clearly a problem with the file name, it doesn’t like the .9 in the filename.

    If I remove the .9 and just have splash.png as the filename, then it just stretches the image.
    I know the 9-patch works on my image because it looks perfect in the preview in the draw-9-patch tool, it is stretching correctly.

    I am using latest Android stable, and I am in VS 2017.

    Thanks!

    1. Adam Pedley

      I’ve just tried putting an image.9.png in my Android drawable folder, and it built successfully. It is set as an AndroidResource. I’m also using VS2017 and the latest stable Android.

      Do you have any pre-release/beta Build SDK tools installed, if you open up the Android SDK Manager? If so, try deleting these.

  2. ssl

    Great guide, just what I needed.
    No luck with landscape splashscreens though.
    I placed the images in their respective -land- folders, but it’s as if they don’t exist and still load the portrait ones. I tested a few densities, no difference.

    Any ideas?

            1. Adam Pedley

              Long shot here, but remove ConfigChanges.Orientation from your MainActivity.cs Attribute, as see if that works. If not, I think you will need to Google. It’s an Android specific thing, so I wouldn’t bother searching specifically for Xamarin, just Android.

  3. ssl

    Removed ConfigChanges.Orientation but unfortunately nothing changed.
    That’s fine, I’ll continue googling.

    Many thanks for your time Adam, I greatly appreciate it.
    Cheers! 😀

    1. ssl

      Just a follow up, in case someone bumps into this problem.
      Here’s what I found out:

      – My splash image didn’t have any borders, it was cropped right at the edge of the logo. That caused the 9patch utility to derp out and not know which part of the image to repeat.
      – I created a new image with transparent background and a small border around the logo.
      – The 9patch utility from the post didn’t work for me as the resulting image tried to fill the screen by stretching. While I’m pretty sure that’s the result of me not using the correct settings, I found this one http://ticons.fokkezb.nl that worked on the first try with the new image.
      – I didn’t need to use -land- at all. The 9patch image just gets rotated 90° and looks good, no stretching involved.
      – No need to change any code.
      – Just like in the previous comment, if the compilation fails due to “packaged_resources” not existing, try to delete bin and obj folders and clean/rebuild, exclude/refresh/include resources folder in the android project and rebuild, or restart visual studio and rebuild.

      The point is that while this isn’t a real solution, it’s good enough for my needs and it works, as long as you don’t need to load different images for each orientation.

Leave A Comment?