gluon android splash screen

I had created small mobile apps using Gluon Mobile and now on beta testing trough Google Play. but I realized that start-time of my mobile apps on android device is quite slow (take around more than 10 seconds).

it would be great if I can add a SplashScreen before the apps is loaded so user will not waiting in total for 10 times, but they feel only half of it because they got response from apps while seeing the SplashScreen.

on native android development, we just build 2 activity (one for SplashScreen and one the main apps) like blow :

<activity
android:name=".SplashScreen">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name=".MainActivity"
android:label="@string/app_name"
>
<intent-filter>
<action android:name="android.intent.action.MAIN" />
</intent-filter>
</activity>

my Question, is there any approach to show SplashScreen that build on JavaFX/GluOn that will be run both on andorid/ios rather than native. is there any disadvantages if we build on javaFX rather than this native approach.

since the the young age of gluon/javaFX on mobile, is not easy to get the best practice the ideal approach. please en-light me

rgrds

While a Splash screen could be a nice idea, actually the Gluon Mobile Multi-View projects created with the Gluon Plugin allow you creating a similar effect by using the Home View as a placeholder for an image or any other lightweight content you want to display, while having all the heavy stuff loaded in a secondary view.

By default, the Home View is the initial view that is loaded during the Application.start() method. The other views won't be loaded until the user switches to them.

With the following view, only when the user clicks on the floating action button, the actual load of the heavy stuff starts, but the splash view on the mobil device is displayed in no time:

public class SplashView extends View {

    public SplashView(String name) {
        super(name);

        setCenter(new ImageView(new Image(getClass().getResourceAsStream("splash.png"))));

        FloatingActionButton action = new FloatingActionButton(MaterialDesignIcon.ARROW_FORWARD.text, e -> 
                MobileApplication.getInstance().switchView(GluonSplash.SECONDARY_VIEW));
        getLayers().add(action);
    }

    @Override
    protected void updateAppBar(AppBar appBar) {
        appBar.setVisible(false);
    }

}

To avoid the need of user intervention, you can get rid of the action button and start loading the second view, after a certain time of displaying the splash.

In this other sample, after the splash view has been shown, a pause transition starts. After one second, it displays the label to indicate the new view will be loaded. At the same time, a task to load that view is started. When all the heavyweight view is loaded, it will be shown.

public class SplashView extends View {

    public SplashView(String name) {
        super(name);

        Label access = new Label("Accessing...");
        access.setTranslateY(200);
        access.setVisible(false);
        setCenter(new StackPane(new ImageView(new Image(getClass().getResourceAsStream("splash.png"))), 
                            access));

        Task<Void> task = new Task<Void>() {

            @Override
            protected Void call() throws Exception {
                Platform.runLater(() -> MobileApplication.getInstance().switchView(GluonSplash.SECONDARY_VIEW));
                return null;
            }
        };

        addEventHandler(LifecycleEvent.SHOWN, e -> {
            PauseTransition pause = new PauseTransition(Duration.seconds(1));
            pause.setOnFinished(f -> {
                access.setVisible(true);
                new Thread(task).start();
            });
            pause.play();
        });

    }

    @Override
    protected void updateAppBar(AppBar appBar) {
        appBar.setVisible(false);
    }

}

SplashView (Gluon Mobile 4.3.2 API), so it can be loaded fast enough to prevent a black screen on a mobile device, If Duration is not specified as an argument, hiding the splash and switching to after it is hidden, to avoid returning to it if the Android Back button is pressed. At a certain moment in the past, Google advised against using a Splash Screen on Android Applications. It was useless. Then, when they have published the Material Design Specifications, some of us have seen that the Splash Screen was now a pattern known as Launch Screen. Ideal to display your brand logo during cold start of applications.

Gluon Mobile 4.0.0 is now available, For a splash screen that displays even earlier, both Android and iOS have support for native splash screens that can also be used. Updated to  Android | Creating a Splash Screen A splash screen is mostly the first screen of the app when it is opened. It is a constant screen which appears for a specific amount of time, generally shows for the first time when the app is launched.

Okay this is old but this still pops up on a google search so here it is. With version 4.x of the plugin, a SplashView is available which hides the appBar by default and can be registered like a normal view only with the name SPLASH_VIEW. The FXML should look like this:

<?xml version="1.0" encoding="UTF-8"?>
<?import com.gluonhq.charm.glisten.mvc.SplashView?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.BorderPane?>

<SplashView fx:id="splash" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" xmlns="http://javafx.com/javafx/9" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.shara.views.SplashPresenter">
   <center>
      <ImageView fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true" BorderPane.alignment="CENTER">
         <image>
            <Image url="@../../../icon.png" />
         </image>
      </ImageView>
   </center>
   <bottom>
      <Label BorderPane.alignment="CENTER" />
   </bottom>
</SplashView>

Then its controller should look like this:

import com.gluonhq.charm.down.Services;
import com.gluonhq.charm.down.plugins.LifecycleService;
import com.gluonhq.charm.glisten.afterburner.GluonPresenter;
import com.gluonhq.charm.glisten.animation.FadeInTransition;
import com.gluonhq.charm.glisten.application.MobileApplication;
import com.gluonhq.charm.glisten.control.Alert;
import com.gluonhq.charm.glisten.control.LifecycleEvent;
import com.gluonhq.charm.glisten.mvc.SplashView;
import com.shara.Shara;
import com.shara.Network;
import javafx.animation.PauseTransition;
import javafx.application.Platform;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.util.Duration;

/**
 *
 * @author mighty
 */
public class SplashPresenter extends GluonPresenter<Shara> {

    @FXML private SplashView splash;

    public void initialize(){
        splash.setShowTransitionFactory(FadeInTransition::new);
        splash.setOnShown((LifecycleEvent e) -> {
            PauseTransition pause = new PauseTransition(Duration.seconds(3));
            pause.setOnFinished((ActionEvent f) -> {
                splash.hideSplashView();
            });
            pause.play();
        });

    }
}

The view is initialized as normal and it can be switched by calling hideSplashView(). The splash view can be styled as normal and and can use stylesheets. The view can be registered in the AppViewManager as such:

public static final AppView SPLASH_VIEW = view("Splash", SplashPresenter.class, MaterialDesignIcon.PAGES);

And in your registerViewsAndDrawer method replace

REGISTRY.getViews().forEach((view) -> {
            view.registerView(app);
    });

with

REGISTRY.getViews().forEach((view) -> {
            if(view.getId() != "SPLASH_VIEW"){
                view.registerView(app);
            }
        });

To be certain your splash screen won't appear in your drawer.

gluon android splash screen, gluon android splash screen - android. is there any approach to show SplashScreen that build on JavaFX/GluOn that will be run both on andorid/ios rather  Android splash screen we can see in every app it is also known as lauch screen. When app open it load the screen and in the background, some process is going on. Android Splash Screen Using Timer. Open android studio, go to File ⇒ New Project and fill all the details. To make a Splash Screen you have to make a new activity. Name that activity as Splash_Screen.java (you can make according to your wish). The XML file will be created automatically if you click blank new activity.

gluon android splash screen, Alors qu'un écran Splash pourrait être une bonne idée, en fait les projets multi-​View gluons mobile créé avec le gluons Plugin vous permettent de créer un effet​  The splash screen showing again if the activity was killed and recreated by the system. In most cases, this is not a very serious issue, but you can use Method 2 to fix it. Some developers want to have a dedicated splash screen Activity that routes to different pages based on some state after the splash screen is done.

gluon-samples/GluonRubik.java at master · gluonhq/gluon-samples , Contribute to gluonhq/gluon-samples development by creating an account on GitHub. Splash;. import javafx.scene.Scene;. import javafx.scene.image.Image;. If you look at the time splash screen displays is exactly the same with the time taken by app to configure itself because of a cold launch (very first launch). If the app is cached, the splash screen will go away almost immediately. Hope using this article you will be able make your splash screen work in a right way.

Is JavaFX (still) viable for building medium- to large-sized business , Write your JavaFx, compile it with Gluon but without the Gluon mobile components. No placeholders, splashscreen or other limitations. The free gradle plugin to compile your JavaFx to Android is called org.javafxports.jfxmobile I think​. When trying to start my app on an Android device, the splash screen shows and then never transitions to the tabs/screen. Steps to Reproduce / Code Snippets / Screenshots. I followed the setup instructions for Android, it's not the first time I've done so and for some reason the Android app hangs completely on the splash screen.

Comments
  • Actually I want to remove blank black screen from the beginning with other content/light picture. but I will test if this approach will not only show a few second before the apps is shown and the blank black screen still remain most of the load time. hopefully you got my point.
  • Precisely, the idea is using a very lightweight Home_View, that will show up immediately. For that, try to load everything related to the second view only when this view is required. Otherwise, the load time will affect the Home/Splash view as well
  • Yes this approach is work perfectly. the only problem that I got is when user pres back button on android the screen can go to loading splash image. I can avoid back from appbar, but still not working for back button from android hardware (on right bottom corner). any suggestion/trick to overcome this ? thanks in advance.
  • Following Android standards, pressing back button will return to the previous view or quit the application. In your case, I'll suggest adding a first boolean, to display the splash on the first run, but then modify the home view to display proper content.
  • is it opensource? @LucaZ