7/25/2019 Material-Design-Expo.pdf

1/16

Material DesignTaller de desarrollo de aplicaciones para Tablets

Faride Hernndez Prez

G

o

o

g

l

e

Erick Osorio Snchez

Omar Hernndez Hernndez

Brenda Snchez Lpez

Dulce Nayeli Islas lvarez

Nlida Yulini Barrera Bautista

7/25/2019 Material-Design-Expo.pdf

2/16

Surface R

eaction

Es un evento de entrada, el sistema proporciona unaconfirmacin visual instantnea en el punto de contacto:debajo de la yema del dedo para el tacto, en el micrfonopara la voz, o en el campo apropiado para una prensateclado.

7/25/2019 Material-Design-Expo.pdf

3/16

Surface Reaction

7/25/2019 Material-Design-Expo.pdf

4/16

Picker

Es una "marca" que se puede utilizar para seleccionar una de un conjunto prede

de valores.

Date pickers:Se utiliza para seleccionar una fecha

mvil.

7/25/2019 Material-Design-Expo.pdf

5/16

Picker

Proporcionan una forma sencilla de seleccionar un nico valor de un conjunto

predeterminado.

Time pickers:

Se ajusta a la configuracin de tiempo un usuario, es decir, el formato de 12 h

horas.

Google

7/25/2019 Material-Design-Expo.pdf

6/16

Picker

7/25/2019 Material-Design-Expo.pdf

7/16

Mens

Men Principal

Los ms habituales, aparecen en la zona inferior de la pantalla alpulsar el botnmen del telfono.

7/25/2019 Material-Design-Expo.pdf

8/16

Mens

Submen

Son mens secundarios que se pueden mostrar aopcin de un men principal.

7/25/2019 Material-Design-Expo.pdf

9/16

Mens

Men contextual

tiles en muchas ocasiones, aparecen al realizar una pulsacin larga sobelemento de la pantalla

7/25/2019 Material-Design-Expo.pdf

10/16

ontroles de Seleccin

CheckboxLas casillas de verificacin permiten al usuario seleccionar mltiples opciones conjunto.

Google

7/25/2019 Material-Design-Expo.pdf

11/16

ontroles de Seleccin

LightOn: Swatch 500, Opacity 100%Off: #000000, Opacity 54%Disabled: #000000, Opacity 26%

DarkOn: Swatch 500, Opacity 100%Off: #FFFFFF, Opacity 70%Disabled: #FFFFFF, Opacity 30%

Google

7/25/2019 Material-Design-Expo.pdf

12/16

ontroles de Seleccin

Radio ButtonLos botones de opcin permiten al usuario seleccionar una opcin de un conjunto.

7/25/2019 Material-Design-Expo.pdf

13/16

ontroles de Seleccin

LightOn: Swatch 500, Opacity 100%Off: #000000, Opacity 54%Disabled: #000000, Opacity 26%

DarkOn: Swatch 500, Opacity 100%Off: #FFFFFF, Opacity 70%Disabled: #FFFFFF, Opacity 30%

Google

7/25/2019 Material-Design-Expo.pdf

14/16

ontroles de Seleccin

SwitchEncendido / apagado interruptores que alternan el estado de una opcin, con unaconfiguracin individual.

7/25/2019 Material-Design-Expo.pdf

15/16

ontroles de Seleccin

Light

Thumb On: Swatch 500, Opacity 100%Track On: Swatch 500, Opacity 50%Thumb Off: Grey 50, #FAFAFA, Opacity 100%Track Off: #000000, Opacity 26%Thumb Disabled: Grey 400, #BDBDBD, OpacitTrack Disabled: #000000, Opacity 12%

Dark

Thumb On: Swatch 200, Opacity 100%Track On: Swatch 200, Opacity 50%Thumb Off: Grey 400, #BDBDBD, Opacity 10Track Off: #FFFFFF, Opacity 30%Thumb Disabled: Grey 800, #424242, OpacitTrack Disabled: #FFFFFF, Opacity 10%

7/25/2019 Material-Design-Expo.pdf

16/16

Gracias por suAtencin

Google