ANDROIDCORIGLIANO ZEGARRA DANIEL
COMPONENTES BASICOS DE TIPO VIEW• FORM WIDGETS
COMPONENTES BASICOS DE TIPO VIEW• LAYOUTS
COMPONENTES BASICOS DE TIPO VIEW• COMPOSITE
COMPONENTES BASICOS DE TIPO VIEW• IMAGES & MEDIA
COMPONENTES BASICOS DE TIPO VIEW• TIME & DATE
COMPONENTES BASICOS DE TIPO VIEW• TRANSITIONS
COMPONENTES BASICOS DE TIPO VIEW• ADVANCED
COMPONENTES BASICOS DE TIPO    VIEW (DE FORM WIDGETS)EditText                      Nombre del                      compone...
COMPONENTES BASICOS DE TIPO    VIEW (DE FORM WIDGETS)EditText
• Nota Importante :• wrap_content : ocupa sólo el espacio necesario  para mostrar tu contenido• match_parent : ocupa      ...
• Observación :• Nótese que anteriormente “match_parent"  era conocido como “fill_parent“, luego es muy  común encontrar e...
COMPONENTES BASICOS DE TIPO    VIEW (DE FORM WIDGETS)EditText
COMPONENTES BASICOS DE TIPO    VIEW (DE FORM WIDGETS)EditText
COMPONENTES BASICOS DE TIPO    VIEW (DE FORM WIDGETS)EditText
COMPONENTES BASICOS DE TIPO    VIEW (DE FORM WIDGETS)EditText
COMPONENTES BASICOS DE TIPO    VIEW (DE FORM WIDGETS)EditText
COMPONENTES BASICOS DE TIPO    VIEW (DE FORM WIDGETS)EditText
COMPONENTES BASICOS DE TIPO    VIEW (DE FORM WIDGETS)EditText    Paso 1 :           Paso 2 :                              ...
COMPONENTES BASICOS DE TIPO    VIEW (DE FORM WIDGETS)EditText      Paso 3 : Finalmente aparece así el EditText            ...
COMPONENTES BASICOS DE TIPO    VIEW (DE FORM WIDGETS)EditTextSi nosotros le colocamos 300dp al ancho del editText.        ...
COMPONENTES BASICOS DE TIPO   VIEW (DE FORM WIDGETS)TEXTVIEW              Este es el              TextView                ...
COMPONENTES BASICOS DE TIPO  VIEW (DE FORM WIDGETS)BUTTON            Nombre del            componente                     ...
COMPONENTES BASICOS DE TIPO  VIEW (DE FORM WIDGETS)RADIOBUTTON              Nombre del              componente            ...
COMPONENTES BASICOS DE TIPO  VIEW (DE FORM WIDGETS)CHECKBOX              Nombre del              componente               ...
COMPONENTES BASICOS DE TIPO  VIEW (DE FORM WIDGETS)SPINNER           Nombre del           componente                      ...
COMPONENTES BASICOS DE TIPO  VIEW (DE FORM WIDGETS)PROGRESSBAR                     Nombre del                     componen...
COMPONENTES BASICOS DE TIPO     VIEW ( LAYOUTS)LINEARLAYOUTEs un contenedor que utiliza el modelo de caja para desplegarlo...
COMPONENTES BASICOS DE TIPO     VIEW ( LAYOUTS)LINEARLAYOUT                                Orientación                    ...
COMPONENTES BASICOS DE TIPO     VIEW ( LAYOUTS)LINEARLAYOUT
COMPONENTES BASICOS DE TIPO     VIEW ( LAYOUTS)LINEARLAYOUT
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)LINEARLAYOUT
COMPONENTES BASICOS DE TIPO        VIEW ( LAYOUTS)• RelativeLayout• Su principal característica es  que los widgets que es...
COMPONENTES BASICOS DE TIPO       VIEW ( LAYOUTS)• RelativeLayout• Cuando se crea un proyecto e n el main.xml existe e  im...
COMPONENTES BASICOS DE TIPO        VIEW ( LAYOUTS)• RelativeLayout                       2)  Soltar                       ...
COMPONENTES BASICOS DE TIPO       VIEW ( LAYOUTS)• RelativeLayout   3) Aparece el   RelativeLayout
COMPONENTES BASICOS DE TIPO       VIEW ( LAYOUTS)• RelativeLayout    4) Seleccionar   y      arrastrar el       Button y  ...
COMPONENTES BASICOS DE TIPO       VIEW ( LAYOUTS)• RelativeLayout                      5) Soltar el                     Bu...
COMPONENTES BASICOS DE TIPO       VIEW ( LAYOUTS)• RelativeLayout     6)   Otra vez     Seleccionar y      arrastrar el   ...
COMPONENTES BASICOS DE TIPO       VIEW ( LAYOUTS)• RelativeLayout                     7) Soltar el                    Butt...
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• TableLayout Te ayudará a posicionar tus widgets con la ayuda de celdas. ...
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• TableLayout y TableRow  Sobre un proyecto nuevo , se realiza el correspo...
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• TableLayout y TableRow                           3) Aparece el          ...
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• TableLayout y TableRow   4) Seleccionar    y arrastrar el    TableRow al...
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• TableLayout y TableRow    6) 4 Filas     generadas               7) Allí...
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• TableLayout y TableRow        8)    4Seleccionar y     arrastrar el   Te...
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• TableLayout y TableRow      10) El    TextView que   se ha agregado     ...
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• TableLayout y TableRow       11)    Seleccionar y     arrastrar el      ...
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• TableLayout y TableRow            13) El campo             de texto esta...
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• TableLayout y TableRow      14) El campo de texto       EditText ( plain...
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• TableLayout y TableRow              15)     Aparece              el camp...
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• TableLayout y TableRow   16) Seleccionar   y   arrastrar     el   TextVi...
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• TableLayout y TableRow   18)          El   TextView   que   se ha agrega...
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• TableLayout y TableRow   19)   Seleccionar     y   arrastrar    el   Pla...
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• TableLayou y TableRow  21)           El  EditText que se  ha     agregad...
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• TableLayout y TableRow      22)        Diseño      generado hasta el    ...
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• TableLayout y TableRow       23)    Seleccionar y     arrastrar el   Tex...
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• TableLayout y TableRow                   25) El TextView      ya        ...
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• TableLayout y TableRow       26)    Seleccionar y     arrastrar el   But...
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• TableLayout y TableRow                           28) El Button se logro ...
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• TableLayout y TableRow       29)    Seleccionar y     arrastrar el   Tex...
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• TableLayout y TableRow   31) El TextView se   ha agregado en el   código...
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• TableLayout y TableRow     33)        Diseño     generado hasta el     m...
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• TableLayout y TableRow    34)     Agregando    color de fondo al    Tabl...
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• TableLayout y TableRow   35)    Diseño final   generado
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• GridLayout
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• GridLayout
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• GridLayout
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• GridLayout
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• GridLayout
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• GridLayout
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• GridLayout
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• GridLayout
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• GridLayout
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• GridLayout
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• GridLayout     ) Seleccionar y      arrastrar el    TextView sobre     e...
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• GridLayout
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• GridLayout
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• GridLayout     ) Nuevamente     Seleccionar y      arrastrar el    TextV...
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• GridLayout
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• GridLayout
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• GridLayout ) Nuevamente  Seleccionar y   arrastrar el TextView sobre  el...
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• GridLayout
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• GridLayout
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• GridLayout     ) Nuevamente     Seleccionar y      arrastrar el    TextV...
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• GridLayout
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• GridLayout
COMPONENTES BASICOS DE TIPO       VIEW ( LAYOUTS)• GridLayout  Ejemplo : Desarrollar el siguiente   diseño
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• GridLayout  Sobre el código XML digitar lo siguiente :
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• GridLayout  Sobre el código XML digitar lo siguiente :
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• GridLayout  Mostrar el diseño :
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• GridLayout  Sobre el código XML digitar lo siguiente :
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• GridLayout Mostrar el diseño :
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• GridLayout  Sobre el código XML digitar lo siguiente :
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• GridLayout Mostrar el diseño :
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• GridLayout  Sobre el código XML digitar lo siguiente :
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• GridLayout Mostrar el diseño :
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• GridLayout  Sobre el código XML digitar lo siguiente :
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• GridLayout Mostrar el diseño :
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• GridLayout Este proceso se repite hasta que se ha logrado obtener el sig...
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• FrameLayout   Este layout consiste en un marco que ocupa toda la pantall...
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• FrameLayout                       2) Arrastrar   y                      ...
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• FrameLayout      3)Aparece el      FrameLayout
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• FrameLayout      3)codigo XML        generado
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• FrameLayout
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• FrameLayout
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• FrameLayout
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• FrameLayout
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• FrameLayout
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• FrameLayout
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• FrameLayout
COMPONENTES BASICOS DE TIPO      VIEW ( LAYOUTS)• FrameLayout
Upcoming SlideShare
Loading in …5
×

Componentes Basicos de Tipo View

1,896 views

Published on

Algunos componentes basicos de tipo View de aplicaciones Android

Published in: Education
  • Be the first to comment

Componentes Basicos de Tipo View

  1. 1. ANDROIDCORIGLIANO ZEGARRA DANIEL
  2. 2. COMPONENTES BASICOS DE TIPO VIEW• FORM WIDGETS
  3. 3. COMPONENTES BASICOS DE TIPO VIEW• LAYOUTS
  4. 4. COMPONENTES BASICOS DE TIPO VIEW• COMPOSITE
  5. 5. COMPONENTES BASICOS DE TIPO VIEW• IMAGES & MEDIA
  6. 6. COMPONENTES BASICOS DE TIPO VIEW• TIME & DATE
  7. 7. COMPONENTES BASICOS DE TIPO VIEW• TRANSITIONS
  8. 8. COMPONENTES BASICOS DE TIPO VIEW• ADVANCED
  9. 9. COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)EditText Nombre del componente Ancho del componente Largo del componente
  10. 10. COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)EditText
  11. 11. • Nota Importante :• wrap_content : ocupa sólo el espacio necesario para mostrar tu contenido• match_parent : ocupa todo el espacio posible• fill_parent
  12. 12. • 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.
  13. 13. COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)EditText
  14. 14. COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)EditText
  15. 15. COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)EditText
  16. 16. COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)EditText
  17. 17. COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)EditText
  18. 18. COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)EditText
  19. 19. COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)EditText Paso 1 : Paso 2 : 2 1 2 1
  20. 20. COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)EditText Paso 3 : Finalmente aparece así el EditText : 100 dp
  21. 21. COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)EditTextSi nosotros le colocamos 300dp al ancho del editText. 300 dp
  22. 22. COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)TEXTVIEW Este es el TextView Nombre del componente XML Texto o etiqueta del textview Ancho del componente Largo del componente
  23. 23. COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)BUTTON Nombre del componente Texto del boton Ancho del componente Largo del componente
  24. 24. COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)RADIOBUTTON Nombre del componente Texto del radio button Ancho del componente Largo del componente
  25. 25. COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)CHECKBOX Nombre del componente Texto del radio button Largo del componente Ancho del componente
  26. 26. COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)SPINNER Nombre del componente Largo del componente Ancho del componente
  27. 27. COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)PROGRESSBAR Nombre del componente Largo del componente Ancho del componente
  28. 28. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)LINEARLAYOUTEs un contenedor que utiliza el modelo de caja para desplegarlos elementos que están dentro de él. Los widgets ycontenedores secundarios que se declaren dentro de unelemento <LinearLayout> se alinearán en una columna o enun fila, uno detrás de otro.
  29. 29. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)LINEARLAYOUT Orientación del contenedor Largo del contenedor Ancho del contenedor
  30. 30. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)LINEARLAYOUT
  31. 31. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)LINEARLAYOUT
  32. 32. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)LINEARLAYOUT
  33. 33. 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.
  34. 34. 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.
  35. 35. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• RelativeLayout 2) Soltar sobre el escenario 1)Seleccionar y arrastraral escenario
  36. 36. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• RelativeLayout 3) Aparece el RelativeLayout
  37. 37. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• RelativeLayout 4) Seleccionar y arrastrar el Button y soltarlo sobre el escenario
  38. 38. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• RelativeLayout 5) Soltar el Button sobre el escenario
  39. 39. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• RelativeLayout 6) Otra vez Seleccionar y arrastrar el Button y soltarlo sobre el escenario
  40. 40. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• RelativeLayout 7) Soltar el Button sobre el escenario
  41. 41. 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.
  42. 42. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• TableLayout y TableRow Sobre un proyecto nuevo , se realiza el correspondiente diseño, cambiando de LinearLayout a TableLayout. 2) Arrastrar y soltar sobre el escenario 1) Seleccionar y arrastrar al escenario
  43. 43. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• TableLayout y TableRow 3) Aparece el Layout correspondiente sobre el escenario
  44. 44. 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
  45. 45. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• TableLayout y TableRow 6) 4 Filas generadas 7) Allí se observa las 4 filas generadas en el OutLine
  46. 46. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• TableLayout y TableRow 8) 4Seleccionar y arrastrar el TextView sobre el primer 9) Arrastrar y TableRow soltar sobre el primer TableRow
  47. 47. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• TableLayout y TableRow 10) El TextView que se ha agregado aparece en el código XML
  48. 48. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• TableLayout y TableRow 11) Seleccionar y arrastrar el 12) Arrastrar y Plain Text soltar sobre el sobre el primer primer TableRow TableRow
  49. 49. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• TableLayout y TableRow 13) El campo de texto esta finalmente insertado sobre el primer TableRow
  50. 50. 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
  51. 51. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• TableLayout y TableRow 15) Aparece el campo de texto debidamente perfilado
  52. 52. 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
  53. 53. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• TableLayout y TableRow 18) El TextView que se ha agregado aparece en el código XML
  54. 54. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• TableLayout y TableRow 19) Seleccionar y arrastrar el Plain Text sobre el 20) Arrastrar y segundo soltar sobre el TableRow segundo TableRow
  55. 55. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• TableLayou y TableRow 21) El EditText que se ha agregado aparece en el código XML 14) El campo de texto EditText ( plain text ) se encuentra insertado en el XML, ahora se tiene que modificar algunas propiedades
  56. 56. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• TableLayout y TableRow 22) Diseño generado hasta el momento
  57. 57. 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
  58. 58. 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
  59. 59. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• TableLayout y TableRow 26) Seleccionar y arrastrar el Button sobre el 27) Arrastrar y Tercer soltar sobre el TableRow tercer TableRow
  60. 60. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• TableLayout y TableRow 28) El Button se logro insertar dentro del TableRow
  61. 61. 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
  62. 62. 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
  63. 63. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• TableLayout y TableRow 33) Diseño generado hasta el momento
  64. 64. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• TableLayout y TableRow 34) Agregando color de fondo al TableLayout
  65. 65. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• TableLayout y TableRow 35) Diseño final generado
  66. 66. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  67. 67. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  68. 68. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  69. 69. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  70. 70. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  71. 71. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  72. 72. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  73. 73. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  74. 74. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  75. 75. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  76. 76. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout ) Seleccionar y arrastrar el TextView sobre el GridLayout ) Arrastrar y soltar sobre el GridLayout
  77. 77. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  78. 78. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  79. 79. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout ) Nuevamente Seleccionar y arrastrar el TextView sobre ) Arrastrar y el GridLayout soltar sobre el GridLayout
  80. 80. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  81. 81. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  82. 82. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout ) Nuevamente Seleccionar y arrastrar el TextView sobre el GridLayout ) Arrastrar y soltar sobre el GridLayout
  83. 83. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  84. 84. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  85. 85. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout ) Nuevamente Seleccionar y arrastrar el TextView sobre el GridLayout ) Arrastrar y soltar sobre el GridLayout
  86. 86. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  87. 87. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout
  88. 88. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout Ejemplo : Desarrollar el siguiente diseño
  89. 89. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout Sobre el código XML digitar lo siguiente :
  90. 90. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout Sobre el código XML digitar lo siguiente :
  91. 91. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout Mostrar el diseño :
  92. 92. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout Sobre el código XML digitar lo siguiente :
  93. 93. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout Mostrar el diseño :
  94. 94. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout Sobre el código XML digitar lo siguiente :
  95. 95. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout Mostrar el diseño :
  96. 96. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout Sobre el código XML digitar lo siguiente :
  97. 97. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout Mostrar el diseño :
  98. 98. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout Sobre el código XML digitar lo siguiente :
  99. 99. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout Mostrar el diseño :
  100. 100. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• GridLayout Este proceso se repite hasta que se ha logrado obtener el siguiente diseño:
  101. 101. 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.
  102. 102. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• FrameLayout 2) Arrastrar y soltar el 1)Seleccionar y FrameLayout sobre el arrastrar el escenario FrameLayout sobre el escenario
  103. 103. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• FrameLayout 3)Aparece el FrameLayout
  104. 104. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• FrameLayout 3)codigo XML generado
  105. 105. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• FrameLayout
  106. 106. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• FrameLayout
  107. 107. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• FrameLayout
  108. 108. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• FrameLayout
  109. 109. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• FrameLayout
  110. 110. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• FrameLayout
  111. 111. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• FrameLayout
  112. 112. COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)• FrameLayout

×