Disable hardware back button on android

1

Hello,
in some views I just want to disable Android’s back button. This somehow doesn’t work.
This is the code I tried:

$ionicPlatform.onHardwareBackButton(function onBackKeyDown(e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    e.stopPropagation();
    alert('back button disabled');
});

The alert is shown but ionic still changes the view showing that the functionality of the button is not disabled. What’s wrong with my code or my understanding?

I also tried the following code:

document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown(e) {
  e.preventDefault();
  alert('backbutton disabled');
}

that didn’t work out either.

1 Like
2

Maybe you can try to return false on your functions

1 Like
3

I solved it in the following way.

Codes below is an example to disable Android H/W BACK button for two specific states - “app.state1” and “app.state2”. If you want to disable more states, you can add them to the if condition.


app.run(function($ionicPlatform, $state){
      $ionicPlatform.registerBackButtonAction(function (event) {
        if ( ($state.$current.name=="app.state1") ||
             ($state.$current.name=="app.state2")
            ){
                // H/W BACK button is disabled for these states (these views)
                // Do not go to the previous state (or view) for these states. 
                // Do nothing here to disable H/W back button.
            } else {
                // For all other states, the H/W BACK button is enabled
                navigator.app.backHistory();
            }
        }, 100);

})
4

I have a question with your code.
If you bind an event to the Hardware back button on priority 100, if the app is in the first state and you press back button, what happens? The app is closed or nothing happens? ( because there are no backhistory)

5

Please do it not this way…
Make something like that:

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

You have to register an own Backbutton handling with a higher priority than the other (thatswhy the 100 as last parameter)

1 Like
6

bengtler is right.
On my original response, I made a mistake by not including the following line:
"$ionicPlatform.registerBackButtonAction(function (event) { ".

I corrected my post above and included the above line.
So my code now looks like the following:


app.run(function($ionicPlatform, $state){
      $ionicPlatform.registerBackButtonAction(function (event) {
        if ( ($state.$current.name=="app.state1") ||
             ($state.$current.name=="app.state2")
            ){
                // H/W BACK button is disabled for these states (these views)
                // Do not go to the previous state (or view) for these states. 
                // Do nothing here to disable H/W back button.
            } else {
                // For all other states, the H/W BACK button is enabled
                navigator.app.backHistory();
            }
        }, 100);

})
7

Hi,

i just need to exit my app if backbutton is pressed twice. Can you please help

8

I’ve put this code together, this is what im doing to handle double hadware back button to exit the app:

it doesn’t have infrastructure yet like bower nor build process and that stuff, coming soon… Hope it helps

1 Like
9

Hi, anyone know if there is any way to do this just in one controller, instead of do it in the run method and check the state name?

Thanks.

10

if you read carefully the part of registerHardwareBackbutton
http://ionicframework.com/docs/api/service/$ionicPlatform/

you would notice that the method returns a function you can call to unregister your handling…
listen an a state change -> call the returned function.

11

Thanks for your answer bengtler, I tried both registerBackButtonAction and onHardwareBackButton but they had the same behavior that cauboy explained in his first post.

But reading again the documentation, I have been able to fix my problem by adding a priority to the registerBackButtonAction. So, thanks :smile:

Regards.

1 Like
12

There are equivalent calls from $ionicHistory, to use instead of $state.$current.name and backHistory():

$ionicHistory.currentStateName();
$ionicHistory.goBack();
13

Hi! I don’t know if this is offtopic but i have a question about this issue.
I was using beta13 and I realized that onHarwareBackButton and registerBackButtonAction were not working on my app. Unfortunately i cant update my app to the latest version, but i tried creating a new ionic project and in the latest version i was able to disable the back button behaviour.

My question is the following: Did you guys resolve this issue on a Javascript level? or, did you modify native android/iOs code to access that button/override it’s behaviour?

I was wandering if i could find the change in your source code and apply it to my beta13 app.

Thank you! And sorry if this is offtopic, let me know and I’ll move the question.

Thank you again!