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

hi guys welcome back to my video under
DT and in this video I just want to
share about how to design the profile
and we can implement it into Android
studio so let's get started
okay I want to open my sketch app and
this is my skipper and then I will just
use document here and just it and we can
create new app board we just do to enter
a hot bot and I will choose mobile pot
rack for the material design and change
to the profile screen okay
so after that I will go to insert set
and rependa and I will click the copper
image here okay and remove the border
color and you can also change the
background color to the another color
which you want okay and after there I
will replace this depend L with the
image so I go to the beach it's not the
image from the anklet
okay so just working for the for the
image
well this is my unit so after that I
will create the offal here but now I
just want to change this layer to the BG
and go to insert and uh file and we can
create the profile picture like this
okay I think it's too big so I can
decrease it okay and we can replace this
to tangle with the image so I can go to
skip and loading the Kitsch in edge from
the unsplash.com okay and then I will
duplicate this layer and go to the UH
file and change the fill color to the
another color I will just the green and
move to the bottom method okay and I
want to change this color get to the
purple okay and of course we need to
grow this way up to the picture and we
can scare with the common key okay and
just make it to this one no no no okay
it is not so we have to look over here
and there we have the picture here but
it must if is not good so I can request
to the another image
I think not and you can see the biggie
here and then we can duplicate this
layer duplicate and change it to the
upper line and you can change the fill
color to the bloodier and I was just the
purple blood in here a bit and another
one is to the path followed air but
decrease like this and then I will
decrease the opacity okay I guess and
you know this is for the copper so I'm
going to this layer
well group it and copper so here's the
pictures profile and we have the copper
here okay and after there I want to make
this image to the drop shadow so how you
going to offer and shadow and you can
decrease the opacity to 30 K cool so I
want to edit this color Europa to the
drug here so we can choose the platform
so right away I have the the way so we
can select the upper line and click like
and copy style and select the offer and
press well okay so we got this layer and
make the opacity to the 100 and you can
see it's gladion okay so the next one I
want to click my name here at my
location so you can go to insert and
pack and click it under whiskey it's my
9 and change to the regular
come on so the black is for air for a
for a and we can make it to the center
and I will change the element of the
center and the contact is 24 click it
and we can get the mug in - thank you no
it's far away hey if you know and of
course we need to duplicate this layer
and change the font size to 40 and I
will edit the text
it's Jakarta Indonesia and we decrease
the color to the sinful and get the mug
in it's only 5 like it okay so we have
the profit picture here and we have the
map and the location here and next one
we need to clip something right here
well I want to create the button action
so the brutal winter set and on that and
you can create the button action here
like this and remove the border color
and I will give the color to the green
get the purple and decrease it to exist
okay and we need the label here so we
can copy this layer and fast and I will
edit the text to the same message and
change the color to the white and take
the water to the actually and just make
it to the center like this and we need
to block this layer for the button share
mission sorry Mitch button and we can
copy
this player sorry we can do pickup and
thanks to the green and move to the
bottom with it and we just the same the
button here and you can see this is the
space saw but unconscious what can I do
right here and how about the picture no
maybe I will creep the watch here so we
can go to insert and text interfere
change the color to the black okay I
love from the landline now the Panda 3
lovely and it's only for the watch
don't be seriously okay and just like
this and I want to make to the italics
and change the color to the teapot you
aspect it this is for the squats or like
a deal
baiu okay okay well done it's simple
profile picture design and we will
implement it into Android studio but now
we need to export one by one the effects
so we can start from this button select
this button and then I want to select
this later sorry honey I want to select
this picture and select this copper and
we can make export able on export layer
and to the desktop and creating
folder for Asia Chris and export and
then we can check it into ashes reject
the proper button and picture okay so we
move to understood deal so we need to
create new Android studio project and
get them to the profile and next and
next and with the empty activity and
next and finish okay just waiting for
the griddle booth you must be paid
Cheers
okay the director has a suspect arrested
just waiting for the preparing our watch
fest okay well this is our box press and
it can preview right here
Oh still loading okay and then we can
remove the hello wat we don't need the
hello and we can go to over and values
and style and make it too long action
bar and go back to activity man so we
don't have the action bar here okay we
can start from copy the effects so we
can select the file and go to your
Android project and profile and app
sauce and mine and rest enjoyable we can
press here or you can click right here
and press and okay it's simple way okay
so we need to create the copper first
for the image view and repentance and
repentance
and we have the background here and low
able go for okay we go to design oh yeah
that's suddenly I'm missing the content
layout so you can also use the concern
layout for your project
oh yeah I want to select this and scalp
back to the center Club okay and we can
research not on the weekend ahead okay
and I will zoom this and the conditions
this again okay cool so the next one we
need to create the the image view again
for our profit picture so this you can
see here the best few to image and image
field and just up and go to picture and
okay and just put it to the center like
this okay so we have the picture here
okay and after that we need to create
our mail here so you can see the nerve
under this tree and Jakarta Indonesia
but right now I am preferred like to
just the button first so we go to
undress video and find the button in the
widget and button and it can rock here
and move to the button and we can also
go to text and find the button and we
don't need this text we change it to the
background drawable and adjust button
okay and go back to the design and we
can move to the center clicking okay
it's cool you can click here
it's automatically for the constraint
layer and after that we need to create
our name here so we get those texts and
flying touch no no no we go to text
widget mmm sexy and you can create your
name here I can change
mmm okay and then we can check the font
that is 24 and the color is for a for a
for a you can go to text and find the
texture color with forever forever and
the size is 24 DP and just make it the
center Y is not working in the bottom
layer we can remove this gravity okay so
you can drop like it and give the margin
top is no Katie
oh yes affecting okay cool so we have
the our name here and we can create new
pixel here this is for our location
Jakarta Indonesia and you can drop like
in and get a mug in itself and then we
can make it to the center okay it's cool
and the last one we need to create the
bill on SWAT here so you can go to
escape and copy copy and then we can go
to under studio and click new text field
here and you can edit the text here
okay and of course I will divide it with
okay and just make it to the center so
we do 2x and fine
here we got it and this one be
successful and a Leland Center
okay and we can look what this is okay
we can look here and you can also check
the font size is 20 and then we here at
100 to do and we can find the text size
okay and then we can make the style
italic okay and can do to diesel engine
and our this is the next technique okay
and then we can beat us again Ricky
so we make it better right now and we
can setting this method is possible okay
well done so all right to legend if
after learned about how to design the
profile screen and implement it in two
hundred studio thank you very much for
watching this tutorial and I hope you
can understand and it's useful for you
so don't forget to subscribe my youtube
channel anga risky and nice to meet you
from Indonesia
good bye