Android Application Development Tutorial - 60 - Creating Custom Buttons

what's up guys welcome to your 60th
Android tutorial for the new boston
again with me Travis and what we're
going to do in this tutorials basically
get her customized on customization on
you know what I'm saying get some
customized buttons going a little bit of
graphics um you know some some basic
stuff but can really make your app look
so much better for example if your
graphical master like myself
you probably want where you're going to
need to create three buttons are three
basically uh images and add it to your
project again make sure everything's
lowercase you want your standard button
which is right here and then once it's
highlighted which I'll show you how that
happens and you know which is right here
and when it's selected which something
awesome happens now just to let you guys
know if you're curious for a sidenote
probably going to do some like Photoshop
tutorials on my channel at my bring back
comm and you guys can learn how to do
basically graphics like this no I'm
kidding that just waste everyone's time
but you know you are going to want three
graphics these are each 70 75 pixels by
75 pixels and you know make sure when
you label them they're all lowercase
when you put it into your drawable and
we're going to go from there so there we
go we got our graphics done and also I
didn't even mean for this to look like a
flower like at first I want to be like
the Sun or something and then it is like
man this just looks like a flower this
is crap so I turn it into a flower
that's how much skill I have so if you
guys you know really want me to I could
probably could teach you how to how to
do some graphics like that alright so
now that we have our three graphics
within our project we're going to do is
we're going to right click on our
drawable and go to new Android XML XML
file and you're like what
are you kidding me in the drawable
folder yes guys I'm serious like this is
where the magic is going to happen and
so we're going to do is we're going to
say custom button right in here or
whatever you guys want customs fine make
sure it's a drawable and then down here
the root element for the XML file this
kind of gives us a starting ground we
can clean out later but it's easier if
you just go down and hit selector so
choose that within this option here and
then hit finish and it should look
something like this so now what we need
to do is we need to add our three items
or three pictures within here which are
called items we need one that's going to
be just our regular picture so we're
going to say Android drawable equals @
drawable /what if you guys label it as I
love them on as plus and there we go
we're done with our first item now what
we need is we need to say if it's true
when it's highlighted if that's true
then we're going to want a different
pictures so we're gonna say state
focused which is basically meaning if
it's highlighted or if it's being
focused on we're going to say if that's
true we want Android drawable to equal
at drawable and then plus highlight or
again whatever you guys labeled your
highlighted image as and then finish off
that item and one last item here and
this is going to be our if it's actually
pressed so we're going to do now is just
say Android state pressed
right here if that's equal to true then
we want to also have a different
background as well so we're going to say
Android drawable and that's going to
equal at drawable forward slash plus
selected work in whatever you guys
labeled these images as so there we go
we basically set up our custom button
again it's an XML file within our
drawable folder but that's fine now what
we're going to do is we're going to go
into our main XML the one that we've
been working with a little bit and just
open that up again for the portrait view
or whatever view you guys want we're
going to change this add one button so
find that button add one and we're just
going to delete the text and we're going
to say Android background equal to now
our custom XML within our drawable so
we're going to say at drawable forward
slash custom and we are good to go I
mean I'm pretty sure we're done
not positive there's probably ton of
errors and you know probably messed up
royally but pretty sure we're done so
let's check it double check like always
yep snip-snip clip the video because I
did mess up told you guys he suckers
thought I thought it did it right the
first time no because then we can't
learn and learning is what it's all
about that's what makes us different
than monkeys and basically if you guys
ran that on your own and you're
following along basically the button was
stretched out and when you clicked it
nothing happened nothing was that
awesome it was just kind of kind of lame
so we're just going to find clean up
those areas because you know the order
of the items is important so that's kind
of what I want to show you so again our
add one button just change the width
from 250 DP to wrap content because that
way it won't stretch it out and it'll
keep it the same you know as we designed
it in our Photoshop skills and then
switch over to our custom XML again and
I basically was just showing this one
even if we clicked it and all that
stuff because we have everything in
reverse order
it's kind of weird the way the selector
works but you know it kind of runs
through everything it checks it so first
we want to have this and move it to the
bottom are just kind of our default
image and then we also want to move our
press state to the top so cut that and
paste it above and now we're good to go
promise you this time I think it's
always a gamble trusting someone you
don't know
but aha there we go because before again
nothing would change now it will kind of
run through everything and check if
that's true or not and I'll show you
guys what actually looks like now you
guys were curious I just clipped the
video because I don't want to waste your
guys's time you know because a be
pointless and let's open that up there
we go we got a custom button and you can
also add text like we delete that text
you could leave left that on and it
would print right over this button as is
so you guys can mess around with that as
well but as you can see we just got our
button we click it you see that star for
a little bit click and hold we see our I
mean our flower I'm sorry see your
flower for a little bit and you know
you're like where's the selected thing
you mess up again Travis and you know
I'm not positive but basically what the
select it is is when you use these
arrows for example like this button is
selected right now or highlighted or
focused as the Android terminology is
let me click up now this is focused our
button custom button and that's our
highlighted one so again you can click
it and you know everything works fine
and I'll catch you guys in the next
tutorial peace