Splash Screen in android studio | Splash Screen Android Studio | Splash screen 2021

Assalamualaikum my name is Taimoor  Sikandar and today we are going to   create another android tutorial series. In this series we are going to create two   to three videos and the first video will be  a splash screen the second one will be login   and sign up screen with shared animations and the  third one will be login or signup using firebase   database and we will try to authenticate and  we will also move to complete that application   as well. This is because I am getting a lot  of requests to create two to three videos so   instead of creating separate videos I am going  to create series. Okay in this tutorial we are   going to create a splash screen the one is on  the screens you can see the animation and after   five seconds it will move to our dashboard screen  which is not design yet so let me run it again you   can see we have some images icons and some text  and after the five second it will be changing a   screen to the next one so this is what we will  be creating stick together watch the video till   end and do not forget to subscribe. Open new  Android studio project and go to the dot XML   section remove this hello world and inside the  constraint layout we will add a background color   and the background color are you using is this  yellow one okay in here we need to add image   view but before adding them is view we need to  add images and we will not use a regular way   to either add the image click on this dryable new  and go to the best revival import this is a plugin   so you can add plug-in inside file settings and  search for the plug-in called bash driver import   and if you don't know you can watch the video  link is in the description click on this plus   icon to add the image and this image I am going  to use click on the image and click OK to add   okay again you can play with these settings and  these are basically the multiple sizes you can   select and unselect for the target resolution  change sneem etc click OK and ok again to add   the image most images added you can check it in  the driver and we have the image with the name   of the image we have six multiple screen sizes  image now we have to use this image inside of   project simply write the image wrap content and  the source will be this logo image and we will   design it inside our design section so click on  the design and click on the image we need to add   constraints as we are using constraint layout  so to add a constraint click on this plus icon   plus I can even add 10 margin to both the sides  we do not want to make it at the top so we will   make the hundred from the top change it to match  constraint ok our image is ready we want to add   some text here and the text will be because we are  going to create a rent application so we will name   it both grunt place it place it below this image  and add the constraints make sure to turn them   0 because we want a responsive design this way  the width will be match constraint change size seven TSP and also we need to address for family  and I am using the Bengals one you can use as per   your requirements and make it centers search for  text alignment and make it Center we also need to   add a top constraint click on this plus icon as  well add another text and this will be a tagline   change its size to a TSP font family search  for the more forms and I will be using antic   fonts click OK to add them ok the last thing is  the alignment text alignment and make it Center   also add these constraints make them zero as  well and add a top constraint ok our design is   ready let's run the application and let's see  how it looks like our application is running   but you can see there is a problem we have our  action bar and status bar is appearing but we   don't want to show them so let's quickly hide  them to do that go to the values and open the   Styles node examine change the dark action bar to  no action bar action bar will be gone and to hate   our status bar we will go back towards the main  activity let me show you the action bar click   on this eye and show them decorations so this is  the action bar where it is written both vent and   the top one is a status bar so let's hide them the  status bar as well let's provide a status bar we   will write a single line get window dot set Y X  and inside we will search for the window manager doors layout params dot flag fullscreen comma  copy this one and paste that's it we're good   to go let's run the application let's see ok  now you can see our status bar and the action   bar is gone and our design is looking pretty  responsive and it is looking too good if you   ask me so that's it for the design purpose let's  go to the coding side and add the animations to   add animations we first need to add a folder in  the resource right click new and add a directory   name it enemy for the animations click OK to add  and inside this folder right-click and add new   animation resource file name this resource file  use small letters with underscores click OK and   we also want to add one bottom animation  ok so first of all we will design the top   animation and in here right translate that the  fact we are going to use so we are not moving from ex-delta so we are simply putting  0% we are moving from Y Delta and we   will move - hundred-percent Y Delta and  we need to add and draw it : duration duration will be 1500 ok this is a translate it  will move over icons or the text from one place   to another and we are going to use another  one which is the Alpha this is going to add   a fade effect over in our project we will  add form alpha from 0.1 percent opacity to   2 of 1.0% so do not add % in here in from  and to go for again we need to add duration copy-and-paste close this one over top  animation is ready copy the top animation   and inside the bottom animation we need to  change one single line we are not moving in   x axis so do not change this we are moving  the y axis instead of coming from the top   we are coming from the bottom to its original  position so the duration we also want to fade   this that's it top and bottom animations  now we want to add these animations in   our project to add these animations first of  all we need to add some variables animation top and bottom nm once these animations are  added we need to hook these animations the one   we created and call these animations inside our  project so top animation is equal to animation   utils dot load animation and we will pass our  animation here our dot nm folder and inside the   first one is stop animation press control D to  duplicate the line and change this top animation   to bottom animation don't worry about the error  we need to pass this and boom it's gone this year   this means the context in which context we are  going to use this animation and which animation   okay so bottom animation change this as well so  we set our animations so the next thing we want   to do is to put or to set this animation on our  image and on our text so to do that we first need   to call these call image view and name it image  and we have two text views the first one is the   logo and slogan okay again that the hooks the  first one is image so image view control D to   duplicate the line and change this image view  to text view the first one and text to second   one the first one is logo and the second one  is slogan okay now we have our animations and   our image and text as well so the next thing is  to assign these animations to our comedian text   the first one is image dot set animation for this  we are going to use the top animation and control   D to times change the top animation to bottom  elevation for both of the texts and image to slogan and the first one is logo okay now we have  assigned our animations let's run the application   and let's see what will happen okay our screen  is animating and that is a good news but it is   a bit more speedy so we can do is to play a little  bit with our animation go to the top animation and   have the time to 2000 psychons and change to 50  so it can come less from the top again run the   application okay now you can see our screen is  any waiting let me run it again and you can see   it is animating slowly so that's it what we want  our animation is added and our splash screen is   ready now the last thing we want to do is to  move to the next screen once the splash screen   appears after the 5 seconds or the 7 seconds maybe  depending on the requirement so for that go to the   main activity to Java and in here we'll first need  to create a variable which will be private static   in type variable I am using the capital letters  because it is a static one so 1000 means 1 second   and I am using the 5000 which means 5 seconds ok  to create a splash screen we will simply call the   intent to call our new activity but we will call  this intent inside of a delay method which is   simply a 1 method which you have to learn we will  simply write in a second new handler this will   basically handle our delay process dot postulate  inside you have tried new runnable and click on   the runnable with java dot lang and inside this  run method you just have to call the next activity this activity main activity tour this to the new  activity which we will be creating in a minute   ok these should be capital gospel ok and the next  thing we want to start that activity and pass the   intent and do not forget to finish this activity  because if you do not finish when the user presses   the back button when he reaches to the dashboard  and he tried to close the application instead   of closing it will return back towards our splash  screen so finish we'll simply remove this activity   from the activity list ok in here we want to we  need to put a semicolon and comma and then splash   screen the variable we have created with the  time settings with the time basically so we need   to create this dashboard go to the Java folder  and right-click new create a new activity with - burning that's it in the design  let's quickly give it a name well the textview change the text to dashboard screen size 224 SB make it in the center  add constraints cause this one close this one and   yes we are good to go we added a handler and  we call our next activity after the seconds   so let's run the application so now after five  seconds our screen should automatically change   to the dashboard how animation is working and yes  our dashboard screen is appear now that means our   splash screen is complete and we have created  our first part in the next video as mentioned   before I will create a login screen and sign-up  screen with shirt animations so do not forget   to like this video if you learn something  new if you're new to the channel subscribe   the channel and hit the bell icon for more  videos thank you for watching take care office

Channel: Coding With Tea

Views: 394,022

Keywords: splash screen animation, splash screen animation android studio, android splash screen animation tutorial, splash screen android, splash screen android studio, how to make splash screen in android studio, android studio splash screen, splash screen animation in android studio, android welcome screen, android splash screen tutorial, splash screen android tutorial, splash screen android studio 2021, splash screen in android studio, android splash screen, splash screen flutter

Id: JLIFqqnSNmg

Length: 16min 34sec (994 seconds)

Published: Tue Jan 07 2020