404 Sketch App UI Design to Android Studio Tutorial Video Lecture | How to Design UI in Android Studio

very good so welcome back to anger
Scalia took and then in this video I
just want to show you about how to
design the 4:04 in the skipper and then
we can implement it into Android studio
with the XML language and of course it's
easy and simple the first thing you need
to create the illustration this is the
illustration for the layout so I can
prepare the layout this is its work but
it's only simple layup so we will put
the illustration in the top here and
this is for the title and description
and this is for button okay well we go
to escape that right now okay so we need
to create a new document so currently we
don't need to use the template because
it's simple and we don't need the
simplest so you just need to create a
new document here and choose the
document okay well this is the wall
spread and we need to create new up
watch here
and by the way unleashing the mobile
portrait and of course we need to change
it to the 4:04 okay and I want to start
it from the bottom so we go to him Top
Chef and rip angle and you can also make
it to full width make it and setting the
heck to the 60 and make it 2-0
sorry make little button and you can
select this layer remove the border and
I want to change this layer of name to
the BG and we can create new texture for
the labels um
or again take me to home they just liked
it and we can resize 220 and change to
the irregular no and I want to check it
to the boss okay and we need to select
this layer and next to Center and we can
change this background color so there's
not just a lot of that I want just the
color from my illustration so I can copy
this here special and then we can make
like this okay and see it's a little
baby but he's busy because he didn't
find the match so we can click into the
4:04 okay and I will select this busy
and you can select like this okay and
get this color here oh it's button to
back to home and we don't we don't
create the home fetch so we can select
them just one packs like it
okay so alright we need the 4044 texture
and description okay and we go to
texture and 4t4 and check you to the
black oh my god it's awesome and for the
X like this and change to regular and I
want to make it beautiful palette so now
about this one so I think it's good and
make the center I like this and I want
to change it to the log both okay
it's both okay okay
and after their units of decision
description here so we can duplicate
this layer and change the font size to a
chain and take to the regular the color
is silver and you can type whatever you
want okay I won't touch something here
sorry the price you'll find is log on so
this will turn back to home right small
or the baby real high okay it's good
right well the baby will cry
whoo food air you like the baby spy huh
who dare you okay I will change to the
16th it it and increase the life height
to the 26
like this okay so we can take to haul
okay okay well we can set it and we can
implement it into a do it but right now
we need to select this fine fine layer
and make it portable and we can export
it to the desktop a shot and
illustration baby okay but we can still
get first cancel you can see this is the
side so you can change those to h okay
Suffolk's today 2x and export and baby
crying succeed and you can see the width
is 143 and I want to show you the result
it's more multiplication with the 143
it's 286 and it's good for Android
development
okay so next to unloads to do to
implement it into HTML so I will select
it and it's downloading
I think it's reflecting SVG so you can
wipe for the surfer out sign here we can
give 244 next and we can use the APA 21
and next and I'm going is the empty
activity fitness and just waiting for
the greater good
it will stop several times so just
waiting for it okay okay so welcome to
Android studio
and they need to copy the illustration
first you can select this file and copy
and go to Laura's drawable and you can
press here press ok and ok and it was
the Dybbuk right here way
ok so sorry and you can select the
flicker here and you can get the
pressure here so we go to value style
and that will not change to no action
bar ok
and God and we don't have so you don't
have the action bar here ok I will leave
the design here and we can remove this
hello
I don't it currently and use the
constant layout so you can use the
content layout where we can stop it from
the from the this image okay so we can
do two widget uh no no no image and
image field you can duck here and it's
the baby cry and you can see the size is
143 and 143 ok we can resize it the baby
cry you can see the properties here and
I want to setting this 143 and values 43
okay
and you can set it to the left and set
into the flash and setting to the top
and it was a thief
Oh Donna so this is for the enter I will
make it to Center white white white due
to pecs and it is for gravity setup
layout horizontal normal we need to
change this and I want to change this
and I want to make it the center like
this okay so the next time we go back to
design and we need the patch here the
below of the of the illustration so you
can use the picture here and change it
to fall so you can check ships 4.0.4 and
we can go to the text and I want to edit
this text to side we can see the font
size is 64 so 64 and DP and we can
change the stem to the ball and the
color the color is it is so copy and
then we can search here right and
centers I want to make it centered the
PT center and this is for the McSpadden
a
and again you can see if you again the
Mohawks like it is 20 where we need to
modify this and get the top margin top
you can see oh no no no we remove it and
go to these anger and setting this to 20
okay and another one we need to create
the patches for the description we need
to create texture so you can go to bed
shield again we do to deserve it
and be sure below of the 44 and we can
also copy the description from the
sketch up and it goes back here and then
make the shelter and context you can
change the font size is 60 16 and the
color is de verdun so we can go to text
and I want to change the color put color
and the size is 16 in the graphic is
Delta snips to match better
okay no no no I want to decrease it flow
okay just like this
and we can set in the land head lens
fishing extra you know maybe it's a
teepee okay so we have the 44 and we
have the description here and we need to
crease we need to create the button in
the bottom here okay so we go to design
and you can see the widget here we have
the button you can make it to the bottom
like this and we can do to text and I
want to change this to take me to home
and this is much better and I want to
make it to max param you can see none of
its next better what we can change the
authorities we can make it to mix panel
so I will export this VG X plus BG and
you can set it and can copy this BG and
go to the Bible and okay
and it's inserting this through
Hopkinton and make it to the ground is
be here okay and of course we need to
resize this so I want to result it
and this verse again and full and then
we go to sex again inserting the color
to F F F F F and setting the spiral
ishbal and we can sit in the Reading
button press D P ok so corner tool
eternally her design the 44 and this is
for the best technique to home like I
want to change this background color or
the bullish we can select click here and
the can 32gb how about this okay I think
it's more good than before okay so thank
you very much for watching this video
tutorial and let me know if you have any
questions so I can help you by myself
and then you need to subscribe my
youtube channel and help me grow up this
YouTube channel okay well nice to meet
you from Indonesia see you the next
video tutorial
goodbye