android: swipe left or right to slide views

Question

I have a list view. On click of an item a detailed view for the item is open. This layout has many widgets like text view, ImageView Buttons etc. Now I want to slide this detail view of the items to show the detail view of next item in the list. Similarly previous item for left to right.

I am not able to implement the view sliding I have done how to get the prev / next items in the list. But the actual sliding is the issue

I tried gesturedetector like in Android: Swipe left to right and right to left

and some other examples. But when I try to slide, there is no effect. I don't see any visual sliding at all.

How to fix this?

Tried this code but still no slide happening

 public class ProductActivity extends Activity implements OnGestureListener {


     @
     Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.product_details);
         setContent();
     }

     private void setContent() {
         Bundle extras = getIntent().getExtras();
         TextView title = (TextView) findViewById(R.id.title);
         title.setText(extras.getString("Title"));
         TextView desc = (TextView) findViewById(R.id.desc);
         desc.setText(extras.getString("Desc"));
         Button buy = (Button) findViewById(R.id.buy);
         String priceTag = ("$" + String.format("%.2g", extras.getDouble("Price")) + "  Buy Now >>");
         buy.setText(priceTag);
         ImageView image = (ImageView) findViewById(R.id.productimage);
         Utils.imageLoader.DisplayImage(extras.getString("Image"), image);

     }




     private static final int SWIPE_MIN_DISTANCE = 6; // 120;
     private static final int SWIPE_MAX_OFF_PATH = 125; // 250;
     private static final int SWIPE_THRESHOLD_VELOCITY = 100; // 200;
     private GestureDetector gestureScanner;

     @
     Override
     public boolean onTouchEvent(MotionEvent me) {
         return gestureScanner.onTouchEvent(me);
     }

     // @Override
     public boolean onDown(MotionEvent e) {
         // viewA.setText("-" + "DOWN" + "-");
         return true;
     }

     // @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) {
                 Toast.makeText(getApplicationContext(), "Left Swipe",
                     Toast.LENGTH_SHORT).show();

             } else if (e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
                 Toast.makeText(getApplicationContext(), "Right Swipe",
                     Toast.LENGTH_SHORT).show();

             } else if (e1.getY() - e2.getY() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
                 Toast.makeText(getApplicationContext(), "Swipe up",
                     Toast.LENGTH_SHORT).show();

             } else if (e2.getY() - e1.getY() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
                 Toast.makeText(getApplicationContext(), "Swipe down",
                     Toast.LENGTH_SHORT).show();

             }
         } catch (Exception e) {
             // nothing
         }

         return true;
     }

     @
     Override
     public void onLongPress(MotionEvent e) {
         Toast mToast = Toast.makeText(getApplicationContext(), "Long Press",
             Toast.LENGTH_SHORT);
         mToast.show();
     }

     // @Override
     public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
         float distanceY) {
         // viewA.setText("-" + "SCROLL" + "-");
         return true;
     }

     // @Override
     public void onShowPress(MotionEvent e) {
         // viewA.setText("-" + "SHOW PRESS" + "-");
     } // @Override

     public boolean onSingleTapUp(MotionEvent e) {
         Toast mToast = Toast.makeText(getApplicationContext(), "Single Tap",
             Toast.LENGTH_SHORT);
         mToast.show();
         return true;
     }

 }

Answer 1

I thought a new answer would be a good idea since the old one is so different.

I'll start with a bit of background: The idea here is to use a horizontal scroll view to move to the next set of controls in a pretty way. So when the user stop scrolling the scroll view to the left or right, we want to change the pictures and text, and then move the scroll back to the middle in preparation for the next swipe. Someone has already answered how to listen for when a scroll view stops I've included an almost working example of how you might use this to get the effect you are looking for.

I hope this helps out and feel free to ask if you have anymore problems.

 @Override
 protected void onScrollChanged(int x, int y, int oldX, int oldY) {
     if (Math.abs(y - oldY) > SlowDownThreshold) {
         currentlyScrolling = true;
     } else {
         currentlyScrolling = false;
         if (!currentlyTouching) {
             //scrolling stopped...handle here
             //Check if it was a left or right swipe by comparing the new and old scroll locations
             if (y > oldY) {
                 //Scroll moved Right
                 //So we would do something like 
                 setContents(Index + 1);
                 //We find out where the middle of the scroll is
                 int middleHScroll = (Hscrollview.getMeasuredWidth() / 2) - (Hscrollview.getMeasuredWidth() / 2)
                 //We then return the scroll view to the middle
                 HScroll.scrollTo(middleHScroll);
             } else {
                 //Scroll moved Left
                 //We get set the pictures and text to the previous Index of the contents
                 setContents(Index - 1);
                 //We find out where the middle of the scroll is
                 int middleHScroll = (Hscrollview.getMeasuredWidth() / 2) - (Hscrollview.getMeasuredWidth() / 2)
                 //We then return the scroll view to the middle
                 HScroll.scrollTo(middleHScroll);
             }
             super.onScrollChanged(x, y, oldX, oldY);
         }
     }
 }

The xml should be something along these lines. There is still plenty of work to do to get this working but I hope this puts you in the right direction.

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textview1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/title_bar"
            android:gravity="center_horizontal"
            android:text="PRODUCTS >> PRODUCT DETAILS" />

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <RelativeLayout
                android:id="@+id/RelativeLayout1"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical"
                android:weightSum="2" >

                <HorizontalScrollView
                    xmlns:android="http://schemas.android.com/apk/res/android"
                    android:id="@+id/HorizontalScrollView1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentTop="true" >


                    <LinearLayout
                        xmlns:android="http://schemas.android.com/apk/res/android"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginRight="70dp"
                        android:orientation="horizontal" >



                        <ImageView
                            android:id="@+id/productimage3"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="70dp"
                            android:layout_marginRight="20dp"
                            android:layout_weight="1"
                            android:background="@drawable/product_detail_gradient"
                            android:minHeight="100dp"
                            android:minWidth="100dp" />

                        <ImageView
                            android:id="@+id/productimage2"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="70dp"
                            android:layout_marginRight="70dp"
                            android:layout_weight="1"
                            android:background="@drawable/product_detail_gradient"
                            android:minHeight="100dp"
                            android:minWidth="100dp" />

                        <ImageView
                            android:id="@+id/productimage1"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="70dp"
                            android:layout_marginRight="70dp"
                            android:layout_weight="1"
                            android:background="@drawable/product_detail_gradient"
                            android:minHeight="100dp"
                            android:minWidth="100dp" />

                    </LinearLayout>
                </HorizontalScrollView>

                <RelativeLayout
                    android:id="@+id/description"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:layout_alignParentBottom="true"
                    android:layout_alignParentLeft="true"
                    android:layout_below="@+id/HorizontalScrollView1"
                    android:layout_weight="1"
                    android:background="@drawable/black_img_bg" >

                    <TextView
                        android:id="@+id/title"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textSize="15dip"
                        android:textStyle="bold" >
                    </TextView>

                    <TextView
                        android:id="@+id/desc"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/title" >
                    </TextView>

                    <Button
                        android:id="@+id/addtocart"
                        android:layout_width="80dip"
                        android:layout_height="wrap_content"
                        android:layout_alignParentBottom="true"
                        android:layout_alignParentLeft="true"
                        android:background="@drawable/button_green_lhs"
                        android:gravity="left|center_vertical"
                        android:onClick="addToCartOrBuy"
                        android:text="Add To Cart"
                        android:textSize="10dip" />

                    <Button
                        android:id="@+id/buy"
                        android:layout_width="150dip"
                        android:layout_height="wrap_content"
                        android:layout_alignParentBottom="true"
                        android:layout_toRightOf="@+id/addtocart"
                        android:background="@drawable/button_orange_mid"
                        android:onClick="addToCartOrBuy"
                        android:text="Buy"
                        android:textSize="10dip" />

                    <Button
                        android:id="@+id/tellafriend"
                        android:layout_width="80dip"
                        android:layout_height="wrap_content"
                        android:layout_alignParentBottom="true"
                        android:layout_alignParentRight="true"
                        android:layout_toRightOf="@+id/buy"
                        android:background="@drawable/button_green_rhs"
                        android:gravity="right|center_vertical"
                        android:onClick="tellAFriend"
                        android:text="Tell A Friend"
                        android:textSize="10dip" />
                </RelativeLayout>
            </RelativeLayout>
        </RelativeLayout>

    </LinearLayout>