compose-splash-screens
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 isfalse
.whenFinished: @Composable () -> Unit
-> You application, will be called when finished istrue
.
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
-> FrequencyonNotify
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:
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:
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.