Handling the hardware back buttons

Unfortunately, I have no Android experience; so I have no info. Anyone out there with some Android experience that can help out?

1 Like

From the looks of it Cordova should be taking care of it but isn’t. Might not be an Ionic issue at all.

Yes, the hardware back button should work, I’ve used it with my HP slate 7 running android 4.1. What version of android are you using?

Also, you should trying to upgrade the latest version of ionic to get the best available performance

Hey guys,

I exactly have the same problem here.
Using AngularJS 1.3.0-beta, Ionic 1.0.0 Beta and Phonagap/Cordova 3.4.0 on Android 4.4 tablets and phones.

If you hit the android back button the app is closed immediately.
I tried to overwrite the native back button behaviour.
Listen for the backbutton event, prevent, stop propagate it and do the back handling on my own. I can catch the event, but after that the app is closed anyway.

Greets and Bye.

Do you mind putting together a codepen or plnkr? It can help us find the issue much quicker

I do not know if it is possible with only some code snippets.
But i can try to describe it a little bit more in detail.

I have an anuglarjs app built up with ionic and requirejs.
My angularjs routings are done with ui-router and $stateProvider.
In the app i navigate over $location.path(path) and back with $window.history.go(-steps).

After I bootstrap my angular app I hang in some event listeners - something like that:

document.addEventListener('deviceready', function () {
  document.addEventListener('backbutton', function (event) {
    event.preventDefault();
    event.stopPropagation();
    console.log('hey yaaahh');
  }, false);
}, false);

If i tap on the android backbutton, i get my console log, but the app will be closed anyway.

Thank you!

Bye.

2 Likes

You should try to this ionic function

 $ionicPlatform.onHardwareBackButton(function() {
     event.preventDefault();
     event.stopPropagation();
     alert('going back now y'all');
  });

This is specifically made for android hardware buttons

http://ionicframework.com/docs/api/service/$ionicPlatform/

3 Likes

Sadly, but true -> it produces the same behaviour. :frowning:

Hmm, can you try this with beta 3?

Wuaahh, with the new Beta my app gets broken.

Some strange angularjs errors, that some of my directives needs ionList…

Maybe the ionList changes in that version?

Greets.

Yeah the list chagned in version 2

I’ve updated to 1.0.0 Beta 3 but it does not change anything.

Thanks for your help.

Let me throw something together and see whats happening. I’ll report back in an hour or so

Okay here it is late at night, so i will check your post tomorrow ;).

Thanks and good night!

I fixed it:

$ionicPlatform.registerBackButtonAction(function () {
  if (condition) {
    navigator.app.exitApp();
  } else {
    handle back action!
  }
}, 100);

$ionicPlatform.registerBackButtonAction allows you to completly overwrite back button behavior.
First param is a callback function and the secondone a priority (only the callback with the highest priority gets executed).

7 Likes

The above didn’t work for me but turns out I didn’t fully update my apps markup when updating Ionic version.

I was still using <div ui-view></div> with <nav-page> once I changed them to <ion-nav-view> and <ion-view> everything works again!

Please provide codepen for the above functionality.

1 Like

Thank you! It is working fine for me

Thanks, registerBackButtonAction works, but it catches ALL back button actions,not only the controller I put the code in.
I want only one specific view to have a different behaviour (close the app on Back).
How can I keep default Back action on other views while having a special action on one view?

Edit (found):

  // Disable BACK button on home
  $ionicPlatform.registerBackButtonAction(function (event) {
    if($state.current.name=="app.home"){
      navigator.app.exitApp();
    }
    else {
      navigator.app.backHistory();
    }
  }, 100);
11 Likes

This is really cool, how could I use it to control a side menu. When the hardware back button is pressed - open/toggle the side menu?

$ionicPlatform.registerBackButtonAction(function () {
    $ionicSideMenuDelegate.toggleLeft();
}, 100);

The code above disables the back button but dosen’t toggle the side menu, I am runnin this inside the .run function inside app.js.