An easy and simple way to have splash screens in your Jetpack Compose App

compose-splash-screens

Version Name
LinkedIn Badge
Youtube Badge

 

How can i use it?

Just add this to your settings.gradle:

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        maven { url 'https://jitpack.io' }
    }
}

Then, in your build.gradle:

	dependencies {
	        implementation 'com.github.ygorluizfrazao:compose-splash-screens:1.0.0-alpha01'
	}

What is it?

An easy and intuitive way to provide a splash screen in your Jetpack Compose App.

Why?

Because internet seems to love overcomplicating things. Almost all sources i’ve found uses Navigation Component to achieve such a trivial thing, unnecessarily inflating code and creating a barrier for beginners.

Think with me:

When do you want a Splash Screen?

  • When the app launches.

After that, you will need to display it again?

  • No.

When your app goes into background and returns, do you want to show a splash screen again?

  • No.

Then tell me, why would you want a backstack with it? Why would you want to create more destinations to your navigation component, and, most certainly, create nested navigation having to pass as param the navhost back and forth?

How to use it:

At this moment you have tow options:

The base composable where you control when the Splash Screen finishes.

@Composable
fun SplashScreen(
    modifier: Modifier = Modifier,
    finished: Boolean,
    beforeFinished: @Composable BoxScope.() -> Unit,
    whenFinished: @Composable () -> Unit
)
  • finished: Boolean -> Pass as a state and control when the splash screen finishes.
  • beforeFinished: @Composable BoxScope.() -> Unit -> You splash screen, will be called when finished is false.
  • whenFinished: @Composable () -> Unit -> You application, will be called when finished is true.

Say you want to load some resources from internet while your splash screen is displayed, use it and flick finished when you want to.

There is also:

@Composable
fun CountDownSplashScreen(
    modifier: Modifier = Modifier,
    totalTimeInMillis: Long = 2000,
    notifyMeEveryMillis: Long = 200,
    onNotify: () -> Unit = {},
    beforeFinished: @Composable BoxScope.() -> Unit,
    whenFinished: @Composable () -> Unit
)

Which will start a Timer and finishes after the totalTimeInMillis is reached.

  • totalTimeInMillis: Long -> Time the splash screen will be visible.
  • notifyMeEveryMillis: Long -> Frequency onNotify will be called.

Helpers

I’ve also included two composables that you can use as beforeFinished: @Composable BoxScope.() -> Unit.

When you want a static image and a text:

@Composable
fun CenteredImageAndText(
    modifier: Modifier = Modifier,
    @DrawableRes imageDrawableRes: Int,
    contentDescription: String,
    text: String,
    textStyle: TextStyle = LocalTextStyle.current
)

Example:

A notes app demo

In your Main Activity:

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            NotesAppTheme {
                val navController = rememberNavController()
                val viewModel = hiltViewModel<MainViewModel>()
                CountDownSplashScreen(
                    modifier = Modifier
                        .fillMaxSize()
                        .background(MaterialTheme.colorScheme.background),
                    beforeFinished = {
                        CenteredImageAndText(
                            modifier = Modifier
                                .fillMaxSize(0.4f)
                                .align(Alignment.Center),
                            imageDrawableRes = R.drawable.sticky_note,
                            contentDescription = stringResource(id = R.string.app_name),
                            text = stringResource(id = R.string.app_name),
                            textStyle = MaterialTheme.typography.titleMedium.copy(
                                color = contentColorFor(
                                    backgroundColor = MaterialTheme.colorScheme.background
                                ),
                                fontWeight = FontWeight.ExtraBold
                            )
                        )
                    }
                ) {
                    MainScreen(
                        navController = navController,
                        navStarDestination = Screen.NotesList,
                        viewModel = viewModel
                    )
                }
            }
        }
    }

When you want a gif and a text:

Example:

A notes app demo

In your Main Activity:

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            NotesAppTheme {
                val navController = rememberNavController()
                val viewModel = hiltViewModel<MainViewModel>()
                CountDownSplashScreen(
                    modifier = Modifier
                        .fillMaxSize()
                        .background(MaterialTheme.colorScheme.background),
                    beforeFinished = {
                        CenteredGifAndText(
                            modifier = Modifier
                                .fillMaxSize(0.4f)
                                .align(Alignment.Center),
                            gifImage = R.drawable.love,
                            contentDescription = stringResource(id = R.string.app_name),
                            text = stringResource(id = R.string.app_name),
                            textStyle = MaterialTheme.typography.titleMedium.copy(
                                color = contentColorFor(
                                    backgroundColor = MaterialTheme.colorScheme.background
                                ),
                                fontWeight = FontWeight.ExtraBold
                            )
                        )
                    }
                ) {
                    MainScreen(
                        navController = navController,
                        navStarDestination = Screen.NotesList,
                        viewModel = viewModel
                    )
                }
            }
        }
    }

Hope it helps you.

GitHub

View Github

Leave a Reply

Your email address will not be published. Required fields are marked *