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.
Android has many different screen size dimensions as listed below.
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.
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.
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.
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.
- and so on.