UI Design to Android XML Tutorial - Cart Shopping Video Lecture | How to Design UI in Android Studio

[Music]
hi this is Unger escape from Indonesia
and welcome back to my video in it today
we are going to learn how to design the
application for the shopping cart so
we're going to use the scatter right
here so I'm going to create a new
artboard for the shopping cart and then
I will create the header here okay so
this is for the header and this is BG
heater which is the background and the
background we will create the tags for
the title and items so title is my court
okay
and I will change to the 24 long 32 okay
and I will duplicate this and change the
font size maybe 20 to 16 the font size
is 18 items okay and then we need to
make a 15 for the margin and this is for
the text on the caption and the margin
length is 20 and the margin top is 20
okay and after that for right now we
don't focus on the color so we will make
it special
I mean it's only for the word front
first and we will change the color okay
so here I'm going to create the content
here so we both from the hitter and by
press you on your keyboard to clip like
this okay and then we need to change the
color to the white color and this is for
the items and a margin margin top from
the text is around 20 okay
and we need the saddle and I will change
the opacity of the signal and okay and
this is what the big run item and after
that I want to create the item right
here so what I gotta do to make it group
it first so DG item and then we need to
create the tags I think we can copy from
this thanks and move to the item and
just change the color okay and I will
change the font size 24 no 22 and this
is maybe chicken cool so we already have
the text of the item and we just need to
create the item maybe simple item for
the picture only so I'm going to create
like this and then we just need to this
okay and this is for the picture picture
but in this case I will use the craft
plugin to get the picture maybe the
picture is about people
okay but it's not really quality and
then we can use the another so I will
lick it by this color and I will make it
to the middle like this school and we
give the model F is 12
okay and this is should be small maybe
active and this is 13 cool
now I'm going to make it to the center
again okay nice so the first item is our
sketch book and this is the price
maybe like this and we gonna to copy and
we're gonna talk copy again like this
okay
and then in the below here we need to
create the button to buy out so I will
press R to click the rectangle and
remove the border and change it to the
bottom like this and this is for the BG
buttom okay and then I will define like
this and this is the different color
like this okay and after that I just
want to select this and move to the
bottom like this and my car like this
okay
I think it's very cool right now and I
think it's so big that we can change it
to the 45 okay it's enough this lighting
50 okay enough
and this is the total should be here so
I will copy this thanks and I will move
here so this is total of the price maybe
the total is $200 total price is $200
okay and then we need to duplicate again
to here check out like this
okay step number one is already finished
now what we gonna do it's only to change
the color to make it more beautiful so
our primary color is how about pin yeah
we can try anything so we can try this
color no oh but purple okay we can use
the purple color for the primary color
and the checkered should be purple also
okay and this is the checkout button and
then we need to change this color maybe
it doesn't have scholars or just buddha
but the purple should be small it is you
know what do you think not bad no no not
expect I think this we can use another
purple which is black like this and this
one should be white color okay and then
in this color we can use the another
color from the purple but make it
different color maybe yellow because
currently I don't have any I don't have
the picture the good picture you know
what I mean
nothing we can copy this and practice
okay and this yellow I will change to
the another color
maybe discolor copy and paste again and
this is the different color again maybe
blue and this is should be pink and this
is the blue color okay nice so this is
the cut my card
yeah and I think I can add some
here so just try here I will create
another maybe just use the vector no no
is too big we can try the another no
just try again oh sorry
okay okay okay so we will make it to the
fill color but this is what we mask and
this is a different color maybe we can
used another color or we can use wet
color but make it opacity like this so
what do you think I think we can use ake
seven nine five so you can also change
it to the airport and I pas nights and
the last one is like book pro retina
okay so you can replace this color with
your picture if you have but currently I
don't have in the check out our list the
regular it is and my card should be a
regulator nice okay so this is our
design and we will make it into the into
the Ender studio so let's do this well
before we are going to the Android we
need to slicing the assess so I just
need to is busy item I need this big
item and I 1x and export to the desktop
and click new folder accept and I will
give the Lambie theater and this is BG
header bit header we needed speed hitter
and rest of design I think we can make
it by entering so let's do this with the
ndreds to do whatever we are going to
create new Android studio and here
shopping
soppy and next next and with the empty
activity and next and finish in this
case we don't need any Java language so
we are going to directly to the XML so
here
for that I will change the styles to the
no action bar okay
and then we must this hello world
because we done it and good to escapes
to dig to get the hex color for the
status bar cool now we're going to
colors and this is colored primary duck
we're going to replace cool okay so here
we just need to import our assets from
the desktop assets and I love them and
go to draw able to pass all of them and
then I will add the images whew this is
from work Contin and repentance is from
the busy hitter okay but I think we need
to make it for so much parent like this
and the scum type is center drop so I
just try to make it full and this is for
okay and above of the images fear we
need to create the text view for the
minecart so the text should be my first
okay
sorry this is Barack wanton and this is
drop button and we need to move here
acting okay next one and the font size
is 32 pixel sorry 32 SP 32 SP and the
color is white
okay and then this is another another
text which is a
items but I want to setting the imagine
force here so the margin top is 20 and
module F is 20 so this is 20 and 20
okay but just a difference or the margin
top is 70 sorry 50/50 and margin F cos
30 and I'm going to create a new text
view to see it what content and rock
content and the text is 18 items and the
text color is white and the text size is
16 SP okay and then I will move this dot
to the below of my cart and this is to
the left like this so the blog is top is
6 and the left is 50 nice now you
already have the hit like this and after
that we need to create the layout which
is maybe you can use the linear layout
okay and this is maybe 30 DP and this is
maybe we can see here actually I'm sorry
30 and 80 80 DP okay and we're setting
the background
BG item that is okay and I want to make
it into the middle so magic left is
turned into DP no we need to or actually
currently we use the constraint yet so i
forget so this is for the margin top
margin left and margin
and imagine top we're going to 40 no
touchy
okay it's not but the margin left I
think I will increase okay nice 3,330
okay and hey maybe we can 20 nice so
instead of the linearlayout whistle we
have to create the images view but
firstly we setting the orientation to
the horizontal and just make the images
view so the images field is around 54
and 54 and color
sorry big rock colors is use for afraid
for him and we need to setting the
margin
laughs but I think we need to make it to
the center so graffiti is centered and
margin left is 32 DP no 32 maybe 16 okay
it's enough and the color is we take
from this hex code nice this is the
picture and I think the rank is being
96-97 plenty okay it's better and then
we need to create the texture for the
tittle so our internal repentant the
text is sketch book and the text size is
18 SP the color is for fa fa and the
margin left is
term DB and the margin top is 22 DP okay
and then we need to create the picture
again but this is for the price the
price is okay but yeah we thought we
should we have to create another linear
layout here this is for the component
and one Contin and this is for the
orientation is vertical okay but you
need to change the margin top it is nice
and I think the font size is not active
2tsp yeah I think 60 it's okay when
margin top is for lipids and the text
color is different maybe bada P okay
good so this is our item with the
lennier and I think I want to duplicate
this okay I will duplicate this Adam I'm
sorry this one and this one you can copy
and paste and it sort half the module
top or this ID so this is item we need
to create this idea course ID is item
one
so here ID 801 okay now you get like
this readiness
but the margin top is only 20 so we are
looking at him it is so you can also
change this color to the another hex
code so looking for this this one nice
just change the pegs maybe you want to
change to the iPhone X coil by ikonics I
think I will buy bismillah okay so this
is the header and item so we have
already created of them so the last one
is just to create this okay so the
actually we can use the linear layer and
we can also use the another layer but I
think we will go with the landowner
alright so here I will create the
another linear layer so this is for the
match pattern and sorry it should be
miss Perrin oh okay
so I think we need to change the hike
maybe 40 50 DB and the background is
black and this is okay and I want to
remove this and just make it for maybe
the Nexus 4 is okay okay now we're going
to move to the bottom parent button for
sorry I think I just need to drop like
this okay
and the bottom is 0dp nice so this is we
will create
button for payment and for the total so
here we're setting the orientation to
the horizontal okay and we need to
create again here but firstly I would
click the Rachel maybe trees and then
this linear layout again and we're gonna
to 1dp sorry to be and this is for the
next parent but I will setting the
layout way to okay
and the background color should be
different so we take from this
background the hex code is this we got
its and we create again the linear
layout but the layout which should be
one and background color should be
different also so we got it
nice so we I think that we can copy this
text view and input into the vanilla
okay but matching top just removed for
so far we got to check the much
interpreting just just a graffiti to
Center and we change the total price is
200 and the color is y and that the
Texas is 22 SP okay and then we just
need to copy again and pass again and
change it to the check out nice graffiti
Center and graphic in Indian Center
I want to make it to the center so I
think we need the Medina oh hi already
so this is 20 to about 30 26 okay nice
so this is the total place and check out
okay so this is your design with the
sketch and under studio so I think we're
gonna to take a run but before that I
will make into the 18 HP nolan 20 okay
so we're going to run into the emulator
bismillahirrahmanirrahim well this is
our design clinical isn't it so thank
you very much and please subscribe my
youtube channel so nice to meet you from
Indonesia
good bye