Componentes Basicos de Tipo View

ANDROID

CORIGLIANO ZEGARRA DANIEL

COMPONENTES BASICOS DE TIPO VIEW

• FORM WIDGETS


• LAYOUTS


• COMPOSITE


• IMAGES & MEDIA


• TIME & DATE


• TRANSITIONS


• ADVANCED

COMPONENTES BASICOS DE TIPO
VIEW (DE FORM WIDGETS)
EditText

Nombre del
componente

Ancho del
componente

Largo del
componente

EditText

• Nota Importante :
• wrap_content : ocupa sólo el espacio necesario
para mostrar tu contenido
• match_parent : ocupa todo el espacio
posible
• fill_parent

• 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.

EditText
Paso 1 : Paso 2 :

2
1
2 1

EditText
Paso 3 : Finalmente aparece así el EditText
:

100 dp

EditText
Si nosotros le colocamos 300dp al ancho del editText.

300 dp

TEXTVIEW
Este es el
TextView

Nombre del
componente
XML Texto o
etiqueta del
textview

Ancho del
componente

Largo del
componente

BUTTON

Nombre del
componente

Texto del
boton

Ancho del
componente

Largo del
componente

RADIOBUTTON

Nombre del
componente

Texto del
radio button

Ancho del
componente

Largo del
componente

CHECKBOX

Nombre del
componente

Texto del
radio button

Largo del
componente

Ancho del
componente

SPINNER

Nombre del
componente

Largo del
componente

Ancho del
componente

PROGRESSBAR

Nombre del
componente

Largo del
componente

Ancho del
componente

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.

VIEW ( LAYOUTS)
LINEARLAYOUT

Orientación
del
contenedor

Largo del
contenedor

Ancho del
contenedor

VIEW ( LAYOUTS)
LINEARLAYOUT

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.

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.

VIEW ( LAYOUTS)
• RelativeLayout

2) Soltar
sobre el
escenario

1)
Seleccionar
y arrastrar
al escenario

VIEW ( LAYOUTS)
• RelativeLayout

3) Aparece el
RelativeLayout

VIEW ( LAYOUTS)
• RelativeLayout

4) Seleccionar y
arrastrar el
Button y
soltarlo sobre el
escenario

VIEW ( LAYOUTS)
• RelativeLayout

5) Soltar el
Button sobre el
escenario

VIEW ( LAYOUTS)
• RelativeLayout

6) Otra vez
Seleccionar y
arrastrar el
Button y
soltarlo sobre el
escenario

VIEW ( LAYOUTS)
• RelativeLayout

7) Soltar el
Button sobre el
escenario

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.

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

VIEW ( LAYOUTS)
3) Aparece el
Layout
correspondiente
sobre el
escenario

VIEW ( LAYOUTS)

4) Seleccionar
y arrastrar el
TableRow al
escenario

5) Arrastrar y
soltar sobre el
escenario, esta
operación se va
ha repetir cuatro
veces

VIEW ( LAYOUTS)

6) 4 Filas
generadas 7) Allí se
observa las 4
filas generadas
en el OutLine

VIEW ( LAYOUTS)

8)
4Seleccionar y
arrastrar el
TextView sobre
el primer 9) Arrastrar y
TableRow soltar sobre el
primer TableRow

VIEW ( LAYOUTS)

10) El
TextView que
se ha agregado
aparece en el
código XML

VIEW ( LAYOUTS)

11)
Seleccionar y
arrastrar el 12) Arrastrar y
Plain Text soltar sobre el
sobre el primer primer TableRow
TableRow

VIEW ( LAYOUTS)

13) El campo
de texto esta
finalmente
insertado sobre
el primer
TableRow

VIEW ( LAYOUTS)

14) El campo de texto
EditText ( plain text ) se
encuentra insertado en el
XML, ahora se tiene que
modificar algunas
propiedades

VIEW ( LAYOUTS)

15) Aparece
el campo de
texto
debidamente
perfilado

VIEW ( LAYOUTS)

16) Seleccionar y
arrastrar el
TextView sobre el
segundo TableRow
17) Arrastrar y
soltar sobre el
segundo
TableRow

VIEW ( LAYOUTS)
18) El
TextView que
se ha agregado
aparece en el
código XML

VIEW ( LAYOUTS)

19)
Seleccionar y
arrastrar el
Plain Text
sobre el
20) Arrastrar y
segundo soltar sobre el
TableRow segundo
TableRow

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

VIEW ( LAYOUTS)

22) Diseño
generado hasta el
momento

VIEW ( LAYOUTS)

23)
Seleccionar y
arrastrar el
TextView sobre
el tercer
TableRow

24) Arrastrar y
soltar sobre el
tercer TableRow

VIEW ( LAYOUTS)

25) El TextView ya
se encuentra dentro del
TableRows y se le borra
el contenido de la
propiedad Text

VIEW ( LAYOUTS)

26)
Seleccionar y
arrastrar el
Button sobre el 27) Arrastrar y
Tercer soltar sobre el
TableRow tercer TableRow

VIEW ( LAYOUTS)

28) El Button se logro
insertar dentro del
TableRow

VIEW ( LAYOUTS)

29)
Seleccionar y
arrastrar el
TextView sobre
el cuarto
TableRow

30) Arrastrar y
soltar sobre el
cuarto TableRow

VIEW ( LAYOUTS)
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

VIEW ( LAYOUTS)

33) Diseño
generado hasta el
momento

VIEW ( LAYOUTS)

34) Agregando
color de fondo al
TableLayout

VIEW ( LAYOUTS)

35) Diseño final
generado

VIEW ( LAYOUTS)
• GridLayout

VIEW ( LAYOUTS)
• GridLayout

) Seleccionar y
arrastrar el
TextView sobre
el GridLayout ) Arrastrar y
soltar sobre el
GridLayout

VIEW ( LAYOUTS)
• GridLayout

) Nuevamente
Seleccionar y
arrastrar el
TextView sobre ) Arrastrar y
el GridLayout soltar sobre el
GridLayout

VIEW ( LAYOUTS)
• GridLayout

) Nuevamente
Seleccionar y
arrastrar el
TextView sobre
el GridLayout
) Arrastrar y
soltar sobre el
GridLayout

VIEW ( LAYOUTS)
• GridLayout

) Nuevamente
Seleccionar y
arrastrar el
TextView sobre
el GridLayout ) Arrastrar y
soltar sobre el
GridLayout

VIEW ( LAYOUTS)
• GridLayout
Ejemplo : Desarrollar el siguiente diseño

VIEW ( LAYOUTS)
• GridLayout
Sobre el código XML digitar lo siguiente :

VIEW ( LAYOUTS)
• GridLayout
Mostrar el diseño :

VIEW ( LAYOUTS)
• GridLayout
Este proceso se repite hasta que se ha logrado obtener
el siguiente diseño:

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.

VIEW ( LAYOUTS)
• FrameLayout

2) Arrastrar y
soltar el
1)Seleccionar y FrameLayout
sobre el
arrastrar el escenario
FrameLayout
sobre el
escenario

VIEW ( LAYOUTS)
• FrameLayout

3)Aparece el
FrameLayout

VIEW ( LAYOUTS)
• FrameLayout

3)codigo XML
generado

VIEW ( LAYOUTS)
• FrameLayout

Componentes Basicos de Tipo View

Recomendados

Recomendados

Más contenido relacionado

Similar a Componentes Basicos de Tipo View

Similar a Componentes Basicos de Tipo View (20)

Último

Último (20)

Componentes Basicos de Tipo View