Como crear un Horizontal ScrollView en Android

Android Horizontal ScrollView Example

Hola amigos el camino es largo pero la meta se puede alcanzar seguimos aprendiendo constantemente y aprendiendo cada día y pues la verdad todo va ir encajando! No pierdas ningún post y sigue constante ya llega el día en que subiremos montañas. Gracias por seguir mi blog y espero el contenido les sea de utilidad.

Bueno en esta ocasión aprenderemos a utilizar el Horizontal ScrollView que es muy útil cuando tengas que crear una aplicación con componentes amplios.

Para tener un poco mas claro lo que es este control.

Contenedor de diseño para una jerarquía de vistas que el usuario puede desplazar, permitiendo que sea mayor que la presentación física. Un Horizontal ScrollView es un FrameLayout, lo que significa que debe colocar un nodo hijo en él que contiene todo el contenido para desplazarse; Este nodo hijo puede ser un gestor de diseño con una jerarquía compleja de objetos. Un nodo hijo que se utiliza a menudo es LinearLayout en una orientación horizontal, que presenta una matriz horizontal de elementos de nivel superior que el usuario puede desplazarse.

La clase TextView también se encarga de su propio desplazamiento, por lo que no requiere una HorizontalScrollView, pero utilizando los dos juntos es posible lograr el efecto de una vista de texto dentro de un contenedor más grande.

Horizontal ScrollView solo soporta desplazamiento horizontal. Para el desplazamiento vertical, use ScrollView o ListView.

Crear Nuevo Proyecto Android Studio (Aquí).

Crearemos un proyecto para desarrollar nuestra aplicación. Les mostrare lo que tenemos que hacer cuando tengan lista la aplicación.

Diseño Layout maint_activity Horizontal ScrollView

Ahora para crear el diseño de nuestra aplicación necesitaremos lo siguiente.

Ahora colocaremos el container en nuestro layout.

Y esto seria todo el diseño para tu ejemplo puedes probar con distintos widgets que te harán crear aplicaciones muy creativas.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
 android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

 <HorizontalScrollView
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:id="@+id/HorizontalScrollView"
 android:scrollbars="horizontal">

 <LinearLayout
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:id="@+id/LinearLayoutHorizontal"
 android:orientation="horizontal">

 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center"
 android:layout_margin="20dp"
 android:background="#f00"
 android:padding="20dp"
 android:text="TextView 1"
 android:textColor="#fff"
 android:textSize="20sp" />

 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center"
 android:layout_margin="20dp"
 android:background="#0f0"
 android:padding="20dp"
 android:text="TextView 2"
 android:textColor="#fff"
 android:textSize="20sp" />

 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center"
 android:layout_margin="20dp"
 android:background="#00f"
 android:padding="20dp"
 android:text="TextView 3"
 android:textColor="#fff"
 android:textSize="20sp" />

 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center"
 android:layout_margin="20dp"
 android:background="#ff0"
 android:padding="20dp"
 android:text="Button 4"
 android:textColor="#fff"
 android:textSize="20sp" />

 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center"
 android:layout_margin="20dp"
 android:background="#f0f"
 android:padding="20dp"
 android:text="TextView 5"
 android:textColor="#fff"
 android:textSize="20sp" />

 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center"
 android:layout_margin="20dp"
 android:background="#f90"
 android:padding="20dp"
 android:text="TextView 6"
 android:textColor="#fff"
 android:textSize="20sp" />

 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center"
 android:layout_margin="20dp"
 android:background="#f00"
 android:padding="20dp"
 android:text="TextView 7"
 android:textColor="#ff9"
 android:textSize="20sp" />

 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center"
 android:layout_margin="20dp"
 android:background="#444"
 android:padding="20dp"
 android:text="TextView 8"
 android:textColor="#fff"
 android:textSize="20sp" />

 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center"
 android:layout_margin="20dp"
 android:background="#ff002211"
 android:padding="20dp"
 android:text="TextView 9"
 android:textColor="#fff"
 android:textSize="20sp" />

 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center"
 android:layout_margin="20dp"
 android:background="#0f0"
 android:padding="20dp"
 android:text="TextView 10"
 android:textColor="#fff"
 android:textSize="20sp" />

 </LinearLayout>

 </HorizontalScrollView>
</RelativeLayout>

El resultado de nuestra aplicación Horizontal ScrollView

Crear Emulador AVD (Aquí).

Para crear un emulador es necesario revisar el enlace anterior.

Ejecutar Aplicación Android Studio Horizontal ScrollView

Ahora vamos a ejecutar nuestra aplicación para ver nuestro ejemplo.

Y listo este seria el diseño. Realmente espero haya sido de su agrado!

Descargar: Aquí.

Muchas gracias espero que el contenido haya sido de su agrado espero su cooperación y compartan mi blog si necesita alguna ayuda no duden en escribirme! Muchas gracias!