Loading Animation in UI Design to Android Studio Tutorial Video Lecture | How to Design UI in Android Studio

hey guys what's up so this is another
key and welcome back to my video well in
this video I want to show you about how
to design the loading animation with a
sketch and undo it to do okay so the
first thing I have prepared the effect
that you can get the frame on frame four
one two three four and there's so many
different about the image okay well I
will change it first to the underscore
because the undo it needs to be
underscore so you can to get the man
with the death okay so we have the frame
one two three and four and after that I
want to design the layout first in the
sketch F so I can be done with the
sketch and click new document and you
can choose here well we need to create
new upload you can click the insert here
and upload and of course I will choose
for the material design with the 360 and
640 okay and after there I want to
change this name to the loading screen
okay and then I want to clear the
placeholder for so we go to insert set
and rectangle and I create like this and
just make it to the center like this
okay this is for the animation so you
can give the holder like this
and the next one I want to clear the set
Rhonda I want to create the progress bar
and make the center like this
okay and they do to finder and I will
copy this layout sorry I will copy this
image okay so it's only for special does
it is and we can change this color to
the another color and I will duplicate
this layer and I want to change the
color to those green now yes dream and I
want to decrease the white too like this
okay and you can see the different with
the progress bar loading and unloading
and a subject I need the texture for the
for the person like it and I want to
change the font s2 to the 2022 and
change the typeface to Roboto but I
haven't installed the robot of fun yet
because it's new MacBook so I will list
the area for the beginning and of course
we need to change the color to the flag
and to the ball okay like this and you
can also duplicate this layer and I want
it I want to edit this text loading map
okay and make sure to the regular and
the contest is 60 and make it to Center
okay okay
and maybe I can get the background the
green color
no no no it's better so I can change to
the another color yeah I think it's cool
so after this we need to create a new
document in the under in the Android
studio and we can implement it into
animation okay so we go 200 still and I
want to create a new project and of
course I won't give the loading me like
MMX and empty activity and next and
finish and you just need to wait in the
Gradle booth it's two for several time
for the minutes okay so it's the treadle
building so just be paid th okay we got
it
the under to deal here this is our basic
template we need to remove this and we
go to press and value and file and you
can change to no action bar okay and we
go back to sketch app and I will I will
group this layer and make exportable and
export group and then we can expose to
the a desktop loading image we can serve
and then you can select this layer all
of them and go to undo studio and find
the drawable and you can click like and
press and ok and you can get the frame
one here and then we can go to desktop
to get the loading we can copy and I
want to press again in the drawable like
this okay so we have the loading frame
one two three four and after that we
need to prepare the animation so you can
click right here and new and drawable
resource file and animation loading and
okay
and in this selector you can change the
animation list and I want to edit Adam
and undelete drawable and drawable frame
one and duration it's 20 thank you and
we need the four items so we can copy it
and this is for friend to three and the
last one is for okay we don't and after
that we go to the text and preview and
we need the image here for the animation
and it is for the animation so we can go
to sketch and we can see the holder 177
okay 172nd DB and we can set in the
background for elected and we can make
it the center like this
when of course we can get the IDS or
edid this is for image view okay and
below of the image view we need to
create the text view and the text is 57
potion and style
it's ball and the font size is 22 DP
okay and of course we can lock it the
text to the below of the image edges and
the color is for a for a for a and below
austex you need to create the few work
concern and rock on turn and we can set
in the background to the Joe Weber logic
image Wow we have the problem here we
can go to sketch and let's see the the
size 200 XE 1
and if okay and we can also make it to
the center like this and below of the
textual girl we need to create the text
field game so we can copy and past and
you can change the text to the push
clothing on map and we can move this
chance to TP and which is the vector to
the normal and we can look again like
this okay so we need to run it first you
can run and I will leave the next
session and it's Gradle boost running
and of course we will get the result of
design like this more or less so we need
to change the background I want to edit
the big role we can check the sketch and
check the the at bot and copy this cut
and go back to under studio and I will
press like this so we have the
background effective okay so we just
need to move to the Jaffa so I will go
to Java and just create a new variable
here you make few and image few and
again any missions of Abel ending ok and
it can just import the squares of image
field here and after that we need to
take the ID
okay and Phil by Eddie
JD's image whew and if image fuel has no
we can set the throw new error
associate error whatever forgot the cost
but I have prepared the cut is a forty
an error okay and after that we can copy
this code because I have clipper the
cost you can change it to the animation
loading and we don't need this and then
you can any tab and we can run the
application for the check the result
yay we got it guys
so this is for the loading oh yeah I
want to change this color of blue and
then we can select this and go to bottom
and get the cut and go to under to do
and Bhutto's colors and use for the
colors and we can run give we need the
change the color you can see in the
right shot here okay yay it's loading
okay so I want to make it to the bottom
margin top British mod install okay you
can run again to choose to do to do to
do to do to do to do to do yay well done
this is the loading animation with the
drawable animation so thank you very
much for watching this video tutorial
and please let me know if you have any
questions so don't forget to subscribe
anger ski channel on YouTube and nice to
meet you from Indonesia good bye cue