Crear la UI (Interfaz de usuario) sin escribir código.

En Android Studio puedes crear la UI (Interfaz de usuario) sin escribir código. Esto gracias a que existen widgets, los cuales puedes seleccionar y arrastrar hacia tu app. Y en una ventana de jerarquía puede acomodar toda tu interfaz.

Cada widget contiene propiedades, a las cuales solo necesitas darles valores y listo. Sin necesidad de escribir código. Y relativamente sencillo.

Puedes usar esta opcion o bien puedes escribir el código. Depende de como te sientas mas cómodo, aunque lo más común y rápido es escribir el código. Una ves que tienes poca experiencia es sencillo escribir el código para tu UI.

Para cambiar entre código y la parte visual solo necesitas buscar la opción en la parte inferior que dice Design y Text. Depende cual selecciones vas a poder trabajar difetente como te mostramos a continuación:

Si seleccionas Text, puedes escribir el código en XML, y tener una sita previa a la derecha.

Si seleccionas Design, te aparecerán los Widgets y herramientas para crear tu UI, y a la derecha tendrás una vista previa.

Los botones los vas a encontrar donde te indicamos a continuación.

UI son escribir código

Aparecen dos vistas de tu app. A la de la izquierda se le dice el diseño de tu app y la de la derecha muestra el plano técnico de la misma

Partes del editor visual.

Tiene bastantes herramientas que ayudan a visualizar mejor tu proyecto. Para cambiar el tamaño de los widgets (botones, TextVier, Image View, etc) solo es cuestión de seleccionar uno y arrastrar sus bordes hasta ajustarlo a donde se ajuste mejor en nuestra app.

Palette.

Aquí es donde se encuentran los widgets y diseños que puedes arrastrar al editor. Y así usarlos en tu app.
Tiene una barra de búsqueda que te facilita todo ya que son demasiados y están divididos en algunos grupos, por lo que es tedioso encontrar alguno si no sabes donde esta.

Component tree.

Aquí puedes ver la jerarquía que tienen loa componentes de la vista. Ademas puedas cambiar el orden de la misma. Y también es posible seleccionar los widgets que tienes en tu diseño. Así como eliminarlos y arrastrar nuevos.

Barra de herramientas.

Aquí encontraras herramientas para que personalices el editor. Puedes modificar propiedades del diseño.

Sección de ajuste de diseño.

Muestra tu diseño de diferentes formas. Aquí puedes ajustarlo a como se te haga mejor.

Properties.

Controlas las propiedades de la vista seleccionada.

 

NOTA: La barra de herramientas de la parte superior de la vista previa aparece en ambos casos, si usas o no usas código. Y esa barra te ayuda a saber como se vara tu app en diferentes pantallas, dispositivos, versiones de android, etc.

Para mas información sobre esto ve el tutorial: