Develop Reference

creating an horizontal scrollview inside a horizontal scrollview

I am trying to create a horizontal scroll view inside horizontal scroll view in android. First horizontal scrolling views are working fine. When i am trying to scroll second horizontal scrolling views are not working.
my layout file
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="100dp"
android:orientation="horizontal">
<androidx.cardview.widget.CardView
android:layout_width="250dp"
android:layout_height="100dp"
app:cardCornerRadius="20dp"
app:cardBackgroundColor="#color/colorPrimary"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp">
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:scrollbars="horizontal"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp">
<LinearLayout
android:layout_width="200dp"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="1"></Button>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="2"></Button>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="3"></Button>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="4"></Button>
</LinearLayout>
</HorizontalScrollView>
</androidx.cardview.widget.CardView>
</LinearLayout>
</HorizontalScrollView>
</LinearLayout>
</RelativeLayout>
can anybody share your knowledge how to achieve this one?

You can create Custom class for nested scroll view for support horizontal smooth scroll.
public class HorizontalNestedScrollView extends NestedScrollView {
private int slop;
private float mInitialMotionX;
private float mInitialMotionY;
public HorizontalNestedScrollView(Context context) {
super(context);
init(context);
}
private void init(Context context) {
ViewConfiguration config = ViewConfiguration.get(context);
slop = config.getScaledEdgeSlop();
}
public HorizontalNestedScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public HorizontalNestedScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
private float xDistance, yDistance, lastX, lastY;
#Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
final float x = ev.getX();
final float y = ev.getY();
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
xDistance = yDistance = 0f;
lastX = ev.getX();
lastY = ev.getY();
// This is very important line that fixes
computeScroll();
break;
case MotionEvent.ACTION_MOVE:
final float curX = ev.getX();
final float curY = ev.getY();
xDistance += Math.abs(curX - lastX);
yDistance += Math.abs(curY - lastY);
lastX = curX;
lastY = curY;
if (xDistance > yDistance) {
return false;
}
}
return super.onInterceptTouchEvent(ev);
}
}
You can read about the issue and the simple fix here: https://code.google.com/p/android/issues/detail?id=194398
Use this class in place of your nestedscrollview in the xml file, and the child lists should intercept and handle the touch events properly.
Hope this will help you.

Gallery View inside scroll view not working.

I'm using gallery view inside scoll view but gallery view not working properly.
My custom GalleryView
<com.divum.Adapter.CustomGallery
android:id="#+id/gallery"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fadingEdge="none"
android:spacing="10dp" />
Adapter Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/top_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="2dp"
android:orientation="vertical"
android:weightSum="100">
<TextView
android:id="#+id/txt_title1"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:padding="5dp"
android:textColor="#color/black"
android:textSize="14dp" />
<ImageView
android:id="#+id/image1"
android:layout_width="fill_parent"
android:layout_height="65dp"
android:layout_marginTop="2dp"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:layout_marginLeft="2dp" />
<ScrollView
android:scrollHorizontally="false"
android:fadingEdge="none"
android:scrollbars="none"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/txt_details"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:padding="5dp"
android:textColor="#color/black"
android:textSize="14dp" />
</ScrollView>
</LinearLayout>
My problem is scrollview(vertically) working fine. The galleryview(horizontally) swiping is not working...

This is well known bug: ScrollView intercept both horizontal and vertical touch events. You can use this custom scroll view instead of standard one. This intercept only vertical touches:
public class VerticalScrollView extends ScrollView {
private float xDistance, yDistance, lastX, lastY;
public VerticalScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
xDistance = yDistance = 0f;
lastX = ev.getX();
lastY = ev.getY();
break;
case MotionEvent.ACTION_MOVE:
final float curX = ev.getX();
final float curY = ev.getY();
xDistance += Math.abs(curX - lastX);
yDistance += Math.abs(curY - lastY);
lastX = curX;
lastY = curY;
if (xDistance > yDistance)
return false;
}
return super.onInterceptTouchEvent(ev);
}
}

Android: RealViewSwitcher don't scrolling in vertical

im using RealViewSwitcher to swipe view and it's ok, my problem is similar to this one. i will try to explain a bit my scenario by this pic
listview <------> detail view ------> swipe view (horizontal).
The detail view is showing only partially and if try to scroll nothing happens.
Detail layout (no vertical scrolling)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textColorHint="#FF0000"
android:textSize="12dp"
android:textStyle="bold"
android:typeface="sans" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="150dip"
android:layout_height="120dip"
android:scaleType="centerCrop"
android:src="#drawable/stub"/>
<TextView
android:id="#+id/textView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="20dip"
android:textColor="#999999"
android:textColorLink="#ff0000"
android:textSize="20dip"
android:textStyle="normal"
android:typeface="sans" />
</LinearLayout>
layout with RealViewSwitcher
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:orientation="vertical">
<it.application.ppn.lib.RealViewSwitcher
android:id="#+id/horizontal_pager"
android:layout_width="fill_parent"
android:layout_height="0px"
android:layout_weight="1">
</it.application.ppn.lib.RealViewSwitcher>
</LinearLayout>

I faced with the same problem and found solution by intercepting touch event in RealViewSwitcher.
EDIT: previous posted variant does not work on newer API. There is third revision of code.
Add those lines into RealViewSwitcher implementation:
#Override
public boolean onInterceptTouchEvent(MotionEvent event) {
// prevent vertical scrolling when view switching in progress
if (!mScroller.isFinished())
return true;
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mScrollLocked = false;
mLastX = event.getX();
mLastY = event.getY();
mDeltaX = 0;
mDeltaY = 0;
onTouchEvent(event);
break;
case MotionEvent.ACTION_MOVE:
final float x = event.getX();
final float y = event.getY();
mDeltaX += Math.abs(x - mLastX);
mDeltaY += Math.abs(y - mLastY);
mLastX = x;
mLastY = y;
if (mDeltaX > mDeltaY) {
mScrollLocked = true;
onTouchEvent(event);
} else {
snapToDestination();
}
break;
}
if (mScrollLocked)
return true; // prevent furhter processing
return super.onInterceptTouchEvent(event);
}
EDIT2: also need to edit onTouchEvent method and replace case MotionEvent.ACTION_DOWN: body as follows:
case MotionEvent.ACTION_DOWN:
/*
* If being flinged and user touches, stop the fling. isFinished will be false if being flinged.
*/
mTouchState = mScroller.isFinished() ? TOUCH_STATE_REST : TOUCH_STATE_SCROLLING;
if (mTouchState == TOUCH_STATE_SCROLLING) {
mScroller.abortAnimation();
}
// Remember where the motion event started
mLastMotionX = x;
break;

How disable ScrollView

I have a layout where I have a ScrollView and some stuffs. It looks like:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/welcome_scrol_lay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:background="#drawable/bg">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/bg"
android:weightSum="100" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="250dp"
android:orientation="vertical"
android:weightSum="100"
android:background="#drawable/specialmapholder">
<android.support.v4.view.ViewPager
android:id="#+id/welcomeViewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="15dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_weight="90"
android:clickable="true" />
<LinearLayout
android:id="#+id/welcome_indicatorLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="10"
android:gravity="center" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="50"
android:orientation="vertical">
<TextView
android:id="#+id/welcome_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:text="Large Text"
android:textColor="#color/white"
android:textStyle="bold"
android:textSize="26dp"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/welcome_body"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:text="Medium Text"
android:textColor="#color/white"
android:textSize="14dp"
android:textStyle="bold"
android:layout_marginTop="20dp"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</LinearLayout>
</ScrollView>
As you can see I have a Viewpager in the ScrollView. I want to disable scroll when I touch ViewPager, because when I want to change picture page is scrolled. How can I disable the scroll function when I touch the ViewPager?

In Android, parents can consume child's TouchEvents. In this case, the ScrollView consumes the TouchEvents of your ViewPager component. To avoid this behaviour, Android framework provides the onInterceptTouchEvent(MotionEvent).
In your case, you have to subclass ScrollView and change the onInterceptTouchEvent(MotionEvent) method. You should change the onInterceptTouchEvent(MotionEvent), so that the ScrollView consumes the child's event only when the user scrolls the ScrollView vertically.
example implementation for ListView:
public class VerticalListView extends ListView {
private float mLastX;
private float mLastY;
private float mDiffX;
private float mDiffY;
public VerticalListView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public VerticalListView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public VerticalListView(Context context) {
super(context);
}
#Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
// reset difference values
mDiffX = 0;
mDiffY = 0;
mLastX = ev.getX();
mLastY = ev.getY();
break;
case MotionEvent.ACTION_MOVE:
final float curX = ev.getX();
final float curY = ev.getY();
mDiffX += Math.abs(curX - mLastX);
mDiffY += Math.abs(curY - mLastY);
mLastX = curX;
mLastY = curY;
// don't intercept event, when user tries to scroll horizontally
if (mDiffX > mDiffY) {
return false;
}
}
return super.onInterceptTouchEvent(ev);
}
}

SlidingDrawer with RadioButtons as Handle

I have a custom draggable SlidingDrawer using RadioButtons as its Handle. In order to enable the touch events on the RadioButtons I call return super.onInterceptTouchEvent(event); instead of return true on the onInterceptTouchEvent method. But somehow every time I want to drag my SlidingDrawer I can't drag it up by touching exactly on the RadioButtons, I have to move my finger up a little bit to drag the SlidingDrawer up.
Is there any way to make the SlidingDrawer exactly draggable by touching its RadioButtons without losing the TouchEvent on the RadioButtons itself?
Here's my touch method:
public boolean onInterceptTouchEvent(MotionEvent event) {
if (mLocked) {
//return false;
}
final int action = event.getAction();
float x = event.getX();
float y = event.getY();
final Rect frame = mFrame;
final View handle = mHandle;
handle.getHitRect(frame);
if (!mTracking && !frame.contains((int) x, (int) y)) {
return false;
}
if (action == MotionEvent.ACTION_DOWN) {
mTracking = true;
WWHApplication.getListActivityIntance().resizeListView(1800);
handle.setPressed(true);
// Must be called before prepareTracking()
prepareContent();
// Must be called after prepareContent()
if (mOnDrawerScrollListener != null) {
mOnDrawerScrollListener.onScrollStarted();
}
if (mVertical) {
final int top = mHandle.getTop();
mTouchDelta = (int) y - top;
prepareTracking(top);
} else {
final int left = mHandle.getLeft();
mTouchDelta = (int) x - left;
prepareTracking(left);
}
mVelocityTracker.addMovement(event);
}
//return true;
return super.onInterceptTouchEvent(event);
}
Here's how my handle looks like
<LinearLayout
android:id="#+id/handle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/tab_content_bg_top" />
<HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/tab_content_bg"
android:fillViewport="true"
android:scrollbars="none" >
<RadioGroup
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<RadioButton
android:id="#+id/cb_tab_all"
android:layout_width="46dp"
android:layout_height="45dp"
android:background="#drawable/checkbox_background"
android:button="#drawable/tab_all_selector"
android:onClick="true" />
<RadioButton
android:id="#+id/cb_tab_favorites"
android:layout_width="84dp"
android:layout_height="45dp"
android:background="#drawable/checkbox_background"
android:button="#drawable/tab_favorites_selector"
android:onClick="true" />
<RadioButton
android:id="#+id/cb_tab_historical"
android:layout_width="134dp"
android:layout_height="45dp"
android:background="#drawable/checkbox_background"
android:button="#drawable/tab_historical_selector"
android:onClick="true" />
<RadioButton
android:id="#+id/cb_tab_food"
android:layout_width="116dp"
android:layout_height="45dp"
android:background="#drawable/checkbox_background"
android:button="#drawable/tab_food_selector"
android:onClick="true" />
</RadioGroup>
</HorizontalScrollView>
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/tab_content_bg_bottom" />
</LinearLayout>