Create Custom Button in Android using XML Tutorial Video Lecture | How to Design UI in Android Studio

[Applause]
hey everybody this is angered escaped
from Indonesia and hardly today so
welcome to Android studio in this video
I'm going to show you how to create the
button customers in the XML language
with the Android studio so right now we
will create the button with this icon
and text and the color by using the XML
language so just create new Android
studio project and give the name anger
BTN custom and next and next next and
finish so we're waiting for the griddle
boot right now so don't worry I think it
farts if you are using the SSD I'm using
the retina which is 2014 and include the
SSD so it's so fast okay
so waiting for the little bit oh yeah
but right now we will use I mean we will
use the relative layout so we change it
the constant layer to the relative
layout
sorry I mean linear okay and remove this
textview before we create the button I
want to show you how to create the the
icon so right now we'll do two areas and
select drawable and click like new and
you can use the vector sides okay and I
will select the node return which is the
D left okay and I will give the name
icon delayed and next and finish so the
question here the icon currently black
color and I want to change it to the
white color so how to do that it so
simply we are going to preview and
colors this is default color from the
material design and we will add our
color which is
what color and the white okay and you
can see we will get the white color and
we go back to icon delete dot HTML and
do to fill color so this color angle
white and you will get the color
destroyed critical and also you can
check it manually I mean just occurs
effective without the colors here but
it's recommended you need to register
your color because if you need something
or you if you need the color again so
you can include the name and you will
get the color so just to color anger way
it's pretty cool isn't it
so right now we need to create the shape
or like the rectangle for the our button
so just go to doable new and drawable
sorry and you file so the button will
divide by two section in the left we
will use it for the icon and in the
right we will use it for the text so we
will get the right and life ok so the
butter should be rounded so I will
between left corner this button for the
iPhone I'm sorry
cancel dot XML okay
and we go to activity and I want to copy
this because we are working on the XML
okay and set and here sorry xmlns
Android HTTP okay so right here should
be the set the tango
okay
so right now we already have the basic
street angle so I want to create the
color so just to solve it but if you
want to working with the gradient color
I give you the gradient here but right
now I will use the solid color color and
the color I want to create green color
okay so this is the green color and I
want to create the radios in the left
top so corner under it left DB and
button
DP and you will see we have the deep
here but if you want to more just
increase the DP to totally TP so you
will get like this it's pretty cool okay
and after that we just need to copy this
file copy and we need to pass here and
don't forget to change the left to the
right because this color should be right
okay
so change the left to the right I'm
sorry
okay and change this to the right so the
button should be like this and I want to
change the color this one just click
here and I will use the another color
maybe we can use the blue okay so we
will have different color close and
close so we have left and we have right
and we have the icon so the right now we
need to create the button so just use
the linear layout and this is Matt's
pattern and this is maybe only I want to
use the web content and don't forget the
orientation should be horizontal because
we want to divide by two columns if you
want to divide by one one column in the
top and one column in the button you can
change it to the vertical but right now
the button should be horizontal okay
everyone gets the margin top 100 TP and
margin life module right 40 and modulus
40 okay
and in fact of the linear but we will
have the images view which is the width
is 50 P and H is 50 DB and I want to
create this icon and we need the
background right okay and the icon
should be small so I just get the
reading maybe 20 P okay it you know and
dessert of the do industry we need to
create the text view the text we should
be max parent
this is for the head should be effective
50 DB and we need the text which is the
developed file and we need the
background you can see we have different
colors and I want to change the color to
the white color and I want to make it to
the center and I want to change the text
size now too small maybe 20 okay so you
will get the button like this it's
political
isn't it but if you want to if you want
to make this bellick file into the left
so just get the fading maybe 20 maybe
it'll be 40
okay and the padding left so you will
get the text record but it's I think
it's not good for the combin color so
you need to change the color maybe you
can change the another color okay so you
will get the cutter like this and just
remove the padding left to make it more
close up like this it's pretty cool
isn't it so you will get the butter
original by adorable it's not bitmap
okay so you can just copy the linear and
if you have the another maybe you can
get the ID first maybe this is button
dealer and the another linear should be
different ID maybe bit and move and
below sorry sorry
we need to change it to orientation
fatigue on so you will get the button
over here and you can check again for
the color and for the text maybe you can
change it to the download file just like
this
and at the icon like we did before so I
think it's enough
well thank you very much for watching
this video and I hope it usefull for you
because it's really useful for me if I
can't use my sketch app so I can create
the button manually by using doable or
XML well don't forget to subscribe my
youtube channel and please watch my
other video you need to realize about
Android for Sketch up so thank you and
bye bye