This post will show you how to have a disappearing menu in your android apps. The menu should be hidden until the user taps the screen, and then the menu will disappear after 5 seconds unless the user taps the screen again. What I’ll show is how to make a simple button disappear, but this technique can be adapted to anything that can be animated.

First thing we want to do is add the button to the activity. Go to your activity_<activity name>.xml and throw a button onto there:

Drag a button widget from the left hand toolbar to the activity
Drag a button widget from the left hand toolbar to the activity

Now what we want to do is have the button hidden off screen at the bottom and then fade it in when the screen is tapped. To do that we’re going to need an animation resource. Go to File -> New -> Android XML File. Set the Resource Type to “Tween Animation”, File: “hide_menu.xml” and have the root element be a “set”.

We use set because we will need BOTH a alpha animation (to fade the button out) and translate animation (to move it off screen). If we picked one or the other, we wouldn’t be able to have both, hence the set.

Click Finish.

You should see something like this:

<?xml version="1.0" encoding="utf-8"?>
<set>


</set>

Change it to contain these lines:

<?xml version="1.0" encoding="utf-8"?>
<set>
    <alpha
	    xmlns:android="http://schemas.android.com/apk/res/android"
	    android:fromAlpha="1.0" 
	    android:toAlpha="0.0"
	    android:duration="2000" />
	<translate 
	    xmlns:android="http://schemas.android.com/apk/res/android"
	    android:fromYDelta="0%"
	    android:toYDelta="200%"
	    android:duration="1500" />
</set>

Let me explain some of these values. For alpha: we use a fromAlpha setting of 1.0 to say we’re going from 100% opacity and a toAlpha of 0.0 to say we’re going to 0%. For translate we’re saying we want to go from a Y position of 0% of it’s current setting to a Y position of 200% it’s current position, which should take us well off the bottom of the screen. The duration setting is in milliseconds so we want the alpha to last 2 seconds and the translate 1.5. This will cause the translate to finish before the button is fully transparent.

Save this file.

Create another animation similar to above to re-display the menu. Call this show_menu.xml and use this code:

<?xml version="1.0" encoding="utf-8"?>
<set>
    <alpha
	    xmlns:android="http://schemas.android.com/apk/res/android"
	    android:fromAlpha="0.0" 
	    android:toAlpha="1.0"
	    android:duration="2000" />
	<translate 
	    xmlns:android="http://schemas.android.com/apk/res/android"
	    android:fromYDelta="200%"
	    android:toYDelta="0%"
	    android:duration="1500" />
</set>

The values are identical to hide_menu except the from and to values are reversed.

Let’s get to the bulk of this code: the Activity java file.

First declare these instance variables:

	final Handler menu_handler = new Handler();
	boolean menu_visible = false;

The Handler lets us run Runnable objects and will be used as our timer. The menu_visible flag will let us keep track of the menu’s current state, displayed or not displayed.

We need to add some code to hide the menu:

    private void hideMenu() {
    	menu_visible = false;
    	Animation a = AnimationUtils.loadAnimation(this, R.anim.hide_menu);
    	a.reset();
    	Button btn = (Button)findViewById(R.id.button1);
    	btn.startAnimation(a);
    	btn.setVisibility(View.INVISIBLE);
    }

This code should be pretty self explanatory. The only thing that shouldn’t be clear is the setVisiblity(View.INVISIBLE) call at the bottom. This still make the button disappear from the view fully and not allow it to be clicked.

Similarly we need the code to show the menu:

    private void displayMenu() {
    	menu_visible = true;
    	Animation a = AnimationUtils.loadAnimation(this, R.anim.show_menu);
    	a.reset();
    	Button btn = (Button)findViewById(R.id.button1);
    	btn.clearAnimation();
    	btn.startAnimation(a);
    	btn.setVisibility(View.VISIBLE);
    }

Add this runnable object as an instance variable:

    Runnable menu_hide_thread = new Runnable() {
    	public void run() {
    		hideMenu();
    	}
   
    };

This thread will call our hideMenu() method from above whenever this thread is run.

Add this to the onCreate because we don’t want the menu visible on activity creation time.

	Button btn = (Button) findViewById(R.id.button1);
        btn.setVisibility(View.INVISIBLE);

And last but not least we need the onTouchEvent call to kick it all off. This code first checks to see if the MotionEvent was an ACTION_DOWN aka a single tap. If it was then it checks to see if the menu is visible. If it’s currently hidden we will call displayMenu() and post to the handler saying to run the “menu_hide_thread” in 5000 ms (5s). If the menu is currently visible we want to reset the 5s timer, we tell the handler to delete it’s current callbacks and post the same runnable thread again.

    public boolean onTouchEvent(MotionEvent event) {
    	if (event.getAction() == MotionEvent.ACTION_DOWN) {
    	if (!menu_visible)
    			displayMenu();
    			menu_handler.postDelayed(menu_hide_thread,5000);
    	} else {
    		menu_handler.removeCallbacks(menu_hide_thread);
    		menu_handler.postDelayed(menu_hide_thread,5000);
    	}
    	return true;
    }

That should do it. Go ahead and give it a try, your menu will be invisible at first and will appear when you tap the screen.

Source:

GitHub – Android_Disappearing_Menu

Enjoy!

Leave a Reply

Your email address will not be published. Required fields are marked *