informacion[arroba]academiaandroid.com +34 958084455
Controles Interfaz Usuario

Panel de diseño de UI de Android Studio

Post Series: Creación de Apps Android: diseño de Interfaz de Usuario

Iniciamos una nueva serie correspondiente a los contenidos del curso sobre la programación de Aplicaciones para Android con Android Studio que estamos publicando. En ella, vamos a tratar la creación de interfaces de usuario. (También nos referiremos a ellos como UI ó User interfaces)

A lo largo de estos tutoriales describiremos los principales controles para el diseño y construcción de interfaces de usuario, veremos cómo referenciarlos a nivel de código, para finalizar creando nuestra propia interfaz de usuario desde las clases Java implementadas.

Los apartados que iremos tratando en esta serie de publicaciones serán:

  • Panel de diseño de UI de Android Studio.
  • Interfaces de usuario: layouts.
  • Eventos de entrada: detectores de eventos.
  • Ejemplo práctico: desarrollo de un proyecto (código descargable y video explicando todo el proceso)

Los objetivos de este módulo serán:

  • Conocer e implementar controles básicos para el diseño de interfaces de usuario.
  • Saber referenciar los controles definidos a nivel visual con el código de la aplicación.
  • Comprender la estructura global para la construcción de interfaces sólidas.
  • Poder implementar acciones que permitan al usuario interaccionar con la aplicación.

Panel de diseño de UI de Android Studio. Controles básicos

En este apartado nos encargaremos de describir los controles básicos disponibles dentro del diseñador de interfaces de usuario que proporciona Android Studio al seleccionar un layout de nuestro proyecto.

Layout: es el esquema de distribución de los elementos dentro un diseño (es un término que podría traducir por ‘plano’ o ‘disposición’). En él se sustentan los diferentes elementos de la interfaz de usuario, definiéndose la distribución, posición y dimensiones de dichos elementos.

En Android tenemos diversas opciones de layout disponibles para construir nuestras UI: diseño tabular, lineal, de rejilla ó cuadrícula (grid),…

Veremos todo ésto en más detalle en una publicación posterior.

Como se puede apreciar en la siguiente imagen, tras seleccionar un layout del proyecto, y posteriormente la pestaña “Design“, se mostraría la siguiente ventana, con los diferentes controles que podrán añadirse a la interfaz de usuario.

Palette para UI en Android Studio

Sin entrar a describir las opciones de layouts, Expert y Custom (de mayor complejidad), se podrán observar controles bien delimitados en función de sus características. Para poder añadir cualquiera de los elementos de la imagen anterior, bastará con seleccionar el control elegido de la ventana “Palette” e indicar en qué posición del layout se desea establecer:


Contenido disponible para los usuarios Premium. ¡Únete a nosotros!


Créditos: imágenes de Android Developer con licencia Creative Commons Attribution 2.5

This Post Has One Comment

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *