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

I have a unique splash screen, called splash.png and sized 1280×1280, 150dpi I use react-native-bootsplash in my React Native project, but I don’t think it really matters.

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.

[EDIT] Here is the splash original image, with the size reduced enough to have a small size for stackoverflow

splash original image

and here is what it give on screen…

stretched screen image

Add Comment
1 Answer(s)

I think the key here is android:gravity="fill".

I had the same issue when I was implementing it in my application.

My 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>  <style name="BootTheme" parent="AppTheme"> <!-- set bootsplash.xml as background --> <item name="android:background">@drawable/bootsplash</item> 

and my 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:opacity="opaque">     <item>         <bitmap android:src="@mipmap/launch_screen" android:gravity="fill" />     </item> </layer-list> 
Add Comment

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.