Android Jetpack Compose: The Perfect Splash Screen

sorry conference welcome back to the channel I'll listen to your fairy in this video we're going to see another time Splash screens so the reason I'm doing another video is about splash screen is that in the previous video the link was post here I only show how you do it in Android plus 12 because of the new API so I will show in this thing because Lots person asks me how to do it also on Jetpack compose while I will show it how to do just by compose but it's not actually the good way of doing it like you shouldn't do it part of Jetpack compose because the purpose of splash screen isn't just about sharing that icon it's about when the app gets launched I will show you the problem with jetpack compose in a minute why it's not just my compose only if you do it in the view system it will be just the same thing so for example you and set okay so here I'm having just a simple app the previous apps always it is just product applications and we are going to use that logo here in order to do our experimentation so as you can see there are plushes with that white screen and then it display this the purpose of the splash key is to not disable that white thing but of course to give the user some time to load some data for example or check some user State maybe you want to show the screen or that screen but also to prevent that widescreen it's called the launcher screen let me just show it to you I think you saw also some examples and you do have a main activity I'm going to create completely another activity just for say for example let's call it flash activity for example and distributions class we accept all the components activity course and then exactly this will tell you that you are using custom splash I will provide suppress custom Splash screening because it will tell you that this is not a good way of doing so we will show how you can do an animated splash screen for sake of example so of course are going to have normal or create and here I'm going to use my app theme of course in order to provide the values of what is that sorry if you set the content of course so here you are using the app team and you are going to decide just a simple splash screen splash screen of course and yeah let's create a function called splash screen and it will be a composable function of course and here are going to create an animated splash screen what you will have is simply we will have a big box right so it would be a box and within that box you have here let's do a preview also so you can check the preview while we are working within that box we will have the image with the painter and it will be a painter resources of art or the drawable Dot Lock like that and now come to the description nice and then this will be modifier dot fail Max size and then you can have some alignment to be in the center Center and this is basically how it creates plus screen that simple it's not a big deal yeah of course you need to add this the Manifest okay we need to create another activity let's call this one we made activity of course because this one will be the second one and Export it to false false of course you are defining two times and then we set Splash screening and that's basically that's how you create an activity so let's just read and refresh so we can see the screen we can also maybe provide some background color exactly this is our splash screen so you can provide some background color for example background color for example you can provide this kind of car okay now if you run this application right now okay so what will happen sorry exactly we need to wait also for some some time you can do that via launch the effect here you can provide a true so it won't be changing if you want to check some large effect what is that exactly you can check my videos this will help us to execute this block only one time we will delay for two seconds and then simply we are going to do start activities normal with intent or I'm not using any navigation compose for the sake of going faster all right so it will be mainactivity.class course and you should use this but you need to reference splash of TV because this here means the security okay I can do this thing and as you can see what will happen again see it next so this is not the right way to do it I'm just showing you if you want to do it how you can do it of course so as you can see it will launch White then this thing and then it will go okay but what we wanted to use for directly from the beginning is to use that bluish thing let me just repeat it for you this lashing it is white then this comes then it goes okay fine uh if you want to animate this thing you can do animation different ways you want you want to animate only the alpha of this thing so it will go from zero to one for example we can't do it via sample animation we can do it like that by remembering a state of course yeah this one and you are going to remember animatable okay not this one the actual yeah exactly I need the actual this one okay I will just import it get this one remove it from here and just import this like to follow okay so the alpha will be here right and then we are going to use the alpha here in the modifier so it will be modifier dot Alpha exactly and you give it the alpha value so okay of course you need to use the value here and then when we'll start here it will start from here we are going to do animate or sorry this Alpha animation we are going to animate value to one F okay here we can provide several stuff you can provide the animations pack which is very crucial animations pack there is multiple animations we are going to use the screen animation and the duration will be 1.5 seconds like that and you can't even do some easing that's beautiful just by compose there is many many easings you can do easing and then you can check linear out slow on easync XLR I'm going to use yeah I think the default one is perfect then we can run it can check the animation here I think there is tool in which you can run the animation directly for me but let's run the application and check of course we will have that white screen first and then we have our app and it is animating as you can see and boom it will go Okay so until the animation completes it will start that delay and then it will go that's basically how you create jetpack compose splashing but this is not the right way to do it of course so the splash screen purpose isn't just about showing a good thing before the software this or how this is a good thing of course but it help us like loads and values check if the user is authenticated or not so maybe we can go to login activity or authentication activity for example but while the application loads for the first time it will show that widescreen we don't want to show that we want to show something else we call that launcher so we are going to implement the perfect splash screen right now so the first thing to do here we are going to work with XML there is no other option of course there is options to work with Android plus web and mindswap I'm going to show both options you so if you create drawable here let's call it splash background like that this would be a layer list right and inside that I release that this is just XML stuff are going to have an item this item would be the color aspect of our thing which is the color so the color would be that same exact color you can use sometimes you can use a combination between both so this would be just for the color for example yeah like that and then you can launch your activity here and do that animation so it seems like it is working well okay that would work that's viable option but let's do it and the correct way of course and then we have another item which is of course our iconic treatment yeah bitmap and here while you have many stuff of course you have to do CRC so it is logo like that and boom and you can specify all subgravity to be at the center and that's how you do the splash screen background now you need to give that background to some theme yeah so you need to do that in theme like basically inside so here you create another side let's call it yeah of course style and let's call it theme dot Splash for example and of course let's have the same parent as here where is it boom that's all you need and basically here you need to set different stuff you need to have an item for the status bar color yeah we can do that so it is our color like that and then we need to set another item which is window background like yeah exactly this one so this will have value of at durable but not the logo which is splashback now we need to set this thing this splash screen key into our application splash screen team so we need to go here where is it manifest and tell it at the splash screen theme it's not this one but it is splash screen what I need to wait to go to the other activity so I will disable this thing so to be composable that just runs for sick running okay let me delete those those those those those those well I'll just delete I will just do delay afterwards so let me just try it so let's run it and see the difference it goes directly as you can see when we have another problem here so the first color we got isn't white it was that blue directly the blue one and of course the problem is this one is pretty big if I show it to you it's pretty big it's 500 by 500 I can't resize it I think I'm not resize it but I mean I can well I should be resized to fit the screen so it's not that purpose you can have a good image 32 by 32 and that would work so just in real app of course just use a smaller one of these so it can work so this is the way on how to implement Splash screens but prior to what prior to Android 12. as I said you can use a combination of both let me just repeat what I have done here so I can have the same thing but what I can do I can remove that thing from the splash background I will remove that so it will act as combination of both you'll notice that so it is shown and then it will have that thing and then it will go that's also a valid option to use well this is the larger screen and of course it's just by compose and for the other way like after Android 12 plus Android 12 which API 31 33r 32 I just remember quite well you can use like I already did the video about it so you can check that video on how to implement that you need just basically a different API and you don't have anything like that you need just to call something called install splash screen and you need of course to provide some kind of style in which you show internet watch it what is the background what is the status bar color I think it's I think it's the same thing what is the bread color what is like some specific values you can Implement I already did a video about that and that I don't have to repeat it here just check that video to see how you can implement it plus and total so with this video and that video you can see how you can implement this perfect splash screen in your Android application that's basically it thank you for watching this video till the end don't forget

Channel: Charfaoui Younes

Views: 10,773

Keywords: android tutorial, android clean code, android model view view model, android mvvm, android, studio, development, dev, app, data, views, jetpack, library, explained, explain, how to, guide, tutorial, kotlin, java, mobile, splash, screen, fetch data, network, animate, animation, compose, api 31, api, android 12, api 21, splash screen, android splash screen, splash screen android studio

Id: VTRz-8DPowM

Length: 11min 28sec (688 seconds)

Published: Tue Sep 05 2023