need viewflipper also to be scrolled vertically in this layout

Question

At the moment only my GridView is scrollable, but I need my ViewFlipper to be scrollable as well. I need help making ViewFlipper scroll vertically

Here is my layout at the moment:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_grids"
    android:layout_width="match_parent"
    android:overScrollMode="always"
    android:layout_height="match_parent">

    <ViewFlipper
        android:layout_marginTop="56dp"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:autoStart="true"
        android:id="@+id/vf1z"
        android:flipInterval="3000">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="fitXY"
            android:background="@drawable/front"
            android:id="@+id/imageViewz"/>

    </ViewFlipper>

    <GridView
        android:numColumns="3"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:id="@+id/grid"
        android:layout_marginTop="208dp"/>

<include layout="@layout/search"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:id="@+id/include">
</include>

</RelativeLayout>

ClassA · Answer 1 · 2017-07-26T05:38:33.677

You can add all the elements in your layout in a ScrollView like this.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_grids"
android:layout_width="match_parent"
android:overScrollMode="always"
android:layout_height="match_parent">

<ScrollView
    android:id="@+id/scrollView1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

<ViewFlipper
    android:layout_marginTop="56dp"
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:autoStart="true"
    android:id="@+id/vf1z"
    android:flipInterval="3000">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:background="@drawable/front"
        android:id="@+id/imageViewz"
        />

</ViewFlipper>

<GridView
    android:numColumns="3"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:id="@+id/grid"
    android:layout_marginTop="208dp"
    />

</ScrollView>

    <include layout="@layout/search"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:id="@+id/include">
    </include>

</RelativeLayout>

Or if you only want your ViewFlipper to be scrollable you can just add the ViewFlipper in a ScrollView

score 0 · Answer 2 · answered Jul 26 '17 at 06:03

You can use VerticalViewPager its custom implementation

/**
 * Uses a combination of a PageTransformer and swapping X & Y coordinates
 * of touch events to create the illusion of a vertically scrolling ViewPager. 
 * 
 * Requires API 11+
 * 
 */
public class VerticalViewPager extends ViewPager {

    public VerticalViewPager(Context context) {
        super(context);
        init();
    }

    public VerticalViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        // The majority of the magic happens here
        setPageTransformer(true, new VerticalPageTransformer());
        // The easiest way to get rid of the overscroll drawing that happens on the left and right
        setOverScrollMode(OVER_SCROLL_NEVER);
    }

    private class VerticalPageTransformer implements ViewPager.PageTransformer {

        @Override
        public void transformPage(View view, float position) {

            if (position < -1) { // [-Infinity,-1)
                // This page is way off-screen to the left.
                view.setAlpha(0);

            } else if (position <= 1) { // [-1,1]
                view.setAlpha(1);

                // Counteract the default slide transition
                view.setTranslationX(view.getWidth() * -position);

                //set Y position to swipe in from top
                float yPosition = position * view.getHeight();
                view.setTranslationY(yPosition);

            } else { // (1,+Infinity]
                // This page is way off-screen to the right.
                view.setAlpha(0);
            }
        }
    }

    /**
     * Swaps the X and Y coordinates of your touch event.
     */
    private MotionEvent swapXY(MotionEvent ev) {
        float width = getWidth();
        float height = getHeight();

        float newX = (ev.getY() / height) * width;
        float newY = (ev.getX() / width) * height;

        ev.setLocation(newX, newY);

        return ev;
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev){
        boolean intercepted = super.onInterceptTouchEvent(swapXY(ev));
        swapXY(ev); // return touch coordinates to original reference frame for any child views
        return intercepted;
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return super.onTouchEvent(swapXY(ev));
    }

}

See previous answers given by @Brett

Android: Vertical ViewPager

need viewflipper also to be scrolled vertically in this layout

2 Answers2