Hello all!
I just wanted to share an investigation where the focus is on the Android and 3 main features to have a smooth application start and transition until OutSystems Splash Screen.
Each time an application starts it includes 3 basic phases:
And each of these 3 phases we can conclude they will handle the following features in different ways:
In nowadays with mobile applications B2C, it's pretty regular to see full dark mode applications, status bar and navigation bar changing between screens, and to quote the Make OutSystems Apps Stand Out: Splash Screen Customization:
If you’re creating business-to-consumer apps (B2C), you should already know that the selling points are in the details. When you go the extra mile and implement the “wow factor,” you are one step closer to that “5-star rating” you dream about.
A splash screen might feel like too simple a thing, but when it’s done right, it creates a super user experience. When customized to your application’s look and feel, it is seamless and fluid.
And it is with this article in mind that we will begin to explore, the devil is in the details, for example, a simple mobile application with a customized splash screen:
* Speed reduced 50%
Did you notice the screen before the Splash Screen? Did you also notice the status bar or the navigation bar?
In summary, what is happening is:
It seems a little bit odd for a B2C mobile application and a flickering experience! Let us see that without reducing the speed:
>>>>> DISCLAIMER: <<<<<
Now that we saw the behavior, how can we move from this to have a fully smooth transition and with all settings in place?
Let us focus on the first phase when the activity is starting!
The manifest in Cordova Applications as well in Android pure native applications contains a setting to define the application Theme. When an application is generated via MABS (5.0) is included by default the following value:
Well it is possible to create a custom theme and apply the settings we want for our application theme, within my research I found out the resource styles.xml can contain almost all the settings we want!
All we need is to create our own Theme (which inherits from the default theme) set up our settings and values and that's it!
Using a Cordova Hook you can manually build a script to
Let us check the outcome of this change:
The application activity started with a background image the same as the SplashScreen, both Status and Navigation already started with the defined colors! Awesome!
But.. that damn SplashScreen is a buzz killer! It overwrites the settings
Why it didn't change? The answer for that is inside the Java code of the Cordova Plugin
Apparently, the official plugin doesn't support preferences to define Status and/or Navigation customization, sadly it will use the Theme Translucent default settings.
To overcome these developers have to customize the plugin and there are several approaches to solve it over the web. Unfortunately, as MABS service generates the package by our selves we can't directly change the code
Against all best practices and risks, and because I'm a stubborn person, I decided to have a little experiment by changing directly the SplashScreen Java code with the Cordova Hook, the fix I followed is described here:
The smooth transition and opening of the application is much smoother, delightful to our eyes and for a B2C mobile application
Let us see that without reducing the speed:
Final thoughts, the experience of opening the application is much more fluid without disruptions and, yes, I agree this is a big effort to achieve so little but keep in mind it is the first impression of your B2C mobile application
Nevertheless, without the proper support of the underlying technology, this experiment is not advisable as already mentioned I'm not a Native/Cordova Mobile developer :)
What do you guys think?
Any other idea or suggestion to overcome the SplashScreen limitations?
Best Regards,
Fábio
PS: I decided to remove the code/plugin as it uses an unconventional approach and not recommended at all. If you are curious about the code/plugin please contact me directly
And yet another update but this time using Splash Screen with 9 Patch Images!
If you are curious about 9 Patch you can take a look at the android documentation and check how you can create online
Ok, so assuming we already created our 9 Patch images and we use them in the Extensibility Configuration what is going to happen?
Before the compilation, the background.9.png file will be copied to the resource drawable folder (drawable-port-mdpi) with the default file name as screen.png. This file name will not work as Android will treat as a normal png on these two phases:
To actually work Android specifies the file name needs to have the extension .9.png, so our Cordova Hook needs to do extra work to rename these files from screen.png into screen.9.png
Again, unfortunately, the official plugin doesn't support 9 patch files and we need to customize one single to enable the 9 Patch images in the Splash Screen:
It seems there are a lot of pull request in the SplashScreen Git Hub but unfortunately each time we need a specific setting or configuration we have no choice besides customizing the plugin :(