Android Application Development Tutorial - 64 - Drawing Bitmaps to Canvas

what's up guys welcome to your
legitimate 64th android tutorial for the
new boss and get with me travis and
we're going to get into our first little
animation by extending the view class so
let's do that real quick and now what we
need to do is basically when we work
with animation we're using the view
class you want to use a method called on
draw because basically we're going to
have a canvas which is going to be our
background of our activity and then we
can draw onto that canvas just like
painting stuff onto canvas um that's
what we're going to do so we need to
create this method called on draw and
this is a legitimate or this is a actual
method so you might want to type at
override and then actually let's see if
they have see if they have the easy way
to put this in so right click source
implement methods and let's see if they
have it on draw right here yes so just
click that it takes a canvas within its
parameters hit OK
and there we go we have our ondraw
method now now what we need but what we
can do is just basically we're going to
set the background a certain color such
as let's do white so what we're going to
do is mess with this canvas because
again the canvas is kind of the
background or you know what we're
working with so we're going to say
canvas because that's what they labeled
it here so whatever this variable name
is you type that in the hit dot excuse
me and we can do some draw methods on
there because you know we want to paint
onto our canvas so to say so we can say
something like draw color let's click
that method and then we're going to say
refer to the color class because again
they have some defined colors for us
already so we're going to say color
referring to the color class and you
know we can pick a color from here so
let's do like white
all uppercase white like that and a
scoop now our activity is going to have
a white background and let's also add a
bitmap that we created within our
constructor because again any time this
this class is accessed it's going to go
through the constructor first basically
our constructor you can kind of think of
it as our on create method for this for
this class so think of it that way so
basically we set up our our bitmap
already so all we have to do is say draw
bitmap and then we have some different
parameters as you can see we're going to
take one that says you know the top let
are the left and the top and also what
paint what we want to paint so they're
the bitmap the left the top and then the
paint so click that and we're going to
fill these in
again we created this bitmap already
called G fall so type that out jebal and
then basically my emulator pulled up no
okay so let's say this let's say this is
my screen I know it's not really same
shape as a screen let me try and get it
same shape basically when our emulator
starts it's you know it has a width and
a height and basically it's defined by
the pixels for the most part so you know
you have these this many pixels in the
width and this many pixels in the height
so it starts at the top left corner as
we go over it's going to get higher and
higher for the width and as it goes down
it's going to get a higher higher higher
and higher value for the height so for
example here is 0 0 and you know here is
I don't know exactly
you know center is basically something
else but it's going to be a higher value
so let's just try and draw it first
right in the top center of the screen
and also our
our ball that we included let me pull
this up and as right here this is a you
know it's it's transparent background
but that's about the shape of my ball
right there that's being selected and
when withdrawals it's going to also draw
from this top left corner so we need to
keep that in mind as well and I'll show
you what we can do to get around that
but first let's do that because we won
the the this is the width so we want in
the center so what we can do is we can
grab the canvas size because again the
canvas takes up the whole width and we
can hit dot and then we can say get
width right here and that's going to
return the value of the pixels of the
whole width that's available to us so
let's put that in parentheses that whole
thing and all right we don't have to do
that but this is just kind of easier for
me to look at because again this is just
how far left we want it so basically
it's getting the whole size of the width
of the canvas the whole width of the
canvas and then it's dividing that value
by two so you know that's that's kind of
what we're doing there
we're going to do for the top it's just
going to be zero because again we want
to set it at the top of the screen and
for the paint we're just going to say
Knoll for now so just like Knoll and now
when we run our ACT activity or
application we're going to actually have
you know our bitmap on there in a
certain location so it's going to take a
little bit for my emulator to start
because I haven't really been working
with it but let's just kind of go over
everything we've done so far
so basically when we call this graphics
class it's going to do the oncreate
method and then you know it's going to
be like here's our set content view and
we set it up to our own personal view
and this view is of the object type my
bring back so basically what we did is
we said we want a new bring back object
or instance of that object and we want
to pass in the context so then we go
over to so it's basically going to get
to this line and be like okay let's see
what that has to
offer and it's going to go into your
constructor and set up our reference to
our bitmap we didn't really use the
context for the most part yet but you
know what we still have access to that
context from our graphics class and then
you know we set up our bitmap and we
just created on draw method which takes
into canvas
the canvas is the background or whatever
is available to us and then we set the
background color or the canvas to white
and then we also you know drawled
or drew a bitmap on there kind of in the
top center it's not going to be exactly
the center because again it'll draw to
the left top-left corner of our bitmap
as well so would be a little off-center
so let's click up click on our graphics
class and there we go we have our low
graphic sitting up there and again like
said this bitmap it's drawing it right
here the top left corner of our bitmap
which is right here which is also you
know the center because we grabbed the
whole width then we divide by that by 2
which is right here and that's where it
drew the bitmap which is a square block
like this
so hopefully that made sense again it's
kind of a basic introduction to drawing
and all that good stuff I'll show you
guys how to animate and show you guys
some other things we can draw with our
canvas in the next tutorial but I'll
catch that in peace