How to make simultaneous scrollable views in Android.

Arun Badole

Hello All,

I am back with one more innovative way that can be used in Android. This time I am targeting ScrollView.

There may be situation where you want simultaneous scrolling of two views. I have tried it with more exciting way. I hope you will like this way.

Here I am using four section

  1. First it is static view no scrolling is allowed here.
  2. Second it can be scrolled horizontal only.
  3. Third it can be scrolled vertical only.
  4. Fourth it can be scrolled both vertically and horizontally.

The interesting thing is that when second section is scrolled horizontally so simultaneously fourth section also scrolled in horizontal direction & vice versa and if third section is scrolled vertically so fourth section also scrolls in vertical direction & vice versa.

You can find the full source code at Github repo SimultaneousScrolling.

The XML code is as follows.


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&quot;
android:layout_width="fill_parent"
android:layout_height="200dip"
android:orientation="vertical">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="100dip"
android:layout_height="100dip"
android:background="#FABCDE">
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="FIXED"
android:textColor="@color/blue"
android:textSize="20dip" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="100dip">
<com.overflow.ab1209.etc.ObservableHorizontalScrollView
android:id="@+id/scroll_horizontal_only"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#AAACDE">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:text="Horizontal Only "
android:textColor="@color/blue" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:text="Horizontal Only "
android:textColor="@color/blue" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:text="Horizontal Only "
android:textColor="@color/blue" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:text="Horizontal Only "
android:textColor="@color/blue" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:text="Horizontal Only "
android:textColor="@color/blue" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:text="Horizontal Only "
android:textColor="@color/blue" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:text="Horizontal Only "
android:textColor="@color/blue" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:text="Horizontal Only "
android:textColor="@color/blue" />
</LinearLayout>
</com.overflow.ab1209.etc.ObservableHorizontalScrollView>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="100dip"
android:layout_height="fill_parent"
android:background="#FABCDE">
<com.overflow.ab1209.etc.ObservableScrollView
android:id="@+id/scroll_vertical_only"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#CCCCDE">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Vertical Only"
android:textColor="@color/red" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Vertical Only"
android:textColor="@color/red" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Vertical Only"
android:textColor="@color/red" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Vertical Only"
android:textColor="@color/red" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Vertical Only"
android:textColor="@color/red" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Vertical Only"
android:textColor="@color/red" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Vertical Only"
android:textColor="@color/red" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Vertical Only"
android:textColor="@color/red" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Vertical Only"
android:textColor="@color/red" />
</LinearLayout>
</com.overflow.ab1209.etc.ObservableScrollView>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.overflow.ab1209.etc.ObservableScrollView
android:id="@+id/scroll_vertical_from_both"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.overflow.ab1209.etc.ObservableHorizontalScrollView
android:id="@+id/scroll_horizontal_from_both"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#FFFFFE">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Vertical Horizontal both " />
</LinearLayout>
</LinearLayout>
</com.overflow.ab1209.etc.ObservableHorizontalScrollView>
</com.overflow.ab1209.etc.ObservableScrollView>
</LinearLayout>
</LinearLayout>
</LinearLayout>

view raw

scrolltest.xml

hosted with ❤ by GitHub

For this I have created two custom scroll-able view class that extends HorizontalScrollView for horizontal scrolling & another extends ScrollView for vertical scrolling.
Also I have created an interface which contains two abstract methods which monitor scrolling, one for horizontal another for vertical.

Java code is..

1.) ObservableScrollView.java


public class ObservableScrollView extends ScrollView {
private ScrollViewListener scrollViewListener = null;
public ObservableScrollView(Context context) {
super(context);
}
public ObservableScrollView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public ObservableScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public void setScrollViewListener(ScrollViewListener scrollViewListener) {
this.scrollViewListener = scrollViewListener;
}
@Override
protected void onScrollChanged(int x, int y, int oldx, int oldy) {
super.onScrollChanged(x, y, oldx, oldy);
if (scrollViewListener != null) {
scrollViewListener.onScrollChanged(this, x, y, oldx, oldy);
}
}
}

view raw

ObservableScrollView.java

hosted with ❤ by GitHub

2.) ObservableHorizontalScrollView.java


public class ObservableHorizontalScrollView extends HorizontalScrollView {
private ScrollViewListener scrollViewListener = null;
public ObservableHorizontalScrollView(Context context) {
super(context);
}
public ObservableHorizontalScrollView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public ObservableHorizontalScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public void setScrollViewListener(ScrollViewListener scrollViewListener) {
this.scrollViewListener = scrollViewListener;
}
@Override
protected void onScrollChanged(int x, int y, int oldx, int oldy) {
super.onScrollChanged(x, y, oldx, oldy);
if (scrollViewListener != null) {
scrollViewListener.onScrollChanged(this, x, y, oldx, oldy);
}
}
}

view raw

ObservableHorizontalScrollView.java

hosted with ❤ by GitHub

3.) Interface ScrollViewListener.java


public interface ScrollViewListener {
void onScrollChanged(ObservableScrollView scrollView, int x, int y, int oldx, int oldy);
void onScrollChanged(ObservableHorizontalScrollView scrollView, int x, int y, int oldx, int oldy);
}

view raw

ScrollViewListener.java

hosted with ❤ by GitHub

And finally the class which implements interface ScrollViewListener and perform simultaneous scrolling.

4.) ScrollTest.java


public class ScrollTest extends Activity implements ScrollViewListener {
private ObservableScrollView scroll_vertical_from_both;
private ObservableScrollView scroll_vertical_only;
private ObservableHorizontalScrollView scroll_horizontal_from_both;
private ObservableHorizontalScrollView scroll_horizontal_only;
/**
* Called when the activity is first created.
*/
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.scrolltest);
scroll_vertical_from_both = (ObservableScrollView) findViewById(R.id.scroll_vertical_from_both);
scroll_vertical_only = (ObservableScrollView) findViewById(R.id.scroll_vertical_only);
scroll_horizontal_from_both = (ObservableHorizontalScrollView) findViewById(R.id.scroll_horizontal_from_both);
scroll_horizontal_only = (ObservableHorizontalScrollView) findViewById(R.id.scroll_horizontal_only);
scroll_vertical_from_both.setScrollViewListener(this);
scroll_vertical_only.setScrollViewListener(this);
scroll_horizontal_from_both.setScrollViewListener(this);
scroll_horizontal_only.setScrollViewListener(this);
}
@Override
public void onScrollChanged(ObservableScrollView scrollView, int x, int y, int oldx, int oldy) {
Log.i("", "VERTICAL");
scroll_vertical_from_both.scrollTo(x, y);
scroll_vertical_only.scrollTo(x, y);
}
@Override
public void onScrollChanged(ObservableHorizontalScrollView scrollView, int x, int y, int oldx, int oldy) {
Log.i("", "HORIZONTAL");
scroll_horizontal_from_both.scrollTo(x, y);
scroll_horizontal_only.scrollTo(x, y);
}
}

view raw

ScrollTest.java

hosted with ❤ by GitHub

Full source code is available at Github repo SimultaneousScrolling.

I hope you liked it & surely will try it and of course make it more innovative.

Thanks

šŸ˜ Happy Coding šŸ˜

Published by Arun Badole

Love to code. Love to watch & play Soccer & Cricket. Love Music.

11 thoughts on “How to make simultaneous scrollable views in Android.”

  2. Thanks for posting scrolltest.xml. Unfortunately, I got some error in scrolltest.xml. When I copied and pasted the listing, the quotation marks were not recognized in my Windows PC. Even after I replaced all unrecognized quotation marks with the regular quotation mark, I got errors in scrolltest.xml.

    Could you email me your working samples? My email is doumi247@gmail.com.

    Reply

Leave a reply to Sangsin An Cancel reply