UI Developer using Sketch; Zeplin; and Android Studio Tutorial Video Lecture | How to Design UI in Android Studio

[Music]
hey everyone welcome back to my video in
youtube and yeah it's midnight but we're
going to learn new here which is scats
Zeppelin and Endre studio so we're
convening their apps three apps cat
zapping and end studio and I'm gonna
show you how it was the workflow as a
designer and developer for mobile
Android okay well first of all you have
to prepare so icon or illustration that
I downloaded from Fred icon calm and I'm
going to design the simple layout with
the sketch happen okay so I give the
name apps and make new art board for the
mobile and going to them splash screen
and don't forget to save your document
because it's really important okay
so mobile UI okay cool and after that I
will copy those icons to my project and
make it small okay and then
I will make like this
okay nice and I'm grouping those icons
to one group and make to the center I
will make it
maybe icon app okay
and after that I will create the title
here with the text Dubai sorry maybe you
want to travel to Dubai and change the
color for a five AFF nffa and I want to
give the watching table is 20 now 40
nice and then I want to duplicate this
text and wicked smell make it small
maybe 16 and you can tap on everyone so
I create the content like this and I'm
going to change the line height and
change the color okay
and of course we need the button here
but first of all our grouping these
photo captions and create the button
with the right angle by pressed circuit
R with this operator arithmetic - 2 T -
okay and then we have the matching left
is 1616 and then I want to change this
head to 45 but I think we have to
decrease the weight again maybe 200 okay
and then setting the radius to 100 and
we want the border color and change the
color of the button to be purple this is
for the button bit here and change and
get the label here for get a second
this is go to X copyrighting because
if you only write maybe second up or get
stopped it's not really good but if get
a taken people will get a second so
that's why I Rock get a second okay
and I need the big run here by using a
rectangle just shortcut our big run and
this is big run act okay remove the
border and you can use the color
I think the good color is purple but we
have to change this color to be red
color and this button should be no I
think I'm gonna change this big long
color so I'm using gradient the first
color is 5e8 70d and the second color is
five Edie
second Edie okay this is nice so we have
space clean here and we can try to use
the plane to inspect our design easily
for the developer and also Android
designer or UI UX designer but first I
want to change it to travel to Dubai or
only Dubai okay practice
and change to the medium Dubai and check
safe though 20 and setting the line hike
again
okay nice we're going to save this
document and then of open his airplane
create your first project and click and
get the name here mobile UI Dubai okay
so everything is clear so you have to
upload your design directly from the
scats plug-in zipping and export
selected up box and select my belly I do
bye
okay it's done clear so this is your
dashboard and this is your project okay
you can transfer to owner see if maybe
you have friends that working with you
use an order for a part and then you
want to transfer the ownership to your
friend so you have not longer country
both into the project we can achieve and
delete so double click and this is
screen but I still only have one screen
it's okay
so it prevents you one screen but you
can also subject this okay and double
click and this is a wall off screen the
design so everything is clear you can
inspect all of them this is finished the
Roboto with the medium and this is how
we can convert these text into the
source code its XML and sister Kanta
nice if you select the background you
will see the first color is 5e and the
second countries and that's the option
which for the screen size if when you
got this color and you got these
properties and
I forget here we cannot will not be able
to export this assets so this problem
we're going back to sketch and select
this building and make exportable and
select this ferris wheel and make
exportable and then we'll go into self
and select this out but again and repeat
the last step that we need to import the
design
ok then once you upload your new fashion
of desire you will get notified here
that this is for the fashion this is the
long fashion the old fashion you cannot
you not be able to export those sets and
here you're able to us to download the
sets
ok still doesn't get it I'm trying to
figure out another way
so in Dubai I want to change the color
to black like this although maybe too
yellow like this it's not really good
design okay so in this button I will
change the color to yellow yes okay and
change this table color
it is and then we save our document and
select the splash screen and Zeppelin
and export again and import we're going
to updating split screen design let's
beautiful thank you okay so you click
this icon and there's the option but
actually you can you can get the
old-fashioned completely but you have to
update your fashion of the plane so this
is the earth design the last one we
still have the background with five 156
T but in the new fiction the bedrock has
changed and the label is change the
color and the background changed the
color so this is really really good in
this direction it helps us to remember
the old fashioned for developer and
designer okay so I want try to create
new Android studio project for mobile
Dubai UI and next next with the empty
activity next and this is for the splash
activity cool finish and still rendering
okay in this case we had not yet seen
Java because we're designer only years
XML but if you want to learn Java it's
okay I'm going to cross this Java and
preview so we have the screen likeness
okay first of all we're going back to
the Zeppelin and what we need to export
for switchings okay
this icon okay everything we can make it
by XML it's easy Lara but does icon we
can use it
for our main cassettes in the Android
studio so click this icon building and
download and browse and then going to
enter it to do project and looking for
Dubai this one and going to AB source
and main and RDS and exported it's done
so fast now we're going back to in the
studio and checking your artists and you
will see there's a lot of fashion for
those icon XD PA
mdpi hdpi x package yeah a lot so the
question is why the picture is low
resolution because I only have low
resolution so for you you have to
prepare hike resolution which is 520 by
multiplication 512 okay that you know
and then we're going to barracks repeal
to export the icon and you had to buy UI
and export and check again you some so
easy yeah indeed cool and after that I
want to remove this action bar going to
style and change no action bar here ok
and then we need to get the big one
gradient for our splash screen and we're
going to bigger
Abner's select the first color but yeah
why do I escape
I for that because I'm still designer
but if you're developer you can select
the screen and get the first color and
going back to Android studio to change
the status bar color it is and it
changed and then I'm going to draw able
to create new drawable resources file
and this is background screen and change
the selector to the set okay and then
here we change the gradient star color
and an color is this
and setting the angel empty wait no so
it shall be
[Music]
360 no okay the angel is 270 now we are
going to end it here to setting the
background drawable bacon screen oops
nice here you go so this is pretty easy
I don't have scats
I closed my sketch app now and I still
only have zipping because I'm developer
isn't it so in the hello world I changed
it to do body and change the color text
color okay and going back to the pintos
fill all this one you can copy exactly
here and just press here oh you got this
to be nice
and change to imagine top is 85 from
this icon but we have to create the icon
first with the images field for the
second okay now we are going to design
here and looking for images and images
view just drag and drop and looking for
building like this but I got some error
here
what's going on it should be Source
Energy
sorry I will use for big brown building
but got some error here let's check it
first
well well the problem is the resources
name must be built generally began with
a character and here is number but
number it is character okay
so first we have to change this layer
name we're going back to scatter okay
we're asking to designer head designer
can you change the layer name so I can
use it built-in and this one is well
okay we're going to self again and send
to Z plane but stand clear and try to
export again those assets to Dubai UI
and this one to Dubai UI and check to
Android studio so we can try change it
okay so you have the Dubai here I'm
going to remove this images view and
going back to design and drag-and-drop
again
we checked the building nice and it may
just forget to check the place and we
have to move this image it feel above
both of TV yeah pretty cool and we have
to setting this but here we are near to
setting okay now we remove this and
setting this and select this building
and setting the matching top is 100
maybe a key but we can also check in the
Zeppelin Oh 70 okay and go back to Japan
to see Dubai is 85 so click Dubai and
setting to 85 but it's too far I think
but we can decrease it to 65 or 55 okay
and we need to create the text view
again we're going back to the Zeppelin
to copy the source code copy and pass
here
now we got the text like this pretty
easy isn't it
so this is how Zeppelin can help us much
better
we're going back to design and change to
it ok nice and then the last one is
button we need to create the button for
our design so the width is 200 with the
55 as 45 DP and this is 45 GP and I
think is 65 Oh No 55 yeah and we have to
put the button the below of the screen
60 DP from button so here we're going
back to design and setting this button
to 60 okay and then in the button we
have to set the text which is get and
Taker and setting the color the text
color we can get it from the airplane
just copy this and here we go but we
have to set in the background of this
button drawable BG button now we're
going to draw able to create new
drawable resource file BG BTN and just
copy the source code but you have to
change the color of this button so the
color is not gradient but solid color so
here so P change solid and color
I kiss you and you have to set in the
corner okay but unfortunately this
radius is only that is 22 radius okay so
we can check and here we go
and I want to decrease nice and this is
the font style sorry
textile bonne terre this is your design
with the scared zapping and under studio
so easy isn't it well thank you very
much for watching don't forget to Like
comment and share to your friends and I
hope you enjoyed this video and let me
know if you have any question that I can
help you quickly don't forget to follow
me in my Instagram and check the
discussion in the video but bye nice to
meet you from Indonesia chill