Wednesday, February 13, 2013

Stop the Android "bounce" on Cordova (PhoneGap) based projects

Jeremy asked how to stop the bounce on android projects that use the WebView.

What you need to do is add a little bit of code to your Java class that extends DroidGap.

First, add an import for adroid.view.View:
import android.view.View;


Then, you need to make a call to 'setOverScrollMode' - however this call is only available on android 2.3 (gingerbread) and later.
Note, you'll want to add this to the end of the onCreate method, after the call to super.onCreate
if(android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.GINGERBREAD) {
  this.appView.setOverScrollMode(View.OVER_SCROLL_NEVER);
}
And that should stop "OverScroll" or bounce & the associated highlighting you see.

6 comments:

  1. Hi Paul, I tried your recipe but it doesn't work with my app. In my case, I prevent the event in every html element except for a div, where I place stuff that I want the user to move. When scrolling till the exhausting the "stuff", the whole page scrolls. Any quick idea?

    Cheers.

    ReplyDelete
  2. Hi AB,

    Maybe. It kinda sounds like you've got a page that is larger than the screen & it's scrolling when you run out of content in a child div.

    OVER_SCROLL_NEVER really just applies to the view & prevents the parent from having the elastic effect if you've either made sure there's no overflow for it or removed the overflow from the view with:

    body {
    overflow:hidden;
    }

    Basically, the page scrolls because it can, you gotta make it so it can't.

    ReplyDelete
  3. Any idea how to do it in build.phonegap.com apps. I dont think we have access to java files there.

    ReplyDelete
  4. Hi Flash Bob,

    I think you're right, no way to access the java files on build.phonegap.com. Unfortunately, I don't know of any alternative.

    Paul

    ReplyDelete
  5. Hi Paul,

    Thanks it worked as charm!, Iam using phonegap 2.4 where

    all the there does not have any effect. but the above worked great. Can you please help me to fix the orientation to portrait, since i added in the config file but no use.

    ReplyDelete
  6. Hi Narendra,

    You didn't say which config file, so here's the way I've been controlling screenOrientation, add the android:screenOrientation attribute to the main activity in the AndroidManifest.xml file.
    (http://stackoverflow.com/questions/582185/android-disable-landscape-mode)

    If that's not working, here's a couple of things to consider:
    - Double check the syntax & spelling.
    - Double check that it's on the right element.
    - Make sure the new build actually got installed on the device. :)

    ReplyDelete