Show splash screen image with auto fit

39,852

Solution 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.

Solution 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

Share:
39,852
Telavian
Author by

Telavian

CTO of a small startup working to redefine how the billions of available consumer reviews are packaged for consumption.

Updated on July 09, 2022

Comments

  • Telavian
    Telavian over 1 year

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