CODEWITHSUNDEEP
androidwebviewslidercordovaswipe
Anas Jaghoub
Anas Jaghoub

Reputation: 11

WebView Animation issue on Android

I am developing an Android application using html, css and javascript. my application depends on Phonegap framework. The application consists of a quite number of local pages. In the application I am trying to handle swipe gesture event on the Android mobile and move the pages depending on the swipe direction. I.e if the user swipes to the left the application must call the previous page, then if the user swipes to the right then the application will forward the user to the next page.

I can do that using native java for android. but the problem is, during the calling for the page I'm doing a slide effect for the requested page. but what happens is the current page takes the slide effect not the requested page, that is after the slide effect finishes, the requested page appears :( I am looking for a mechanism for making the effect affects the requested local page not the current page. I tried delaying the animation duration but it became too much slow, so it became boring and btw failed to achieve that.

I hope that you help me in this problem, or suggesting to me any approach or mechanism to achieve that effect.

Here is my code:

public class App extends DroidGap {
    /** Called when the activity is first created. */

    private static final int SWIPE_MIN_DISTANCE = 120;
    private static final int SWIPE_MAX_OFF_PATH = 250;
    private static final int SWIPE_THRESHOLD_VELOCITY = 200;
    private GestureDetector gestureDetector;
    View.OnTouchListener gestureListener;


    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

        gestureDetector = new GestureDetector(new MyGestureDetector());

        gestureListener = new View.OnTouchListener() {
            public boolean onTouch(View v, MotionEvent event) {
                if (gestureDetector.onTouchEvent(event)) {
                    return true;
                }
                return false;
            }
        };
      super.loadUrl("file:///android_asset/www/index.html");

    }

    class MyGestureDetector extends SimpleOnGestureListener {
        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
            try {

                if (Math.abs(e1.getY() - e2.getY()) > SWIPE_MAX_OFF_PATH)
                    return false;
                // right to left swipe
                if(e1.getX() - e2.getX() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {


                appView.startAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_left));
                appView.goBack();
                }  else if (e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
                     appView.startAnimation(AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_right_in));
                  appView.goForward();
                }
            } catch (Exception e) {
                // nothing
            }
            return false;
        }
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent e){
        super.dispatchTouchEvent(e);
        return gestureDetector.onTouchEvent(e);
    }
}

Upvotes: 1

Views: 2863

Answers (2)

prakash
prakash

Reputation: 1413

This is android library functions.so use android.R.anim.fade_out instead of R.anim.fade_out

' Animation anim = AnimationUtils.loadAnimation(getContext(),android.R.anim.fade_out) MainActivity.webview.startAnimation(anim);'

I hope this is helpful for you.....

Upvotes: 0

Tushar Vengurlekar
Tushar Vengurlekar

Reputation: 7679

You are adding animation before the event goBack() and goForward() causing mismatch. I would suggest you to create a custom webview and override the two methods. Somewhat as shown below.

    public class mywebView extends WebView{

    public mywebView(Context context) {
        super(context);
    }

    @Override
    public void goBack(){

    }

    @Override
    public void goForward(){            
    }       
}

Dont miss the keyword @Override. Now within these overridden methods you can add the code for animation. Hope this helps.

Upvotes: 1

Related Questions