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

Question

I have a unique splash screen, called splash.png and sized 1280x1280, 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

and here is what it give on screen...

Answer 1

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>

Answer 2

for center image with background image fillup.. step1: create a Drawable resource file inside drawable in res step2: paste the code below replacing with background images as your image and logo

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/backgroundmapsneww"
    android:gravity="fill"
    />
<item
    android:height="100dp"
    android:width="100dp"
    android:gravity="center"
    android:drawable="@drawable/logo"
    >
</item>