componentes basicos de tipo view
DESCRIPTION
Algunos componentes basicos de tipo View de aplicaciones AndroidTRANSCRIPT
![Page 1: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/1.jpg)
ANDROID
CORIGLIANO ZEGARRA DANIEL
![Page 2: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/2.jpg)
COMPONENTES BASICOS DE TIPO VIEW
• FORM WIDGETS
![Page 3: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/3.jpg)
COMPONENTES BASICOS DE TIPO VIEW
• LAYOUTS
![Page 4: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/4.jpg)
COMPONENTES BASICOS DE TIPO VIEW
• COMPOSITE
![Page 5: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/5.jpg)
COMPONENTES BASICOS DE TIPO VIEW
• IMAGES & MEDIA
![Page 6: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/6.jpg)
COMPONENTES BASICOS DE TIPO VIEW
• TIME & DATE
![Page 7: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/7.jpg)
COMPONENTES BASICOS DE TIPO VIEW
• TRANSITIONS
![Page 8: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/8.jpg)
COMPONENTES BASICOS DE TIPO VIEW
• ADVANCED
![Page 9: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/9.jpg)
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)
EditText
Largo del componente
Ancho del componente
Nombre del componente
![Page 10: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/10.jpg)
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)
EditText
![Page 11: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/11.jpg)
• Nota Importante :• wrap_content : ocupa sólo el espacio necesario
para mostrar tu contenido
• match_parent : ocupa todo el espacio posible
• fill_parent
![Page 12: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/12.jpg)
• Observación :• Nótese que anteriormente “match_parent" era conocido como “fill_parent“, luego es muy
común encontrar este valor en lugar del anterior.
• A efectos prácticos son lo mismo, sin embargo la evolución de Android favorece este nuevo nombre.
![Page 13: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/13.jpg)
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)
EditText
![Page 14: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/14.jpg)
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)
EditText
![Page 15: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/15.jpg)
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)
EditText
![Page 16: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/16.jpg)
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)
EditText
![Page 17: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/17.jpg)
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)
EditText
![Page 18: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/18.jpg)
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)
EditText
![Page 19: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/19.jpg)
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)
EditText Paso 1 : Paso 2 :
12 1
2
![Page 20: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/20.jpg)
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)
EditText Paso 3 : Finalmente aparece así el EditText
:
100 dp
![Page 21: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/21.jpg)
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)
EditText Si nosotros le colocamos 300dp al ancho del editText.
300 dp
![Page 22: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/22.jpg)
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)
TEXTVIEW
XMLNombre del componente
Ancho del componente
Largo del componente
Texto o etiqueta del
textview
Este es el TextView
![Page 23: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/23.jpg)
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)
BUTTON
Nombre del componente
Ancho del componente
Largo del componente
Texto del boton
![Page 24: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/24.jpg)
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)
RADIOBUTTON
Nombre del componente
Ancho del componente
Largo del componente
Texto del radio button
![Page 25: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/25.jpg)
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)
CHECKBOX
Ancho del componente
Texto del radio button
Nombre del componente
Largo del componente
![Page 26: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/26.jpg)
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)
SPINNER
Largo del componente
Ancho del componente
Nombre del componente
![Page 27: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/27.jpg)
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)
PROGRESSBAR
Nombre del componente
Largo del componente
Ancho del componente
![Page 28: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/28.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
LINEARLAYOUT Es un contenedor que utiliza el modelo de caja para desplegar
los elementos que están dentro de él. Los widgets y contenedores secundarios que se declaren dentro de un elemento <LinearLayout> se alinearán en una columna o en un fila, uno detrás de otro.
![Page 29: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/29.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
LINEARLAYOUT
Orientación del
contenedor
Largo del contenedor
Ancho del contenedor
![Page 30: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/30.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
LINEARLAYOUT
![Page 31: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/31.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
LINEARLAYOUT
![Page 32: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/32.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
LINEARLAYOUT
![Page 33: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/33.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• RelativeLayout• Su principal característica es
que los widgets que estén dentro de este contenedor basarán su posición en relación con los otros elementos. De esta forma, podemos definir que el widget X quede debajo del widget Y y que éste a su vez se alinie verticalmente con el widget Z.
![Page 34: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/34.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• RelativeLayout• Cuando se crea un proyecto e n el main.xml existe e
implementado el LinearLayout .• Este LinearLayout se tiene que quitar para agregarle el
RelativeLayout.• A continuación vamos a seguir los pasos necesario para
implementar un RelativeLayout y agregar un componente.
![Page 35: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/35.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• RelativeLayout
1) Seleccionar y arrastrar
al escenario
2) Soltar sobre el
escenario
![Page 36: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/36.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• RelativeLayout
3) Aparece el RelativeLayout
![Page 37: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/37.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• RelativeLayout
4) Seleccionar y arrastrar el
Button y soltarlo sobre el
escenario
![Page 38: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/38.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• RelativeLayout
5) Soltar el Button sobre el
escenario
![Page 39: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/39.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• RelativeLayout
6) Otra vez Seleccionar y arrastrar el
Button y soltarlo sobre el
escenario
![Page 40: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/40.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• RelativeLayout
7) Soltar el Button sobre el
escenario
![Page 41: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/41.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• TableLayout Te ayudará a posicionar tus widgets con la ayuda de celdas.
Nosotros controlamos el número de columnas y filas, las primeras pueden adaptarse al contenido que le queramos asignar mostrándose más estrechas o más amplias según sea el caso.
• TableRow Son un conjunto elementos del TableLayout ,podemos
controlar el número de filas que aparecerán en nuestra tabla.
![Page 42: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/42.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• TableLayout y TableRow Sobre un proyecto nuevo , se realiza el correspondiente
diseño, cambiando de LinearLayout a TableLayout.
1) Seleccionar y arrastrar
al escenario
2) Arrastrar y
soltar sobre el
escenario
![Page 43: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/43.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• TableLayout y TableRow
3) Aparece el Layout
correspondiente sobre el
escenario
![Page 44: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/44.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• TableLayout y TableRow
4) Seleccionar y arrastrar el TableRow al
escenario
5) Arrastrar y soltar sobre el escenario, esta operación se va
ha repetir cuatro veces
![Page 45: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/45.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• TableLayout y TableRow
6) 4 Filas generadas 7) Allí se
observa las 4 filas generadas
en el OutLine
![Page 46: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/46.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• TableLayout y TableRow
8) 4Seleccionar y
arrastrar el TextView sobre
el primer TableRow
9) Arrastrar y soltar sobre el
primer TableRow
![Page 47: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/47.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• TableLayout y TableRow
10) El TextView que
se ha agregado aparece en el código XML
![Page 48: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/48.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• TableLayout y TableRow
11) Seleccionar y arrastrar el Plain Text
sobre el primer TableRow
12) Arrastrar y soltar sobre el
primer TableRow
![Page 49: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/49.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• TableLayout y TableRow
13) El campo de texto esta
finalmente insertado sobre
el primer TableRow
![Page 50: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/50.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• TableLayout y TableRow
14) El campo de texto EditText ( plain text ) se
encuentra insertado en el XML, ahora se tiene que
modificar algunas propiedades
![Page 51: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/51.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• TableLayout y TableRow
15) Aparece el campo de texto debidamente perfilado
![Page 52: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/52.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• TableLayout y TableRow
16) Seleccionar y arrastrar el TextView sobre el segundo TableRow
17) Arrastrar y soltar sobre el segundo TableRow
![Page 53: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/53.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• TableLayout y TableRow18) El TextView que se ha agregado aparece en el código XML
![Page 54: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/54.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• TableLayout y TableRow
19) Seleccionar y arrastrar el Plain Text sobre el segundo TableRow
20) Arrastrar y soltar sobre el segundo TableRow
![Page 55: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/55.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• TableLayou y TableRow
14) El campo de texto EditText ( plain text ) se
encuentra insertado en el XML, ahora se tiene que
modificar algunas propiedades
21) El EditText que se ha agregado aparece en el código XML
![Page 56: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/56.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• TableLayout y TableRow
22) Diseño generado hasta el momento
![Page 57: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/57.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• TableLayout y TableRow
23) Seleccionar y arrastrar el
TextView sobre el tercer TableRow
24) Arrastrar y soltar sobre el
tercer TableRow
![Page 58: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/58.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• TableLayout y TableRow
25) El TextView ya se encuentra dentro del TableRows y se le borra
el contenido de la propiedad Text
![Page 59: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/59.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• TableLayout y TableRow
26) Seleccionar y arrastrar el
Button sobre el Tercer
TableRow
27) Arrastrar y soltar sobre el
tercer TableRow
![Page 60: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/60.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• TableLayout y TableRow
28) El Button se logro insertar dentro del
TableRow
![Page 61: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/61.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• TableLayout y TableRow
29) Seleccionar y arrastrar el
TextView sobre el cuarto TableRow
30) Arrastrar y soltar sobre el
cuarto TableRow
![Page 62: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/62.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• TableLayout y TableRow
31) El TextView se ha agregado en el código XML, además se tiene que modificar sus propiedades
32) Se le agrego estas propiedades
![Page 63: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/63.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• TableLayout y TableRow
33) Diseño generado hasta el momento
![Page 64: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/64.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• TableLayout y TableRow
34) Agregando color de fondo al TableLayout
![Page 65: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/65.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• TableLayout y TableRow
35) Diseño final generado
![Page 66: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/66.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• GridLayout
![Page 67: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/67.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• GridLayout
![Page 68: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/68.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• GridLayout
![Page 69: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/69.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• GridLayout
![Page 70: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/70.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• GridLayout
![Page 71: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/71.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• GridLayout
![Page 72: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/72.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• GridLayout
![Page 73: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/73.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• GridLayout
![Page 74: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/74.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• GridLayout
![Page 75: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/75.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• GridLayout
![Page 76: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/76.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• GridLayout
) Seleccionar y arrastrar el
TextView sobre el GridLayout ) Arrastrar y
soltar sobre el GridLayout
![Page 77: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/77.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• GridLayout
![Page 78: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/78.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• GridLayout
![Page 79: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/79.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• GridLayout
) Nuevamente Seleccionar y arrastrar el
TextView sobre el GridLayout
) Arrastrar y soltar sobre el
GridLayout
![Page 80: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/80.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• GridLayout
![Page 81: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/81.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• GridLayout
![Page 82: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/82.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• GridLayout
) Nuevamente Seleccionar y arrastrar el
TextView sobre el GridLayout
) Arrastrar y soltar sobre el
GridLayout
![Page 83: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/83.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• GridLayout
![Page 84: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/84.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• GridLayout
![Page 85: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/85.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• GridLayout
) Nuevamente Seleccionar y arrastrar el
TextView sobre el GridLayout ) Arrastrar y
soltar sobre el GridLayout
![Page 86: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/86.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• GridLayout
![Page 87: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/87.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• GridLayout
![Page 88: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/88.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• GridLayout Ejemplo : Desarrollar el siguiente diseño
![Page 89: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/89.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• GridLayout Sobre el código XML digitar lo siguiente :
![Page 90: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/90.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• GridLayout Sobre el código XML digitar lo siguiente :
![Page 91: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/91.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• GridLayout Mostrar el diseño :
![Page 92: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/92.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• GridLayout Sobre el código XML digitar lo siguiente :
![Page 93: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/93.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• GridLayout Mostrar el diseño :
![Page 94: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/94.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• GridLayout Sobre el código XML digitar lo siguiente :
![Page 95: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/95.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• GridLayout Mostrar el diseño :
![Page 96: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/96.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• GridLayout Sobre el código XML digitar lo siguiente :
![Page 97: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/97.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• GridLayout Mostrar el diseño :
![Page 98: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/98.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• GridLayout Sobre el código XML digitar lo siguiente :
![Page 99: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/99.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• GridLayout Mostrar el diseño :
![Page 100: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/100.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• GridLayout Este proceso se repite hasta que se ha logrado obtener
el siguiente diseño:
![Page 101: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/101.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• FrameLayout Este layout consiste en un marco que ocupa toda la
pantalla, y donde los controles se dispondrán a partir de la esquina superior izquierda, por lo que es probable que haya elementos que se queden ocultos detrás de otros.
![Page 102: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/102.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• FrameLayout
1)Seleccionar y arrastrar el
FrameLayout sobre el
escenario
2) Arrastrar y soltar el
FrameLayout sobre el
escenario
![Page 103: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/103.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• FrameLayout
3)Aparece el FrameLayout
![Page 104: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/104.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• FrameLayout
3)codigo XML generado
![Page 105: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/105.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• FrameLayout
![Page 106: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/106.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• FrameLayout
![Page 107: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/107.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• FrameLayout
![Page 108: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/108.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• FrameLayout
![Page 109: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/109.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• FrameLayout
![Page 110: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/110.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• FrameLayout
![Page 111: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/111.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• FrameLayout
![Page 112: Componentes Basicos de Tipo View](https://reader035.vdocuments.net/reader035/viewer/2022070318/557bdab3d8b42a8b3e8b4dee/html5/thumbnails/112.jpg)
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)
• FrameLayout