Android unique splash screen : how to make it fill screen?

[arnaudambro]

I have a unique splash screen, called splash.png and sized 1280x1280, 150dp

My question is simple : how can I make my splash screen, in portrait mode, be full height, not less, not more, and keep its aspect ratio so that the picture fills the screen.
Like a background-size: cover in css.
Or like an easy <Image resizeMode="cover" style={{ height: '100%' }} /> in React Native.

So I have :

android/app/src/main/res/values/styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:textColor">#000000</item>
    </style>

    <!-- BootTheme should inherit from AppTheme -->
    <style name="BootTheme" parent="AppTheme">
        <!-- set the generated bootsplash.xml drawable as activity background -->
        <item name="android:windowBackground">@drawable/bootsplash</item>
        <item name="android:windowNoTitle">true</item>
    </style>

</resources>

android/app/src/main/res/drawable/bootsplash.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
    <item>
      <!-- your logo, centered horizontally and vertically -->
      <bitmap
        android:layout_height="fill_parent"
        android:src="@drawable/splash"
        android:scaleType="centerInside"
        android:gravity="center" />
    </item>
</layer-list>

And my splash.png in android/app/src/main/res/drawable/splash.png

I tried a lot of things, a lot of combinations of android:layout_height, android:scaleType and all, and I always end-up with a splash image's height overflowing the screen height.

💻 My environment

• react-native-bootsplash version: 2.2.4
• react-native version: 0.62.2
• Platform: ios / android / both: android
• OS version: 10
• Device: Emulator Armor_6_API_29
• Simulator: yes
• Android Studio version: 3.6.1
• Android buildToolsVersion: ?

[zoontek]

@arnaudambro Hi. 👋 Sorry, but I don't see how is that an issue with the library, or a question about it? It's more a general question about Android development.

Check #75 maybe. Also, don't use android:windowBackground, the documentation recommend android:background.
If it doesn't the trick, I recommend https://stackoverflow.com/ to ask for help on this kind of topic.

[arnaudambro]

Hi @zoontek , I understand but I still ask my question here because I can't find any answer anywhere on the web... I tried so many combinations now, of android:gravity/bitmap/item/android:scaleType, and I am so desperate, just to fill a splash screen full screen ! It drives me crazy...
If you have an answer, I'm all hears !

[jedashford]

@arnaudambro you can change the android:gravity to 'fill' like this:
`

<item>
    <bitmap android:src="@drawable/launch_screen" android:gravity="fill" />
</item>

`

[arnaudambro]

This doesn't keep the aspect ratio of the picture
I also asked on stackoverflow but no good answer. I guess it's not feasible on Android !

[zoontek]

@arnaudambro I tried to recreate it yesterday too. Indeed, android seems not supporting centerCrop on background images (which is the way to go for splash screen creation, according to Google itself).

This might explain why some apps splash screen is different between iOS and Android (Slack…)

[arnaudambro]

I almost succeeded by setting the params the following way:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
      <bitmap
        android:src="@drawable/splash"
        android:gravity="center|bottom|clip_vertical"
      />
    </item>
</layer-list>

vertically it's OK, but horizontally the image is still a little bit stretched.
I give up, it seems not feasible...

[zoontek]

@arnaudambro I think

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
      <bitmap
        android:src="@drawable/splash"
        android:gravity="center|bottom" <!-- or center|top / center|left / center|right -->
      />
    </item>
</layer-list>

• using the right background color and providing images larger than screen pixel density (https://developer.android.com/training/multiscreen/screendensities) would work. But it will not allow covering the whole screen.

An alternative could be split the bitmap in multiple ones: https://developer.android.com/studio/write/draw9patch

A bit complex for just a splash screen IMHO.

[giacomocerquone]

i'm banging my head around the wall trying to figure out how to configure an imageview to keep the aspect ratio of an image and fill the display at the same time but it seems that examples of xml files (like the on in react-native-splash-screen) doesn't seem to work°