En el competitivo mundo de las aplicaciones móviles, ofrecer una interfaz atractiva y funcional es clave para captar y retener usuarios. Uno de los elementos más populares y visualmente atractivos que puedes incorporar a tu app es un carrusel (o slider), ideal para mostrar imágenes destacadas, promociones, productos o cualquier contenido que desees que el usuario vea de manera dinámica. Os presento la manera de crear un carrusel en tu aplicación Kotlin.
Un carrusel no solo embellece tu aplicación:
✔️ Ayuda a organizar grandes cantidades de contenido de forma accesible.
✔️ Mejora la experiencia del usuario (UX) al permitir desplazarse fácilmente entre elementos.
✔️ Puede aumentar las conversiones en apps de negocio mostrando ofertas, productos o novedades.
En este tutorial aprenderás a crear un carrusel moderno usando ViewPager2 y Kotlin, que es el lenguaje oficial recomendado por Google para el desarrollo Android. Te guiaré paso a paso para que, incluso si estás comenzando en el desarrollo móvil, puedas implementar un carrusel funcional y estético en tu propia aplicación personal o para tu negocio.
Además, veremos cómo:
🔧 Configurar un layout flexible y responsivo.
🔧 Crear un adaptador eficiente para mostrar imágenes o cualquier contenido.
🔧 Agregar efectos visuales modernos (como escalado y margen entre elementos).
🔧 Incluso implementaremos un desplazamiento automático (auto-scroll) para una experiencia fluida.
Todo el contenido de este tutorial es original y basado en prácticas recomendadas por desarrolladores profesionales y documentación oficial de Android. No necesitas tener conocimientos avanzados, solo las ganas de aprender y un entorno de desarrollo con Android Studio configurado.
Paso 1: Agregar Dependencias
Antes de comenzar a programar el carrusel, es fundamental asegurarse de que tu proyecto tiene acceso a todas las bibliotecas necesarias. Las dependencias permiten que tu app pueda utilizar componentes modernos sin tener que programarlos desde cero.
En este caso, necesitaremos:
1. ViewPager2 — Es el componente que permite crear carruseles o sliders deslizando vistas de lado a lado.
2. Material Components — Para poder utilizar elementos de diseño moderno como indicadores de página, botones estilizados, entre otros.
Cómo agregar dependencias
Abre el archivo build.gradle (nivel de módulo, generalmente ubicado en app/build.gradle). Dentro de la sección dependencies { }, agrega estas líneas:
dependencies {
implementation "androidx.viewpager2:viewpager2:1.1.0"
implementation 'com.google.android.material:material:1.10.0'
}¿Qué hace cada dependencia?
androidx.viewpager2:viewpager2:1.1.0
Es la biblioteca oficial para implementar carruseles o deslizadores en Android.
ViewPager2 es una versión mejorada del antiguo ViewPager:
Soporta orientación horizontal y vertical.
Permite trabajar con adaptadores RecyclerView, que son más potentes y flexibles.
Mejora la accesibilidad y rendimiento.
com.google.android.material:material:1.10.0
Incluye los componentes de Material Design recomendados por Google, como botones, barras de navegación, y también TabLayout o PageIndicator que puedes usar si quieres agregar indicadores al carrusel (las típicas bolitas que indican en qué página está el usuario).
¿Cómo saber si las versiones están actualizadas?
Si estás usando Android Studio, puedes comprobar si hay versiones más recientes:
1. Coloca el cursor sobre el número de versión en el build.gradle.
2. Android Studio te sugerirá actualizar si detecta versiones más nuevas.
3. Alternativamente, puedes consultar los sitios oficiales: ViewPager2 en Maven, Material Components
Sincronizar el proyecto
Después de agregar las dependencias, haz clic en Sync Now en la barra superior de Android Studio o selecciona File > Sync Project with Gradle Files.
Esto descargará las bibliotecas y permitirá usarlas en tu proyecto.
Nota importante
Si ves un error de que alguna dependencia no se puede encontrar:
– Asegúrate de que tu proyecto tiene habilitado Google’s Maven repository en tu archivo settings.gradle o build.gradle de nivel superior.
– Tu archivo repositories debería verse así:
repositories {
google()
mavenCentral()
}Paso 2: Crear el Layout del Carrusel
El siguiente paso es diseñar la interfaz donde se mostrará el carrusel. Para esto, trabajaremos con el archivo activity_main.xml, que define el diseño visual de la actividad principal de tu aplicación.
¿Qué es un layout en Android?
Un layout es un archivo XML que describe cómo se organizan y muestran los elementos gráficos (botones, imágenes, listas, etc.) en la pantalla. En este caso, crearemos un diseño sencillo pero flexible que contendrá el carrusel.
Diseñando el carrusel con ViewPager2
Abre el archivo res/layout/activity_main.xml y reemplázalo o actualízalo con el siguiente código:
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="300dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>Explicación del código
ConstraintLayout: Es un layout flexible que permite posicionar elementos en relación con otros elementos o con el contenedor. Muy recomendado para interfaces responsivas.
ViewPager2: Es el componente que permitirá al usuario deslizar entre diferentes páginas o elementos (en este caso, imágenes del carrusel).
android:layout_width="match_parent" y android:layout_height="300dp"
El carrusel ocupará todo el ancho de la pantalla y tendrá una altura fija de 300dp. Puedes cambiar la altura según el diseño que desees.
Constraints (app:layout_constraint...)
Estas líneas aseguran que el ViewPager2 esté centrado y ocupe toda la anchura disponible.
Consejo profesional
Si deseas que el carrusel ocupe toda la pantalla, simplemente cambia el alto a match_parent:
android:layout_height="match_parent"Esto es útil, por ejemplo, si quieres crear un slider de bienvenida o un carrusel de productos destacado a pantalla completa.
Buenas prácticas
Usa ConstraintLayout siempre que sea posible para mantener tu interfaz flexible y adaptativa en diferentes tamaños de pantalla.
Define tamaños en dp (density-independent pixels) para asegurar que el diseño se vea consistente en todos los dispositivos.
Si planeas usar indicadores de página (bolitas que muestran en qué página estás), este es un buen momento para reservar espacio en el layout o agregar un componente como TabLayout o DotsIndicator.
Paso 3: Crear el Layout del Ítem del Carrusel
Ya hemos definido el layout general del carrusel. Ahora es momento de diseñar cómo se verá cada elemento individual dentro del carrusel. Esto es muy importante porque es donde mostrarás el contenido que el usuario podrá deslizar: imágenes, títulos, descripciones o incluso botones de acción.
¿Qué es el layout del ítem?
El layout del ítem es una plantilla que se repetirá para cada página o elemento del carrusel. Por ejemplo, si tu carrusel va a mostrar cinco imágenes, cada imagen usará este mismo diseño.
Creando el archivo item_carousel.xml
1. Ve a la carpeta res/layout/.
2. Crea un nuevo archivo XML llamado item_carousel.xml.
Aquí tienes un diseño básico:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:contentDescription="@string/image_desc" />
</FrameLayout>Explicación del código
FrameLayout
Un contenedor simple que permite apilar elementos unos sobre otros. Es ideal para diseños sencillos como una imagen de fondo que podría tener encima un texto o botón si se desea.
ImageView
Es el componente que mostrará la imagen de cada ítem del carrusel.
android:layout_width="match_parent" y android:layout_height="match_parent"
La imagen ocupará todo el espacio disponible.
android:scaleType="centerCrop"
Esto hace que la imagen se recorte de manera proporcional para llenar todo el espacio sin deformarse.
android:contentDescription
Una descripción textual para accesibilidad, útil para lectores de pantalla.
Mejorando el diseño visual
El diseño anterior funciona bien, pero si quieres que tu carrusel tenga un estilo más moderno y profesional, puedes añadir detalles como bordes redondeados, sombras o superposiciones.
Aquí tienes un ejemplo mejorado:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="16dp"
android:background="@drawable/carousel_item_background">
<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:contentDescription="@string/image_desc"
android:clipToOutline="true" />
</FrameLayout>Y en res/drawable/, crea un archivo llamado carousel_item_background.xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FFFFFF"/>
<corners android:radius="16dp"/>
<elevation android:elevation="8dp"/>
</shape>¿Qué logramos con esto?
✅ Esquinas redondeadas: Le dan un toque moderno y profesional.
✅ Sombra o elevación: Hace que el ítem parezca flotar sobre el fondo.
✅ Margen: Evita que los elementos toquen los bordes de la pantalla.
✅ clipToOutline=»true»: Hace que la imagen respete las esquinas redondeadas.
Sugerencia pro
Si deseas agregar texto (por ejemplo, el nombre del producto o un pequeño pie de foto), puedes hacerlo fácilmente:
<TextView
android:id="@+id/textTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Título del ítem"
android:textColor="#FFFFFF"
android:textSize="18sp"
android:layout_gravity="bottom|center_horizontal"
android:background="#66000000"
android:padding="8dp"
android:maxLines="1" />Esto mostrará un pequeño título en la parte inferior de cada imagen.
Paso 4: Crear el Adaptador del Carrusel
Ya tienes el layout de la pantalla principal y el diseño de cada ítem del carrusel. Ahora toca crear el adaptador, una pieza clave que se encargará de:
✅ Tomar los datos (imágenes, títulos, etc.).
✅ Crear las vistas necesarias (basadas en item_carousel.xml).
✅ Asignar los datos a cada vista.
¿Qué es un adaptador?
Un adaptador es una clase puente entre los datos y las vistas.
En este caso, el adaptador tomará una lista de imágenes (y opcionalmente textos) y las mostrará dentro del ViewPager2, creando dinámicamente las páginas del carrusel.
Creando CarouselAdapter.kt
1. Dentro de tu paquete principal (com.tuapp.nombre), crea un nuevo archivo Kotlin llamado CarouselAdapter.kt.
2. Agrega este código base:
class CarouselAdapter(private val images: List<Int>) :
RecyclerView.Adapter<CarouselAdapter.CarouselViewHolder>() {
inner class CarouselViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
val imageView: ImageView = itemView.findViewById(R.id.imageView)
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): CarouselViewHolder {
val view = LayoutInflater.from(parent.context)
.inflate(R.layout.item_carousel, parent, false)
return CarouselViewHolder(view)
}
override fun onBindViewHolder(holder: CarouselViewHolder, position: Int) {
holder.imageView.setImageResource(images[position])
}
override fun getItemCount(): Int = images.size
}Explicación detallada del código
– class CarouselAdapter(...)
Define el adaptador y recibe una lista de enteros que representan las imágenes en recursos (R.drawable.nombreImagen).
– CarouselViewHolder
Clase interna que mantiene una referencia al ImageView del item_carousel.xml. Esto permite reutilizar vistas y mejora el rendimiento.
– onCreateViewHolder
Se llama cada vez que el carrusel necesita crear una nueva página. Aquí se infla (convierte de XML a vista) el diseño item_carousel.xml.
– onBindViewHolder
Se llama para asignar los datos a cada vista. En este caso, establece la imagen correspondiente a cada posición.
– getItemCount
Devuelve el número total de ítems (páginas) del carrusel.
Extensión: Adaptador con imagen y título
Si deseas mostrar no solo imágenes sino también un título o descripción en cada ítem, cambia la estructura de datos y el adaptador.
1️⃣ Define un modelo de datos:
data class CarouselItem(
val imageResId: Int,
val title: String
)2️⃣ Modifica el adaptador:
3️⃣ Actualiza tu layout item_carousel.xml (si no lo hiciste antes) para incluir el TextView:
class CarouselAdapter(private val items: List<CarouselItem>) :
RecyclerView.Adapter<CarouselAdapter.CarouselViewHolder>() {
inner class CarouselViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
val imageView: ImageView = itemView.findViewById(R.id.imageView)
val textTitle: TextView? = itemView.findViewById(R.id.textTitle)
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): CarouselViewHolder {
val view = LayoutInflater.from(parent.context)
.inflate(R.layout.item_carousel, parent, false)
return CarouselViewHolder(view)
}
override fun onBindViewHolder(holder: CarouselViewHolder, position: Int) {
val item = items[position]
holder.imageView.setImageResource(item.imageResId)
holder.textTitle?.text = item.title
}
override fun getItemCount(): Int = items.size
}Paso 5: Configurar el ViewPager2 en MainActivity
<TextView
android:id="@+id/textTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:textSize="18sp"
android:layout_gravity="bottom|center_horizontal"
android:background="#66000000"
android:padding="8dp"
android:maxLines="1"/>Paso 6: Implementar Desplazamiento Automático (Opcional)
Un carrusel moderno no solo permite al usuario deslizar manualmente, sino que también puede moverse automáticamente después de unos segundos. Esto es muy útil para:
✅ Mostrar contenido promocional que se destaca solo.
✅ Mejorar la experiencia visual sin intervención del usuario.
✅ Mantener el dinamismo de la interfaz, muy común en apps comerciales y de noticias.
Vamos a implementar el desplazamiento automático utilizando corutinas (Kotlin coroutines) y el ciclo de vida de la actividad para evitar pérdidas de memoria.
Implementación básica de auto-scroll
En tu MainActivity.kt, agrega esta función:
private fun autoScrollCarousel() {
lifecycleScope.launch {
while (true) {
delay(3000) // Espera 3 segundos entre cada desplazamiento
val nextItem = (viewPager.currentItem + 1) % adapter.itemCount
viewPager.setCurrentItem(nextItem, true)
}
}
}Y luego, dentro de onCreate, llama a esta función después de configurar el adaptador:
autoScrollCarousel()¿Qué hace este código?
– lifecycleScope.launch — Crea una corutina que se ejecuta mientras la actividad esté viva (se destruye automáticamente si cierras la actividad o giras el dispositivo).
– delay(3000) — Pausa la corutina por 3 segundos entre cada cambio de página.
– viewPager.currentItem + 1 — Pasa al siguiente ítem. Si está en el último, vuelve al primero con % adapter.itemCount.
– setCurrentItem(..., true) — Cambia al siguiente ítem con animación.
Mejorando la implementación: detener auto-scroll cuando la app está en segundo plano
Si dejas la corutina ejecutándose cuando el usuario minimiza la app o cambia de actividad, consumirás recursos innecesariamente. Lo ideal es iniciar el auto-scroll solo cuando la actividad está visible y detenerlo cuando no lo esté.
Versión optimizada
Primero, crea una variable para controlar la corutina:
private var autoScrollJob: Job? = nullLuego, reemplaza tu función anterior por esta:
private fun startAutoScroll() {
autoScrollJob = lifecycleScope.launch {
while (true) {
delay(3000)
val nextItem = (viewPager.currentItem + 1) % adapter.itemCount
viewPager.setCurrentItem(nextItem, true)
}
}
}
private fun stopAutoScroll() {
autoScrollJob?.cancel()
}Usa los métodos del ciclo de vida:
override fun onResume() {
super.onResume()
startAutoScroll()
}
override fun onPause() {
super.onPause()
stopAutoScroll()
}Ventajas de este enfoque:
Eficiencia: No usa recursos cuando la app está en segundo plano.
Fiabilidad: El desplazamiento automático se reanuda automáticamente cuando el usuario vuelve a la actividad.
Buenas prácticas: Sigue las recomendaciones de gestión de ciclo de vida de Android.
Paso 7: Ejecutar y Probar la Aplicación
Ahora, ejecuta tu aplicación en un emulador o dispositivo físico. Deberías ver un carrusel funcional que muestra las imágenes proporcionadas, con un efecto de carrusel y desplazamiento automático si lo implementaste.
Recursos Adicionales
Para crear este tutorial me he basado en fuentes confiables, documentación oficial y experiencias de la comunidad de desarrolladores Android. Si deseas profundizar o explorar alternativas más avanzadas para carruseles y otros componentes de interfaz, te recomiendo consultar los siguientes recursos:
Documentación oficial y guías
– ViewPager2 – Android Developers
Documentación oficial que explica el funcionamiento de ViewPager2, incluyendo su API, métodos principales y buenas prácticas.
– Guía oficial de RecyclerView
Aunque ViewPager2 está basado en RecyclerView, esta guía es excelente para entender cómo funcionan los adaptadores y cómo optimizar el rendimiento al mostrar listas o carruseles de contenido.
– Kotlin Android Extensions
Extensiones de Kotlin que permiten escribir código más limpio y conciso al trabajar con vistas y otras APIs de Android.
Artículos y tutoriales prácticos
– Luciano Luzzi. Android Infinite Carousel with Coroutines and ViewPager2
Explica cómo hacer un carrusel con desplazamiento infinito y control automático usando corutinas.
– Implementation of ViewPager2 with Android Kotlin and Fragments
Un excelente paso a paso para implementar ViewPager2 con fragmentos en Kotlin.
Recursos adicionales y comunidad
KotlinLang.org
Sitio oficial de Kotlin con tutoriales, guías y documentación actualizada sobre el uso de Kotlin en Android.
Stack Overflow
Siempre útil para resolver dudas específicas. Busca temas como ViewPager2 auto scroll, ViewPager2 page transformer o ViewPager2 best practices.
GitHub
Busca repositorios como UtkuGlsvn/ViewPagerCarouselLayout para ejemplos de código y proyectos completos de carruseles personalizados.
Android Weekly
Un boletín semanal donde los desarrolladores comparten soluciones modernas y patrones de diseño recomendados.