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

hi guys it's me anger risky and welcome
back to my video so today I'm going to
show you about how to design the login
and register patch for Android so we're
going to create new documents first
start new under studio project and I
will give the name to remember because
it's back for the Geezer elegy and next
and we're going to use the empty
activity and next the end and kita and
then we can make the activity name to
explosion because we have the logic and
the surface and finish and it's Gradle
boil you can wipe for several time to
prepare your workspace your project and
your enjoyed ok just waiting
ok so we have done to prepare the undo
it so we need to check the XML first you
can click here and just the design here
so we can write thing for several time
for our preview in Android studio
ok so this is the basic basic design for
regime before I am going to descend the
sketch app I want to running this undo
it first you can come up here run and I
will choose my fe d undo it emulators
here i have installed the Galaxy Nexus
with a PA 19 okay so it's waiting for
Gradle will for our emulator and if you
don't have the you can install it by
yourself
okay I just installed the Galaxy Nexus
with AP 19 so you can install the Galaxy
Nexus or you can use your own smartphone
so you don't need to use the Fe D you
use the smartphone with your Android or
your Google pixel okay so this is a
preview from my fvd under its Whitwell
device and then you can see this is
hello what like we did in the left side
and we get the result in the right side
you can see okay so before we cut we
need to design so I can check the
mixtures for here that the first off one
is 798 and the heck is 12 with a 80 here
so we go to sketch app and choose and
waiting for Sketchup and then go to
insert and at bot and I will choose the
mobile pod right here and I will
research the width for fashion undies
and acti we can check it foot 68 okay
- hundred and sixty-eight and the heck
is shall be 12 and 80
okay it's too big I think so but it's
not problem well we start from the login
here
go gene and then I will create a insert
and I will click the text here for
recent name and I want to change the
color to the black okay and the white is
so be regular like this and then we go
to insert and set and line and take the
color to D for D for D for and I want to
make to the left like this
okay and I want to group this layer
group and change the use of RAM and I
want to make the center and duplicate
this group and change to Assad and
double-click switching to password like
this and then I want to create the
button for login so we go to insert set
and run that
like this and dim off the water color
and change the fill color to the yes
blue like this and the reduce it will be
titty no I think it's full
yes it's full and then we can give the
margin like this okay and then I will
select the use man copy and go to the
single and change the font color to the
white and edit to log in and make it to
the center and I will group all of them
to the gene okay it's cool and then I
will duplicate the load in here for
register okay
I will I want to change the shape
fitting go to another color like this
okay and select the elegy and things to
register and change the color to the
back like this okay and then we can make
it to bottom like it may be okay to know
and we need the simple logo here
intercept and create do fall I want to
click a simple logo
and then I will duplicate this of all
and change the color to the purple and
select the offal and to just the mess
here take this and I will duplicate
again and change the color to the
another purple and then I will do kick
it again and change the color to the
another color okay and you click it
again and select another color like this
if it is simple and go to shadow and we
can copy style and select all of them
and press style sorry we don't we need
to shadow like this and said Oh
and Sado like this simple okay
so we will create another preps for
register we select the load gene and
check lists the background color like
this okay I want to duplicate this layer
to register and change the login to
click on the cone and the register
change to a login okay and I will
duplicate this layer duplicate and
change the name of group to email and
change the password sorry we go not to
make it bottom foot
I want to change the name of label to
email address and move the register our
lodging like this Nancy it's okay we
have the lodging and we have the
register here so we can select this
layer and make it to group selection and
change the name to the logo okay we're
going to start like slashing we select
the logo make exportable and export logo
and go to desktop and go to login app
and source and mine and rest and durable
oh sorry
mystic this is my this is my older file
so we create the member member in
Android we can copy our image here and
we need the BG here this video detangle
BG purple and we need the BG fuel for
here BG silver okay so
okay so we move the Android and go to
text and I will remove this
one the most because I don't need well
we start from load in dot XML so we can
go to manifest and double click and
sorry sorry plus we go to rest and
failure and style and we don't need the
action bar so now action bar okay and we
don't have the action bar here it's
pretty cool and clean I think so and
then the first thing we need to create
this image view here we can move like
this okay and go back to text and we can
setting the background here for durable
logo and boom we have the logo here but
we need to make sure the size okay
if 200 we can change to 100 DB so I will
change the heck to 1 1 0 DP and this 1 1
0 DP okay and we can see the margin top
it's 150 so we can create in DP 2 7 t 5
DP
okay so this our logo and next we need
to create the username and password so
we click the person name here and we can
click here and then we can go to text
and edit text to match pattern okay and
you can see the properties in the right
side I want to make this layout right
oh wow okay we need to change the name
first so I will remove the text here
sorry I will change the text to hi
it's just like a placeholder in in the
website and then we need the padding
buttom it's 20 DP okay
and change the hand to username you can
see we can resize like this and then
change the color to 2h way to way okay
so we have the username here and we can
see the met green top of 130 so we can
get the matching top
it's adding 60 DB okay it's now and then
you know why I will copy this layer copy
this ad text and change the name to
password and change the text special
name to text password like this
so we have the positive and we can
change the ID this ad you can change to
a username and this ID for the password
and then we can make the matching top
we can set pattern top Android and we
can choose the sorry ID this name
oh it's not talking so we need increase
this barrier to this
why is not working properly we can take
to 300db law is not working properly we
can check first match pattern work
Swanton can check it for
okay so we just click drop like this and
then we can go back to text and get the
medgen button
sorry magenta 260 DP follower no no no
TT no then okay it's enough time we have
the username and the password here okay
well the next one we need the button so
I go to button right here and we can see
the margin it's 90 so it's called TT in
DP button sorry margin but sorry not Jin
top layer legends of its GDP okay and
layout much better and you can see the
fake it's 100 so we can change it the
heck it's 50 54 52
DP and change the background durable and
biggie purple and the color white sorry
we use the hex code one two three one
two three and capitalist picks out catch
its false and I want to edit the text to
load gene okay we have the button login
here
yay so the next one we need the register
button so I will copy this
copy and spacious and change the name to
Billy surface and the name is register
ok and we can take the layout below we
can get the name is splotchy and we can
check the G and this is the register the
ID and there you can imagine talk to 10
okay so we have the lodging and register
here we can preview in our Android
emulator we click here and the emulator
it shall be a red star so we just need
to whiting while waiting I want to check
the name the code of color so the first
of color we can copy copy and go back to
under studio and go back to the text and
change the text color for register 290
be 90 be 90 be oh this is our register
and login okay it's pretty cool right so
ah mystic like a closet okay so you go
back to text and we can run again and
okay okay while writing the Android
emulator we can next to register in it
we can next to create the register fetch
and registered ot FR
this is waiting for the emulator okay so
we go to layout and click like and you
and layout resource file and give the
name to register and okay and go back to
lodge in XML and go back to the text and
we copy all of Scots and we need to
press here boom but we need to copy the
edit text so we'll copy for email
address you can change the text password
to email email address and email address
and lay it below for the password and it
is a default email okay and then of
course it's not enough how to do that we
just need to remove the bed margin for
our logo so we click here and go back to
text and image feel we can get the DP
for city and in username we can get the
margin top 2 TG no it's not ok
you can see the okay we can get the
below of immature okay
and increase the emergence of to touch a
a kiss and in the loggia we find the
lodging here you can get imagine 260 now
90 maybe 100 okay it's good
so we have the register right here we
can change the name to register and the
ID is registered and name to lodging and
the ID to lodging okay we have the
register and login here
oh sorry sorry under under like this we
just need to change the name of level
register and his for low tier okay
this is register and this is login so
you can see in the design we can fill in
our emulator we can see basic Isabelle
flow budget and registers
okay just waiting for several time all
right so this is our load gene and you
can type by yourself it's up to you so
I'm going to create the function in Java
for boots or its effects so we go to
Java and click here and we go back to
the lodging XML and you can see our
buttons for register is the ID is
register ok so we go to Java and the
cluttered game declare a variable for
register and press all option ok we
import new question and then I will
register and button and file fill by ID
and r dot ID and hit our button register
then registered and set click and
no fuel like this and then we're gonna
to intern with new intern and this first
class is loading loading this sorry
so Jin DS and comma and go to the
register class like this and stop
activity to click to intern all we need
to import the intern so I will import
class like this okay we have the basic
Java for change the patch so I will copy
I will copy all of them copy and creat
new cell here for register dot Java
register and ok and I will press like
this and you can change the lodging to
register and change the login to
register and change the this we can
remove we don't need this
okay we don't need this okay and then go
to manifest and double-click
after you create new Java or XML you
need to register your activity is
registered okay so I want to test it
first
you can fly here in our emulator so we
can waiting for it it's grey delisle
stunning okay it's restarting so when I
click the register it shall be to fetch
off register critical like okay we can
play again where again it's all they go
back to the rajan so i want to click
here plugin we go to login and select
all of them copy and press again and we
can paste go back again to register and
then i want to change this name to
halogen back to login okay and we can
copy copy and press and press and and
this is the registered and this is the
login so it go back to login from the
register and the layout for the register
and go to register dot xml and go to
text
and then you can see here D ID you can
change the back to low G we go to
register dot Java here we have and then
we can run again our application we can
restart it sweating
okay we're going to test a geezer and go
back to logic and go to a register and
go back to lodging and the guitar and
logic it's pretty cool okay well thank
you very much for watching this video
tutorial and I hope you can understand
about my tutorial and please let me know
if you have any questions so I can help
you and then don't forget to subscribe
my youtube channel and see you the next
video tutorial