Android: Detect when ScrollView stops scrolling

Question

I'm using a ScrollView in Android and where the visible portion of the ScrollView is the same size as one of the cells inside the Scrollview. Every "cell" is the same height. So what I am trying to do is snap into position after the ScrollView has been scrolled.

Currently I am detecting when the user has touched the ScrollView and when they've started scrolling and working it out from there, but it is quite buggy. It also needs to work when the user just flicks it and it scrolls and then decelerates.

On iPhone there is a function that is something like didDecelerate and there I can do any code I want when the ScrollView has finished scrolling. Is there such a thing with Android? Or is there some code I could look at to figure out a better way of doing it?

I've looked over the Android docs and could not find anything like that.

Plunk

Answer 1

I recently had to implement the function you described. What i did was to have a Runnable checking out if the ScrollView had stopped scrolling by comparing the value returned by getScrollY() when the onTouchEvent is first triggered with the value returned after a time defined by the variable newCheck.

See code below (working solution):

public class MyScrollView extends ScrollView{

private Runnable scrollerTask;
private int initialPosition;

private int newCheck = 100;
private static final String TAG = "MyScrollView";

public interface OnScrollStoppedListener{
    void onScrollStopped();
}

private OnScrollStoppedListener onScrollStoppedListener;

public MyScrollView(Context context, AttributeSet attrs) {
    super(context, attrs);
    
    scrollerTask = new Runnable() {
        
        public void run() {
            
            int newPosition = getScrollY();
            if(initialPosition - newPosition == 0){//has stopped
                
                if(onScrollStoppedListener!=null){
                    
                    onScrollStoppedListener.onScrollStopped();
                }
            }else{
                initialPosition = getScrollY();
                MyScrollView.this.postDelayed(scrollerTask, newCheck);
            }
        }
    };
}

public void setOnScrollStoppedListener(MyScrollView.OnScrollStoppedListener listener){
    onScrollStoppedListener = listener;
}

public void startScrollerTask(){
    
    initialPosition = getScrollY();
    MyScrollView.this.postDelayed(scrollerTask, newCheck);
}

}

Then i have:

scroll.setOnTouchListener(new OnTouchListener() {

        public boolean onTouch(View v, MotionEvent event) {

            if (event.getAction() == MotionEvent.ACTION_UP) {

                scroll.startScrollerTask();
            }

            return false;
        }
});
scroll.setOnScrollStoppedListener(new OnScrollStoppedListener() {

        public void onScrollStopped() {

            Log.i(TAG, "stopped");
            
        }
});

Culpa

Thanks, have been looking for ages for something like this. Used in for the HorizontalScrollView instead, which (obviously) works as well. Only getScrollY() has to be replaced by getScrollX() – Make

Tried em all here . This is the ONLY one that works. – Box

Even click the scrollview it shows the "stopped". It should work only user scroll the Scrollview. Then what we need to do? – Interactive

It will call onScrollStopped() when you touch the screen. And scroll up and immediately if you scroll down onScrollStopped() method will call.. And if you scroll up and scroll down continuously it will call onScrollStopped() all the time. – Interactive

For full fledged answer there is an post on website, which found to be perfect: link They used very perfect way by using both onTouch and onScrollChanges() method. – Echikson

Answer 2

Here is yet another fix to the, IMHO, missing OnEndScroll event bug in the ScrollView.

Its inspired by hambonious answer. Simply drop this class into your project (change package to match your own) and use the below xml

package com.thecrag.components.ui;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.ScrollView;

public class ResponsiveScrollView extends ScrollView {

    public interface OnEndScrollListener {
        public void onEndScroll();
    }

    private boolean mIsFling;
    private OnEndScrollListener mOnEndScrollListener;

    public ResponsiveScrollView(Context context) {
        this(context, null, 0);
    }

    public ResponsiveScrollView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ResponsiveScrollView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    public void fling(int velocityY) {
        super.fling(velocityY);
        mIsFling = true;
    }

    @Override
    protected void onScrollChanged(int x, int y, int oldX, int oldY) {
        super.onScrollChanged(x, y, oldX, oldY);
        if (mIsFling) {
            if (Math.abs(y - oldY) < 2 || y >= getMeasuredHeight() || y == 0) {
                if (mOnEndScrollListener != null) {
                    mOnEndScrollListener.onEndScroll();
                }
                mIsFling = false;
            }
        }
    }

    public OnEndScrollListener getOnEndScrollListener() {
        return mOnEndScrollListener;
    }

    public void setOnEndScrollListener(OnEndScrollListener mOnEndScrollListener) {
        this.mOnEndScrollListener = mOnEndScrollListener;
    }

}

again changing the package name to match your project

<com.thecrag.components.ui.ResponsiveScrollView
        android:id="@+id/welcome_scroller"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/welcome_scroll_command_help_container"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/welcome_header_text_thecrag"
        android:layout_margin="6dp">
    ....
</com.thecrag.components.ui.ResponsiveScrollView>

Cybele

+1 Nice, simple answer. I change the difference value 2 to 0.5f to reflect the original ScrollView's MAX_SCROLL_FACTOR value. – Curium

This implementation is nice but it failed when scroll view is not filled at start. Here is a workaround (for an horizontal scroll view, so replace all x by y to get a vertical one) : @Override protected void onScrollChanged(int x, int y, int oldX, int oldY) { super.onScrollChanged(x, y, oldX, oldY); if (Math.abs(x - oldX) < SCROLL_FINISHED_THRESHOLD && x != lastStopX || x >= getMeasuredWidth() || x == 0) { lastStopX = x; if (mOnEndScrollListener != null) { mOnEndScrollListener.onScrollEnded(); } } } – Cerography

This is not always working. As in emulator, public void fling(int velocityY) is not always called. The scroll end threshold sometimes is more than 20 px. – Ingunna

Answer 3

I subclassed (Horizontal)ScrollView and did something like this:

@Override
protected void onScrollChanged(int x, int y, int oldX, int oldY) {
    if (Math.abs(x - oldX) > SlowDownThreshold) {  
        currentlyScrolling = true;
    } else {
        currentlyScrolling = false;
        if (!currentlyTouching) {
            //scrolling stopped...handle here
        }
    }
    super.onScrollChanged(x, y, oldX, oldY);
}

I used a value of 1 for the SlowDownThreshold since it always seems to be the difference of the last onScrollChanged event.

In order to make this behave correctly when dragging slowly, I had to do this:

@Override
public boolean onInterceptTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            currentlyTouching = true;
    }
    return super.onInterceptTouchEvent(event);
}

@Override
public boolean onTouch(View view, MotionEvent event) {
    switch (event.getAction()) {
        case MotionEvent.ACTION_UP:
        case MotionEvent.ACTION_CANCEL:
            currentlyTouching = false;
            if (!currentlyScrolling) {
                //I handle the release from a drag here
                return true;
            }
    }
    return false;
}

Bacillary

Nice answer. The only one addition. In onInterceptTouchEvent() you have also handle MotionEvent.ACTION_UP and MotionEvent.ACTION_CANCEL otherwise currentlyTouching will stay true in case that you open another activity on the click. – Misguidance

One more fix: in onScrollChanged() you have also to check for end of scroll even if slowdown is not yet 1. Like this: boolean end = (oldx > x) ? (x <= 0) : (x >= getMaxScrollAmount()); if (Math.abs(x - oldx) > 1 && !end) { scroll start; } else { scroll end } – Misguidance

This does not work on some devices, i.e. GS3. On my GS3, the diff between y and old y CAN be 1 during the middle of the scroll. It works perfectly on my Nexus 4 though. I'm not sure why. – Higgins

Not working on Samsung Galaxy Note 2 and Asus Memo Pad 7 either. I also see increments of 1 in the middle of the scroll on these devices. – Zone

Answer 4

My approach is determine scrolling state by a timestamp changed each time the onScrollChanged() is called. It's very easy to determine when is start and end of scrolling. You can also change threshold ( I use 100ms ) to fix sensitivity.

public class CustomScrollView extends ScrollView {
    private long lastScrollUpdate = -1;

    private class ScrollStateHandler implements Runnable {

        @Override
        public void run() {
            long currentTime = System.currentTimeMillis();
            if ((currentTime - lastScrollUpdate) > 100) {
                lastScrollUpdate = -1;
                onScrollEnd();
            } else {
                postDelayed(this, 100);
            }
        }
    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if (lastScrollUpdate == -1) {
            onScrollStart();
            postDelayed(new ScrollStateHandler(), 100);
        }

        lastScrollUpdate = System.currentTimeMillis();
    }

    private void onScrollStart() {
        // do something
    }

    private void onScrollEnd() {
        // do something
    }

}

Nard

Great solution. Works as supposed. – Zone

Thanks for your code. How to detect scroll start listener method from your code. please look my question #27865200 – Critical

Answer 5

Here is yet another solution, quite simple and clean in my opinion, naturally inspired by answers above. Basically once user ended gesture check if getScrollY() is still changing, after a brief delay (here 50ms).

public class ScrollViewWithOnStopListener extends ScrollView {

    OnScrollStopListener listener;

    public interface OnScrollStopListener {
        void onScrollStopped(int y);
    }

    public ScrollViewWithOnStopListener(Context context) {
        super(context);
    }

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

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_UP:
                checkIfScrollStopped();
        }

        return super.onTouchEvent(ev);
    }

    int initialY = 0;

    private void checkIfScrollStopped() {
        initialY = getScrollY();
        this.postDelayed(new Runnable() {
            @Override
            public void run() {
                int updatedY = getScrollY();
                if (updatedY == initialY) {
                    //we've stopped
                    if (listener != null) {
                        listener.onScrollStopped(getScrollY());
                    }
                } else {
                    initialY = updatedY;
                    checkIfScrollStopped();
                }
            }
        }, 50);
    }

    public void setOnScrollStoppedListener(OnScrollStopListener yListener) {
        listener = yListener;
    }
}

Typecast

Answer 6

My approach for this question is to use a timer to check for the following 2 "events".

1) onScrollChanged() stopped being called

2) User's finger is lift from the scrollview

public class CustomScrollView extends HorizontalScrollView {

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

Timer ntimer = new Timer();
MotionEvent event;

@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) 
{
    checkAgain();
    super.onScrollChanged(l, t, oldl, oldt);
}

public void checkAgain(){
    try{
        ntimer.cancel();
        ntimer.purge();
    }
    catch(Exception e){}
    ntimer = new Timer();
    ntimer.schedule(new TimerTask() {

        @Override
        public void run() {

            if(event.getAction() == MotionEvent.ACTION_UP){
                // ScrollView Stopped Scrolling and Finger is not on the ScrollView
            }
            else{
                // ScrollView Stopped Scrolling But Finger is still on the ScrollView
                checkAgain();
            }
        }
    },100);

}

@Override
public boolean onTouchEvent(MotionEvent event) {
    this.event = event; 
    return super.onTouchEvent(event);
    }
}

Carnal

Answer 7

this is an old thread but I'd like to add a shorter solution I came up with:

 buttonsScrollView.setOnScrollChangeListener { v, scrollX, scrollY, oldScrollX, oldScrollY ->

            handler.removeCallbacksAndMessages(null)

            handler.postDelayed({
                  //YOUR CODE TO BE EXECUTED HERE
                },1000)
        }

Naturally there's a 1000 milliseconds delay. Adjust that if you need to.

Timtima

Answer 8

For a simple case like you described, you can probably get away with overriding fling method in your custom scroll view. Fling method gets called to perform "deceleration" every time user raises his finger from the screen.

So what you should do is something like this:

1. Subclass ScrollView.

   public class MyScrollView extends ScrollView { 
   
       private Scroller scroller;  
       private Runnable scrollerTask; 
   
       //...
   
       public MyScrollView(Context context, AttributeSet attrs) {
           super(context, attrs);
   
           scroller = new Scroller(getContext()); //or OverScroller for 3.0+
           scrollerTask = new Runnable() {
               @Override
               public void run() {
                   scroller.computeScrollOffset();
                   scrollTo(0, scroller.getCurrY());
   
                   if (!scroller.isFinished()) {
                       MyScrollView.this.post(this);
                   } else {
                       //deceleration ends here, do your code
                   }
               }
           };
           //...
       }
   }
   

2. Subclass fling method and DO NOT call superclass implementation.

   @Override  
   public void fling(int velocityY) {  
       scroller.fling(getScrollX(), getScrollY(), 0, velocityY, 0, 0, 0, container.getHeight());
       post(scrollerTask);  
   
       //add any extra functions you need from android source code:
       //show scroll bars
       //change focus
       //etc.
   }
   

3. Fling will not trigger if the user stops scrolling before raising up his finger (velocityY == 0). In case you want to intercept this sort of events aswell, override onTouchEvent.

   @Override
   public boolean onTouchEvent(MotionEvent ev) {
       boolean eventConsumed = super.onTouchEvent(ev);
       if (eventConsumed && ev.getAction() == MotionEvent.ACTION_UP) {
           if (scroller.isFinished()) {
               //do your code
           }
       }
       return eventConsumed;
   }
   

NOTE Although this works, overriding fling method might be a bad idea. It is public, but its barely designed for subclassing. Right now it does 3 things - it initiates fling for private mScroller, handles possible focus changes and shows scroll bars. This might change in future android release. For instance, private mScroller instance changed its class from Scroller to OvershootScroller between 2.3 and 3.0. You have to keep in mind all this small differences. In any case, be ready for unforeseen consequences in the future.

Bushelman

What is container.getHeight() in second step (2.) ? – Chippy

container is the view that is inside scrollView. Since scrollView can contain only 1 child, you can replace container with getChildAt(0). – Bushelman

Answer 9

My solution is a variation of Lin Yu Cheng's great solution and also detects when scrolling has started and stopped.

Step 1. Define a HorizontalScrollView and OnScrollChangedListener:

CustomHorizontalScrollView scrollView = (CustomHorizontalScrollView) findViewById(R.id.horizontalScrollView);

horizontalScrollListener = new CustomHorizontalScrollView.OnScrollChangedListener() {
    @Override
    public void onScrollStart() {
        // Scrolling has started. Insert your code here...
    }

    @Override
    public void onScrollEnd() {
         // Scrolling has stopped. Insert your code here...
    }
};

scrollView.setOnScrollChangedListener(horizontalScrollListener);

Step 2. Add the CustomHorizontalScrollView class:

public class CustomHorizontalScrollView extends HorizontalScrollView {
    public interface OnScrollChangedListener {
        // Developer must implement these methods.
        void onScrollStart();
        void onScrollEnd();
    }

    private long lastScrollUpdate = -1;
    private int scrollTaskInterval = 100;
    private Runnable mScrollingRunnable;
    public OnScrollChangedListener mOnScrollListener;

    public CustomHorizontalScrollView(Context context) {
        this(context, null, 0);
        init(context);
    }

    public CustomHorizontalScrollView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
        init(context);
    }

    public CustomHorizontalScrollView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context);
    }

    private void init(Context context) {
        // Check for scrolling every scrollTaskInterval milliseconds
        mScrollingRunnable = new Runnable() {
            public void run() {
                if ((System.currentTimeMillis() - lastScrollUpdate) > scrollTaskInterval) {
                    // Scrolling has stopped.
                    lastScrollUpdate = -1;
                    //CustomHorizontalScrollView.this.onScrollEnd();
                    mOnScrollListener.onScrollEnd();
                } else {
                    // Still scrolling - Check again in scrollTaskInterval milliseconds...
                    postDelayed(this, scrollTaskInterval);
                }
            }
        };
    }

    public void setOnScrollChangedListener(OnScrollChangedListener onScrollChangedListener) {
        this.mOnScrollListener = onScrollChangedListener;
    }

    public void setScrollTaskInterval(int scrollTaskInterval) {
        this.scrollTaskInterval = scrollTaskInterval;
    }

    //void onScrollStart() {
    //    System.out.println("Scroll started...");
    //}

    //void onScrollEnd() {
    //    System.out.println("Scroll ended...");
    //}

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if (mOnScrollListener != null) {
            if (lastScrollUpdate == -1) {
                //CustomHorizontalScrollView.this.onScrollStart();
                mOnScrollListener.onScrollStart();
                postDelayed(mScrollingRunnable, scrollTaskInterval);
            }

            lastScrollUpdate = System.currentTimeMillis();
        }
    }
}

Insomniac

Answer 10

Try taking a look at this question here on StackOverflow - it's not exactly the same as your question, but it gives an idea on how you can manage the scroll event of a ScrollView.

Basicly you need to create your own CustomScrollView by extending ScrollView and override onScrollChanged(int x, int y, int oldx, int oldy). Then you need to reference this in your layout file instead of the standard ScrollView like com.mypackage.CustomScrollView.

Woodson

This onScrollChanged() is actually what I am using at the minute. Thanks though. – Plunk

Answer 11

I think this has come up in the past. AFAIK, you can't easily detect that. My suggestion is that you take a look at ScrollView.java (that's how we do things in Android land :)) and figure out how you can extend the class to provide the functionality you are looking for. This is what I would try first:

 @Override
 protected void onScrollChanged(int l, int t, int oldl, int oldt) {
     if (mScroller.isFinished()) {
         // do something, for example call a listener
     }
 }

Faizabad

Nice I didn't noticed the isFinished method! – Tunnage

Thanks. How do I access this isFinished() method? I took a look at the ScrollView.java file and mScroller is private and I can tell of no way to gain access to it. – Plunk

Hmm, indeed. I did not look close enough. That's why I said I would try that first :). You could do other things, like track calls to onScrollChanged, scrollTo, or any other scroll-related method. Alternatively, you could just copy the entire ScrollView code and make that field protected. I wouldn't recommend that, though. – Faizabad

I did try copying the entire ScrollView code but it gave errors when I tried to compile and I didn't know how to solve them. I guess I will just have to try to keep adding on to what I have already and try and make it work. Thanks. – Plunk

Accessed mScroller through reflection. Doesn't work too, isFinished() is triggered everytime the scrollview reaches your finger position, which is almost continuously.Scroll stop event should fire when both user releases his finger and scroller stops scrolling. – Sideburns

This answer looked really promising but since it sort of dead ended, maybe it should be removed? – Duck

One can use Framelayout with Overscroller then you can access isFinished of overscroller – Strainer

Answer 12

There are some great answers here, but my code can detect when scrolling stops without having to extend ScrollView class. every view instance can call getViewTreeObserver(). when Holding this instance of ViewTreeObserver you can add a OnScrollChangedListener using the function addOnScrollChangedListener().

declare the following:

private ScrollView scrollListener;
private volatile long milesec;

private Handler scrollStopDetector;
private Thread scrollcalled = new Thread() {

    @Override
    public void run() { 
        if (System.currentTimeMillis() - milesec > 200) {
            //scroll stopped - put your code here
        }
    }
}; 

and in your onCreate (or another place) add:

    scrollListener = (ScrollView) findViewById(R.id.scroll);

    scrollListener.getViewTreeObserver().addOnScrollChangedListener(new OnScrollChangedListener() {

        @Override
        public void onScrollChanged() {
            milesec = System.currentTimeMillis();
            scrollStopDetector.postDelayed(scrollcalled, 200);
        }
    });

you might want to take longer or slower time between this checks, but when scrolling this listner gets called really fast so it will work very fast.

Carrel

I haven't tried in this case, but from my experience I would guess the repetitive and reciprocal call of postDelayed from onScrollChanged will cause memory leaks. – Zone

Answer 13

Here's my solution which includes scroll tracking and scroll ending:

public class ObservableHorizontalScrollView extends HorizontalScrollView {
    public interface OnScrollListener {
        public void onScrollChanged(ObservableHorizontalScrollView scrollView, int x, int y, int oldX, int oldY);
        public void onEndScroll(ObservableHorizontalScrollView scrollView);
    }

    private boolean mIsScrolling;
    private boolean mIsTouching;
    private Runnable mScrollingRunnable;
    private OnScrollListener mOnScrollListener;

    public ObservableHorizontalScrollView(Context context) {
        this(context, null, 0);
    }

    public ObservableHorizontalScrollView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ObservableHorizontalScrollView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        int action = ev.getAction();

        if (action == MotionEvent.ACTION_MOVE) {
            mIsTouching = true;
            mIsScrolling = true;
        } else if (action == MotionEvent.ACTION_UP) {
            if (mIsTouching && !mIsScrolling) {
                if (mOnScrollListener != null) {
                    mOnScrollListener.onEndScroll(this);
                }
            }

            mIsTouching = false;
        }

        return super.onTouchEvent(ev);
    }

    @Override
    protected void onScrollChanged(int x, int y, int oldX, int oldY) {
        super.onScrollChanged(x, y, oldX, oldY);

        if (Math.abs(oldX - x) > 0) {
            if (mScrollingRunnable != null) {
                removeCallbacks(mScrollingRunnable);
            }

            mScrollingRunnable = new Runnable() {
                public void run() {
                    if (mIsScrolling && !mIsTouching) {
                        if (mOnScrollListener != null) {
                            mOnScrollListener.onEndScroll(ObservableHorizontalScrollView.this);
                        }
                    }

                    mIsScrolling = false;
                    mScrollingRunnable = null;
                }
            };

            postDelayed(mScrollingRunnable, 200);
        }

        if (mOnScrollListener != null) {
            mOnScrollListener.onScrollChanged(this, x, y, oldX, oldY);
        }
    }

    public OnScrollListener getOnScrollListener() {
        return mOnScrollListener;
    }

    public void setOnScrollListener(OnScrollListener mOnEndScrollListener) {
        this.mOnScrollListener = mOnEndScrollListener;
    }

}

Maestricht

Answer 14

I've made some improvements to ZeroG's answer. Mainly cancellation of excess task calls and implementing the whole thing as a private OnTouchListener, so all the scroll detection code would be in one place.

Paste the following code into your own ScrollView implementation:

private class ScrollFinishHandler implements OnTouchListener
{
        private static final int SCROLL_TASK_INTERVAL = 100;

        private Runnable    mScrollerTask;
        private int         mInitialPosition = 0;

        public ScrollFinishHandler()
        {
            mScrollerTask = new Runnable() {

                public void run() {

                    int newPosition = getScrollY();
                    if(mInitialPosition - newPosition == 0)
                    {//has stopped

                       onScrollStopped(); // Implement this on your main ScrollView class
                    }else{
                        mInitialPosition = getScrollY();
                        ExpandingLinearLayout.this.postDelayed(mScrollerTask, SCROLL_TASK_INTERVAL);
                    }
                }
            };
        }

        @Override
        public boolean onTouch(View v, MotionEvent event) 
        {
            if (event.getAction() == MotionEvent.ACTION_UP) 
            {

                startScrollerTask();
            }
            else
            {
                stopScrollerTask();
            }

            return false;
        }

}

And then in your ScrollView implementation:

setOnTouchListener( new ScrollFinishHandler() );

Oulman

Answer 15

        this.getListView().setOnScrollListener(new OnScrollListener(){
        @Override
        public void onScrollStateChanged(AbsListView view, int scrollState) {}

        @Override
        public void onScroll(AbsListView view, int firstVisibleItem,
            int visibleItemCount, int totalItemCount) {
                     if( firstVisibleItem + visibleItemCount >= totalItemCount ) 
                              // Last item is shown...

            }

Hope the snippet help :)

Tunnage

Unfortunately I am using a ScrollView, not a ListView. Thanks though. – Plunk

Hello? ScrollView not ListView. – Diffusion