2

I have a Xamarin.Forms app, but this question is only concerning Android.

I have a splash screen with an logo and a background color which I want to update. I use a splash theme style, which refers to a xml containing the image.

Theme:

enter image description here

XML

enter image description here

Then I use a splash activity to make it work and it works perfectly.

Now I want to use an image for a background instead of a color, so what I did was to create this background image with the logo on top, save that as one image and use that as the splash screen. This is causing some problems.

The image displays too small on the screen and I want this image to fit the screen (thus fullscreen with a locked aspect ratio), but I cannot get it to work nicely. The only option I could find was 'fill', which causes the image to deform. I could get it perfect on my screen, but a screen with a different ratio might see the deformed image then. The image I have is a square to make sure that when using fit, the entire screen is filled. Now I'm simply looking for an method to make the image fit the screen, rather than fill the screen.

I tried to visualize my question here:

enter image description here

So I have a square image on the left and when displaying on the phone (right) then it should fit the screen without changing the aspect ratio.

I've read something wrapping the image inside the xml and set it there, but that didn't work for me.

I hope someone can help.

Ganesh Gebhard
  • 453
  • 1
  • 7
  • 20

1 Answers1

1

It is same as to your approach. It's working for me. "launchscreen" is the background image with different size and "testappwhitecolor" is the color of the background image.

XML

<?xml version="1.0" encoding="UTF-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
   <item>
    <color android:color="@color/testappwhitecolor" />
   </item>
  <item
      android:drawable="@drawable/launchscreen"
      android:gravity="center"/>
</layer-list>

THEME

    <style name="Theme.Splash" parent="@style/Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/background_splash_screen</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowDisablePreview">false</item>
        <item name="android:windowAnimationStyle">@null</item>
    </style>

enter image description here

Ranjit
  • 833
  • 8
  • 15
  • Okay and now I want to replace the background color with an image that fits the entire screen with respect to the aspect ratio. – Ganesh Gebhard Feb 20 '21 at 18:18
  • You need to replace background color (android:color="@color/testappwhitecolor") with the image's background color for ex. if your image background color is red then replace testappwhitecolor with red color. And place the image for all different screen sizes in the respective folder. – Ranjit Feb 21 '21 at 05:01
  • Nope didn't work, but I solved it temporary with filling the screen. It's not that great, but it works. – Ganesh Gebhard Feb 25 '21 at 13:28
  • Does app supports landscape and portrait? and does it build for tablet also? – Ranjit Feb 26 '21 at 04:38
  • 2
    @GaneshGebhard the best method is to create images of proper size (pixels) for different device screen and then put these in drawable files (drawable-ldpi,drawable-mdpi,drawable-hdpi,etc) accordingly. – Cherry Bu - MSFT Feb 26 '21 at 06:25
  • @Ganesh - I think, you just need to fill the logo in SplashScreen xml. – Rakesh Ravi G Jul 14 '21 at 12:18