---
description: Explicación de los conceptos de ScrollView y HorizontalScrollView
---

# ScrollView y HorizontalScrollView

## DEFINICIÓN

### ScrollView

{% embed url="https://developer.android.com/reference/android/widget/ScrollView" %}
Fuente: developer.android
{% endembed %}

Hereda de `FrameLayout`.

Es un ViewGroup que permite que el Layout que se encuentra en su interior pueda ser scroleable.

Es recomendable que ScrollView tenga solo un hijo dentro debido a que es un `FrameLayout`.&#x20;

Si es necesario introducir más de una View en su interior, entonces tendrá que añadir un **ViewGroup** en su interior para que se cumpla que solo tiene un único hijo directo.

Solo soporta scroll vertical.

### HorizontalScrollView

{% embed url="https://developer.android.com/reference/android/widget/HorizontalScrollView" %}
Fuente: developer.android
{% endembed %}

Hereda de `FrameLayout`.

Es un ViewGroup que permite que el Layout que se encuentra en su interior pueda ser scroleable.

Es recomendable que ScrollView tenga solo un hijo dentro debido a que es un `FrameLayout`.&#x20;

Si es necesario introducir más de una View en su interior, entonces tendrá que añadir un **ViewGroup** en su interior para que se cumpla que solo tiene un único hijo directo.

Solo soporta scroll horizontal.

### NestedScrollView

{% embed url="https://developer.android.com/reference/androidx/core/widget/NestedScrollView.html" %}
Fuente: developer.android
{% endembed %}

Hereda de `FrameLayout`.

Es un ScrollView más moderno que puede funcionar tanto de padre como de hijo de otro ViewGroup.

Solo soporta scroll vertical.

{% hint style="success" %}
**RECOMENDACIÓN**

Es recomendable utilizar `NestedScrollView` siempre que se necesite un Scroll Vertical ya que es más configurable por el usuario y soporta las necesidades de **Material Design** en cuanto a Scrolling.
{% endhint %}

## EJEMPLO

Ya se han utilizado ScrollViews en diferentes ejemplos de esta guía así que vamos a coger uno para verlo:

### ScrollView

```xml
<?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">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/im_pyramidhead" />

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/shapeable_image"/>

    </LinearLayout>


</ScrollView>
```

<figure><img src="https://957693790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6MhXpy13IuQmgFo8uMtJ%2Fuploads%2FmreTAOtmQ3Nx2Q5htU38%2Fscrollview-video.gif?alt=media&#x26;token=7cd6a474-9d77-43f8-9cb6-5b8e842db900" alt=""><figcaption><p>ScrollView</p></figcaption></figure>

### HorizontalScrollView

```
<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/im_pyramidhead" />

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/shapeable_image"/>

    </LinearLayout>


</HorizontalScrollView>
```

<figure><img src="https://957693790-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6MhXpy13IuQmgFo8uMtJ%2Fuploads%2F7b3q8QAOykR48yof1Atf%2Fhorizontalscrollview-video.gif?alt=media&#x26;token=f23014de-54a9-4166-866e-deebb6342382" alt=""><figcaption><p>HorizontalScrollView</p></figcaption></figure>
