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