Databases
StackOverflow2013
Postsdbo
POAndroid: Synchronized scrolling of two different views
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAndroid: Synchronized scrolling of two different views
    text
    copied!<p>I have a tricky problem related to synchronized scrolling of two different views. I've made my own custom grid view widget, which has "sticky" views to the left and top that only in one direction with the grid. Think of a calendar where you have times at the top, dates at the left, and when you scroll horizontally through time, the date view should stay put, and when you scroll vertically through the dates, the time view should stay put.</p> <p>The grid itself is implemented using a nested horizontal scrollview in a vertical scrollview. The grid is working great, so no problem there. Since the sticky views are not in the actual grid, I have overriden onScrollChanged in the grid scrollviews and programatically call scrollTo on the sticky views when the user scrolls the grid.</p> <p>That works as expected, except that there is a slight time offset as to when the two different views start scrolling and ends scrolling. It makes sense when you consider that the scrolling likely is executed linearly on the UI thread I suppose..</p> <p>All the views are scroll views, and I have enabled smooth scrolling and used smoothScrollTo, etc, instead to try to improve this, but it's the same problem nonetheless. The problem is especially noticeable on larger screens, such as the Samsung Galaxy Tab, whereas it's hardly noticeable on small-medium screen devices.</p> <p>Any help is appreciated! If there is an easy fix, great..if it means new design (that meets the sticky view usecase above), then so be it.</p> <p>Code to trigger prog. scroll, same for horizontal </p> <pre><code>@Override protected void onScrollChanged(int x, int y, int oldx, int oldy) { mListener.onScrollY(y); super.onScrollChanged(x, y, oldx, oldy); } // which leads to, // Handle vertical scroll public void onScrollY(final int y) { mCurrentY = y; mVerticalScroll.smoothScrollTo(0, y); } </code></pre> <p>XML layouts below, if that's of any help </p> <p>The actual grid, which is a horizontal scroll view wrapped in a vertical scroll view and the grid items are added vertically in the nested linearlayout<br> ></p> <pre><code> &lt; com.....VerticalScrollView android:id="@+id/gridscroll" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_below="@id/timescroll" android:layout_toRightOf="@id/vertscroll" android:layout_alignTop="@id/vertscroll" android:layout_marginLeft="2dp" android:scrollbars="none" android:fadingEdge="none"&gt; &lt; com....HorizScrollView android:id="@+id/horizscroll" android:layout_width="fill_parent" android:layout_height="fill_parent" android:scrollbars="none" android:fadingEdge="none"&gt; &lt; LinearLayout android:id="@+id/grid" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"&gt; &lt; /LinearLayout&gt; &lt; /com.....HorizScrollView&gt; &lt; /com.....VerticalScrollView&gt; </code></pre> <p>The horizontal sticky view</p> <blockquote> <p></p> </blockquote> <pre><code> &lt; com.....GridTimeScrollView android:id="@+id/timescroller" android:layout_width="fill_parent" android:layout_height="fill_parent" android:scrollbars="none" android:fadingEdge="none"&gt; &lt; LinearLayout android:id="@+id/timelist" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal" /&gt; &lt; /com.....GridTimeScrollView&gt; </code></pre> <p>The vertical sticky view</p> <blockquote> <p></p> </blockquote> <pre><code>&lt; com....GridVertListScrollView android:id="@+id/vertscroller" android:layout_width="fill_parent" android:layout_height="fill_parent" android:scrollbars="none" android:fadingEdge="none"&gt; &lt; LinearLayout android:id="@+id/vertitemlist" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" /&gt; &lt; /com.....GridVertListScrollView&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload