Log in to AnswerLog in to Follow
2018-05-30 09-47-43
José Fábio Vieira
Staff
525Views
2Comments
Solved
Deep-Dive in SplashScreen, Status Bar and Navigation Bar!
Discussion
Mobile
How-to
OutSystems Widgets

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:

  • Splash Screen
  • Status Bar 
  • Navigation Bar

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:

  1. The operating system will start an activity with a blank theme, by default, it shows a gray/black screen and status/navigation bar remains with default values
  2. Cordova Plugin SplashScreen will use a different theme (yes! you can check the code)
  3. Only once we start the OutSystems SplashScreen is that we can fully have our Status/Navigation bar colors kicking in!!!!

It seems a little bit odd for a B2C mobile application and a flickering experience! Let us see that without reducing the speed: 


>>>>> DISCLAIMER: <<<<<

>>>>> DISCLAIMER: <<<<<

  • I'm not an expert on Native Mobile or in Cordova Applications
  • This was just pure recreational!! Don't expect support or maintenance 
  • Just sharing the knowledge. Use at your own risk! 
  • Tested on 1 android device and generated using MABS (5.0)
  • It may not work on previous MABS versions as some settings are dependent on the running API, investigate by yourself the compatibility between different versions

>>>>> DISCLAIMER: <<<<<

>>>>> 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! 

  • Do we have a WebView? No
  • Can I add Java code? No
  • Then, what the...!? Look at the AndroidManifest.xml

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

  1. Create the Styles.xml in resources with the custom theme and all the settings/values
  2. Change the AndroidManifest.xml theme to use the custom theme

Let us check the outcome of this change: 

* Speed reduced 50%


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:


Let us check the outcome of this change: 

* Speed reduced 50%


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


10
0
24 Jun 2019
2018-05-30 09-47-43
José Fábio Vieira
Staff
Solution

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 :( 

6
0
24 Jun 2019

Hello all, 


From time to time, someone ask me for the code of this investigation, unfortunately, I no longer have it and since it has been a few years things maybe not be the same, so I decided to share my investigation path and how I managed to improve the splash screen transition

  1. Install the Cordova, IDE, and SDK for the target platforms
  2. Build and generate a blank slate Cordova App with the plugins you need for investigation purposes (Create your first Cordova app)
  3. Cordova will add the projects for the target platforms you have chosen, one for Android and another for iOS 
  4. Open the desired project and learn how and what you need to customise  
  5. Takeaways of these learnings, can I do it with a Cordova Hook? 

I found that I will definitely need a Cordova Hook, that would allow me to manipulate certain files before_build, so the next step was to build the hook to manipulate code with code (a very high-risk approach)

  1. Create a new blank slate Cordova app with the plugins you need (don't customize anything) 
  2. Create the Cordova Hook to manipulate code using code, basically what you did during the investigation, and test it
    • Try to compile and see if it works (if you need resources just add them manually for the time being) 
    • Cordova Hook can open files and you can change the code before the build is going to happens
    • You need to understand JS and Cordova Hooks

Once my Cordova Hook worked just using Cordova, I started to invest my time on how to integrate with OutSystems, I found that I needed both the Hook and some OutSystems features, by using the Extensibility Configuration for resources namely I could add them in the right path, and the Cordova Hook to do manipulations before_build 

  1. I built a simplified version of the original Cordova Hook and tried to do some small changes and generate the build
    • After that I iterate the Cordova Hook to implement more changes, that way allows you to understand small pieces that worked before and stopped after the first successful build

Once again the approach has its risks and if MABS underlying technology (Cordova CLI, SDKs, etc) changes you need to accommodate your code 

0
0
18 Jul
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.