Post
Ask Question

Working With Android ScrollView in VS2010

Introduction

 
ScrollView is one of Android's most commonly used widgets and is also one of the easiest to use. When something is too big to fit on the screen, data may span the size of the screen so that some of it may not appear.
 
ScrollView gives us a scrollable layout for large data. We have two types of ScrollView; that is, ScrollView and HorizontalScrollView and we can say that they are a layout container for a view hierarchy that can be scrolled vertically or horizontally by the user, allowing it to be larger than the physical display.
 
In the example that follows let's imagine that you need to display a piece of text and a couple of buttons. The length of the text is longer than the screen and because of that, all your buttons will not show on the screen. Let us see an example:
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.      android:orientation="vertical"  
  4.      android:layout_width="fill_parent"  
  5.      android:layout_height="fill_parent"  
  6.     >  
  7.   <TextView  
  8.      android:layout_width="fill_parent"  
  9.      android:text="The basic unit of the Android UI is the View. A View represents  
  10.         a widget that has an appearance on the screen. An Activity contains Views and  
  11.          ViewGroups. Examples of widgets are buttons, labels, text boxes, etc. One or  
  12.         more Views can be grouped together into a ViewGroup. A ViewGroup provides the  
  13.         layout in which you can order the appearance and sequence of views. Examples  
  14.         of View groups are LinearLayout, Relative Layout, etc. "  
  15.      android:layout_height="wrap_content"  
  16.      android:id="@+id/txt"  
  17.     />  
  18.   <Button  
  19.      android:layout_width="fill_parent"  
  20.      android:layout_height="wrap_content"  
  21.      android:text="First Step"     
  22.     />  
  23.   <Button  
  24.      android:layout_width="fill_parent"  
  25.      android:layout_height="wrap_content"  
  26.      android:text="Second Step"      
  27.     />  
  28.   <Button  
  29.      android:layout_width="fill_parent"  
  30.      android:layout_height="wrap_content"  
  31.      android:text="Thired Step"  
  32.     />  
  33.   <Button  
  34.      android:layout_width="fill_parent"  
  35.      android:layout_height="wrap_content"  
  36.      android:text="Fourth Step"  
  37.     />  
  38.   <Button  
  39.      android:layout_width="fill_parent"  
  40.      android:layout_height="wrap_content"  
  41.      android:text="Fifth Step"  
  42.     />  
  43.   <Button  
  44.      android:layout_width="fill_parent"  
  45.      android:layout_height="wrap_content"  
  46.      android:text="Sixth Step"  
  47.     />  
  48. </LinearLayout> 
Output:
 
LinearLayout Display
 
So, you see in the above example that just because of the length of the text the last button was not shown and to resolve this issue your only option is to use scrollview; it gives you a scrollable layout for all your data.
 

ScrollView

 
Let's see the example with ScrollView:
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"  
  3.      android:layout_width="fill_parent"  
  4.      android:layout_height="wrap_content"  
  5.     >  
  6.   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  7.      android:orientation="vertical"  
  8.      android:layout_width="fill_parent"  
  9.      android:layout_height="fill_parent"  
  10.     >  
  11.   <TextView  
  12.      android:layout_width="fill_parent"  
  13.      android:text="The basic unit of the Android UI is the View. A View represents  
  14.         a widget that has an appearance on the screen. An Activity contains Views and  
  15.          ViewGroups. Examples of widgets are buttons, labels, text boxes, etc. One or  
  16.         more Views can be grouped together into a ViewGroup. A ViewGroup provides the  
  17.         layout in which you can order the appearance and sequence of views. Examples  
  18.         of View groups are LinearLayout, Relative Layout, etc. "  
  19.       android:layout_height="wrap_content"  
  20.       android:id="@+id/txt"  
  21.     />  
  22.   <Button  
  23.      android:layout_width="fill_parent"  
  24.      android:layout_height="wrap_content"  
  25.      android:text="First Step"     
  26.     />  
  27.   <Button  
  28.      android:layout_width="fill_parent"  
  29.      android:layout_height="wrap_content"  
  30.      android:text="Second Step"      
  31.     />  
  32.   <Button  
  33.      android:layout_width="fill_parent"  
  34.      android:layout_height="wrap_content"  
  35.      android:text="Thired Step"  
  36.     />  
  37.   <Button  
  38.      android:layout_width="fill_parent"  
  39.      android:layout_height="wrap_content"  
  40.      android:text="Fourth Step"  
  41.     />  
  42.   <Button  
  43.      android:layout_width="fill_parent"  
  44.      android:layout_height="wrap_content"  
  45.      android:text="Fifth Step"  
  46.     />  
  47.   <Button  
  48.      android:layout_width="fill_parent"  
  49.      android:layout_height="wrap_content"  
  50.      android:text="Sixth Step"  
  51.     />  
  52. </LinearLayout>  
  53. </ScrollView> 
Output:
 
ScrollView
 
Now you can see your all data by scrolling the screen. The other type of scrollview I will explain in the next example.
 

HorizontalScrollView

 
HorizontalScrollView is a FrameLayout; that means a child that is often used is a LinearLayout in a horizontal orientation, presenting a horizontal array of top-level items that the user can scroll through.
 
Example
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"  
  3.      android:layout_width="fill_parent"  
  4.      android:layout_height="wrap_content"  
  5.     >  
  6.   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  7.      android:orientation="horizontal"  
  8.      android:layout_width="fill_parent"  
  9.      android:layout_height="fill_parent"  
  10.     >  
  11.   <TextView  
  12.      android:layout_width="wrap_content"  
  13.      android:text="The basic unit of the Android UI is the View. A View represents a widget that has an appearance on the screen."  
  14.      android:layout_height="wrap_content"  
  15.      android:id="@+id/txt"  
  16.     />  
  17.   <Button  
  18.      android:layout_width="wrap_content"  
  19.      android:layout_height="wrap_content"  
  20.      android:text="First Step"     
  21.     />  
  22.   <Button  
  23.      android:layout_width="wrap_content"  
  24.      android:layout_height="wrap_content"  
  25.      android:text="Second Step"      
  26.     />  
  27.   <Button  
  28.      android:layout_width="wrap_content"  
  29.      android:layout_height="wrap_content"  
  30.      android:text="Thired Step"  
  31.     />  
  32.   <Button  
  33.      android:layout_width="wrap_content"  
  34.      android:layout_height="wrap_content"  
  35.       android:text="Fourth Step"  
  36.     />  
  37.   <Button  
  38.      android:layout_width="wrap_content"  
  39.      android:layout_height="wrap_content"  
  40.      android:text="Fifth Step"  
  41.     />  
  42.   <Button  
  43.      android:layout_width="wrap_content"  
  44.      android:layout_height="wrap_content"  
  45.      android:text="Sixth Step"  
  46.     />  
  47. </LinearLayout>  
  48. </HorizontalScrollView> 
Output: 
 
Horizontal ScrollView
 
I hope you enjoy learning the working of scrollview in android.


Similar Articles