MyQuotes App - Android Studio Tutorial Video Lecture | How to Design UI in Android Studio

[Applause]
hey this is engleski from Indonesia and
welcome back to my video in youtube in
this video I'm going to show you about
how to design the screen with the XML
language but firstly I want to say to
you about this video tutorial series so
we're going to create the simple
application like the quad SIA the quad
and we're going to use the XML and Java
and we're going to create the player and
function of its the button ok so this
application mainly will generate the
random quotes for you maybe you already
need maybe already click this
application before but I just want to
make sure this is different from another
application well let's get start to
create new angles to the project and
this is my quads ok and next and next
and next so in this video we are going
to design the screen first with the XML
and in the next video maybe we can start
with the Java but right now I want to
make sure that our design is beautiful
without without sketch without graphic
designer so it's pure for from the
Android studio so we're going to use the
XML to make it more beautiful so right
now we only focus the XML so I just need
to close your java and after that as you
can see we don't need the we donate the
action bar but right now we need to
change the layout to the relative layout
and remove this and change this hello
war to the money quotes this and go to
our ES and values and style and here you
can find dr. Zinberg that you can change
to no action bar and you will get like
this
so right now we're gonna have to change
the text size SP and make it to the
center and we're going to create the
margin top maybe 100 DB no no no maybe
50 DB okay cool and right now I'm going
to change the background color to the
same color which is this color so we
will have to change the background color
primer eda yes and check the text field
to the text color which is white like
this cool and right now we're going to
the design section and I want to create
new text here so we got a text view and
here and then I want to make sure that
our text field in the center but right
now we're going to change this text to
the another text maybe we can use the
lorem ipsum or you can read it manually
so back simple left - so if you are
giving up easily
okay and we're going to change the color
please and text size
now if the big maybe only 16 no 24 okay
and Ellen man it's going to be centered
and layups interpreter that is true oh
no we need to setting the the layout so
we go into design and we click here to
the center like this okay and we need to
resource and back to the center again
but I want to make it small
oops my mistake I want to make it small
but whenever I make it small the layout
should be like this so we need to check
out oh maybe we need to set in here no
maybe okay it you know so whenever you
click whenever you click the button to
generate so this will be why the problem
here
or we cannot to kiss the single quotes
here so I just live like this and the
last one is to create the button we'll
go to design and button and here okay
and you can click here so you will get
like this and change the type of the
button to generate new code okay and go
to text and find the button and this
capital is not on our caps files okay
and after that in the relative layout we
need to get the padding which is 50 DB
yeah it's good and then we will make the
button more beautiful so what we gonna
do is create the global here no file
draw able and BG button dot XML okay and
we just need to copy this and we're
going to create here example and has a
saree three we can copy this
so we're going to pass like this okay
and after that we need to close like
this and here we need to create the
solid color maybe we can use the color
which is what color okay and we're going
to set in the corner
okay and go to activity and we try to
get the background so you will get the
background like this it's more beautiful
we are using the this one but I want to
try okay it's more beautiful right now
so right now I'm going to test my
application first into my emulator just
okay and I'm running to my emulator so
this is the simple application so when I
click the generate new code it will be
changed this string okay so we have not
created the function for this button so
right now let's check to make it real
firstly we need to create the here ID
for the text field this is for the quad
and the button button general okay and
in the main activity we are going to
create the preferred button and between
generator and prefab text view which is
quad you can see our ID is caught and
BTN generate and here we need to import
our class with LT and enter like this
and here we are going to be T and
generate and find the Eddie and ID and
BTN general but as you can see we get
the error here so we are going to alt
and enter and Casto Android widget
okay it's pretty simple and caught fine
by Eddie hid quad and here we're going
to import our text view like this so we
need to create the function for the BTN
generate so BTN general set on click
listener you see like this and quad set
text hello
what okay so when I click the bitchin
BTN generate the squad will be replaced
with the hello box so let's get to find
out is this working or not
okay when I click generate new code it's
going to hello world okay so whenever we
click generate new code this will be
generate another code so how to do that
I will show you how it works well
basically if you want to generate
another quads we need an array or I can
store our data in one variable
so here we're going to create the
strings that are profits for different
data okay and here we have the array
array one three arrived starts from zero
so you don't have to copy here
okay and here is a net one two three
four five six seven eight okay
and we already click the variables facts
which is with the string arrived and
this is the index starts from zero to D
a so the data is nine one two three four
five six seven eight nine
and here we need to create another
hotline so I'm going to use the random
random is like we can use the generator
by random so here just random and random
text and new random cool we you need to
import your class which is random and
here while RI is by ent integer so we
need to use integer random text equal
random text sorry here we are using the
number because this is integers and
random text next int and in disparities
we need to value which is nine okay
because our data is one two three four
five six seven eight nine cool and after
that right here we're going to set our
sorry we donate again so we just need to
here
facts and random number okay
so holy plops I'm going to explain to
you basically we all ready to create the
false which is our I already profits for
nine data which is arrival 0 to the nine
zero to the egg but the data is nine and
here we are using the random class class
random to make to make this line from
one two zero three five six and back to
zero again it's random and here we
create new variable which is the code
our code here and we will replace it by
number which is nine so we will replaced
by Li a but if this seven so we will
replace it by array second here okay so
maybe we can run this application and
waiting for the credible so when I click
here one two four as you can see the
string is changing randomly and the
question is what is our data more than
nine so maybe I will copy again this is
nine ten and eleven so we will try flick
this no it was in your time we already
have the function in the Java which is
fixed and length so this length is
automatically by the RI okay so you
don't need manually like one two three
four no it was single time believe me
what if your data more than one hundred
you need to counting by zero to the one
hundred no no no depth wasting your time
so we will use the first polka dot
length so it's automatically two
counting our data without worry again so
we try again to run our application into
emulator all right let's try again
all right egg zero six zero five and
anything else okay and I have no idea
what so I would eat right here you can
you can read it by your motivation like
the dream big do bigger and let this be
all good people we are just waiting what
whatever you want I don't know how to
write this one because I don't have any
motivation for you learning everyday
with anger risky and we're gonna to run
again into our emulator so let's check
how it works
general and awry seven driven dick do
bigger this is the index zero index
elephant and back to zero again and back
to index one okay
so the question is can I change the
bigger color when I click this button
yes you kill it it's pretty easy the
firstly you need to go to XML and make
sure your layout already ID so this is
BG mister okay and go to main activity
and go to here we need to create
variable relative layout begin master
and here we need to begin mustard
relatively I find by Eddie digi master
cool when I click the button biggie
master set background color color when
we need to import the color class so
it's already import so we're going to
run again to our application all right
when I click this it's going to read and
then it's not back again to the another
color so I want to make sure that we can
change the many colors when I click this
button okay I want to show you how it
works
so the firstly we need to create the
string their profits for the colors or
preferred colors sorry preferred string
and colors and here we need to define
for its color with the hex code so I'm
going to copy
okay I remember the Hextall color so
it's okay maybe we can use the another
color okay so I have one two three four
five five different color and right now
we just need to create here random
random color new random again
so it's further it's similar with the
random color no random color next int
and this is colors sorry
colors line okay so this is the colors
and this is with the length and here we
need to create new variable which is
color equal color Pass color and colors
random color plum and here we need to
the parameter is color from here so like
now we need to run our application again
into the emulator okay let's check it
out so the color it's changing okay it's
pretty cool isn't it
alright the problem is the color with
the studs but it's always blue and I
want to make it Metro so we go to colors
and here we're going to use for a for a
and for a and we're going to run our
application again into the emulator and
just make sure that we have the big run
for
of status but it's black color so this
is the the natural color okay it's
pretty simple this is simple application
to create my quotes right here so you
can be motivated motivation motivation
every day oh my god
yeah it's pretty simple but I will
really love it so I think it's you know
for this application and I'm sorry if I
get a mistake in this video well don't
forget to subscribe
anger is key to get more letters update
about Android or design for the user
interface so nice to meet you from
Indonesia and bye bye