Show splash screen image with auto fit

Question

I am using the following style to display a splash screen for an android application written in MonoDroid. However, it seems to take the image and maximize it to fit the whole screen while messing up the aspect ratio. Thus, the image looks huge and awful.

Is there a way to get it to maximize, but maintain the aspect ratio so it still looks good?

<style name="Theme.Splash" parent="android:Theme">
  <item name="android:windowBackground">@drawable/splashscreenimage</item>
  <item name="android:windowNoTitle">true</item>
</style>

This is the activity in C# which creates the splash screen and goes to the login.

  [Activity(MainLauncher = true, Theme = "@style/Theme.Splash", NoHistory = true)]
  public class SplashScreenActivity : Activity
  {
    protected override void OnCreate(Bundle bundle)
    {
      base.OnCreate(bundle);

      // Start our real activity
      StartActivity(typeof(LoginActivity));
    }
  }

Furfural

Have a look at this post, it's kind of a similar problem. – Croton

That uses an image view. This is strictly the background of the window. In MonoDroid there is a second or two pause while the environment is loaded. I wanted to display a splash screen during that pause. – Furfural

Answer 1

There are several types of drawables in Android including actual bitmaps, nine-patch, and XML files. Try wrapping your image file with an XML file that gives it attributes and then use the XML file as drawable instead of the source image.

Let's assume your xml file is called scaled_background and your original image is simply background.png:

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:gravity="center"
android:src="@drawable/background" />

Instead of setting your background to reference @drawable/background you'd set it to reference the XML file: @drawable/scaled_background in this example. Details on the scaling modes are mentioned in the Drawable documentation.

Thearchy

while this works by not stretching the image, on tablets i have empty spaces around my splash image. Is it possible to make a color background below the android:src="@drawable/background" in that xml file? – Peekaboo

sure, use layer list :) <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@color/white" /> <item> <bitmap xmlns:android="http://schemas.android.com/apk/res/android" android:gravity="bottom|center_horizontal" android:scaleGravity="" android:src="@drawable/background_splash" android:tileMode="disabled" /> </item> </layer-list> – Fem

Try wrapping your image file with an XML file that gives it attributes Could you give an exampe for this? How do I wrap a vector-drawable in an XML-file? – Hexose

Answer 2

It seems to take the image and maximize it to fit the whole screen while messing up the aspect ratio. Thus, the image looks huge and awful.

Is there a way to get it to maximize, but maintain the aspect ratio so it still looks good?

The reason the image gets enlarged is because the image you use has higher pixels than the resolution of the device screen you are testing the app in. For solving this, 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.

Following is a list of minimum screen size for various displays as provided by Google (all in pixels) :-

---

For Android Mobile Devices

LDPI- 426 x 320

MDPI- 470 x 320

HDPI- 640 x 480

XHDPI- 960 x 720

---

For Android Tablet Devices

LDPI- 200 x 320

MDPI- 320 x 480

HDPI- 480 x 800

XHDPI- 720 x 1280

---

Now create an XML drawable in res/drawable which will provide the splash activity’s background in the theme(Theme.Splash) using layer-list. The image is loaded in <bitmap> and is center aligned using the gravity attribute.

<!-- background_splash.xml -->
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:drawable="@color/gray"/>

    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/splashscreenimage"/>
    </item>

</layer-list>

Now modify your style (Theme.Splash) and set background_splash.xml as your splash activity’s background in the theme.

<style name="Theme.Splash" parent="android:Theme">
    <item name="android:windowBackground">@drawable/background_splash.xml</item>
    <item name="android:windowNoTitle">true</item>
</style>

---

With that, the image should be set at center with aspect ratio maintained.

Note: For image resizing, you can use Adobe Photoshop (I find it easier to work with). A bit of experimenting will have to be done to get the correct image size you want for the splash screen.

According to preference, you may also use 9 Patch image so that the image's border can stretch to fit the size of the screen without affecting the static area of the image.

---

Reference Links :

Building Splash Screen: https://plus.google.com/+AndroidDevelopers/posts/Z1Wwainpjhd

Splash Screen Image sizes: android splash screen sizes for ldpi,mdpi, hdpi, xhdpi displays ? - eg : 1024X768 pixels for ldpi

Mckim

Used PNG is stretched to fullscreen – Devious

For API 23+ you should use <item android:gravity="center"> instead of <bitmap android:gravity="center" – Devious

@kaushik How you will mention the image only for tablet. ? – Filariasis