Splash Screen Android Studio - Android Splash Screen - Android Studio Splash Screen

assalamualaikum my name is tae Moo Sikandar and today we are going to create another Android studio tutorial in this tutorial we will be creating a splash screen with some animations so let's quickly look at what we are going to create open Android application and you can see a splash screen with some animations and after the 5 seconds our new screen is appearing so let's close this one and rerun the application so we have our three things the lines the logo and a tagline and after 5 seconds the splash screen is over so when we go back so instead of going to the splash screen our application is now closed so let's see how we can create this [Applause] [Music] [Applause] open Android studio project if you don't know how to create a new project you can check the video link is in the description or you can click here to watch the video ok let's go to the XML open the text file and let's quickly remove this hello world but before going to design this flash screen we have to change the app bar or we have to remove the app bar of / app so for that go to the resources and go to the values and inside the values open the Styles file in Styles change this dark action bar to no action bar so this will simply remove the top app bar with no action bar okay so let's get back close the Styles and inside this XML let's change the constraint layout into the linear layout and also make its orientation to vertical so basically what linear layout will do linear layout is a layout which will stack our elements one after other so in vertical it will stack the first one at the top second Motlow it and third one and so on so as we know we our design is divided into three parts the first part contain the lines from top to bottom so we have a first section the second section contains the logo and in the third section we have a slogan or a company so for that we will create three layouts to divide our structure the first one is relative layout which will be the match parent height will be wrapped content okay inside this relativelayout we have to create three lines so let's quickly create a line I am creating the line with view keep in mind you should use V the capital V for the view the small one will create Harold at the runtime so view layout width will be 20 DP and height will be I think 50 DP for the first one yes it's enough okay to add some colors you can simply add color inside this view but I am adding the backgrounds so for the backgrounds I need to add these backgrounds inside this drawable so let's go to so I have these few lines simply copy them these are the images basically and inside this driveable right click and paste these all four or one image all the images you can paste images like this with okay now we have images so inside this view we can add the background the first one will be I guess the white one okay we have a wide line here we can see a white line over here but it is not visible because we haven't changed the color yet so simply change its background color 1 F 1 F and 1 D so we have a wide line so let's place this white line at the center Center horizontal true okay and also we have to assign a high D because the relative layout work relative to some other things so we have to place the lines one after other so we have to give this ID IDE is the first I guess first line close this one and copy-paste change ID to second line let's change white into red line again now we do not need this Center horizontal because we want to place this next to the first line so we will write to write off to write off some ID that ID will be the first line so now you can understand why we are creating these IDs so we place this one right side of that idea of that particular view so now we have two lines let's change its length to handle DP also add some margin margin that I think will be 8b you know yes okay now copy we need a almost two three four second third line fourth line my fifth and the last one is sixth line okay now we have six lines is one two three six lines change it to two new DPS two hundred and the next one will be two hundred I guess and this one 120 and the last one is you know okay so let's change their positions this is after the first nine this will be after the second line so this will be after the third line this will be after fourth line and the last one will be up to fifth life okay now we place them change its one one one one one 100 to 150 yes looking good now so now we have to change the colors white red I think white and red will be pretty good here change it to green if you need these color codes I will give these color codes and the whole code inside the description and also this will be the white one a snows looking pretty good so let's close this relativelayout we are done with our first box if we click here so we have created our first box the second box will also be a relatively with match parent which means full width and height will be wrapped content okay now we have a relative layout inside this relative layout we need our textview you can use any image logo whatever you want so I am using a simply text will be wrapped content web content text will be I think a change its text size to 150 SP so I told you before always use SP for the text size and never use DP it is not recommended to layout this into the center so simply write Center horizontal to change its color color will be white now we need to add its family spawn family so how we can add a fun family inside your project go to the design click the text view and inside this attributes search for family or search for the font so now we have some predefined phones here from the Android we will go to the more fonts and we have all the google forms in here so I will search for where this bbbb here the bed one click OK this will add that phone now we need to simply change the font now we have the first box the second box and the remaining is the third or the last one ok let's close this relative layout as well and create the world last relative level it will be wrap content and web content no relatively of it will be match parent inside this relative layout we have to create another text view so what will be wrap and so height will be wrap content text you can use your own text but I am Android world for here change its size text size will be 24 SP I think it's enough yes it's good change the color white make it now we have a problem here little problem so what's the problem is that we have our first box second box and our third box tagline or the slogan or whatever it is at the bottom just above a little above from the bottom over here and also if we change the screen size you can see it is just after this box so how we can do this we will add another linearly height will be match parent and width will be match parent okay for lining the lines you can press alt control L okay now we have math parent match parent and change its gravity to the bottom so now we placed our relative layout this world layout and inside this way out we have a textview so we can successfully so we simply placed this relatively inside this linear layout which has a height out match field means it'll fit will cover the whole remaining height okay now it is at the bottom but we want to make it a little above the bottom so add margin bottom so it's good now let's change the screen size you can see it is now at the bottom okay pretty good now we have to change this color let's go to the design inside the design so this way we have a textview select this text view and find its color click on the text view and make it a little less a little fish okay pretty good no we can change its family it's one family as well go to the family more phones and we will use this cursive regular phones look okay we have a cursive font okay now our design is ready let's quickly run and test how it is looking okay now we can see that we have a top bar over here which is green which is green in color so we have a top bar so we want we also want to remove this top bar the top line so how we can do this we can simply write a line inside our Java file to remove this go to the main activity so inside the main activity is simply above the set content view you just have to page this line if you are getting this errors now you can see the line is going and our splash screen is covering the whole screen of our device okay let's add some animations so to add animations inside our project we need to create some additional files for the animations so let's go to the resource the right-click inside the new create a new Android resource directory so change the directory name to annum that means animation click OK and now we have a folder here with the name of enemy right click on that folder and create a new animation resource file we will give the name this file top animation will quickly create all these files top animation bottom animation oops and the last one is middle okay now we have three files top animation bottom and the middle animation so for the animations in Android studio we have bunch of files in Android we are limited to some predefined values we are going to use or we can only use this 4 to 5 predefined variable the translate rotate scale at fine the set so in this target we are going to use this translate and alpha 1 so the translate will basically move our elements from one place to another so in translate write and draw it : direction and it will be equal to 1500 from Y Delta means from Y axis are we moving this line the top animation from y yes we are moving so we will move from minus 500 percent to the zero percent so now now we also have to define the X Delta so this is the zero percent okay now we have a translate I would define over translated animation and we will create another animation which is alpha alpha is basically a fading innovation so from alpha means from 0.1 means Nu is equal to visible to alpha 1.0 so this is basically you can say opacity inside web no we have a duration here as well simply copy that okay now we have our top animation copy this go to the bottom paste this inside the translate now the bottom translate works gain it works in y-axis so we need to remove this minus and change it to enter this so alpha will remain same again inside the middle one we just need to paste this and now we are not moving our middle elevations or the logo y-axis so we will simply write 0% in the Y Delta and - from - 200 % to 0% on its original position okay now we created three animations now we want to use these three animations inside our code so it's pretty simple use animations in the Java file we simply need to define the variables animations the variable will be animation the first one is top animation bottom animation and the last one is made of animation so we have these three variables you simply call these animations or assign these variables to animations so our top animation is equal to animation utils dot the load animation so load this animation to this activity from our dot annum folder dot which animation the top animation okay now control D to duplicate change this top to bottom animation and this to made an animation also this talk to bottom and this one to made an animation pretty simple so we have so we successfully loaded all these three animations inside our variable so now we can simply assign these animations to these elements so now we have IDs so this is a we simply call it a okay so what is this is a tag so we need to call these inside our Java file okay now let's create the hooks so hope can be created easily the first one is first is equal to find view by ID r dot ID dot where is the first line okay simply press D to duplicate the line one two three four five six the last thing is to assign these elements these animations to these elements so it is also a simple thing simply call the element which is a first dot set animation which is the animation first we use a top on top animation okay now we successfully assign all the animations to our elements and the first we created the animations then we create the hooks and then we assign these hooks to animations or animations to hope okay let's simply test the project okay now you can see it is animating when it loads so now our animation is working let's test it again so here is a file here is splash screen now you can see it is animating but it is not going to the next activity so for that so no we want to make it a splash screen so it cannot be accessed once our main screen is open so we will create a simple variable which will be private static hint [Music] splash time o is equal to 500 so five thousand five thousand one thousand one second and five thousand means five seconds so what I want that our next screen appears after the five seconds of splash screen now we need a new activity the second activity for that go to this folder right click go to new and inside the activity we will choose the empty activity so name it second activity and finish so insert the design of our second activity we will simply write a textview here and make it second screen oh this is the main screen appear after you can call it the main screen as well so this screen will appear after the splash screen so this is the main screen or it depends on your project so now call that main screen and you know how we can go to the second activity from first activity so we will use that procedure but inside our simple function so simply so now we need to call that activity inside this handler this handler will okay now let's quickly add our variable so it should be before after this yes it is after - timeout and after the bracket hit comma so where we are getting the error because we are missing a bracket over here and this one is the extra okay now we call this so okay now we call the next activity inside this handle so this handler will delay this section or whatever the action it is and perform that action right after this time so whatever the time is so in this case in our case we are using the time over here is five seconds you can change it to whatever you want okay now our code is almost finished so let's run the project okay ever splash clean is here and with animation so after five seconds it is jump to the next screen with the top bar let's run it again so if you have any questions regarding to this whole tutorial you can ask me in the comments so that source code is in the description thank you for watching don't forget to Like and subscribe the channel for more videos take care Allah

Channel: Coding With Tea

Views: 58,950

Keywords: splash screen, splash screen in android studio, splash screen android studio in hindi, splash screen animation, splash screen animation android studio, android splash screen, android splash screen with animation, android splash screen animation, android splash screen animation tutorial, splash screen android, android studio, android studio tutorial, splash screen android studio, how to make splash screen in android studio, android studio splash screen, how to make splash screen

Id: 3DR4DiU_rmw

Length: 29min 21sec (1761 seconds)

Published: Wed Nov 27 2019