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

[Music]
have you thought this is an escape from
Indonesia and welcome back to my video
in my channel so this is midnight no
it's not really mitigating so good night
from admission and we're going to design
the upload their profile picture pages
with the sketch and under studio so here
I'm going to create a new document for
material design which is the mobile and
I will give the name it for upload
picture okay and after that I will
create a new rectangle for background
and this is for the big run okay so in
this case I don't focus on the color
first because I want to create the
layout first alright so here I'm going
to create a title for the upload your
picture profile and I want to make it
small like this and this is for the
title and make it to the top okay nice
and after that I will create the vector
for the profile picture so we're going
to use the oval by short cut oh this
thing
140 okay and I will cook it for profile
picture okay and change the color to
make it difference like this and instead
of the other I want to make a group here
which is the illustration and then I
will duplicate this offer and change the
color to the another color and after
that I will make it small and put like
this
and in the other layer we're going to
miss it and this we're going to
duplicate and make it small but I think
it's very small
yeah so this is the victor icon factory
icon for the profile pretty nice and
here I will create the button here so I
will create another file and like this
and here I will change the color to
another color like this and I will give
the name its button and instead of
button I will create the icon for the
camera so here I will use the simple an
icon and looking for the camera icon
because I want to take the picture
directly from the camera okay so here
nice
so this is bitchin but I think it's very
small that I can make it bigger maybe
150 nice are we going to make it grow as
the picture and make it to the middle
cool and after that I want to create my
name here below of the picture profile
and my location and the last one is the
button so here we're going to copy this
and make change the group name which is
the information and here I will select
this and duplicate and first paragraph I
want to make it small maybe 18 with the
my name is anger risky okay and the
second I will make it very small maybe
14 and my location is Jakarta Indonesia
and if the margin is a nice and after
that we create the button below here to
submit the profile picture so I will
create with the rounded rectangle tool
and make it full like this but I want to
- by 2 t 2 and minus beta t 2 and height
is 45 ok and setting the radius is 100
like this but I think the width is only
250 ok it look nice and imagine the
bottom is 50 55
and do you think if this we move here
it's better I think so okay now we can
create the label insert the new tango
which is the surf my account and make it
bigger maybe 18 yes and then make to the
middle like this now you already have
the button for the surf
BTN and instead of the picture is the
upload BTN and this is profile and this
is his name okay now we already create
the wireframe this is the high file of
old frame and we just need to use color
to make it more beautiful so I'm going
to Google Chrome and just the color dot
adobe.com and you can looking explore
and mobile app and I think this color is
pretty nice this one so we're going to
edit copy and I will is this color for
the my background for my background this
color and make it like this white and
this one we can add this but
okay pretty nice this is for the
background and for the button I think we
can use green color and we can use the
gradient color because I want to try
another color practice - and maybe we
need to settle and the opposite is turn
no maybe
touchy maybe 20 okay and about this we
can use this color we can try it okay
nice and profile I think we can use this
color for this guy okay nice and this
button we can use green color also but
the actually you just need to copy these
styles and select this and you got it's
pretty nice isn't it so this is how we
can easily use the color from the end of
the color calm so we already create a
design for the upload your picture
profile but I think is should be like
this and make it right and setting okay
Thanks okay now I want to slicing this
aside for my android and what I do right
now is go to here and select this button
also sorry I will select this layer and
select this button and select the
spectrum and we export the layers to the
desktop for my assets and export it and
also this is for the preview okay pretty
nice now we are going to check these
sectors
okay nice and here I'm going to create
new under studio project with the
profile picture pages with the appear 16
and with the empty activity and this is
a plot profile chick meeting okay and
finish well we already create the new
project here and of course I will change
this way out with the linearlayout
because I think it's much easier for
profile picture so right now it's like a
bell but in the areas you can find a
failure which is the style because we
don't need any action bar okay and in
the hello world you can change it to
this text okay and you can copy and past
here like this and also we can find this
is 22 with the color is white and the
alignment is Center I think we have to
remove this oops
and this is for the text size x22 SP the
alignment center and color is white okay
and after that we are going to import
the assets without without the preview
pants we are going to draw able to copy
intense here and change the background
oops like this and we're going to sketch
to get the color for the first color
which is this one we copied the hex code
and going back to the color to change
the status bar color like this and then
in the language we have to set in the
orientation which is the practical
because we want to make the design from
the up to the bottom okay and here we
are going to make the center but I have
to make it much better at this and we
set in the margin top is 22 DP okay and
we have to set in the line height line
spacing extra 10 DP now maybe a okay
it's enough and below of the texture we
have to create the design for this
element okay but how to do that I think
we have to combine this picture profile
not divide by 1 and 2 like this ok
so here I will make exportable again for
the picture and import interview
I know maybe different name picture of
detail okay and imported users and we're
going to copy this picture pitcher into
my enjoyable in Android studio and below
the text field we have to create the
button this is the hike and we 145 with
the 140 okay
145 DP and 140 TP and the background is
doable it should be 10 and we have to
make it to the center and setting the
margin top is 32 DP like this and after
that block this button we have to create
the textview for my name yes I have to
create the my name which is the text
size is 18 HP and text color is white
and the text is my and alignment is
centered okay and of course we have to
create a magic table 32 DP nice but I
think the pet is very small so I have to
increase the font size maybe 20 or 22
it's looked better now and actually we
just to copy and paste and this is for
my location and the magic table is only
12 now H and this is we can change to
the Jakarta Indonesia all right and the
last one we have to create another
button for safe our account so button
here
we have to check if 250 with the 55 and
this is 250 DP and the background is
drawable safe button but I think the
layout hey should be more bigger writing
55 yes
and we have to make it to the center
parent button sorry I'm looking for the
long I think we have to set in the
margin top maybe 40 DP know 80 90 now
maybe 110 okay nice now we can try it
into the emulator just fly well done
this is our design from the sketch app
into the Android studio with the
emulator pretty nice isn't it so thank
you very much for watching and don't
forget to Like comment and share with
your friends
nice to meet you from Indonesia good bye