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

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>

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>

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"/>

Hope it helps :)

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.

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>