I am developing a mobile app using Qt Quick Controls 2, and would like to display a splash screen while the app is being initialised. Currently, this is what the user sees when the app is started:
A dark background with the name of the app as a header.
A blank, white background.
The application window.
In that order for an Android 6 Marshmallow smartphone. If I add the splash screen to the application window, perhaps in a stack view, and then transition to the actual contents when it is initialised, (1) and (2) would still remain, right? Is there any way to tell Qt to display the splash screen instead of (1) and (2), or at least instead of (1)?
First in _yourProject_/android/res/drawable create a splash.xml file:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" >
<solid android:color="#353535"/>
</shape>
</item>
<item>
<bitmap android:src="#drawable/icon" android:gravity="center" />
</item>
</layer-list>
That sets the splash screen background color and icon that will be centered on the screen.
Then in /android/res/values create a theme.xml file:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="#android:style/Theme.DeviceDefault.Light.NoActionBar">
<item name="android:windowBackground">#drawable/splash</item>
</style>
</resources>
Then in the android manifest file, on the line <activity android:configChanges= add android:theme="#style/AppTheme" after the label settings, then scroll down to the <!-- Splash screen --> section and uncomment and modify the line:
<meta-data android:name="android.app.splash_screen_drawable" android:resource="#drawable/splash"/>
Replace the #353535 color with whatever the color of your application window is set to for smooth transition. The image is optional.
I just tested that and it works. Perhaps someone else will be able to provide a solution for iOS.
Related
Oddly enough my android apps splash screen is white on my android emulator but black on my personal phone when I load the APK on it.
When I went to investigate I see this in the Android manifest:
<meta-data
android:name="io.flutter.embedding.android.NormalTheme"
android:resource="#style/NormalTheme"
/>
And when I go to res drawable I see a file called launch_background.xml which sounds promising.
But when I look inside it, it shows:
<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#android:color/white" />
<!-- You can insert your own image assets here -->
<!-- <item>
<bitmap
android:gravity="center"
android:src="#mipmap/launch_image" />
</item> -->
</layer-list>
Which is odd because it says its white. So I am not sure what I am missing on why my cell phone boots it black. I want to make the splash screen background color white for everyone.
create a new file named color.xml in values in given route => your_project_name\android\app\src\main\res\values and add this code.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="background_color">#ffffff</color>
</resources>
after that use this line in both drwables under layer-list tag
<item android:drawable="#color/background_color" />
this will solve your issue
If your Emulator shows a white screen and your phone shows dark maybe it's because of the dark theme on your mobile phone
in your phone settings change the dark mode to Light mode
settings -> display -> Lightmode
if your phone has a dark theme all the white colors will appear as black hope it helps
maybe you can add a white image ;
Android/App/res/drawable/white.png
<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#android:color/white" />
<item>
<bitmap
android:gravity="center"
android:src="#drawable/white" />
</item>
</layer-list>
Are you using a dark theme on your phone? Like, do your Messenger app, email app etc have a dark background?
And if so, if you change that to a light theme, does that give your splash screen a white background?
(I was thinking since your Android manifest talks about "normal theme"... That's gotta be the overall theme of the phone, right? Perhaps remove that from the manifest?)
Also, if you follow this method to set your splash screen, including background color, does it help?:
https://youtu.be/JVpFNfnuOZM
Assuming this is my app icon
It works fine in Android 11 (and below)
but when I install the app in Android 12, there is a white border around the icon in the splash screen (also a black border around the top app icon.)
Is there any way I can remove those borders?
below is my splash code
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:opacity="opaque">
<item android:drawable="#color/colorBlack"/>
<item>
<bitmap
android:src="#drawable/notice"/>
</item>
</layer-list>
Also this line in my AndroidManifest.xml
android:roundIcon="#drawable/notice"
There seems a misusage in your terminology splash screen. It should be called Recents screen in the screen shots.
So this is not a problem about Splash screen. This should be a problem about a launcher icon using Adaptive icon.
By default, in template projects on Android Studio, the launcher icons in the Manifest are:
android:icon="#mipmap/ic_launcher"
android:roundIcon="#mipmap/ic_launcher_round"
And both of mipmaps are:
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
<background android:drawable="#drawable/ic_launcher_background" />
<foreground android:drawable="#drawable/ic_launcher_foreground" />
</adaptive-icon>
Lastly, both of these ic_launcher_foreground and ic_launcher_background are vector drawables. (note that you can also use #color instead of a vector drawable)
As you can notice, layer-list or bitmap is not used. You can use an Adaptive icon on API-26+.
requireActivity().recreate()
I'm using above code after chainging locale. there's a black screen during requireActivity().recreate() (for about 0.3sec).
I wanna change the black screen with splash screen or progress bar...
Is there any way to do it? Thank you.
when you call requireActivity().recreate() new instance of activity will be created and it takes some time so in this duration, you will see the default background of the window , you can change the defaults but it doest support progress bar , you can change the color and add a drawable to it which I think helps you enough
In order to remove the default black screen make a custom theme:
in drawable folder:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<!-- black background -->
<solid android:color="#color/colorBlack" />
</shape>
</item>
<!-- launcher icon -->
<item android:drawable="#mipmap/ic_launcher_foreground" android:height="150dp" android:width="150dp" android:gravity="center" />
then configure it in your styles file:
<item name="android:windowBackground">#drawable/starting_screen</item>
hope it helped 👍🏻👍🏻
I added a launch screen consisting of a PNG image to my Flutter app (Android). There is a very noticeable "fade to black" between the launch screen and the Flutter app being displayed. I'm not talking about a sudden black screen, but the launch screen really fades out for ~500 ms and then the Flutter app appears.
I have followed the migration guide to use Android Embedding v2 (but I wasn't using a splash screen before, so I don't know if the migration is the cause of this issue).
This is my launch_background.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:gravity="fill"
android:drawable="#drawable/wood1" />
<item>
<bitmap
android:gravity="center"
android:src="#drawable/splash_foreground" />
</item>
</layer-list>
and this is my normal_background.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:gravity="fill"
android:drawable="#drawable/wood1" />
</layer-list>
Even if I replace the image in launch_background.xml with just a white color, it still fades to black before rendering the Flutter app.
Any ideas what could be causing the launch screen to fade to black before rendering the app?
Maybe you forgot to add this on your AndroidManifest, between < activity> ... < /activity>
<meta-data
android:name="io.flutter.embedding.android.SplashScreenDrawable"
android:resource="#drawable/launch_background"
/>
I want to make the splash screen background transparent so that it shows only an icon on the screen when the app starts.
What I have done so far in launch_background.xml for Android:
<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#android:color/transparent" />
<item>
<bitmap
android:src="#drawable/index"
android:gravity="center"
/>
</item>
</layer-list>
But what I got was a black background like:
The Image
What I want, something like this:
The image
How to approach this problem properly? Thank you!
BTW: What about IOS?
I downloaded a transparent image, and used it as my background image under flutter_native_splash in flutter. It worked perfectly.
flutter_native_splash:
background_image: "lib/assets/transpbackground.png"
image: lib/assets/translogo.png
android_gravity: center
fullscreen: true
ios_content_mode: center
..android: true
..ios: true