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

hey guys this is Angus key from
Indonesia and welcome back to my video
well in this video we will design the
such home pets and I have designed it
for you and you can download it for free
and I will give you the link of assets
into my description on the video on the
below of the video in youtube well I
have design like this and you can
download it for free so we will design
like this and implement it into the
android studio for the XML language well
we just need to fletching first just
letting and I'm going to slash this
search and the first button and this one
and this is for the caption and this and
I am trying to export the layer by
multiplication is 3 so we can export as
PNG and click new folder for the assets
ok it's done
well let's take it out we have the icon
watch cinema award again and may crop on
and mess and school and this is for the
video and his for description and this
is for the source input type or edit
text and we have the button here
pretty nice well just go to the Android
studio to create node I'll go to do a
project and this is for the home shots
ok and next and next and let's try to
with the empty activity and finish and
just waiting for the Gradle build its
will took a time around 5 to 10 minutes
our Android studio is ready to use well
just go to the activity dot XML but
right now we just need to export the the
assets to the drawable just silica love
dumb copy and then we can press here
okay and then just change the constraint
wheel to the I prefer like with the
relative layout I don't know I'm prefer
like this layout okay and then just
setting the background with our drink
color so we just get the hex code is 3 F
8 6 8 8 and just go to here to setting
the background color and you can preview
and it should be like this and we need
to remove this action bar because we
donate and just change the color about
the status bar so we're going to the
values file double click and just change
to the no action bar and close knit and
do two colors and find the color primary
doc just press our hex code and we got
it it's cool right so the first thing we
need to do it's click the header with
the image view so the image view is how
about Madeira and this is the heck is
find the hidden okay we can copy and we
can press it with a DP and we can
setting the sauce with the drawable
heater and we got like this but it's not
perfectly so we can copy this and path
and it's still not perfectly yet so
we're just setting up manually just go
to the
and select the images and just a scalp
type is Center crop okay and then maybe
we can research manually okay cool so
after that we just need to create the
edit add effects but I'm going to use
the design section and looking for the
edit text this is the edit text just
block and drop here for the subform
and go back to your text section and
just change the background with the
suits wow it's too big and then we need
to yeah we need to resize it so we can
go to sketch and looking for copy and
the heck it's 50 so we can looking for
the way it is oops my mistake and the
heck it's our 50 DP but I think it's not
enough so we can make it 100
yeah it's cool and we can move to the
bottom again move to the bottom again
cool so we can change the name to the
what are you looking for okay just what
are you looking for okay an input type
its of the text are such well it sucks
okay I think it's only text and then we
need the reading less know how about 40
P yes it's good and then we need to what
I'm thinking about the things we need
the heading button no maybe 20 okay and
the color is we can copy the hex code
it's b5 BFF can be files so you're
looking for the color here just our
color it's B 5 B 5 and B 5
good job and then we need the button
here so we can click the button and with
heck is 50 by multiplication with the 5
TTP and the background is such button oh
I think it's not enough so maybe we can
make it 100 and this is 100 well it's
took bigger how about 70 and this is 70
now this is fancy
okay we can try to move again
here just be patient when you are moving
in the component it's really hot it's
not like when you are using this cap X
oh I'm sorry
and oh the bottle itself BMO
why I cannot demote it
oh I know the problem is I can't combine
this edit text with the button how I am
sorry it's I don't know why I cannot
okay I think it's enough I'm sorry I
cannot move again the such into inside
this like the sketch like this but yeah
I will find how to fix it and how will
asking to my friend he is UI developer
sorry he is Android developer okay well
we tried to finish so basically we just
need to click button again for the below
of the source and just like this and
which is a 55 okay okay and the source
is oh sorry we can find out this is for
the awards
what is it oh yeah when you are using
the the effects you cannot to use this
death so you can you need to sorry you
need to change this name of file just
rename yeah maybe I will
delete it first just billet delete okay
and we can go to sex and rename hit
award and his school and his mess he
crow or what - and his cinema okay and
we can copy again without the heater so
we can copy this items into drawable
okay and just change it to the work
and look right here okay let's see oh
this is the mass the mass parts and
their the micro okay and let us do what
all in the right here so we can move
though what I hear no problem
okay and we can copy again the button
and the second is a lot too
so we can a walk and discuss too and we
can move like here no no no no this is
oh my kids okay I just forget it first
so we can copy again and the second is
cinema so we can change the cinema okay
and move it here so we can go to design
why I cannot move it perfectly
well I don't know why I cannot smoke
this but let's try this let's try to
change the relative flavor to the
concern you
Wow amazing
I'm just trying well it's perfectly yeah
just change your relative layer to the
controller and it's perfectly and I love
it okay let's try again to fix it yeah
just result again
I'm sorry guys yeah we we are learning
together so what the heck just zero okay
and yeah I'm sorry sometimes when you
are learning something you will find out
the good option and we found the good
option here select this and move here
okay and this one it should be button
and this one it shall be button
okay let's play the puzzle yeah I think
it's like the play the puzzle Lots
problem okay so you can rip it again and
rip it again so it's got like this well
I'm sorry if I got the mistake so many
mistake here but I learned something new
we can use the concern layout to to make
this button inside of the head effects
and I just now I just realized that well
thank you very much for watching this
video tutorial please let me know if you
need the asset and I will upload it for
you and you can download just check the
link in the description on the video
well nice to meet you from Indonesia see
you