Android launch screen image is tiny. How to make it fill the screen?


#1

Hello,

Not sure if you noticed, but on Android the splash (aka launch) screen is too tiny and it doesn’t fill the screen as on iOS. Even the basic Hello World app has a tiny splash screen sitting in the center on Android. I’ve tried to research the various Android sizing/gravity flags (eg fill_horizontal, fill_vertical, fill, etc) but the image always gets distorted and is not proportional.

On iOS, however, this is not an issue and the splash screen seem to fill the window just fine.

I’m enclosing 3 screenshots on the emulators. I’m using two emulators for Android

  1. 480x800 mdpi screen
  2. 1080x1920 xxhdpi screen

On both screens the default Hello World app’s launch screen is a tiny image sitting in the middle of the screen. When you look at the screenshot of the iOS emulator, the splash screen fills the screen nicely. On Android, I made the background fill red so you can see the difference between the background and the splash image.

How can I make the launch screen fill the display proportionally, just like on iOS?

Thanks.


#2

Are you trying to embed the launch screen in your page or the default splash screen activity itself gives you this result in android?


#3

This is the behavior of the default {N} template when you do “tns create APPNAME”. I just made the bg red for better visibility of the “issue”.

I want to make the launch screen behave like on iOS, so it proportionally fills the screen, as opposed to being so tiny in the middle. So far I don’t have much luck with it.


#4

It seems the issue is that {N} default @drawable splash screen sizes are wrong. They are too small.

I have found multiple references that the correct splash screen sizes for Android are as follows (portrait):

  1. LDPI: 200x320
  2. MDPI: 320x480
  3. HDPI: 480x800
  4. XHDPI: 720x1280
  5. XXHDPI: 960x1600
  6. XXXHDPI: 1280x1920

The original splash screen sizes that come with the default {N} templates are about half of these sizes, so the splash screens appeared tiny. Redoing my splash screens at these sizes corrected the issue.

A few references:




#5

I was not able to reproduce the issue with just a new blank template, with CLI 3.4.2 (latest stable). I’m afraid something you might done to resources brought that issue on your end.

Also I cross checked the resolution of the background images, it is still higher than what you have given here and sufficient to fill the screen.


#6

I assure you that I have not done anything to any of the resources. I started {N} back in early December. I have all my test projects since then, and all of them have 192x256 as the resolution for the mdpi image, and in the early days I wasn’t even building for Android. I’m using CLI 3.4.1.

These resolutions are not for the background images, what you were referring to. The bg images are just a plain color. I was referring to the actual launch screen images (called “logo.png”) which are centered on top of the background.


#7

Yes, you are right about background images. They are just plain colored. But the logo image need not to follow the full screen resolution as it is just going to be placed in center of screen.

But at least I was not able to reproduce the issue. I have been creating new projects for development / testing purpose every here and then and I build for Android quite often. Recently or now never faced this issue. Not sure what could be wrong on your end with the CLI or setup. But glad you had fix.


#8

Thanks for the feedback @manojdcoder. I’m curious can you tell me what is the default size of your mdpi “logo.png” that comes with any basic template?


#9

It’s 192 x 256, as I already said it need not to follow the full screen dimension. It had to just fix at center of the screen.


#10

Ok, so basically you have the same thing, then. Since I’m new to Android I wasn’t sure about all this. I remember that if you change a single icon or LaunchImage on the iOS side, the CLI will keep doing full builds even for a small change (I have posted this not long ago). And I wanted to make sure I’m not running into the same issue on Android. But I understand now. Thanks for clarifying @manojdcoder!

PS: I think what threw me off is that the basic templates show the {N} splash full screen on iOS but not on Android.