android - Navigation Architecture Component - Splash screen

Question

I would like to know how to implement splash screen using Navigation Architecture Component.

Till now I have something like this

A user has to setup his profile in ProfileFragment for the first time and can edit their profile from ChatFragment.

My problem is I don't know how to remove SplashFragment from stack after navigation. I've seen conditional navigation but didn't quite understand.

Answer 1

There is a common misuse of the splash screen when it is shown to the user for some amount of seconds, and users are wasting their time looking at the Splash screen while they could already interact with the App. Instead of that, you should get them ASAP to the screen where they could interact with the App. Because of that previously Splash screen was considered anti-pattern on android. But then Google realized that there still exist short window between user had clicked on the icon and your first App screen is ready for interaction, and during that time you can show some branding information. This is the right way to implement a Splash screen.

So to implement Splash screen the right way you don't need separate Splash Fragment as it will introduce an unnecessary delay in App loading. To do it you will need only special theme. In theory App theme could be applied to UI and becomes visible much sooner than your App UI will be initialized and become visible. So in a nutshell, you just need SplashTheme like this:

<style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
    <item name="android:windowBackground">@drawable/splash_background</item>
</style>

splash_background drawable should be like this:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
        android:opacity="opaque"> <!-- android:opacity="opaque" should be here -->
    <item>
        <!--this is your background, you can use color, gradient etc.-->
        <color android:color="@color/colorPrimary"/>
        <!--<shape>
              <gradient
                   android:angle="315"
                   android:endColor="#1a82ff"
                   android:startColor="#2100d3"
                   android:type="linear"/>
        </shape> -->
    </item>
    <item>
        <bitmap android:src="@drawable/ic_logo"
                android:gravity="center"/>
    </item>
</layer-list>

Your fragments will be anyway hosted in some activity, let's call it MainActivty. In the Manifest just add SplashTheme to your Activity (that will show the splash screen theme from the moment user had clicked the App icon) :

<activity android:name=".ui.MainActivity"
              android:theme="@style/SplashTheme">

Then in MainActivity to return to your regular AppTheme do this in onCreate before super call :

override fun onCreate(savedInstanceState: Bundle?) {
    setTheme(R.style.AppTheme)
    super.onCreate(savedInstanceState)
    .....