android widgets layout
DESCRIPTION
Android widgets layoutTRANSCRIPT
-
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
-
COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS)EditText
-
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
-
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 :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) LINEARLAYOUT
-
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
-
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 soltarlo sobre el escenario
-
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)RelativeLayout
5) Soltar el Button sobre el escenario
-
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)RelativeLayout
6) Otra vez Seleccionar y arrastrar el Button y soltarlo sobre el escenario
-
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)RelativeLayout
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
-
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 el GridLayout) Arrastrar y soltar sobre el GridLayout
-
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 GridLayout) Arrastrar y soltar sobre el GridLayout
-
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 GridLayout) Arrastrar y soltar sobre el GridLayout
-
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 GridLayout) Arrastrar y soltar sobre el GridLayout
-
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 diseo
-
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)GridLayout Sobre el cdigo XML digitar lo siguiente :
-
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 Sobre el cdigo XML digitar lo siguiente :
-
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)GridLayout Mostrar el 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 Sobre el cdigo XML digitar lo siguiente :
-
COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS)GridLayout Mostrar el 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
-
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
*********************************************************************************