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.