Creating a Slide-In Menu in Android - Part 1: Showing the Menu

Read Cyril Mottier's blog on his design:
http://cyrilmottier.com/2012/05/22/th...
http://cyrilmottier.com/2012/05/29/th...
http://cyrilmottier.com/2012/06/08/th...

Grab the code for this example on GitHub:
https://github.com/jaylamont/AndroidF...

---

Closed Caption:

hi everyone this is the start of a
series of videos describing how you can
implement a fly-in menu in an Android
application serial mortier on his blog
described how he implemented a menu like
this in an application he worked on
called prick singh and there are a few
other applications off the top of my
head I think facebook either does or
used to have a menu like this in their
application i believe the steam app on
android also has a menu like this and
the NHL app on both Android and iOS
implements a menu similar to this so he
describes in his blood conceptually how
he implemented this menu and practicing
but doesn't provide any source code
examples of how this is done so i I've
gone through and I'm going to show how
you can implement most of what he's
described in these series of blog posts
in your very own android application and
i will link his blog posts on this in
the description of this video if you're
an Android developer i highly suggest
that you take a read over those posts
are full of a lot of information that's
very good so I have the processing app
running on an emulator here I just to
demonstrate how his implementation of
this menu works if you click on this
button in the top left hand corner of
the app you can see that the content
slides out of the way and reveals a menu
underneath click the icon again are
actually anywhere on the content that
still visible the content slides back
over and hides the menu
he refers to this as a fly-in app menu i
I'm a little bit you know on the fence
about exactly what you refer to it as
because really the menu is not flying in
so much as the content is flying out
revealing the menu beneath you can see
that the the menu does slide a little
bit as its opening and closing but
what's really happening is there's a
content view sitting over top of a menu
of you and the content view is slid out
of the way to reveal the menu view
underneath so in this first video I'm
going to show an implementation it's a
very very bare-bones implementation of
our menu like this doesn't contain into
the animation or any of the other
features that he has implemented in his
version his and his version is quite
good i hope to cover most of what he's
done but it shows a lot of the found
foundations that are going to be used to
implement the other pieces in terms of
transitioning the content and the menu
as as it is opening and closing I have
my basic implementation of the flyout
menu running here an emulator you can
see initially this is my content
consisting of some text and a button
which toggles the menu if i click this
toggle menu button the content is
shifted over to the right revealing this
menu with some buttons underneath it if
i click any of these buttons in the menu
the content shifts back over to the left
closing the menu there's no animation or
any other special features in this
example all that's happening is I'm
transitioning or shifting the content
view to the right to expose the menu
underneath and this is good at showing
the fundamentals that are required for
translating the position of these views
to implement some of the fancier
features later
so let's take a look at the
implementation there are three main
files involved in this project the
primary one is flyout container which is
a customized view group that contains
and our menu and our content views and
positions them on the screen in the
proper way
the second is a basic activity sample
activity which houses this example and
the third is the layout that's used in
this example you can see here that the
root view is my implementation fly out
container and it has two child views the
first represents the menu containing the
three buttons and the second represents
the content which is our texts and our
taco menu button so let's take a closer
look at fly out container first thing to
mention is why does fly out container
extend linear layout rather than
implementing viewgroup and the reason is
if i implement viewgroup i also need to
implement the logic for drawing the menu
and the content views on the screen and
in this particular case I don't need to
customize how the menu and the content
are actually drawn i only need to
customize how they are positioned so uh
any of the layouts i can use their
drawing logic and just override their
life
no logic to achieve the effect and
there's no point in implementing some
custom drawing logic for this example
because it is not necessary if we can
extend linear layout directly and
leverage the drawing logic that's
already there might as well do so so the
parameters and fly out container the
first two parameters are views the views
menu and content and these represent the
menu and the content of the of the
application so this is our content you
hear this is our menu view here i also
have a constant defined which i call
menu margin what this refers to is the
amount of the content that remains
visible on the screen when the menu is
open so i have it set to a constant of
150 which means that 150 pixels of the
content remain visible on the screen
when the menu is open
I've also defined an enum called menu
state which contains two values closed
and open now you may be asking since
there's only two states that the menu
can be in why use an enum instead of
just a boolean value of the reason is
because once i go ahead and implement
the animation there's a couple of
additional states that the menu can be
in our rather than just being closed or
open so to make implementing the
animation later a little bit easier i do
this is an enum now and i'll just add
the additional States to it as it
becomes necessary the final two
attributes i have the first one is an
integer current content offset with this
refers to is the amount that the content
has been shifted at any given time so
when the menu is closed which is the
default state for this container to be
in the current content offset is zero
it's not shifted any amount from its
default position however when the menu
is open
current content offset will be set to a
certain value in fact that value will be
equal to whatever the width of this menu
is so any given time the offset of the
content we can get by referencing this
current content offset variable and i
also have a
one instance of menu state which i call
menu current state which contains the
current state that the menu is in and by
default when this container is
instantiated the menu will be closed so
i said its current state to be closed
these are the three constructors which
are just a extended directly from linear
layout there's nothing custom being done
here
uh the next customization occurs when on
attached to window is called and in this
method we get our references to the menu
and the content views we can't do that
in the constructor because when this
container is constructed there's no
guarantees that our menu and our content
of us have been constructed yet however
when on attach the window is called we
know that those views already have to
exist so this is where we can set our
reference to them so i assume that the
menu is always the first child in the
view or in in our layout so it's at
position zero and our content will
always be the second child which is a
position one and if we go back and look
at our layout we can see that's the case
our menu layout here contain the three
buttons is the first child of the flyout
container and the content containing the
text and the button is the second child
and after i get are the references to
those objects i set the visibility of
the menu to be gone and the reason why I
do this is because on some older
versions of Android as zero pointed out
in his blog post are even if of you is
covered entirely by another opaque view
android will still go ahead and and try
to draw that view on the screen in newer
versions of Android it it's smart enough
to determine that if it's covered by an
opaque you don't bother drawing it but I
to make sure that we were getting
maximum efficiency out of the
application i set this to be gone when
the menu is closed so that way on any
version of Android it won't attempt to
draw the menu when the menu is closed
now on layout is where we're actually
positioning the menu and the content on
the screen relative to the position of
our fly out container and on layout is
past five parameters the first parameter
is a
Julien called changed and changed will
be true if the size of the flyout
container has changed since the last
time on layout was called otherwise it
will be false
the remaining four parameters are
integers left top right and bottom which
represent the position of the left edge
the top edge the right edge and the
bottom edge of the flyout container so
if changed is true meaning the size of
the flyout container has changed then I
need to calculate the child dimensions
and that is a method that I've written
down here which sets the height and the
width of content and menu
let's go back to the apt for a second we
can see here with the menu closed that
the size of our content is equal to the
size of our fly out container there's
the top edge of the flight container
they're just under the action bar and
you can see the top edge of our content
is the same and the left edge the right
edge and the bottom edge of the screen
are the edges that represent the flour
container and the content so we can just
set the height and the width of the
content to be the height and the width
of the flyout container the menu is a
bit of a different story though we can
see that the menu is as tall as the
flyout container is but it's not quite
as wide in fact its width is equal to
the width of the flyout container minus
the amount of the content that still
visible and as you recall i created a
constant called menu margin which
represents the width of the content that
remains visible on the screen so i set
the width of the menu to be equal to the
width of the flyer container minus
however large the menu margin is and i
just set the height to be the same
height as the flyout container so once
our child dimensions are recalculated if
necessary i call layout on the menu and
the content to position them in the
right spots on the screen
going back to the apt for a second we
can see that the left edge the top edge
and the bottom edge of the menu are the
same as the left top and bottom edges of
the flyout container so I just pass in
the left top and bottom values
unmodified the right edge however isn't
quite at the right edge of the flyout
container it's a little bit to the left
in fact it's to the left
exactly the same amount as
as in menu margin so I set with the
right edge of the menu to be the right
edge of the flyout container minus the
size of the menu margin and the content
you can see when the menu is open is
also shifted over by a certain amount
when it's closed it's not shifted at all
so to lay out the content i do so as
follows the left edge of the content
will be equal to the left edge of the
menu container plus the value of current
content offset and as you remember
current content offset is a variable
that tracks how far the content has been
shifted from its natural view so in the
app here when the menu is closed that
value will be 0
however when the menu is open that value
will be equal to the width of this menu
and the width of this menu will be
stored and current content offset when
the menu is open so the left edge and
the right edge of the content are
translated by whatever value is in
current content offset if the menu is
closed current content offset will be 0
so those edges will match the edges of
the flat container exactly when the menu
is open they will be shifted over by the
necessary amount to expose the menu
beneath and again the top and the bottom
i pass an unmodified because the top
edge and the bottom edge always remain
the same this view never shifts
vertically it only ever shifts
horizontally
toggle menu is the method that actually
opens and closes the menu so depending
on whether the menu is currently closed
or currently opened we need to perform a
slightly different set of operations
let's start with the menu being closed
if the menu is closed and toggle menu is
called the first thing i do is i set the
visibility on the menu to be visible if
you recall when the menu is closed the
menus visibility is set to gone and if I
didn't call set visibility again to make
the Menu visible the content would shift
out of the way but there would be
nothing there the menu wouldn't actually
show up so current content offset which
if the menus clothes will be set to zero
i set it to be equal to the width of the
menu and this is just a
a method that I've written here which
wraps this call to the get the menu
layout parameters to get its with this
is a bit before both call so I just
wrapped it in a shorter method so the
current content offset for the content
becomes equal to the width of the menu
next thing I do is on the content view I
call a method called offset left and
right and what this does is it shifts
horizontally uh whatever view it's
called on by the value that's passed to
it so offset left and right if it's
passed a positive integer shifts the
view that many pixels to the right if
it's passed a negative integer it shifts
the view that many pixels to the left so
what I want to do is take our content
and shift it the size of current content
offset so I shifted to the right by the
size of the menu and the very last thing
that I do is I set the menus current
state to be open so if we take a look at
here when i click this button what
happens is this menu get set to visible
i set the value of current content
offset to be equal to the width of this
menu and then shift the content to the
right by the size of current content
offset which is the size of this menu
and i set the menu state to be open so
in the event that the menu is open and
toggle menu is called i do a very
similar set of operations but in a bit
of a reverse order so the first thing I
do is I shift the content view back to
the left so I know it's offset to the
right by the value that's in current
content offset to shift it back to the
left
I just call offset left and right again
and pass in the negative value of
current content offset I then set
current content offset 20 because now
the content has been shifted back to its
original position it's not offset at all
I said current menu state to be closed
instead of open and then I call set
visibility on menu again to make it
disappear i set the visibility to go on
and very last thing I do in either
circumstance is called invalidate on the
fly out container if I don't do this I
the android
OS won't know to redraw fly out
container so if this method doesn't get
called all the translations that I've
done here in toggle menu will never be
reflected on the screen I the values
will change within the class but the
content will never shipped out of the
way I need to call invalidate which
indicates that hey the position or the
look of the flyer container has changed
it needs to be redrawn so taking a look
back at flyout menu example here the
menu is currently open if i click on one
of these buttons first thing it does
shift the content back to the left
that's the current content offset to be
0 as it is now back in its closed
position i set the menu state to be
closed and i set the visibility of the
menu underneath to be gone so that it
doesn't get drawn the last thing we're
going to take a look at is sample
activity you can see that sample
activity has a reference to its review
which is an instance of fly out
container and it also has a method
called toggle menu if we take a look at
the layout we will see that I've set
each of the buttons to have an on-click
attribute of toggle menu so when any of
these buttons are clicked it's going to
call the toggle menu method in the
sample activity which in turn calls the
toggle menu method on the root view fly
out container and as we saw earlier that
opens and closes the menu so click on
toggle menu menu opens click on any of
the buttons again menu closes and that's
all there is to it are two very
bare-bones implementation I and in the
next video I will show you how you can
add animation to the opening and closing
of the menu I thank you so much for
watching