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

问题

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...

回答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>

回答2:

Splash screen implemented as a launcher theme is mostly meant for showing logos and not full images. You can try to nine-patch the image for different resolutions, use this website:

http://ticons.fokkezb.nl/

Upload your image (use 3:4 aspect ratio, e.g. 1080x1920, for the best results) and select -> splashes. It will generate nine-patch images for you, which you then need to upload to your res/drawable-hdpi, res/drawalbe-mdpi, res/drawable-xhdpi, res/drawable-xxhdpi and res/drawable-xxxhdpi directories. If they do not exist yet, you can just create them.

Use it like this after uploading nine-patched images:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <bitmap
        android:src="@drawable/background"
        android:gravity="fill" />
</item>
</layer-list>

I was able to achieve reasonable results using the image you provided. Let me know, if this has helped. This is the best you can get. Other option would be to create your own SplashActivity which would show that image for you for a short period of time.

回答3:

The approach with Bitmap did not seem to succeed. Are you happy with an alternative?

What about using a layout for your SplashActivity/-Fragment like the following?

Pretty useful to display additional information like Appversion, Support's contact, Progress etc. - that's why I personally prefer it.

Done in Kotlin working with ViewModels, you might probably know it better for ReactNative.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
            android:id="@+id/iv_splash"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:scaleType="centerCrop"
            app:srcCompat="@drawable/splash"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

As you can see centerCrop is key. It will cut the image, but retain its aspect ratio.

Now inflate the layout in SplashActivity, where you could also let the user sign in or so, then display the result in the layout and when done, switch to MainActivity.

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_splash)
    }

...or Fragment

override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        viewModel = ViewModelProvider.AndroidViewModelFactory(Application())
            .create(viewModel::class.java)
        return inflater.inflate(R.layout.fragment_splash, container, false)
    }

Alternative Solution

Using this as a layout, if you don't plan to display anything more than just the image itself in the future.

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"
    app:srcCompat="@drawable/splash"/>

回答4:

I have done this by using FrameLayout and ImageView. Write down below code in your android/app/src/main/res/drawable/bootsplash.xml:

<FrameLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
>
  <ImageView 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:src="@drawable/splash" 
    android:scaleType="centerCrop" 
  />
</FrameLayout>

回答5:

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>

来源：https://stackoverflow.com/questions/62809424/android-unique-splash-screen-how-to-make-it-fill-screen