Horizontal and Vertical Scrolling in Android

How to Perform Horizontal and Vertical Scrolling in android?

I just thought of posting this because beginners usually find issues in performing scrolling both ways(vertical and horizontal) as I did being one.

ScrollView can on do only vertical scrolling. Inorder to perform horizontal scrolling use HorizontalScrollView.

Here is how we can perform scrolling-horizontal and vertical:

Lets look at what I’ve done here.I’ve made the ScrollView which performs the vertical scrolling to enclose the different HorizontalScrollViews (as the name hints does the horizontal scrolling),Layouts(here I used Linear Layout),TextViews,ImageViews etc which I’ve used in my piece of work ,so that the entire elements will automatically help us in scrolling downwards or upwards as the screen ends.Here, when you look at the xml code below, you will notice that each set of elements under different HorizontalScrollView can be scrolled horizontally.

Here I have used LinearLayouts.Just below ScrollView , you can see a LinearLayout with orientation set as “vertical” which holds the entire set of HorizontalScrollViews and the LinearLayouts(with  “horizontal” orientation)in between each HorizontalScrollView.

Just look at what I’m trying to explain using ,say, my own version of algorithm :

ScrollView(vericalscrolling-scrolling up and down)

LinearLayout–vertical(places elements between the layout one below the other)

HorizontalScrollView(scrolling sideways)

LinearLayout–horizontal(places elements between the layout one beside the other)

Here, elements will be placed horizontally.

closing tag for LinearLayout–horizontal

closing tag for HorizontalScrollView

{enclose n number of elements as your application demands}

closing Linear Layout–vertical

finally closing ScrollView

Now just go through the code below and try by yourself.Its simple and interesting too.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbarStyle="insideInset"
android:fadeScrollbars="true"
android:scrollbarSize="10dip"
android:fitsSystemWindows="true" >
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/tt"  >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Text one.."
android:textColor="#000000"
android:background="#ffffff"
android:textSize="20dip"/>
<HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbarStyle="insideInset"
android:fadeScrollbars="true"
android:scrollbarSize="10dip"
android:fitsSystemWindows="true"   >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<ImageView
android:src="@drawable/abc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
<ImageView
android:src="@drawable/fgj"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
<ImageView
android:src="@drawable/ggcgh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
<ImageView
android:src="@drawable/thhh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
<ImageView
android:src="@drawable/fhg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
<ImageView
android:src="@drawable/jgeraej"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
<ImageView
android:src="@drawable/jhdfdjh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
</LinearLayout>
</HorizontalScrollView>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:textColor="#000000"
android:text="Text two.."
android:textSize="20dip"/>
<HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbarStyle="insideInset"
android:fadeScrollbars="true"
android:scrollbarSize="10dip"
android:fitsSystemWindows="true" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<ImageView
android:src="@drawable/thhh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
<ImageView
android:src="@drawable/abc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
<ImageView
android:src="@drawable/fgj"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
<ImageView
android:src="@drawable/hghhgh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
<ImageView
android:src="@drawable/jgeraej"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
<ImageView
android:src="@drawable/fhg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
<ImageView
android:src="@drawable/thhh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
</LinearLayout>
</HorizontalScrollView>
</LinearLayout>
</ScrollView>

The output will look like this:

Horizontal and Vertical Scrolling