ANDROID

ANDROID

ING.IVAN PETRLIK AZABACHE

COMPONENTES BASICOS DE TIPO VIEW

• FORM WIDGETS


• LAYOUTS


• COMPOSITE


• IMAGES & MEDIA


• TIME & DATE


• TRANSITIONS


• ADVANCED

COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)

EditText

Largo del componente

Ancho del componente

Nombre 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


EditText


EditText


EditText


EditText


EditText


EditText Paso 1 : Paso 2 :

12 1

2


EditText Paso 3 : Finalmente aparece así el EditText

:

100 dp


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

300 dp


TEXTVIEW

XMLNombre del componente



Texto o etiqueta del

textview

Este es el TextView


BUTTON




Texto del boton


RADIOBUTTON




Texto del radio button


CHECKBOX


Texto del radio button




SPINNER





PROGRESSBAR




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.


LINEARLAYOUT

Orientación del

contenedor

Largo del contenedor

Ancho del contenedor


LINEARLAYOUT


LINEARLAYOUT


LINEARLAYOUT


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


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


• RelativeLayout

1) Seleccionar y arrastrar

al escenario

2) Soltar sobre el

escenario


• RelativeLayout

3) Aparece el RelativeLayout


• RelativeLayout

4) Seleccionar y arrastrar el

Button y soltarlo sobre el

escenario


• RelativeLayout

5) Soltar el Button sobre el

escenario


• RelativeLayout

6) Otra vez Seleccionar y arrastrar el

Button y soltarlo sobre el

escenario


• RelativeLayout

7) Soltar el Button sobre el

escenario


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


• 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


• TableLayout y TableRow

3) Aparece el Layout

correspondiente sobre el

escenario



4) Seleccionar y arrastrar el TableRow al

escenario

5) Arrastrar y soltar sobre el escenario, esta operación se va

ha repetir cuatro veces



6) 4 Filas generadas 7) Allí se

observa las 4 filas generadas

en el OutLine



8) 4Seleccionar y

arrastrar el TextView sobre

el primer TableRow

9) Arrastrar y soltar sobre el

primer TableRow



10) El TextView que

se ha agregado aparece en el código XML



11) Seleccionar y arrastrar el Plain Text

sobre el primer TableRow


primer TableRow



13) El campo de texto esta

finalmente insertado sobre

el primer TableRow



14) El campo de texto EditText ( plain text ) se

encuentra insertado en el XML, ahora se tiene que

modificar algunas propiedades



15) Aparece el campo de texto debidamente perfilado



16) Seleccionar y arrastrar el TextView sobre el segundo TableRow

17) Arrastrar y soltar sobre el segundo TableRow


• TableLayout y TableRow18) El TextView que se ha agregado aparece en el código XML



19) Seleccionar y arrastrar el Plain Text sobre el segundo TableRow

20) Arrastrar y soltar sobre el segundo TableRow


• 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



22) Diseño generado hasta el momento




TextView sobre el tercer TableRow


tercer TableRow



25) El TextView ya se encuentra dentro del TableRows y se le borra

el contenido de la propiedad Text




Button sobre el Tercer

TableRow


tercer TableRow



28) El Button se logro insertar dentro del

TableRow




TextView sobre el cuarto TableRow


cuarto 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



33) Diseño generado hasta el momento



34) Agregando color de fondo al TableLayout



35) Diseño final generado


• GridLayout


• GridLayout


• GridLayout


• GridLayout


• GridLayout


• GridLayout


• GridLayout


• GridLayout


• GridLayout


• GridLayout


• GridLayout

) Seleccionar y arrastrar el

TextView sobre el GridLayout ) Arrastrar y

soltar sobre el GridLayout


• GridLayout


• GridLayout


• GridLayout

) Nuevamente Seleccionar y arrastrar el

TextView sobre el GridLayout

) Arrastrar y soltar sobre el

GridLayout


• GridLayout


• GridLayout


• GridLayout


TextView sobre el GridLayout

) Arrastrar y soltar sobre el

GridLayout


• GridLayout


• GridLayout


• GridLayout


TextView sobre el GridLayout ) Arrastrar y

soltar sobre el GridLayout


• GridLayout


• GridLayout


• GridLayout Ejemplo : Desarrollar el siguiente diseño


• GridLayout Sobre el código XML digitar lo siguiente :




• GridLayout Mostrar el diseño :


















• GridLayout Este proceso se repite hasta que se ha logrado obtener

el siguiente diseño:


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


• FrameLayout

1)Seleccionar y arrastrar el

FrameLayout sobre el

escenario

2) Arrastrar y soltar el

FrameLayout sobre el

escenario


• FrameLayout

3)Aparece el FrameLayout


• FrameLayout

3)codigo XML generado


• FrameLayout


• FrameLayout


• FrameLayout


• FrameLayout


• FrameLayout


• FrameLayout


• FrameLayout


• FrameLayout

Documents

ANDROID