Course: Android App Development
Topic: Creating Scrollable Interfaces with ScrollView
Course Link: Android App Development Course – JustAcademy
Demo Link: Register for a Free Course Demo
Website: JustAcademy
In Android application development, a screen may contain more content than can fit within the available display area. For example, a registration form may contain multiple input fields, a profile page may display a long description, and a settings screen may contain many options. If the content exceeds the screen height, users need a way to access the hidden portion.
A scrollable interface allows users to move through content that extends beyond the visible screen. Android provides several scrolling components, including ScrollView, HorizontalScrollView, and RecyclerView. The appropriate component depends on the layout and the amount of content.
ScrollView is commonly used when a screen contains a single vertically arranged content area, such as a form, an article, or a profile page.
ScrollView is an Android ViewGroup that allows its content to scroll vertically. It is useful when the content is taller than the available viewport.
For example, imagine a mobile screen containing ten text fields. If only six fields fit on the screen, the user can swipe upward to view the remaining fields and swipe downward to return to the earlier ones.
LinearLayout or ConstraintLayout.Without a scrolling container, content that extends beyond the visible screen may be inaccessible. A carefully designed ScrollView helps keep the interface usable across devices with different screen sizes.
| Situation | Purpose of ScrollView |
|---|---|
| Registration form | Allows users to access all input fields and buttons. |
| Profile screen | Displays personal information that does not fit on one screen. |
| Terms and conditions | Allows users to read lengthy text. |
| Product details | Provides access to descriptions, specifications, and other details. |
| Settings page | Allows users to navigate through multiple settings options. |
A typical ScrollView contains one direct child. That child can be a layout that holds multiple views.
ScrollView
|
└── LinearLayout
|
├── TextView
├── EditText
├── Button
├── ImageView
└── Other ViewsThe ScrollView manages the scrolling behavior, while the inner layout arranges the actual content. This separation makes the interface easier to organize and maintain.
A ScrollView is designed to scroll a single content area. Therefore, multiple views should normally be placed inside a common parent layout. That layout becomes the ScrollView's direct child.
Incorrect structure: placing several independent views directly inside a ScrollView.
<ScrollView
...>
<TextView ... />
<Button ... />
</ScrollView>This structure is invalid because ScrollView expects one direct child.
Correct structure: group the views inside a LinearLayout.
<ScrollView
...>
<LinearLayout
android:orientation="vertical"
...>
<TextView ... />
<Button ... />
</LinearLayout>
</ScrollView>Android layouts are commonly defined in XML files stored in the application's res/layout directory. The following example creates a vertical scrolling area containing a heading, description, and button.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:scrollbars="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Welcome to Android"
android:textSize="24sp"
android:textStyle="bold"
android:paddingBottom="12dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="This screen demonstrates a vertically scrollable interface. Add enough content to see scrolling in action."
android:textSize="16sp"
android:lineSpacingExtra="4dp" />
<Button
android:id="@+id/continueButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Continue" />
</LinearLayout>
</ScrollView>| Attribute | Purpose |
|---|---|
layout_width="match_parent" |
Uses the available parent width. |
layout_height="match_parent" |
Allows the ScrollView to occupy the available parent height. |
fillViewport="true" |
Allows the child to fill the viewport when the content is shorter than the visible area. |
scrollbars="vertical" |
Enables the vertical scrollbar indicator. |
orientation="vertical" |
Arranges child views from top to bottom. |
padding="16dp" |
Adds space between the layout's content and its edges. |
wrap_content |
Sizes a view according to its content or measured requirements. |
The android:fillViewport attribute controls how the ScrollView's child behaves when its content is shorter than the available viewport.
true: the child is allowed to expand to fill the viewport when necessary.false: the child can remain at its natural measured height when its content is shorter than the viewport.This attribute does not automatically make every screen scroll. Scrolling is needed when the content extends beyond the available area.
A common use case is a form that contains several fields. All fields can be placed inside a vertical LinearLayout within the ScrollView.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="20dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Registration Form"
android:textSize="24sp"
android:textStyle="bold"
android:paddingBottom="16dp" />
<EditText
android:id="@+id/nameInput"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Full Name"
android:inputType="textPersonName" />
<EditText
android:id="@+id/emailInput"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Email Address"
android:inputType="textEmailAddress" />
<EditText
android:id="@+id/phoneInput"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Phone Number"
android:inputType="phone" />
<EditText
android:id="@+id/passwordInput"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:inputType="textPassword" />
<EditText
android:id="@+id/addressInput"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Address"
android:inputType="textPostalAddress"
android:minLines="3"
android:gravity="top" />
<Button
android:id="@+id/submitButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Submit Registration" />
</LinearLayout>
</ScrollView>This form remains accessible on smaller screens because users can scroll to reach fields and the submit button. In a real application, validation should also be added before submitting the form.
Although scrolling works automatically when the content exceeds the viewport, Kotlin can be used to control scrolling programmatically. For example, an application may scroll to the top after a user submits a form or display a particular section after a button click.
Assume the XML ScrollView has the ID mainScrollView.
import android.os.Bundle
import android.widget.Button
import android.widget.ScrollView
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val scrollView =
findViewById<ScrollView>(R.id.mainScrollView)
val topButton =
findViewById<Button>(R.id.topButton)
topButton.setOnClickListener {
scrollView.smoothScrollTo(0, 0)
}
}
}For this example, add the corresponding IDs to the XML views:
<ScrollView
android:id="@+id/mainScrollView"
...>
...
<Button
android:id="@+id/topButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Back to Top" />
</ScrollView>The code finds the ScrollView and button, then registers a click listener. When the user taps the button, smoothScrollTo(0, 0) animates the viewport toward the top-left scroll position.
| Method | Description |
|---|---|
scrollTo(x, y) |
Moves immediately to the specified scroll coordinates. |
smoothScrollTo(x, y) |
Animates scrolling to the specified coordinates. |
scrollBy(x, y) |
Moves by a specified horizontal and vertical distance. |
smoothScrollBy(x, y) |
Animates scrolling by the specified distance. |
post { ... } |
Can schedule a scrolling operation after the view has been laid out. |
Sometimes an application needs to bring a particular field or section into view. One approach is to request focus on the target view, or to use the ScrollView's scrolling methods after layout has completed.
val addressInput = findViewById<EditText>(R.id.addressInput)
val scrollView = findViewById<ScrollView>(R.id.mainScrollView)
scrollView.post {
scrollView.smoothScrollTo(0, addressInput.top)
}This example uses the field's top coordinate as the target vertical position. For more complex nested layouts, the target's position may need to be calculated relative to the ScrollView rather than using its local top value directly.
When a user enters information into an EditText near the bottom of a form, the on-screen keyboard may cover part of the content. The application should allow the focused field to remain accessible.
For a traditional Activity, consider the window's soft-input mode in the manifest:
<activity
android:name=".MainActivity"
android:windowSoftInputMode="adjustResize" />adjustResize requests that the activity's available layout area resize to account for the keyboard. The exact behavior depends on the Android version, window configuration, and edge-to-edge setup. Test the screen on the Android versions and devices your application supports.
inputType for every EditText.Android provides different scrolling containers for different directions.
| Feature | ScrollView | HorizontalScrollView |
|---|---|---|
| Direction | Vertical | Horizontal |
| Typical use | Long forms, articles, profile screens | Wide content, horizontally arranged items |
| Direct child | One direct child | One direct child |
| Common inner layout | Vertical LinearLayout | Horizontal LinearLayout |
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Home" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Courses" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Contact" />
</LinearLayout>
</HorizontalScrollView>NestedScrollView, provided by AndroidX, is useful when a screen participates in nested scrolling with components such as collapsing app bars or other nested-scrolling parents.
| Feature | ScrollView | NestedScrollView |
|---|---|---|
| Package | Android framework | AndroidX Core |
| Vertical scrolling | Yes | Yes |
| Nested scrolling coordination | Limited compared with AndroidX nested-scrolling support | Designed to participate in nested-scrolling interactions |
| Typical use | Simple vertically scrollable content | Layouts integrated with nested-scrolling components |
Use the standard ScrollView for straightforward scrolling screens. Consider NestedScrollView when your design specifically requires nested-scrolling coordination. Avoid adding complexity unless the layout needs it.
ScrollView is not intended to replace a list component for large collections of data. When displaying many repeated items, RecyclerView is generally a better choice because it reuses item views and supports efficient list layouts.
| Feature | ScrollView | RecyclerView |
|---|---|---|
| Primary purpose | Scroll a single content area | Display and scroll a collection of items |
| Direct content | One direct child | Adapter supplies item views |
| View reuse | Does not automatically recycle arbitrary child views like a list adapter | Reuses item views for efficiency |
| Best suited for | Forms, long descriptions, small content sections | Large lists, feeds, search results, product collections |
| Large datasets | Can become expensive if all content is created as child views | Designed for efficient collection rendering |
Possible causes: the content is not taller than the viewport, the ScrollView has an unexpected height constraint, or another view is intercepting touch gestures.
Solutions:
wrap_content.Cause: placing several views directly inside the ScrollView.
Solution: place the views inside one parent layout such as LinearLayout.
Cause: the visible area changes when the software keyboard opens, or the window configuration does not provide the expected resize behavior.
Solution: test soft-input configuration, avoid rigid heights, and ensure the focused field can be brought into view.
Cause: a large number of views are created inside the ScrollView.
Solution: use RecyclerView for long or dynamic collections. Avoid placing a large RecyclerView inside a ScrollView unless the design and measurement behavior have been carefully considered.
Cause: multiple scrolling containers compete to handle the same gesture.
Solution: simplify the hierarchy where possible, select an appropriate nested-scrolling component, and test touch behavior on real devices.
Cause: a scroll operation is performed before the layout has been measured.
Solution: use post { ... } or another appropriate post-layout callback to perform scrolling after layout.
wrap_content over fixed heights that can clip content.Build a simple profile page with a heading, profile image, personal information, biography, skills, and an action button. Place the entire content inside a ScrollView so that all sections remain accessible on smaller devices.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/profileScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="My Profile"
android:textSize="26sp"
android:textStyle="bold" />
<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="16dp"
android:contentDescription="Profile photograph"
android:src="@drawable/ic_launcher_foreground" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Name: Alex"
android:textSize="18sp"
android:paddingTop="16dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Skills: Kotlin, Android, XML, APIs"
android:paddingTop="12dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Biography: Add several paragraphs describing your experience, interests, projects, and career goals. Use enough content to test vertical scrolling."
android:paddingTop="12dp"
android:textSize="16sp" />
<Button
android:id="@+id/backToTopButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Back to Top"
android:layout_marginTop="20dp" />
</LinearLayout>
</ScrollView>Make sure the drawable resource referenced by the ImageView exists in your project. You can replace it with your own profile image or another available drawable.
smoothScrollTo().fillViewport and compare its behavior with the attribute disabled.Answer: ScrollView is a ViewGroup that allows content taller than the visible viewport to be accessed through vertical scrolling.
Answer: A standard ScrollView supports one direct child. Multiple content views should be grouped inside a layout container.
Answer: It allows the ScrollView's child to fill the viewport when the content is shorter than the available visible area.
Answer: ScrollView provides vertical scrolling, while HorizontalScrollView provides horizontal scrolling.
Answer: RecyclerView is generally preferable for large or dynamic collections because it reuses item views and supports efficient list rendering.
Answer: It animates scrolling to a specified horizontal and vertical position.
Answer: Its content may not exceed the viewport, the layout may have incorrect dimensions, or another component may be intercepting touch gestures.
Answer: Use flexible layout dimensions, appropriate soft-input window behavior, correct input types, and test that the focused field can be brought into view.
Answer: NestedScrollView is an AndroidX component that supports vertical scrolling and participates in nested-scrolling interactions with compatible components.
Answer: Yes. A LinearLayout is a common direct child because it can arrange multiple views vertically within the scrollable content area.
ScrollView supports vertical scrolling.LinearLayout is commonly used to organize content inside it.fillViewport="true" helps short content fill the visible area.smoothScrollTo() animates scrolling to a target position.HorizontalScrollView is used for horizontal scrolling.NestedScrollView helps with nested-scrolling layouts.RecyclerView is generally better for large or dynamic collections.ScrollView is a useful Android component for building vertically scrollable screens such as registration forms, profile pages, long descriptions, and settings interfaces. By placing a single content layout inside the ScrollView, developers can organize multiple views while allowing users to access content beyond the visible screen.
Understanding attributes such as fillViewport, methods such as smoothScrollTo(), keyboard handling, nested scrolling, and the difference between ScrollView and RecyclerView helps developers create more reliable and accessible applications. Practice these techniques by building a scrollable form and testing it on different screen sizes.
