Android Widgets Layout

ANDROID

ING.IVAN PETRLIK AZABACHE

COMPONENTES BASICOS DE TIPO VIEWFORM WIDGETS

COMPONENTES BASICOS DE TIPO VIEWLAYOUTS

COMPONENTES BASICOS DE TIPO VIEWCOMPOSITE

COMPONENTES BASICOS DE TIPO VIEWIMAGES & MEDIA

COMPONENTES BASICOS DE TIPO VIEWTIME & DATE

COMPONENTES BASICOS DE TIPO VIEWTRANSITIONS

COMPONENTES BASICOS DE TIPO VIEWADVANCED

COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)EditText

Largo del componenteAncho del componenteNombre del componente

Nota Importante :wrap_content : ocupa slo el espacio necesario para mostrar tu contenido match_parent : ocupa todo el espacio posible fill_parent

Observacin :Ntese que anteriormente match_parent" era conocido como fill_parent, luego es muy comn encontrar este valor en lugar del anterior.A efectos prcticos son lo mismo, sin embargo la evolucin de Android favorece este nuevo nombre.

COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)EditText Paso 1 : Paso 2 :1212

COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)EditText Paso 3 : Finalmente aparece as el EditText :100 dp

COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)EditText Si nosotros le colocamos 300dp al ancho del editText.300 dp

COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)TEXTVIEW

XML

Nombre del componenteAncho del componenteLargo del componenteTexto o etiqueta del textviewEste es el TextView

COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) BUTTON

Nombre del componenteAncho del componenteLargo del componenteTexto del boton

COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) RADIOBUTTON

Nombre del componenteAncho del componenteLargo del componenteTexto del radio button

COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) CHECKBOX

Ancho del componenteTexto del radio buttonNombre del componenteLargo del componente

COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) SPINNER

Largo del componenteAncho del componenteNombre del componente

COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) PROGRESSBARNombre del componenteLargo del componenteAncho del componente

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) LINEARLAYOUT Es un contenedor que utiliza el modelo de caja para desplegar los elementos que estn dentro de l. Los widgets y contenedores secundarios que se declaren dentro de un elemento se alinearn en una columna o en un fila, uno detrs de otro.

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) LINEARLAYOUTOrientacin del contenedorLargo del contenedorAncho del contenedor

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) LINEARLAYOUT

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)RelativeLayoutSu principal caracterstica es que los widgets que estn dentro de este contenedor basarn su posicin en relacin 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.

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)RelativeLayoutCuando 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 continuacin vamos a seguir los pasos necesario para implementar un RelativeLayout y agregar un componente.

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)RelativeLayout

1) Seleccionar y arrastrar al escenario2) Soltar sobre el escenario


3) Aparece el RelativeLayout


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


5) Soltar el Button sobre el escenario


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


7) Soltar el Button sobre el escenario

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)TableLayout Te ayudar a posicionar tus widgets con la ayuda de celdas. Nosotros controlamos el nmero de columnas y filas, las primeras pueden adaptarse al contenido que le queramos asignar mostrndose ms estrechas o ms amplias segn sea el caso.TableRow Son un conjunto elementos del TableLayout ,podemos controlar el nmero de filas que aparecern en nuestra tabla.

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)TableLayout y TableRow Sobre un proyecto nuevo , se realiza el correspondiente diseo, cambiando de LinearLayout a TableLayout.1) Seleccionar y arrastrar al escenario2) Arrastrar y soltar sobre el escenario

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)TableLayout y TableRow3) Aparece el Layout correspondiente sobre el escenario

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)TableLayout y TableRow4) Seleccionar y arrastrar el TableRow al escenario5) Arrastrar y soltar sobre el escenario, esta operacin se va ha repetir cuatro veces

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)TableLayout y TableRow6) 4 Filas generadas7) All se observa las 4 filas generadas en el OutLine

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)TableLayout y TableRow8) 4Seleccionar y arrastrar el TextView sobre el primer TableRow9) Arrastrar y soltar sobre el primer TableRow

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)TableLayout y TableRow10) El TextView que se ha agregado aparece en el cdigo XML

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)TableLayout y TableRow11) Seleccionar y arrastrar el Plain Text sobre el primer TableRow12) Arrastrar y soltar sobre el primer TableRow

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)TableLayout y TableRow13) El campo de texto esta finalmente insertado sobre el primer TableRow

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)TableLayout y TableRow14) El campo de texto EditText ( plain text ) se encuentra insertado en el XML, ahora se tiene que modificar algunas propiedades

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)TableLayout y TableRow15) Aparece el campo de texto debidamente perfilado

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)TableLayout y TableRow16) Seleccionar y arrastrar el TextView sobre el segundo TableRow17) Arrastrar y soltar sobre el segundo TableRow

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)TableLayout y TableRow18) El TextView que se ha agregado aparece en el cdigo XML

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)TableLayout y TableRow19) Seleccionar y arrastrar el Plain Text sobre el segundo TableRow20) Arrastrar y soltar sobre el segundo TableRow

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)TableLayou y TableRow14) El campo de texto EditText ( plain text ) se encuentra insertado en el XML, ahora se tiene que modificar algunas propiedades21) El EditText que se ha agregado aparece en el cdigo XML

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)TableLayout y TableRow22) Diseo generado hasta el momento

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)TableLayout y TableRow23) Seleccionar y arrastrar el TextView sobre el tercer TableRow24) Arrastrar y soltar sobre el tercer TableRow

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)TableLayout y TableRow25) El TextView ya se encuentra dentro del TableRows y se le borra el contenido de la propiedad Text

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)TableLayout y TableRow26) Seleccionar y arrastrar el Button sobre el Tercer TableRow27) Arrastrar y soltar sobre el tercer TableRow

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)TableLayout y TableRow28) El Button se logro insertar dentro del TableRow

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)TableLayout y TableRow29) Seleccionar y arrastrar el TextView sobre el cuarto TableRow30) Arrastrar y soltar sobre el cuarto TableRow

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)TableLayout y TableRow31) El TextView se ha agregado en el cdigo XML, adems se tiene que modificar sus propiedades32) Se le agrego estas propiedades

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)TableLayout y TableRow33) Diseo generado hasta el momento

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)TableLayout y TableRow34) Agregando color de fondo al TableLayout

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)TableLayout y TableRow35) Diseo final generado

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)GridLayout

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)GridLayout) Seleccionar y arrastrar el TextView sobre el GridLayout) Arrastrar y soltar sobre el GridLayout

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)GridLayout) Nuevamente Seleccionar y arrastrar el TextView sobre el GridLayout) Arrastrar y soltar sobre el GridLayout

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)GridLayout Ejemplo : Desarrollar el siguiente diseo

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)GridLayout Sobre el cdigo XML digitar lo siguiente :

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)GridLayout Mostrar el diseo :

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)GridLayout Este proceso se repite hasta que se ha logrado obtener el siguiente diseo:

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)FrameLayout Este layout consiste en un marco que ocupa toda la pantalla, y donde los controles se dispondrn a partir de la esquina superior izquierda, por lo que es probable que haya elementos que se queden ocultos detrs de otros.

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)FrameLayout

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


3)Aparece el FrameLayout


3)codigo XML generado


*********************************************************************************

Android Widgets Layout

Documents

radio buttonnombre

espacio posible fill

espacio necesario

contenedor basarn

contenido match

ocupa slo

widget x

nuevo nombre