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));
    }
  }

Have a look at this [post](http://stackoverflow.com/questions/2521959/how-to-scale-an-image-in-imageview-to-keep-the-aspect-ratio), it's kind of a similar problem. — Michael, Sep 26 '12 at 18:14
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. — Telavian, Sep 27 '12 at 19:12

score 34 · Accepted Answer · edited Jan 01 '18 at 11:49

34

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.

edited Jan 01 '18 at 11:49

Salman Naseem

464
4
16

answered Sep 27 '12 at 22:39

profexorgeek

1,140
9
19

1

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? – lxknvlk Apr 07 '16 at 20:56
3

sure, use layer list :) ` ` – Pavel Biryukov Jun 03 '16 at 11:07
6

_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? – Emil S. Nov 09 '18 at 14:12

score 8 · Answer 2 · edited May 23 '17 at 10:31

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

Used PNG is stretched to fullscreen – Konstantin Konopko Sep 04 '18 at 19:45 — Konstantin Konopko, Sep 04 '18 at 19:45
For API 23+ you should use `` instead of ` – Konstantin Konopko Sep 04 '18 at 20:26 — Konstantin Konopko, Sep 04 '18 at 20:26
@kaushik How you will mention the image only for tablet. ? – Suchith May 29 '19 at 09:46 — Suchith, May 29 '19 at 09:46

Show splash screen image with auto fit

2 Answers2