Tutorials Android Android ScrollView Example

Android ScrollView Example

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, RelativeLayout, FrameLayout 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>
Total
0
Shares
guest
11 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Mars
Mars
7 years ago

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
Nilanchala Panigrahy
7 years ago
Reply to  Mars

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

Abhishek
Abhishek
7 years ago

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

Nilanchala Panigrahy
Nilanchala Panigrahy
7 years ago
Reply to  Abhishek

What guidance you looking for?

Arnold PArge
Arnold PArge
7 years ago

It was nice HELP!

BharGaV KriShNa JoNnA
BharGaV KriShNa JoNnA
7 years ago

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

Nilanchala Panigrahy
Nilanchala Panigrahy
7 years ago

Checkout the following android listview tutorial

Android ListView Tutorial

marseni ahmed
marseni ahmed
6 years ago

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

Neeraj Soni
Neeraj Soni
6 years ago

how to right content under string/description?

Nilanchala Panigrahy
Nilanchala Panigrahy
6 years ago

Hey Arun, not sure I get your question. Do you mean expandable list view?

Tulshi Ram Dewangan
Tulshi Ram Dewangan
4 years ago

Thanks Nilanchala

Previous Post
Wordpress Tutorials

Creating WordPress Custom Post for Event Listings

Next Post
JSON Tutorials

Introduction to JSON

Related Posts
By clicking “Allow All”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. Cookie Notice
Allow All
11
0
Would love your thoughts, please comment.x
()
x