In this tutorial we will show you, how to use Android ScrollView component and create a simple example using various ScrollView properties.

Most Android application will likely to have the contents that’s doesn’t fit the screen. Think a bit about displaying the news details, the contents are dynamic and can grow beyond your screen size. If we design our screen layout using standard layout managers like LinearLayout,  RelativeLayoutFrameLayout or TableLayout; when the content grows, and data goes beyond screen size, and user won’t be able scroll and  view the content.

ScrollView is a special kind of layout, designed to hold view larger than its actual size. When the Views size goes beyond the ScrollView size, it automatically adds scroll bars and can be scrolled vertically.

  1. ScrollView can hold only one direct child. This means that, if you have complex layout with more view controls, you must enclose them inside another standard layout like LinearLayout, TableLayout or RelativeLayout.
  2. You can specify layout_height and layout_width to adjust height and width of screen.
  3. Scrollview is ideal for screens where scrolling is required, but it is an overhead when scroll view is used to render a larger list of data. Android provides specialized adapter views like ListView, GridView and Recycler View (Introduced in Android Lollipop) are recommended for long lists.
  4. You should never use a ScrollView with a ListView or GridView, because they both takes care of their own vertical scrolling.
  5. ScrollView only supports vertical scrolling. Use HorizontalScrollView for horizontal scrolling.
  6. The android:fillViewport property defines whether the scrollview should stretch its content to fill the viewport. You can set the same property by calling setFillViewport(boolean) method.

Android ScrollView Example

Let us create an example that displays the layout as shown in the below screenshot. Notice that the blue like indicates the outline of textView2 is gone beyond the scren.

Android ScrollView Example

Scrollbar Layout

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="10dp"
    android:fillViewport="false">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="200dp"
            android:scaleType="centerCrop"
            android:src="@drawable/image" />

        <Button
            android:id="@+id/button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="KNOW MORE" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/title"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/description"
            android:textAppearance="?android:attr/textAppearanceSmall" />
    </LinearLayout>
</ScrollView>

Nilanchala

A blogger, a bit of tech freak and a software developer. He is a thought leader in the fusion of design and mobile technologies. He is the author of Xamarin Mobile Application Development for Android Book (goo.gl/qUZ0XV3), DZone MVB and founder of stacktips.com.

Related Articles

Join The Discussion

Please note: We reserve the right to delete comments that contains snarky remarks, offensive or off-topic. To know more read our comments policy.
  • Hey Arun, not sure I get your question. Do you mean expandable list view?

  • Neeraj Soni

    how to right content under string/description?

  • marseni ahmed

    how it made the statement in java scrollview (activity.java)?

  • BharGaV KriShNa JoNnA

    Write an android program to demonstrate scroll view and list view. (List view should array adapter. The adapter should use array list of companies. Each item in the list view should have company name, company address and its annual revenue.) any body explain these example

  • Arnold PArge

    It was nice HELP!

  • Abhishek

    hello sir myself Abhishek Pandey ,
    I need your guidance please contact me abhishekpandey9aug@gmail.com

  • Mars

    Nice… BUT what if you only want your to scroll?
    In my example I want a header on top of the view, and 2 buttons in the bottom of the view (a save and a cancel button). All the stuff between I want to scroll!
    All examples I see puts the scrollview as the root…

    • Nilanchala Panigrahy

      All you have to do is to take a relative layout as parent and scroll view will be placed below title and above bottom container. Learn more about Android relative layout here

      I have created sample layout as per your requirements.

      <?xml version="1.0" encoding="utf-8"?>
      <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android&quot;
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical">

      <TextView
      android:id="@+id/title"
      android:layout_width="match_parent"
      android:layout_height="48dp"
      android:layout_alignParentTop="true"
      android:background="#3f51b5"
      android:gravity="center_vertical"
      android:paddingLeft="10dp"
      android:text="MY PAGE TITLE"
      android:textAppearance="?android:attr/textAppearanceLarge"
      android:textColor="#fff" />

      <ScrollView xmlns:android="http://schemas.android.com/apk/res/android&quot;
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_above="@+id/bottom_container"
      android:layout_below="@id/title"
      android:fillViewport="false"
      android:orientation="vertical"
      android:padding="10dp">

      <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="vertical">

      <ImageView
      android:layout_width="wrap_content"
      android:layout_height="200dp"
      android:scaleType="centerCrop"
      android:src="@drawable/car_engine" />

      <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:padding="10dp"
      android:text="Some title here"
      android:textSize="28sp"
      android:textStyle="bold" />

      <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:padding="10dp"
      android:text="Lorem ipsum dolor sit amet…"
      android:textSize="18sp" />
      </LinearLayout>
      </ScrollView>
      <LinearLayout
      android:id="@+id/bottom_container"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      android:orientation="horizontal">
      <Button
      android:id="@+id/button"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_weight="0.5"
      android:text="New Button1" />
      <Button
      android:id="@+id/button2"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_weight="0.5"
      android:text="New Button2" />
      </LinearLayout>
      </RelativeLayout>

      The above code will produce output as follows.

      http://stacktips.com/wp-content/uploads/2015/03/ScrollView-with-Relative-Layout-Example.png