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