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

[Applause]
you know what's up this this is under
escape from Indonesia and welcome back
to my video in youtube today I have a
good library for you to make your image
field will be scribal in animation
so they actually I've used this
liberally for creators plus cave or
basic animation and I already clipped it
so you can see here you can see here ok
I'm going to show you oh my god
yeah that's what yeah you will be able
to make it your own but right now I use
the Sketchup but if you don't have this
cutter it's not problem because I will
profit the assets for you so you can get
from my video well check it out well in
this case I will design the assets first
with the Sketchup so if you don't have
the sketch app it's not a problem
because I will prepare the assets for
you but right now we're going to design
first into sketch app now I'm going to
click new document and by press a on
your keyboard for the Android okay and
after that I will change the name to the
maybe splash screen ok and then I'm
going to create new rectangle for the
big run and group it for the BG which is
baked on and after that I'm going to
change the color to the grade year and
the first color should be like no I
think will go into the blue and like
this so the hex code is 1217 and 3f and
the second color is we're going to this
color
okay so it's about dragon cool now I'm
going to create the beach little bridge
okay
so just press R on your keyboard and I
will quit practice and remove the border
and then I'm going to group this for the
bits okay and this bridge I will make
the color maybe red color we can use the
red color here
and I'm going to duplicate this and
change to the dark color like this and
move to the bottom like this okay and
after that I will creep the the detangle
again here to make just me make the
foundation so we're going to press V on
your keyboard and here and here okay
and we got border because it's going to
the foundation flat design and the color
I will use maybe we can use white color
just like this okay and I think I'm
going to duplicate this and change the
color to the dark color like this and
make to the bottom like this when we
group it for the foundation I don't know
how to pronounce it but I think it's
Foundation and then I just want to copy
and pass copy and press
yeah and make it to the center like this
okay and after that I want to create the
river right here so just press out on
your keyboard and make the river so I
press P and like this yeah it's only
sample of River but I believe that you
can make it more better than me so yeah
we'll put here so this is for the river
okay
and I think that I will use the gradient
color to make it more realistic so here
I will like this okay but I want to make
it more bigger paper
okay
and click here again and click here ok
so it's looks like small realities isn't
it and then I'm going to create the moon
here by press oh and this is for the
moon and I'm going to chance to drag in
color like this and move it it is and
then I will to duplicate this and make
it more bigger which is 120% and just
change it to the wet color and move to
the button like this and get the opacity
maybe one ok and get the pseudo
and in the mall I will create I will
duplicate again and just create this
color to be more dark like this and we
can make it small and setting the
opacity like this and make it small
okay so I'm not really sure
is this month or not but you know I'm
trying to make it just for the prototype
okay so it's called the moon ok now
after that I will create no I will click
the car like this and just click this
and duplicate and change the color to
the black like this and then I will make
like this
you look at and just like this
and we need two more make it more
realistic
okay I think the black it should be
black strong okay it's enough and I want
to make the car or not just rock so
we're going to buy press R and here and
I will to remove the Buddha and
duplicate it again and make it small and
move to be here
I'm going to edit and click here to get
the corner like this okay and then I
will make the ellipse right here and
just duplicate again right here and we
need to duplicate this here
and here okay
so we just need to change this color and
I will change it to the no I think the
yellow the orange is not good because
most of truth is silver like this okay
and here and we're gonna to make it
different color maybe we can use the
black but I think it's not we can't see
clearly
so just like this and this one
but this we can make it the same color
but we want to make it more duck like
this okay and I just want to change this
layer like this but I think the circle
should be below of the layer so sorry
yeah
yeah I believe that you can make it more
better than me so I'm so sorry about
this
I want to make it okay and I think we
need to make it more produce so you can
search in the corner this okay yeah I
believe that you can make it more better
because I just want to show you how to
use this library to make it works so
this is called chop okay
and I think we go back to I'm gonna to
make little change here just make more
realistic and we can move here sorry we
can move here and group it and then we
don't have to must make this
okay so this is the basic of these dials
and we want to make it animation so
we're gonna have to slice it to the
Android so firstly we take all of them
here in the river we need to move to the
front of it and make it before
so one and this is two and this is three
and four and five
okay so we select all of them and make
exportable by 3x no no no 1x and export
layers and then we're going to the
desktop click new folder animations
press and export okay and what to do
it's only going to the Android studio
and I all all ready to create new
project which is the empty activity and
the name is speed code okay now we just
need to export our assets into the
Android here and I'm going to hurry yes
and Roybal and pass again don't worry I
will profit the assets for you now we
have to be big Road Bridge bond driver
and ugly truck no it's beautiful truck
and setting the big role drawable big
run okay and remove the text field and
don't forget to change the layout to the
relative layout and go to failure to the
styles and here without action bar like
this okay and don't forget to change it
to the relative layout
and then I am going back to the sketch
and looking for this background and
color number one is 12 and going to the
endru it and then go to the colors and
the color primary drug is a same color
so you will get the status bar right
like this okay it's pretty cool and then
we just need to go to here to create new
images fuel for the moon rock content
and web content and the big rock is
drawable moon and we just need to
setting the margin is 20 TP okay now you
already clip the moon here and after
that I will to create the river but
firstly we're going to create the bridge
no no no I'm gonna to create the river
first wrap content and rock wanton and
big rock is river and I think that the
way it should be
what is this okay max Baron and we want
to make it to the bottom so buttom it's
true okay so this is the river and after
that we want to create the bridge okay
and I'm going to clip the bridge here
and the ground is drawable bridge and
layout me should be much better and then
we move it to the bottom true okay but
we want to move here so it should be
like this okay and after that we need to
create the truck you know truck it's
very important for us with the truck you
cannot deliver your packets okay we're
gonna to make it to the center
horizontal is true and the bottom is
true I'm setting the margin button
around 100 DP
113 DP okay it enough so the truck
should be centered and this is the river
and right now we just need to import the
library so we're going to the griddle
and we'll trade off but firstly I want
to make sure this layout is okay so
we're gonna to run this application
again sorry I mean we need to run this
application first into the emulator well
well well I think the layout is pretty
cool isn't it
just I think we need to modify the truck
but yeah I just give it an example so
you can make it more better than me well
we need to import the library but
firstly here we need to setting the tip
back first we're going to boot the dot
and here just clip the muffin and URL by
xt TPS JPEG dot IO and then we go back
to the app here to load the library
compile and then Kondo github chuta
continuous scroll Abel he met few 1.0
okay so we're going to try it first to
sing well it's already important so
we're going to close
and how to test it we need to change our
little little chains for the XML so I'm
gonna to show you well to make it
animation we need to use the label so
just here image here continue scribal
and this is for the bridge so I think
that I want to hear and just like this
okay and then here I will use the bridge
because I want to make the Blitz into
the animation hand here
we just need to setting the layout way
to the max pattern and okay 155 DP okay
and I think we need to change the width
around 7 700 no maybe yeah we need we
can use the rough Anton yeah but if you
are using the OPCON tab is only right
here so I prefer like to use the max
pattern and I need to change it to the
maybe we can do to design and click here
and change this here I'm looking for the
decimal function to make it more full so
okay so we can use this for the test on
the test and we can move here to the
parent button is true and we can remove
the bridge that is okay
and then we can run this application
into the emulator well you can see the
BRIT is changed movement but yeah I know
it's little bug that we need to face but
I'm not really sure that how to fix this
yeah so this is how you how was from me
well if you have the another opinion so
you can tell me and we can fix fix it
together okay so thank you for watching
this video and I hope it usefull for you
well don't forget to Like comment and
share it to your friends
nice to meet you from Indonesia thanks
everyone
good bye