CODEWITHSUNDEEP
androidxamarin.androidsplash-screenaspect-ratio
Telavian
Telavian

Reputation: 3832

Show splash screen image with auto fit

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

Upvotes: 30

Views: 43365

Answers (2)

profexorgeek
profexorgeek

Reputation: 1200

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.

Upvotes: 36

Kaushik NP
Kaushik NP

Reputation: 6789

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

Upvotes: 7

Related Questions