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

[Applause]
hey everyone this is anger is key from
Indonesia and welcome back to my video
in the tube
in this video we're going to design the
profile with the scatter and we will
design it into the Android studio by
using the XML so if you don't have to
scatter it's okay I will prepare the
except for you so you can easily run
along with me in the end do it XML well
check it out hey everyone in this video
we're going to design first in the
scatter and then we're going to the
endris to do now I'm going to use the
scatter and click new document and click
new artboard by press a on your keyboard
and going to mobile design and this is
our output and change it to the profile
and after that I want to create the
header first we're going to press R on
your keyboard and I will setting it
about 260 and I will drop you to the
header and here should be big roll okay
and after that I will create new ellipse
for the picture and I think that you can
change the color yeah I know this is
only for the placeholder so group this
to the peak and this one to the Dacron
okay and select the pig and setting like
this
and then select the big run and click
edit and press common to get the middle
of the knots so click here like this and
then I'm going to setting the few can
fast and so rules and here okay and we
just take this and with the practice
okay and then I will duplicate this of
all just common D and common key and
then setting to active and remove the
fill and the border should be wiped like
this and the thickness to pixel ok and
select this awful and going to the craft
plugin to get the picture now I I get
the picture here okay and then I want to
make this big one looks like small
beautiful so what's all I do is change
the fill color to the gradient color and
I will use the discolor no blue what do
you think about the blue okay we go it
blue
and after that I will duplicate this
background just duplicate and select
this big role and change the fill color
you can change to the silver like this
but I think it's not good so we can try
with the blue okay it's better okay and
inside of the Hidde we need to create
the button to go back to the to the
previous activity so just press all on
your keyboard to click do phone and this
wrong maybe just e5 and we setting this
and I will group it to the big BTN and
remove the border and change the fill
color to the white color and then I will
give the settle and setting the opacity
at our 20 so you will get the design
like this but we need the icon here and
change the color to the black and going
to the plug-in icon fun and simple line
icon and we will get this icon and I
will decrease maybe actually now maybe
16 okay and going to make a to the
center
okay
and I think this picture needs the Sydow
so we click the seed oh okay it's better
now and then what's all I do it's to
create another information such as user
name service such as name and occupation
so here it's not heated again so just
press T on your keyboard and I will give
the name here and this key and don't
forget to change to the robot oh this is
the default phone of the N type and
change the size maybe 24 okay and in the
header
I will ungroup so I can easily get the
module maybe this is zero okay and I can
duplicate this and change the font size
may be active 14 okay and here you can
designer and catch that no maybe just UI
designer and Indonesia okay and the
magic is about six like this so this is
the basic profile and after that I want
to create the social media but firstly I
want to click the button here so I will
group it first this is information and
just press R on your keyboard to create
a new rectangle for the button and the
button should be 50 and then I will
group it the message button
and remove the border and change the
fill color okay now you got the message
button and I will give the lamb here
missiles anger or send me shots okay and
then the font size is acting and the
color is white and then I will duplicate
this and text it to the icon with the
icon phone okay and about 20 and we can
make it centered like this okay and I
will group it to make it to the center
and here we already have the button such
as the sandwiches and I think I will
duplicate this and change to the top
like this can move like this okay and as
you can see the button is 3d so it's
like the flat design but the user will
understand about all this is the bottom
because we already have the saddle here
okay and after that what we need to
create right here
it's the maybe you can create the
Facebook Twitter or anything else
so I will copy from the back button and
I will move here and then I will comment
key to make it more bigger maybe 120 and
change it to the FD BTN alright and then
how I'm going to change the color to the
blue because this is the Facebook
okay and change this icon to the
Facebook icon oh I don't get here so we
can use the phone out song to the
Facebook okay and I will move like this
so we already have the Facebook button
and I will make it okay and then we can
duplicate this yeah and this is for the
Twitter so we can change the Twitter
icon
okay and also we need to change the
color because this is Twitter maybe the
Twitter color is more different I think
this one okay so don't forget to change
this to Twitter button okay and the last
one I will create for Google+ or
LinkedIn yeah I think look at it it's
more beautiful no no no link Athene is
useful so we can just link again and
just change the color okay now we
already have the button Facebook and
Twitter and linked at it and if you want
to create something here you can create
the picture maybe but they actually I
don't know what so I read what should I
do in the US in this section but firstly
I will select the device designer and
change the color to the silver okay so
it's different color okay and I think I
will move this I will move here and let
the big role
like this okay
okay and it's a simple profile yeah
because we don't have any content again
so I think it's enough for the design so
the link at Facebook and Twitter and you
can send the musics and I think it's
only the kuffar that you can change it
to the picture maybe bits okay or you
can use the network because the picture
is natural
I will it's not a picture okay now we
have the profile simple profile that we
can implement it to the end ROI but
firstly we will select all of them but
just make sure this is we need to change
to the outcome between which is linked
up and the information we don't need so
we just need to select all of them and
without the information and then make
exportable and export the layers but
firstly we're gonna to 2x because we we
will avoid the blurry pictures so we can
export now and going to the sets and
then just export and select the profile
and export this is for the layout they
are okay
now we're going to the Android studio
okay we will create new Android studio
project here and this is profile and
design okay
and we going to the next and next and
with the empty activity and this is
should be profile activity and finish
okay we don't need any Java here so we
just close and then I'm going to
remove the action bar because we don't
need action bar I'm sorry here so the no
action bar okay and then the color of
status bar there's no color so I think
we can use the blue color so here I will
change to the blue no I think black is
better okay now we just need to remove
this textview okay and then just copy
all of assets to drawable don't copy the
layout okay watch the leg okay don't
copy the layer and go to tribal and okay
now we already have the assets so what
we do not do it's to go to design and
images and images field and looking for
the background and here the scope type
should be Center crop and this is much
better
and the heck is 266 okay
and we can make it here and I'm going to
make it full so I think we can change to
the Nam and this is make it full sorry
mistake skull sack should be Center prop
and this is full and move okay and now
we can click here to infant the
constrain and after that we need the
button for the bed so I tap here and
here and here and then setting it to the
60 and this is 16 and going to the text
and double click the button and change
to the background drawable big button
and then we need to change the to TDP
and this is to GDP but I think it's
little small so we can use the 50 and
this is 50 okay it's bigger now and I
got the problem here so we need the
click the images feels to replace this
so we can click here and picture and we
can see the picture is only 90 so here
90 dB but I think 120 okay and we can
move here like this and we can setting
the margin like imagine less okay so
this is for the profile picture now
we're gonna to create the button for the
same assets so I'm going to widgets and
button and just drag and drop and
here and here and here and this is zero
and the button we can double click here
and I'm going to change this button to
the bedrock drawable missiles button and
here should be 50 DP now maybe 70 60
yeah 60 is better now we create the
button for the Facebook so here you can
easily drag in the pot just duplicate
this but I prefer to click the button
again here and setting the top margin is
32 oh sorry
before we create the button we need to
click the text field for my name yeah
don't forget about my name and here
should be my name is angle risky and the
text size 22 SP low 28 SP okay and the
text color is for a 4-iron for a and we
can make to the center like this and go
into the design and select anger escape
and setting the margin top is 16 okay
and we create another text field for my
occupation occupation occupation
occupation and in the text field we can
click the you are a designer and
Indonesia this is my country and we can
change the text size maybe 18 SP and we
can set in the constraint like this and
module top is 20 sorry
twelve okay it's good now we just need
to create the Facebook button that we
can easily click by the button just drag
and drop and don't forget to setting top
and setting left and then I will go to
text to double click this button and
this is background drawable link cut
button and we can check here the link
button it's only 40 tool that we can use
it may be 62 DP and it is 62 DP okay and
I'm going to set in the margin top maybe
26 okay
and the margin left should be here this
is 26 and we can duplicate this button
don't forget to change this ID okay and
this is another button which is the
Facebook and then we can duplicate again
the button just press and don't forget
to change this ID like this and this is
for the Twitter button okay and going to
the design and click here and click here
and click here and setting it to the 32
okay and click here and remove this here
and this is
- teacher okay now I hope it's working
properly and I'm going to paste it into
the emulator so just that's it and I'm
going to apply it and you can see the
layout is not beautiful because I forgot
to setting this just setting to the top
like this or you can certain here to
here okay but it's not really good so
the best option just setting to be here
but make sure this is maybe around 100
now 200
yeah and we're gonna to play again into
the emulator now the layout looks more
great than before easily well this is
our profile that we can use into the
Android application so don't forget to
Like comment and serve it to your
friends and thanks everyone
nice to meet you from Indonesia goodbye