Animated Menu Buttons on top of MapView

Question

I have a MapView that I would like to have an animated Menu of options that slide in from the left of screen and overlays the a MapView when the user clicks an icon on the top navbar.

The desired behavior is: 1. User clicks icon on top nav bar 2. Menu slides in from the left, displays buttons with different options. 3. If user select to cancel or return to Mapview, the Menu slides out to the right and disappears.

What is the best approach to implement this behavior on top of a MapView?

Answer 1

First you need to add the buttons in the same XML layout where you have your mapview:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <view
        android:id="@+id/mv"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        class="com.google.android.maps.MapView"
        android:apiKey="your key"
        android:clickable="true" />

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/linear_layout_buttons"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:orientation="vertical"
    android:paddingRight="5dp" >

    <Button
        android:id="@+id/button_overlay_show_zoom_all"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:paddingBottom="10dp" />

    <Button
        android:id="@+id/button_overlay_previous"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:paddingBottom="10dp" />

    <Button
        android:id="@+id/button_overlay_next"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:paddingBottom="10dp" />
</LinearLayout>
</RelativeLayout>

Then you need to initialize the buttons (I assume you know this part)

Then you define the method for the animation:

//Buttons Fadein / Fadeout-------------------------------------------------------------------------------

private void buttonFadeOut() {
        linear_layout_buttons.startAnimation(AnimationUtils.loadAnimation(MyMapActivity.this, android.R.anim.slide_out_right));
        linear_layout_buttons.setVisibility(View.GONE);
}


private void buttonFadeIn() {
    if(linear_layout_buttons.getVisibility() == View.GONE){
        linear_layout_buttons.startAnimation(AnimationUtils.loadAnimation(MyMapActivity.this, android.R.anim.slide_out_left));
        linear_layout_buttons.setVisibility(View.VISIBLE);
}

Finally, you just need to call buttonFadeIn() and ButtonFadeOut() where you need.

Good luck.