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) | Exrin | Xamarin Forms Developer | Melbourne, Australia | Open to sponsorship to Canada or US

Related Posts

Leave A Comment?