Search code examples
androidslidegesture-recognition

android: swipe left or right to slide views


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;
     }

 }

Solution

  • 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>