Android Studio Tutorial - Splash Screen Animation Video Lecture | How to Design UI in Android Studio

[Applause]
oh hello this okay well in this video we
will be able to learn how to create the
animation from the Ender studio for the
Android application we don't need any
laboratory ok so we can make the
animation from the scrubs by using the
Sketchup and the under studio but if you
don't have the Sketchup
it's ok because I will prepare the
access for you and it's free
well check it out
you
well before we go to the Android I want
to design in the splash screen into the
sketch app first and we create the new
document here and I will create for the
mobile device with the material design
and give the name to this place okay
and I will click new background by using
the rich angle and just make it
Caribbean the first cut is this one but
I want to make it the new direction like
this okay so the first color is 2 3 2 2
2 z and the second one is 4 1 3 6 6 e ok
and after that I want to create this for
the bedroom below and then I want to
create new button by using the products
here and half should be 45 and without
the border and then I will Group E - BTN
soup kitchen and in the BTN that we need
to change the color maybe I will use the
orange the hash code is f5 a 6 to 3 okay
and then I will duplicate by comedy and
just move like this and I'm going to
make it to the doctor like this 1 2 3 4
5 ok and then I need the texture so
maybe set up or get stopped okay and
change the color to the doc color the
hex code is nine eight six six one four
and here 32 like this now you already
have the button here and I want to
create the simple the simple
illustration here so let's try to create
the villain a various product here okay
and then I will group it to the villain
villain and we dot the bottle and I will
comment this to duplicate and chunky and
100 to 120 percent okay and just what
the first color we need to click the box
would be wait I need to find good color
maybe then I can use the red color and
this is you know we will have to Berlin
here okay
and I will create the ellipse here who's
my fault
sorry we will to move the layer to the
top like this and without the border and
I will do I want to duplicate it like
this okay it's only the simple example
of the illustration and then I will
create the one that like this okay
and then I will go to remove the border
and just edit it and I will put here
okay here and here okay so you know this
is for the yeah you know and I think the
box it's too big that we can business
maybe okay 70 and this is I don't know
what give the name maybe the parachutes
okay and the parachute I will add it
again to make it more like this and like
this and like this
okay cool now I want to duplicate this
and select the battle value and check
the color and I think we can use the
white color i I don't think so maybe the
blue color is a good one or green no
okay I will use this purple copy and
copy and just like this okay and then we
need to duplicate again and I want to
and then we need to create the crop you
know drop by using the field to create
the new vector like this okay and just
click like this and like this and I will
put it below of the parachute and the
parasol sorry I will move the person
inside of the Berlin okay and I will
duplicate this and just flip just flip
it this and change the color after the
white color and this one is what color
cool and I think we I want to move this
to the bottom of this okay it's okay
and make it more bigger maybe 100 okay
oh no it's so big maybe 70 okay and the
button it's so big maybe I can make it
small you know like this and one two
three four five six seven eight and this
one one two three four five six seven
eight and then I want to create
something in the background to make it
more realistic so we just need to press
V and go to here yeah and then I will
change the color to the white sorry I
use the gradient and this one I will
select this and we make it yeah you know
and I will pull
yeah
and I think I will change the opacity
and duplicate again just random like
this and I will quit again just to
placate again
okay and here in the para so I will
select it and duplicate and change the
fill colors to be like this but I want
to make like this okay so you will have
the little pattern cool so here we just
need to select all of them and make
exportable as the PNG and to the desktop
to cripple folder which is assets and
exponent and you can do not these assets
just checks the thing into my
description in the video so you can use
it for the android project now we are
going to the end rest to you now I want
to create new ended Android studio
project here I will gives plus Bell
animation anger okay and next thanks
with the empty activity next and here so
this place activity and finish now we
just need to waiting
okay it's finish to create the new
griddle so here we're gonna to import
the asset first into our Android studio
project with the RTS and it's adorable
and ok once you already import we go to
activity and just change the background
background okay and then remove the
Hereward because we don't need and then
we go into the fuse and colors we need
to change the status bar color now here
I will copy the hex code the first color
sorry the second color and to be here
okay and do two styles yeah you know we
don't need the action bar
and Tara it's good right now
now I want to create the image view the
rock on tone and prop continent and here
big Ron Devin okay and we just need to
move the ballon here and once you move
you just click here okay it's comfort
the layout and then after images feel we
need to click the button and this is the
rock on tone and grow contin and with
the background drawable sub BTN and then
move here and click here it's nice and
then we need to click the ID ID Baylor
and button ID ID sub okay no ok now we
need to we need to run it into the
application first because we want to
make sure the the layout is okay now I'm
going to run this application okay and I
think the layout is ok now we can go to
the another step which is animation this
is ID for the Belen and this is ad for
the sub and we can go to areas to create
new Android directory for the animation
and we already have anything that we
need to create the animation whistle
file and the direction is to from the
bottom or from the top now here from
button okay and we just need to use the
trace lab but I want to set in the
direction first with the egg Michigan
and here from the Y Delta is 100% P and
from this Delta is 100% solid 0% P and
we just need to
the activity to create the button and so
it's button and find our ID soup okay
and then we need to declare the
animation here and measure it from
bottom and we need to import the press
okay and then we just need to declare
the from bottom is animation details
with the lot animation so we can take in
front our ID a name from bottom okay and
after that you just need to so set
animation is from bottom and then we can
play it into the emulator okay I will go
back here and play we need to find it to
splash ball animation you can see the
button start from the bottom okay
I play again okay now you can use the
direction maybe two seconds you can see
you need two seconds to load this button
and then I want to make the bailer start
from the top now we just need to create
new here but I want to copy and click
here new from top okay and just paste
like this and I think we just need to
-100 because why start from the top and
it's or B - okay and then we just need
to toast press activity and declare the
images view for the belly and Berlin
is images few find out ad Belen and we
need to declare again the animation from
top and hear from top is animation love
animation this are any from top and
after that we just need to certain the
Berlin set animation from top okay and
then we're gonna to run this application
into the emulator okay as you can see I
will play here
- okay it's pretty nice isn't it - okay
well thank you very much for watching
this video and I hope it useful for you
don't forget to Like comment and send it
to your friends from anger skin YouTube
channel
nice to meet you from Indonesia thanks
everyone
good bye