logo

A ScrollView is a special type of FrameLayout in that it allows users to scroll through a list of views that occupy more space than the physical display. The ScrollView can contain only one child view or ViewGroup, which normally is a

LinearLayout.

Note: Do not use a ListView together with the ScrollView. The ListView is designed for showing a list of related information and is optimized for dealing with large lists.

Vertical ScrollView

The following main.xml content shows a ScrollView containing a LinearLayout, which in turn contains some Button and ImageView:

<?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="wrap_content">
	<LinearLayout 
	    android:orientation="vertical"
	    android:layout_width="fill_parent"
	    android:layout_height="fill_parent">
		<ImageView android:layout_width="fill_parent"
			android:layout_height="250dp"
			android:src="@drawable/myImage"/>
		
		<Button android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:text="Button 1"
			android:layout_marginTop="4dp"
			android:layout_gravity="center"/>
		
		<Button android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:layout_marginTop="4dp"
			android:text="Button 2"
			android:layout_gravity="center"/>
			
		<Button android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:layout_marginTop="4dp"
			android:text="Button 3"
			android:layout_gravity="center"/>
			
		<Button android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:layout_marginTop="4dp"
			android:text="Button 4"
			android:layout_gravity="center"/>
			
		<Button android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:text="Button 5"
			android:layout_marginTop="4dp"
			android:layout_gravity="center"/>					
	</LinearLayout>
</ScrollView>

i.e.

Vertical ScrollView

Horizontal ScrollView

So what do we do if we want to display this layout Horizontally ? In this case we’re going to use another container which is HorizontalScrollView. This container acts the same as the ScrollView except that it scrolls child controls horizontally.

Now our main.xml will be like this:

<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center">

<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
  
  <Button android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:text="Button 1"
			android:layout_marginTop="4dp"
			android:layout_gravity="center"/>
		
		<Button android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:layout_marginTop="4dp"
			android:text="Button 2"
			android:layout_gravity="center"/>
			
		<Button android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:layout_marginTop="4dp"
			android:text="Button 3"
			android:layout_gravity="center"/>
			
		<Button android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:layout_marginTop="4dp"
			android:text="Button 4"
			android:layout_gravity="center"/>
			
		<Button android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:text="Button 5"
			android:layout_marginTop="4dp"
			android:layout_gravity="center"/>
</LinearLayout>
</HorizontalScrollView>

i.e

Horizontal ScrollView

AUTHOR: Vikas Hiran
No Comments

Leave a Comment

Your email address will not be published.