How to change the size of image in splash screen?

Question

I have a problem, I had a splash screen with an image and a background color but the image rendering is tiny, how can I change it?

This is my launch_background.xml:

<?xml version="1.0" encoding="utf-8"?>

<item>
    <bitmap android:gravity="center" android:src="@drawable/splash" />
</item>

If you know a package or a way to solve it on Android and IOS it will be perfect.

Answer 1

I had the same issue but here is what I did.

I changed the "center" value to "fill"

that is

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

Answer 2

Simple: create bigger logo files

I was also having the same problem, because my logo as you can in this print below, was very small:

Why?

Why the files that were in the "hdpi", "mdpi", "xhdpi", "xxhdpi", "xxxhdpi" folders respectively were in pixel sizes: 48, 72, 96, 144, 192, 512

How to fix?

Create bigger logo files

In my case, I doubled the pixel size of the files in the folders I mentioned above, so the "hdpi", "mdpi", "xhdpi", "xxhdpi", "xxxhdpi" folders were respectively pixel sizes: 88, 144, 192, 288, 384, 1024. And the result was this:

Answer 3

you can do it the way you do for app icon

set in background launcher :

<item>
    <bitmap
        android:layout_height="fill_parent"
        android:gravity="center"
        android:src="@mipmap/splash" />
</item>

then resize your splash image and put in the corresponding folder in mipmap as below

LDPI:  320x200 px
MDPI: 480x320 px
HDPI: 800x480 px
XHDPI: 1280x720 px
XXHDPI:1600x960 px
XXXHDPI:1920x1280 px

Folder and code image

Answer 4

It seems to be possible in Android starting from API 23 by doing something like this:

    <item
        android:gravity="center"
        android:drawable="@drawable/logo_splash"
        android:width="100dp"
        android:height="100dp">

But I don't know how this will play with different resolutions and screens.

If you know a package or a way to solve it on Android and IOS it will be perfect. :)

There is a plugin that seems to do what you are looking for without the needs for you to configure both IOS & Android, please take a look at https://github.com/henriquearthur/flutter_native_splash

EDIT: Assuming from your question you are talking about a native splash screen, not just the initial page of your app.

Answer 5

I suggest you to use the animated splash available in pub.dev. Animated Splash I have used this plugin in my App and customized it according to my needs. In there, you can change the size of the image and it is written in dart so you can understand it easily also. Hope it help.

Answer 6

You can also set your desired height and width like this:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <color android:color="@color/ic_launcher_background"/>
    </item>

    <item
            android:width="106dp"
            android:height="104dp"
            android:drawable="@drawable/splash"
            android:gravity="center"/>

</layer-list>

Answer 7

Try something like this :

Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Container(
              child: Image.asset(
                  'images/YOUR_IMAGE_URL.png',
                  height: MediaQuery.of(context).size.width / 2.5,
                  width: MediaQuery.of(context).size.width / 2.5,
              )
          ))
     );
  }