La vista de diseño en Android Studio

En Android 4 han cambiado un poco como se puede ver un layout en modo diseño y modo texto.

En code solo podras ver el codigo, split te dividira la pantalla para ver codigo y diseño al tiempo y design es la misma de las versiones anteriores, arrastrando elementos y modificando sus propiedades en Attributes

En inglés a esta “vista de diseño”, se le conoce como “layout editor”. (Para que no se confundan si algún día están leyendo la documentación y no saben lo que es el layout editor).

La vista de texto en Android Studio
Cuando se tiene definido un layout y damos doble clic nos abre la vista de diseño, desde aquí podemos seleccionar sobre qué dispositivo queremos diseñar o sobre qué versión de Android.

También tiene una sección llamada Palette, desde la que podremos arrastrar elementos de interfaz que ya están incluidos en Android a nuestro diseño.

Si seleccionamos un elemento del diseño, al costado derecho se abrirá la sección de Atributos, donde podemos cambiar las propiedades del elemento; como el texto, color, etc.

También podemos acceder a la vista de Blueprint, desde esta vista veremos el layout de una forma más abstracta, donde solo veremos los elementos que tengamos agregados

Todos los layouts cuentan con una vista de texto además de la vista de diseño, en esta vista encontraremos el XML que representa el diseño.

Es muy útil ver estas dos vistas al mismo tiempo.

A partir del minuto 3:12 deberían haber cambiado a la pantalla del profesor. Se le ve explicando algo pero no lo vemos en la pantalla.

Android Studio nos ofrece dos tipos de vistas para trabajar en nuestro proyecto:
✔️ Design: Diseño
✔️ Text: Texto

Por si alguien aun no sabe como cambiar a text, aqui dejo un link
https://developer.android.com/studio/write/layout-editor?hl=es

A mi en l aversión 4.1.1 de Android Studio en lugar de la pestaña de Preview me sale una pestaña llamada Layout Validation pero hace lo mismo que Preview por si alguien como yo también andaba perdido

a mi siempre me aparece la ventana de diseño pero siempre si bueno conocer ambos casos, los xml y la ventana de gráfica para crear interfaces

Para los que buscan la Tab de Preview, actualmente creo que la cambiaron y pusieron 3 Iconos en la parte superior derecha :
Code
Split
Design

Seleccionan Split y se ve el codigo y el Diseño

Con esta clase aprendí las diferentes vistas con las que podemos trabajar en Android Studio, y de forma muy sencilla lo explico el maestro Sier.

programar con elementos mas visuales facilita horas de escribir codigo

La vista de BluePrint solo te muestra los elementos de forma abstracta.

Actualmente en la vesión de la Jirafa de Andoid Studio, la pestaña cambió de text a code y se ubica en la parte suerior derecha:

Estaba tratando de agregar los tags “tools:layout_editor_absolutex162dp” y
"tools:layout_editor_absolutex162dp" pero el editor no me los reconocia, explorando en los atributos del desing pille que se utilizan ahora los tags :

"android:translationX=“162dp”
"android:translationY="374dp"
para lo mismo. (no me funciono arrastrar el boton hasta esa posicion)

En Android 2022 Patch 1.1. Se encuentra en la esquina superior Derecha https://snipboard.io/OvSr4Z.jpg

Para usuarios de Andorid 2022 Patch 1.1., el menú que mencionan se encuentra en la esquina superior derecha

En la ultima version ahora se usa Compose para las UI, para cambiar las configuraciones de la vista al archivo .Kt
y en la anotacion @Preview hay un boton para cambiar las configuraciones
yo recomiendo estas configuraciones

Si seleccionamos un elemento del diseño, al costado derecho se abrirá la sección de Atributos, donde podemos cambiar las propiedades del elemento; como el texto, color, etc.

La vista de texto en Android Studio Cuando se tiene definido un layout y damos doble clic nos abre la vista de diseño, desde aquí podemos seleccionar sobre qué dispositivo queremos diseñar o sobre qué versión de Android. También tiene una sección llamada Palette, desde la que podremos arrastrar elementos de interfaz que ya están incluidos en Android a nuestro diseño.

Eso no lo sabía. 😄

En AS 4.* Component tree aparece con la opción Structure

Está confuso porque hablamos de Vista Diseño y el titulo dice otra cosa, hablamos de Panel View pero no lo vimos (?)

En Android 4.1.2, el menú que aparece en la parte inferior izquierda cambio al lado contrario con 3 opciones(Code, Split y Design).

Wow muy interesante todo lo que nos ofrece Android Studio