How to make simultaneous scrollable views in Android.

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 horizontaly.

The interesting thing is that when second section is scrolled horizontaly 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.

The XML code is as follows.

scrolltest.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
android:orientation=”vertical” android:layout_width=”fill_parent”
android:layout_height=”200dip”>
<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:text=”FIXED”
android:layout_width=”match_parent” android:layout_height=”match_parent”
android:textColor=”@color/blue” android:textSize=”20dip”
android:gravity=”center” />
</LinearLayout>
<LinearLayout android:layout_width=”fill_parent”
android:layout_height=”100dip”>
<com.overflow.ab1209.etc.ObservableHorizontalScrollView
android:layout_width=”fill_parent” android:layout_height=”fill_parent”
android:id=”@+id/scroll_horizontal_only” android:background=”#AAACDE”>
<LinearLayout android:layout_width=”fill_parent”
android:layout_height=”fill_parent”>

<TextView android:id=”@+id/textView1″ android:text=”Horizontal Only    “
android:layout_width=”match_parent” android:layout_height=”match_parent”
android:textColor=”@color/blue” android:gravity=”center_vertical” />
<TextView android:id=”@+id/textView1″ android:text=”Horizontal Only    “
android:layout_width=”match_parent” android:layout_height=”match_parent”
android:textColor=”@color/blue” android:gravity=”center_vertical” />
<TextView android:id=”@+id/textView1″ android:text=”Horizontal Only    “
android:layout_width=”match_parent” android:layout_height=”match_parent”
android:textColor=”@color/blue” android:gravity=”center_vertical” />
<TextView android:id=”@+id/textView1″ android:text=”Horizontal Only    “
android:layout_width=”match_parent” android:layout_height=”match_parent”
android:textColor=”@color/blue” android:gravity=”center_vertical” />
<TextView android:id=”@+id/textView1″ android:text=”Horizontal Only    “
android:layout_width=”match_parent” android:layout_height=”match_parent”
android:textColor=”@color/blue” android:gravity=”center_vertical” />
<TextView android:id=”@+id/textView1″ android:text=”Horizontal Only    “
android:layout_width=”match_parent” android:layout_height=”match_parent”
android:textColor=”@color/blue” android:gravity=”center_vertical” />
<TextView android:id=”@+id/textView1″ android:text=”Horizontal Only    “
android:layout_width=”match_parent” android:layout_height=”match_parent”
android:textColor=”@color/blue” android:gravity=”center_vertical” />
<TextView android:id=”@+id/textView1″ android:text=”Horizontal Only    “
android:layout_width=”match_parent” android:layout_height=”match_parent”
android:textColor=”@color/blue” android:gravity=”center_vertical” />

</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:layout_width=”fill_parent” android:layout_height=”fill_parent”
android:id=”@+id/scroll_vertical_only” android:background=”#CCCCDE”>
<LinearLayout android:layout_width=”fill_parent”
android:layout_height=”fill_parent” android:orientation=”vertical”>
<TextView android:id=”@+id/textView1″ android:text=”Vertical Only”
android:layout_width=”match_parent” android:layout_height=”match_parent”
android:textColor=”@color/red” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Only”
android:layout_width=”match_parent” android:layout_height=”match_parent”
android:textColor=”@color/red” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Only”
android:layout_width=”match_parent” android:layout_height=”match_parent”
android:textColor=”@color/red” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Only”
android:layout_width=”match_parent” android:layout_height=”match_parent”
android:textColor=”@color/red” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Only”
android:layout_width=”match_parent” android:layout_height=”match_parent”
android:textColor=”@color/red” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Only”
android:layout_width=”match_parent” android:layout_height=”match_parent”
android:textColor=”@color/red” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Only”
android:layout_width=”match_parent” android:layout_height=”match_parent”
android:textColor=”@color/red” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Only”
android:layout_width=”match_parent” android:layout_height=”match_parent”
android:textColor=”@color/red” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Only”
android:layout_width=”match_parent” android:layout_height=”match_parent”
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:layout_width=”fill_parent” android:layout_height=”fill_parent”
android:id=”@+id/scroll_vertical_from_both”>
<com.overflow.ab1209.etc.ObservableHorizontalScrollView
android:layout_width=”fill_parent” android:layout_height=”fill_parent”
android:id=”@+id/scroll_horizontal_from_both” 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:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
</LinearLayout>
<LinearLayout android:layout_width=”fill_parent”
android:layout_height=”wrap_content” android:orientation=”horizontal”>
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
</LinearLayout>
<LinearLayout android:layout_width=”fill_parent”
android:layout_height=”wrap_content” android:orientation=”horizontal”>
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
</LinearLayout>
<LinearLayout android:layout_width=”fill_parent”
android:layout_height=”wrap_content” android:orientation=”horizontal”>
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
</LinearLayout>
<LinearLayout android:layout_width=”fill_parent”
android:layout_height=”wrap_content” android:orientation=”horizontal”>
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
</LinearLayout>
<LinearLayout android:layout_width=”fill_parent”
android:layout_height=”wrap_content” android:orientation=”horizontal”>
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
</LinearLayout>
<LinearLayout android:layout_width=”fill_parent”
android:layout_height=”wrap_content” android:orientation=”horizontal”>
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
<TextView android:id=”@+id/textView1″ android:text=”Vertical Horizontal both  “
android:layout_width=”wrap_content” android:layout_height=”wrap_content” />
</LinearLayout>

</LinearLayout>
</com.overflow.ab1209.etc.ObservableHorizontalScrollView>
</com.overflow.ab1209.etc.ObservableScrollView>
</LinearLayout>

</LinearLayout>
</LinearLayout>

For this I have created two custom scrollable view class that extends HorizontalScrollView for horizontal scrolling & another extends ScrollView for vertical scrolling.
And also I have created a Interface which contains two abstract methods which monitor scrolling functionality ,one for horizontal another one for vertical.

Java Code is..

1.) ObservableScrollView.java

package com.ab1209.etc;

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

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);
}
}

}

2.) ObservableHorizontalScrollView.java

package com.ab1209.etc;

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

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);
}
}

}

3.) Interface ScrollViewListener.java

package com.ab1209.etc;

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);
}

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

4.) ScrollTest.java

package com.overflow.ab1209;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;

import com.overflow.ab1209.etc.ObservableHorizontalScrollView;
import com.overflow.ab1209.etc.ObservableScrollView;
import com.overflow.ab1209.etc.ScrollViewListener;

public class ScrollTest extends Activity implements ScrollViewListener
{
ObservableScrollView scroll_vertical_from_both;
ObservableScrollView scroll_vertical_only;
ObservableHorizontalScrollView scroll_horizontal_from_both;
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)
{
// TODO Auto-generated method stub
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)
{
// TODO Auto-generated method stub
Log.i(“”,”HORIZONTAL”);
scroll_horizontal_from_both.scrollTo(x, y);
scroll_horizontal_only.scrollTo(x, y);

}
}

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

Thanks

About these ads

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

  1. 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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s