SplashScreen with Vector stretched full screen

Question

I did my splash screen with this tutorial and it works great:

• https://www.bignerdranch.com/blog/splash-screens-the-right-way/

Basically I set up a splascreen through theme:

<style name="ThemeSplash" parent="Theme.AppCompat.NoActionBar">     <item name="android:windowBackground">@drawable/drawable_splashcreen</item> </style> 

I wanted to put a vector image inside like this: (drawable_splashcreen)

<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android">     <item android:drawable="@color/color_background_splash_screen" />     <item android:drawable="@drawable/vector_najdiflet_logo" /> </layer-list> 

The image will streched through the full screen. On API 23 it works like it should have. But on older devices it just streches. I tried width, height and even messed up with viewports but no success.

Answer 1

I stumbled upon the same problem. Unfortunately there does not seem to be a possibility to make the splash screen work with just a vector drawable for pre API 23.

The problem is you can't load VectorDrawableCompat outside of the process, like in this case in your themes android:windowBackground. So what is likely happening here is, that on API 21 the Vector get's converted to a PNG to be compatible. So in the <layered-list>the converted PNG is inserted into the <item> element, which causes the bitmap to stretch to all edges, because it's missing the <bitmap> element.

So my solution is the following: Create a drawable_splashscreen.xml inside the folder drawables-v23 which looks like the following for the vector drawable.

<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"  android:opacity="opaque">     <item android:drawable="?attr/colorPrimary"/>     <item android:drawable="@drawable/ic_splashscreen" android:gravity="center"/> </layer-list> 

Then create another drawable_splashscreen.xml but inside the regular drawables folder:

<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"  android:opacity="opaque">     <item android:drawable="?attr/colorPrimary"/>     <item>         <bitmap android:src="@drawable/ic_splashscreen" android:gravity="center"/>     </item> </layer-list> 

Notice the <bitmap> element. So now, when the PNG is used on pre API 23 devices it will be displayed properly and won't be stretched to the whole background.

Unfortunately you also have to provide splash screen as PNG for this to work in the old APIs.

But for every device with API 23+ the vector drawable will be used.

Answer 2

For full screen splash try to use:

android:gravity="fill_horizontal|fill_vertical" 

If not resolve maybe the solution is create separated images for each resolution size.

---

Most common resolutions:

• Small = 240 x 320px (ldpi)
• Medium = 320 x 480px (mdpi)
• Large = 480 x 800px (hdpi)
• xLarge = 640 x 960px (xhdpi)

Portrait Format:

• ldpi = 240 x 360px (0.75 x mdpi)
• mdpi = 320 x 480px (base density)
• hdpi = 480 x 720px (1.5 x mdpi)
• xhdpi = 640 x 960px (2 x mdpi)
• xxhdpi = 960 x 1440px (3 x mdpi)
• xxxhdpi = 1080 x 1920px (4 x mdpi)

Landscape Format (inverted portrait format):

• ldpi = 360 x 240px (0.75 x mdpi)
• mdpi = 480 x 320px (base density)
• hdpi = 720 x 480px (1.5 x mdpi)
• xhdpi = 960 x 640px (2 x mdpi)
• xxhdpi = 1440 x 960px (3 x mdpi)
• xxxhdpi = 1920 x 1080px (4 x mdpi)

---

More about you can find here:

1. https://design.google.com/devices/

2. Android splash screen image sizes to fit all devices

3. http://vinsol.com/blog/2014/11/20/tips-for-designers-from-a-developer/