Counter App in Sketch App and Android Studio Tutorial Video Lecture | How to Design UI in Android Studio

[Applause]
hello everyone this is anger escape from
Indonesia and welcome back to my video
in this video I'm going to show you how
to create a simple contour application
by using the Sketchup and under studio
with the XML and Java so first we need
to design in the sketch app and I'm
going to create mobile design here ok so
right now I will change it to mobile to
the contour
cool and of course we need to create the
status bar we are just placeholder like
we did in the previous video this only
for the press older status bar okay and
after that I want to duplicate this
again and change it to the maybe hitter
and I want to decrease sorry I want to
increase maybe 250 okay and the color I
want to use the blue color so I'm going
to here looking for the blue okay so the
hex code is 5 a 5 e87 edy
and here i want to get the first color
here and the second color should be
different maybe this one okay cool and
right now in set of data i want to get
the title for the people of party and
change the color to the white and font
size are on 24
and after that I want to create the Edit
packs here so I'm going to press you on
your keyboard to click the edit text
here I want to setting to the 100% and
how we create new group with edit text
and here we do not to setting the radius
around 20 sorry 10 okay you know and
after that I want to change the color to
the white color and get the Siddal here
and after that I want to setting the
opacity to the 10 pixel and removes I
mean we need to decrease the away so -
bait 22 and 22 and I'm going to make it
to the center and of course in the
background I want to change it to
another color which is silver so the
background is f9f 9 + f9 and here I want
to copy this people the people of the
party and I want to press here and
change the color to the for a for a and
for a and after that I want to change it
to the robot oh and also be ball novel
to change it to the number maybe 1 1 4 5
and the font size is
seven two and after that I want to
create the button here yeah
just click the button but I think I will
duplicate this duplicate this group so
come on D and change it to the contour
button and move to the button and the
map gin button is to t2 and remove sorry
I mean change this texture help people
and change the way to the medium and
change the font size to the 36 no maybe
24 I think the way is regular and hag
should be 45 maybe 55 ok and move again
to the button like this this is 32 and I
want to change this color I want to
duplicate sorry I mean I want to get
this gladion
so I just set it and whenever I click
here I can use this gradient like this
and the at the people we're gonna have
to change the wet color and here I want
to decrease maybe 20 so this is the
button for people but I think the
gradient is not good so I'm going to
change the solid color again yeah it's
better isn't it and now I want to make
this negative space - more beautiful we
can use the circle just press o on your
keyboard and we can make it like this
and change the color to the white
yes and I want to duplicate it and this
opacity should be 50 nah nah nah 30 and
this 60 so it should be like this I
don't know what this for but I think
it's just ornament
so whenever I click this people this
contour will +1 automatically with the
Java so right now we will implement it
into the entry studio and the Java but
first I'm going to select these tags and
hide them because we don't need we just
need the background yeah you can see and
select here here and button and then
we're going to export a ball to the PNG
which is 3x and export layers and into
the desktop I'm going to trade new
directory which is assets and export ok
and once your export the end effects you
can see we can solve again because we
need this simple cool now we just need
to go to assets oh I was wrong to put
the assets so I'm going to move here so
here we go we have the counter button it
detects big run and people of party and
the next one we just need to go to the
Android studio to implement this design
into the XML in Java now I'm going to
create a new Android studio project I
think my studio is done loading so
waiting for the minutes and create new
application contour app and next and
next with the empty activity next and
finish ok so let's do that
ok but firstly I'm I will take care with
the XML we forget the Java first I'm
going to remove this and currently we
are working with the constraint so I
just remember in the re s we go to the
colors to get to change the status bar
color
okay we're going to copy the hex codes
in the color primer it up like this and
in the spell we don't need any action
bar so we just change it to no action
bar go and we go back to our directory
which is the assets and I'm going to
copy all of them into the drawable
directory and then I'm going to design
and go to the image to get the images
fuel for the heater and in the heater we
can select like this and change the
Scout type to the center crop and I want
to change the head which is 250 so the
here 250 okay and setting the margin
layer right and we go to setting margin
laughs and margin top
and here we gonna do setting to the zero
and here to the zero and the layout
which would be much better
cool but firstly before we go to the
edit X I'm going to check the layout
first so we're gonna to run into the
emulator oh yeah we already did it
school so we just need next to the pegs
and plaintext and I'm going to drag and
drop here and just setting the margin
drag and Margene laughs okay and after
that I'm going to set into 32 and this
is 32 and we go back to the text section
and change it
big role drawable edit text and hang of
the edit text it's 112 so okay and go
back to the here and change to the max
param and go back to design and I will
drag and drop here and then go back to
the text and I will add the text here
text maybe 1 4 5 and the text size is SP
and the style is both okay and the
element is Center so you got the 1 4 5
here cool but the actually the page
start from the zero and they're here and
we don't need to forget to change the
color so for a for a and for a it looks
better now isn't it so the last one we
just need
to the widget to the button okay and
setting it to the center and the bottom
and left and left in in the right and
the left sorry and this is should be met
pattern and the margin bottom is tutitu
tutitu and this is the 32 and this is
should be 45 DP no no no 55 DP and go to
text to change this button to the
background drawable contour button now
you get the dry block ultra button here
but I want to change the hair to the 60
no it looks better now okay first here
oh no I I think I get the problem here
so I think I will change it to the text
field okay and we don't need this sorry
we don't need we don't use the edit text
I'm sorry
so I will get the padding top 20 DP long
20 P 15 okay before we go to the Java I
just want to make sure that the layout
is correctly so we're going to run this
application into the emulator again to
make sure that everything is going well
so this is what I'm worried about the
layout it's not good so I will take care
of this so we got a little design and we
can set in here and let's try maybe No
No maybe 130 170 okay it's good let's
try again to run this application into
the emulator
it looks better now but we have the
problem with the text field so I'm going
to the text and just remove this
spreading top yeah and we play again
this application to the emulator uh-huh
it's better now
okay it's time to ready to go to Java
language firstly I want to change this
idea the page view to the contour nun
console and this is bitching control
once you change this ID you will get the
layout like this but don't worry just
copy this bit encounter and pass like
this and we go to Mel activity to
declare new variable which is butter
between control and this is fix fuel for
the culture and also we need to import
the class once you declare the variable
you need to get this button our ID BTN
contour and counter is fixed view RIT
contour
okay so I'm going to create a new
function for the BTN counter check on
click list owner and here we are going
to counter plus plus and textview sorry
I mean counter subtext
to the city plus string so because this
is integer and I want to convert it to
the string all right in here we need to
create local variable which is the
controller sorry integer counter is 0
okay and we're gonna to stop this
application and we run again I'm going
to okay so let's try okay
it's work but hey I'm forget to setting
this text to the zero now we play again
this application into the emulator and
make it more beautiful so the start is
from the zero people are coming to your
party people are coming to your party
people are coming to your party just
like this until 100 or whatever you want
is pretty cool isn't it well thank you
very much for watching this video
tutorial and I hope it's useful I'm so
sorry if there is something wrong from
me well don't forget to subscribe like
comment this video and share it to your
friends
nice to meet you from Indonesia bye bye