Month: January 2015

Making the Action-bar Up-button behave smoothly like the Back-button

When hitting Android’s Back-button, current activity will be closed with bringing the previous one back to the top of the stack, but the keyword here is that happens without calling the previous one’s onCreate method.

Unlike when hitting the Up-button, current one will be closed, but the previous one’s onCreate will be called again causing a little delay (depends on what you do in your onCreate of course 🙂 )

So, here is the solution from this brilliant stackOverflow answer:

Intent intent = NavUtils.getParentActivityIntent(this); 
intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP|Intent.FLAG_ACTIVITY_SINGLE_TOP); 
NavUtils.navigateUpTo(this, intent);

& for a full solution you can put the previous code in onOptionsItemSelected like this:

public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        // Respond to the action bar's Up/Home button
        case android.R.id.home:
            Intent intent = NavUtils.getParentActivityIntent(this);
            intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP|Intent.FLAG_ACTIVITY_SINGLE_TOP);
            NavUtils.navigateUpTo(this, intent);
            return true;
    }
    return super.onOptionsItemSelected(item);
}
Advertisement

Hiding content while scrolling up the page

Sometimes you will need a div to be visible only at the bottom of the view port like a link saying More about us which if the user clicks on it, the page will be scrolled up to let him read more details about the site,
but if the user is already scrolling down to the detailed content, then we need to smoothly hide the More about us link, like what we did in Jidari’s landing page (this scenario is only for resolutions lower than 1024px) like this:
enter image description here

So we made our simple jquery plugin:

jQuery.fn.hideWhileScrollingUp = function (options) {
    var element = this;
    var defaults = {
        speed: 3, // 1 is the slowest
        allowedHeightFromBottom: 200 // after these pixels, it will start to disappear gradually based on the speed
    };
    options = $.extend({}, defaults, options);
    $(window).scroll(function () {
        var elementHeightFromBottom = $(window).scrollTop() + $(window).height() - element.offset().top;
        var delta = elementHeightFromBottom - options.allowedHeightFromBottom;
        var opacity = 1 - (delta / $(window).height() * options.speed);
        element.css("opacity", opacity);
    });
}

and used it like this:

$('#more_about_link').hideWhileScrollingUp();

& it is easy to override its defaults also:

$('#more_about_link').hideWhileScrollingUp({
    speed: 2
});

if you wanna try it online, here is the jsfiddle demo for it.