35

How can I make my page slide as the user slides finger on the screen? Any example code?

I just require the same feel as it is on my android g-phone's home screen. The screen moves as the finger moves (also includes the elastic effect).

Adam Stelmaszczyk
  • 19,665
  • 4
  • 70
  • 110
Muhammad Maqsoodur Rehman
  • 33,681
  • 34
  • 84
  • 124
  • 1
    Did you able to do the animation. I am looking for such a thing. I know its possible to do with fancy calculation, sense gestures etc. Just to know if there's anything easy like using a HorizontalScrollBar and add views to it, then set some parameter and it done! – karim Sep 07 '10 at 09:57
  • @Maxood did u able to do..... – Kishore Jul 28 '11 at 12:30

7 Answers7

19

Check out this tutorial and its follow up on warriorpoint. They explain how to use the ViewFlipper to smoothly animate the transition from one screen to another, and then in the second part how to do this using touch control. Note, these are whole-screen transitions not panning around on an existing page. For panning, e.g. on an oversized image that doesn't fit in the screen, check out Android BigImage. Depending on what you're trying to do these might be overkill, but it's not 100% clear what you're trying to achieve.

Steve Haley
  • 55,374
  • 17
  • 77
  • 85
  • These 2 methods are not recognized because animations are not provided perhaps. vf.setAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out)); vf.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in)); Also when i comment these 2 lines, and run the code...i just get the switching effect and not the sliding one. Please explain – Muhammad Maqsoodur Rehman Apr 23 '10 at 11:50
  • Did you follow step 4 and import the animations from ApiDemos? And you just get the switching effect if you comment out those two lines because those two lines are what tells it to use the sliding effect... – Steve Haley Apr 23 '10 at 12:07
  • 3
    Fine. I did that and got the sliding affect but am not able to hold the page with my finger as one can do it on the home touch screen. How am i able to hold the page while dragging/sliding with my finger?As one can hold it with one's finger as when the page is half way through. Thanks – Muhammad Maqsoodur Rehman Apr 23 '10 at 12:32
  • That's probably a bit more complicated to do. You could try combining the techniques of the two tutorials: use the BigImage technique to allow the user to scroll around on a screen, but if once they have moved past a certain point (i.e. moved it 70% off the screen), then assume that's a page change and use ViewFlipper. I'm not sure that would work though... You'll have to experiment or wait for another answer! – Steve Haley Apr 23 '10 at 13:18
  • How can i calculate that a screen/page has moved past a certain point (i.e. moved it 70% off the screen)? – Muhammad Maqsoodur Rehman Apr 23 '10 at 14:47
  • Maxood: You'll have to handle touch event - DOWN and MOVE actions and note the deltas / changes. Get the window size and calculate the %age of movement. – gvaish May 12 '10 at 12:25
10

Use SwipeView class

http://jasonfry.co.uk/?id=23

https://github.com/fry15/uk.co.jasonfry.android.tools

ludwigm
  • 3,363
  • 3
  • 28
  • 36
9

ViewPager. This would seem to have been addressed more completely after the fact:

Whether you have just started out in Android app development or are a veteran of the craft, it probably won’t be too long before you’ll need to implement horizontally scrolling sets of views. Many existing Android apps already use this UI pattern, such as the new Android Market, Google Docs and Google+. ViewPager standardizes the implementation.

Adam Stelmaszczyk
  • 19,665
  • 4
  • 70
  • 110
Bob
  • 91
  • 1
  • 1
2

The Home screen is made of two layers:

  • The background (or Workspace) that shows the image; this layer scrolls and draws the wallpaper with a different scroll value. Workspace behaves more or less like a simplified horizontal layout

  • The screens (or CellLayouts) that display the icons; this layer is made of 3 CellLayout side by side. CellLayout is a custom grid-like layout.

The fling is implemented using a VelocityTracker, a Scroller and regular View.scroll methods.

Diego Palomar
  • 6,958
  • 2
  • 31
  • 42
0

use gallery view

Kantesh
  • 333
  • 4
  • 13
0

You will need Gesture detector - the classes / interfaces under considerations are:

 1. android.view.GestureDetector
 2. android.view.GestureDetector.SimpleOnGestureListener

Method of interest is onFling.

Now, based on the X, Y and the velocity in respective directions, you can "draw your view" / "reposition the nested views in case of activity or view-group" at corresponding location.

An example of how to redraw can be found in any game-example like LunarLander in Android at http://developer.android.com/resources/samples/LunarLander/src/com/example/android/lunarlander/LunarView.html

gvaish
  • 9,374
  • 3
  • 38
  • 43
0

I did this for my application, Just thought I'd share my solution.

Android Homescreen

Community
  • 1
  • 1
MrCloister
  • 452
  • 2
  • 7
  • 19