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)

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

<item
    android:drawable="@drawable/vector_najdiflet_logo"

    />

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. Any fix for this?

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.

Hope I this answer can help someone who is running in the same issue!

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/

Answer 3

I do not think this is possible to do with vectors, for devices < API 23, since it is not possible to set the attributes android:height and android:width on the drawable.

To implement my splash screen with a centered icon, I had to export the vector of my logo to .png's for each screen size, and embed a bitmap within the layer-list:

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

    <item
        android:left="20dp"
        android:right="20dp">
        <bitmap
            android:gravity="center"
            android:scaleType="centerInside"
            android:src="@drawable/logo_rasterised" />
    </item>

</layer-list>

Ideally I would not like to have any bitmap images at all in my resources, but at least the splash screen is the only place where I have had to use bitmaps.

Answer 4

Use bitmap and define you image in the src. Set gravity to center

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

    <item android:drawable="@color/color_background_splash_screen"/>
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/ic_logo_splash"/>
    </item>
</layer-list>

Answer 5

Dont put your image in window:Background, instead add as android:src for an imageview for the layout of the SplashScreenActivity.

Answer 6

Dont put your image in window:Background(style.xml),

instead

add an imageView in layout file like this,

  <ImageView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:src="@drawable/vector_najdiflet_logo"
      android:scaleType="centerCrop"/>

try changing,

android:scaleType="centerInside"