ANDROID ING.IVAN PETRLIK AZABACHE. COMPONENTES BASICOS DE TIPO VIEW FORM WIDGETS.

Slides:



Advertisements
Presentaciones similares
Escribir en un wiki. Insertar imágenes y enlaces
Advertisements

Excel.
PÁGINA WEB DEL INSTITUTO Manual de utilización. ¿Cómo colgar información en la página web? Para colgar información se necesita: Un programa de confección.
Curso de Excel #Unidad E9
Curso de Excel #Unidad 7 + BONUS Guillermo Díaz Sanhueza Mail: 11:00 AM, 12 de Septiembre Versión: Microsoft.
CREANDO HABITACIONES Para crear un cuarto, selecciona Add Room en el menu Add. Se muestra la siguiente ventana: : En la parte.
Cómo introducir información y editar contenidos en un curso Esta presentación nos va a permitir realizar la tarea de insertar el título a cada tema que.
Iniciación al Power Point
TABLAS EN WORD.
Lección 3 Cuadros de lista
Haciendo clic aquí obtenemos la Ficha de Formularios. Los formularios permiten la entrada o visualización de datos de tablas o consultas. Para crear un.
Hacer clic en la ficha Informes para crear un nuevo objeto.
Android – Interface Gráfica Rogelio Ferreira Escutia.
MENSAJE DEL DIA ALBERT EINSTEIN
GESTOR DE BASES DE DATOS RELACIONALES
INTRODUCIÓN A MICROSOFT EXCEL 2007
Lic. Manuel Álvaro Pacheco Hoyo
INFOMATICA EMPRESARIAL Principales Contenidos: Clase 26 de Mayo de 2012 Alejandra Meliza Caro Profesor.
DISEÑO SITIOS WEB CON HTML Los sitios html comienzan con el código de inicio y terminan con el código Así que ponemos Los sitios html se dividen en un.
PAQUETES COMPUTACIONALES POWER POINT. Arrancar PowerPoint.
DIVISIÓN DE POLINOMIOS 1
Excel de junio de 2014.
DESARROLLO DE APLICACIONES MOVILES I. Temas – CheckBox – Spinner.
Valor X Valor Y Punto (0,0) Coordenadas.
Es la tercera etiqueta de Excel de la banda de opciones.
TAMAÑO Y ORIENTACIÓN DEL PAPEL
Ejercicios: El entorno de photoshop
Taller de Blogs Parte 2 ¿Cómo mejorar nuestro blog?
Para crear relaciones en Access 2010 deberemos: - Pulsar el botón Relaciones de la pestaña Herramientas de base de datos. - O bien, desde el botón de.
INTRODUCCIÓN A:.
inicio y diseño de pagina
COMPONENTES PRINCIPALES DE LA PANTALLA DE POWER POINT 2007
Microsoft OFFICE Word MBA. Lida Loor Macías.
Layouts.
INTRODUCCIÓN Se lo define como un programa para PRESENTACIONES. En sus orígenes estaba orientado a la creación de diapositivas para esquematizar contenidos.
“Trabajando en Notepad”
Microsoft Office Excel 2007
GUARDAR UN DOCUMENTO Y ABRIR UN DOCUMENTO
¿CÓMO ESCRIBIR CON WRITER? Al escribir con Writer no debemos preocuparnos porque la línea se acabe. Si continuamos escribiendo veremos que cuando no quepa.
DISEÑO DE PAGINAS RUBEN DARIO CORDOBA.
INTRODUCCIÒN MICROSOFT WORD 1 eencasts/shared/player_776x600.aspx?scre enCast=wd07_overview.
Tema 5 procesador de textos; word
MICROSOFT EXCEL 2007 ELEMENTOS DE EXCEL. BOTON DE OFIFICE EN EL PODEMOS ENCONTRAR DIFERENTES OPCIONES DE CÓMO ABRIR, GUARDAR, IMPRIMIR DOCUMENTOS CREADOS.
Microsoft Office Excel
Realizado por: Prof. Luis Vallenilla. En el reto anterior cambiamos aspectos esenciales en el diseño del blog. Ahora incluiremos algunos elementos a ese.
Entorno Word DANIELA GALLEGO LOPEZ 11 S. Word - Diseño de pagina Icono – cuadro. Temas : Cambia el diseño general del documento(colores, tamaño, etc)
Taller
Como primer paso lo que tenemos que realizar es diseñar la tabla, asignando los valores que nosotros queramos que aparezcan. Tenemos que realizar 3 tablas,
Gonzalez Tellez Guadalupe Marina Reverte Materia :HTP Carrera :Derecho.
Entorno de trabajo de Microsoft Word 2007
Mediacentro Clase #2 de Excel I. Temario Insertar y eliminar: columnas filas y celdas Formatos de Celdas Formato de Filas, columnas y Hojas.
Introducción a phpMyAdmin
Ing. Vanessa Borjas. Entorno gráfico En un entorno gráfico se tiende a que cada uno de los programas esté compuesto por un formulario, aunque no es una.
Profesora: Angela Maiz
2012.  Los márgenes simétricos sirven para configurar páginas opuestas en documentos de doble cara, como libros o revistas.  En este caso, los márgenes.
Graficas en la pantalla 2D. Generalidades Para visualizar la gráfica correspondiente a una función de una variable o una ecuación de dos variables se.
TABLAS DINAMICAS – HERRAMIENTAS DE COLABORACION Y SEGURIDAD
Hacer clic en inicio Ir a todos los programas.
¿Cómo hacer los Wikis?. CREAR TU PROPIO WIKI PRIMERO, para registrarse se debe tener una cuenta de correo electrónico, se recomienda abrirlo en GMAIL.
A personalizar una tabla de datos editando bordes y sombreados para darle un aspecto mas presentable.
A continuación podrás conocer y llevar a cabo las operaciones propias de Configuración de Página en CALC. Haz click en el botón destacado.
LOGO Unidad ¿Qué incluye un tema de Power Point? a) Diseño de los marcadores b) Imágenes o formas con fondos gráficos c) Conjunto de Fuentes: Uno.
A continuación podrás conocer y llevar a cabo las operaciones propias de Formatos y Aspecto del Texto en CALC. Haz click en el botón destacado.
TABLAS EN PROCESADOR WRITER. INSERTAR UNA TABLA Método 1 Menú TABLA Opción INSERTAR / TABLA Método 2 Presionar Ctrl + F12 En la ventana que aparece se.
3era. Clase ramo informática aplicada Planilla de calculo.
Microsoft Word 3era. Unidad Desarrollado por: Guillermo Verdugo Bastias Docente Guillermo Verdugo Bastias.
C APACITACIÓN JAVA – ITM 2012 Sesión 1. INTRODUCCIÓN AL NETBEANS Creación de una calculadora con NetBeans.
P O W E R P O I N T CONCEPTOS BÁSICOS 1.
Iniciación a Android Cándido Caballero-Gil Doctor en Informática
Layouts.
Transcripción de la presentación:

ANDROID ING.IVAN PETRLIK AZABACHE

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 Largo del componente Ancho del componente Nombre del componente

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

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 : 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 componente Ancho del componente Largo del componente Texto o etiqueta del textview Este es el TextView

COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) BUTTON Nombre del componente Ancho del componente Largo del componente Texto del boton

COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) RADIOBUTTON Nombre del componente Ancho del componente Largo del componente Texto del radio button

COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) CHECKBOX Ancho del componente Texto del radio button Nombre del componente Largo del componente

COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) SPINNER Largo del componente Ancho del componente Nombre del componente

COMPONENTES BASICOS DE TIPO VIEW (DE FORM WIDGETS) PROGRESSBAR Nombre del componente Largo del componente Ancho del componente

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 se alinearán en una columna o en un fila, uno detrás de otro.

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) LINEARLAYOUT Orientación del contenedor Largo del contenedor Ancho 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) 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.

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.

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) RelativeLayout 1) Seleccionar y arrastrar al escenario 2) 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 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.

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) 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

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

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

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) TableLayout y TableRow 6) 4 Filas generadas 7) Allí se observa las 4 filas generadas en el OutLine

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

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) TableLayout y TableRow 10) El TextView que se ha agregado aparece en el código XML

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

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

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

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

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

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) TableLayout y TableRow 18) El TextView que se ha agregado aparece en el código XML

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

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) 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

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) TableLayout y TableRow 22) Diseño generado hasta el momento

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

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

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

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

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

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

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) TableLayout y TableRow 33) Diseño generado hasta el momento

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

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 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 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 siguiente diseño:

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.

COMPONENTES BASICOS DE TIPO VIEW ( LAYOUTS) FrameLayout 1) Seleccionar y arrastrar el FrameLayout sobre el escenario 2) 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