DISPOSITIVOS MÓVILES: MATERIAL DESIGN

PROGRAMACIÓN MULTIMEDIA
Y
DISPOSITIVOS MÓVILES

PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
COMENZANDO A
PROGRAMAR

MATERIAL DESIGN
© J.D.CABRERA
MATERIAL DESIGN

MATERIAL DESIGN
© J.D.CABRERA
Presentado durante el Google
I/O 2014, y bajo la autoría del
chileno Matías Duarte.

MATERIAL DESIGN
© J.D.CABRERA
A partir de la versión 5.0 de
Android (API 21)

MATERIAL DESIGN
© J.D.CABRERA
dependencies {
…
compile ‘com.android.support:design:22.2.0’
}

MATERIAL DESIGN
© J.D.CABRERA
Google no la quiere aplicar
exclusivamente a dispositivos
móviles, sino que pretende
utilizar material design en todo
tipo de contenidos digitales.

MATERIAL DESIGN
© J.D.CABRERA
Es un concepto, una filosofía,
unas pautas enfocadas al
diseño utilizado en Android,
pero también en la web y en
cualquier plataforma.

MATERIAL DESIGN
© J.D.CABRERA

MATERIAL DESIGN
© J.D.CABRERA
Está basado en objetos materiales.
Piezas colocadas en un espacio
(lugar) y con un tiempo
(movimiento) determinado.

MATERIAL DESIGN
© J.D.CABRERA
Es un diseño donde la
profundidad, las superficies, los
bordes, las sombras y los colores
juegan un papel principal.

MATERIAL DESIGN
© J.D.CABRERA
Aproximándose a la realidad,
guiándose por las leyes de la física,
animaciones lógicas, con objetos
superpuestos pero que no puedan
atravesarse unos a otros.

MATERIAL DESIGN
© J.D.CABRERA
CASILLAS BIEN ORDENADAS
COLORES E IMÁGENES LLAMATIVOS
TIPOGRAFÍAS CLARAS
LUCES Y SOMBRAS JERARQUIZADAS

MATERIAL DESIGN
© J.D.CABRERA
ELEMENTOS DE DISEÑO

MATERIAL DESIGN
© J.D.CABRERA
ELEMENTOS: LA SUPERFICIE Y LA LUZ

MATERIAL DESIGN
© J.D.CABRERA
ELEMENTOS: COMBINACIONES DE COLOR

MATERIAL DESIGN
© J.D.CABRERA
ELEMENTOS: COLORES

MATERIAL DESIGN
© J.D.CABRERA
Palette es una librería que permite
extraer colores de una imagen, no
usarse en el hilo principal
ELEMENTOS: PALETTE

MATERIAL DESIGN
© J.D.CABRERA
ELEMENTOS: PALETTE
Palette.generateAsync(bitmap, new Palette.PaletteAsyncListener() {
@Override
public void onGenerated(Palette palette) {
titulo.setTextColor(palette.getLightVibrantColor(defaultTextColor));
autor.setTextColor(palette.getVibrantColor(defaultTextColor));
}
});

MATERIAL DESIGN
© J.D.CABRERA
ELEMENTOS: PALETTE
dependencies {
…
compile ‘com.android.support:palette-v7:22.2.0’
}

MATERIAL DESIGN
© J.D.CABRERA
ELEMENTOS: MOVIMIENTO

MATERIAL DESIGN
© J.D.CABRERA
ELEMENTOS: ELEVACIÓN

MATERIAL DESIGN
© J.D.CABRERA
ELEMENTOS: TRANSICIONES

MATERIAL DESIGN
© J.D.CABRERA
ELEMENTOS: TRANSICIONES
<android.support.v7.widget.CardView
android:stateListAnimator="@drawable/animacion”
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<set>
<objectAnimator android:propertyName="translationZ"
android:duration="@android:integer/config_shortAnimTime"
android:valueTo="10dp"
android:valueType="floatType"/>
</set>
</item>
<item android:state_pressed="false“ >
<set>
<objectAnimator android:propertyName="translationZ"
android:duration="100"
android:valueTo="2dp"
android:valueType="floatType"/>
</set>
</item>
</selector>

MATERIAL DESIGN
© J.D.CABRERA
ELEMENTOS: ELEVACIÓN
<button
android:stateListAnimator=“@anim/fab_animfab”
android:transictionName=“fab”
...//…
Intent in = new Intent (Primera.this, Segunda.class);
ActivityOptions opciones = ActivityOptions.makeSceneTransitionAnimation(
Primera.this, Pair.create(fabButton, "fab"));
startActivity(in, opciones.toBundle());
...//…

MATERIAL DESIGN
© J.D.CABRERA
ELEMENTOS: RIPPLES

MATERIAL DESIGN
© J.D.CABRERA
NUEVAS LIBRERÍAS

MATERIAL DESIGN
© J.D.CABRERA
TABLAYOUT
ACTION BAR
FLOATING ACTION BUTTON
TOOLBAR
NUEVAS LIBRERÍAS

MATERIAL DESIGN
© J.D.CABRERA
NAVIGATORDRAWVER
RECYCLERVIEW
CARDVIEW
SNACKBAR
EDITTEXT/TEXTINPUTLAYOUT
NUEVAS LIBRERÍAS

MATERIAL DESIGN
© J.D.CABRERA
TEXTINPULAYOUT

MATERIAL DESIGN
© J.D.CABRERA
TEXTINPUTLAYOUT
textColorHint
colorControlActivated

MATERIAL DESIGN
© J.D.CABRERA
TEXTINPUTLAYOUT

MATERIAL DESIGN
© J.D.CABRERA
TEXTINPUTLAYOUT
El foco en un campo de texto mueve el
hint hacia la parte superior, haciendo que
el usuario nunca pierda el contexto del
contenido que está escribiendo.

MATERIAL DESIGN
© J.D.CABRERA
TEXTINPUTLAYOUT
LABEL TEXT
INPUT TEXT
16
16
8
8
72
PADDING ABOVE LABEL TEXT
LABEL HEIGHT
PADDING BELOW INPUT TEXT
PADDING BETWEN TEXT
PADDING BELOW DIVIDER

MATERIAL DESIGN
© J.D.CABRERA
TEXTINPUTLAYOUT
LABEL TEXT
INPUT TEXTROBOTO REGULAR 16P
ROBOTO REGULAR 12

MATERIAL DESIGN
© J.D.CABRERA
TEXTINPUTLAYOUT: XML
<android.support.design.widget.TextInputLayout
app:counterEnabled="true"
app:counterMaxLength="30"
app:errorEnabled="true">
<EditText
..//..
</android.support.design.widget.TextInputLayout>

MATERIAL DESIGN
© J.D.CABRERA
TEXTINPUTLAYOUT: JAVA
import android.support.design.widget.TextInputLayout;

MATERIAL DESIGN
© J.D.CABRERA
TEXTINPUTLAYOUT: JAVA
import android.widget.EditText;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.Patterns;

MATERIAL DESIGN
© J.D.CABRERA
CARDVIEW

MATERIAL DESIGN
© J.D.CABRERA
CARDVIEW
NIVELES EN PANTALLA

MATERIAL DESIGN
© J.D.CABRERA
CARDVIEW
dependencies {
…
compile ‘com.android.support:cardview-v7:22.2.0’
}

MATERIAL DESIGN
© J.D.CABRERA
CARDVIEW: XML
<android.support.V7.widget.CardView
card_view:cardCornerRadius="4dp"
card_view:cardElevation="4dp"
card_view:cardUseCompatPadding="true">
<Relativelayout
..//..
</android.support. V7.widget.CardView>

MATERIAL DESIGN
© J.D.CABRERA
contentPadding
cardUseCompatPadding
cardPreventCornerOverlap
cardMaxElevation
cardElevation
cardCornerRadius
CARDVIEW: XML
cardBackgroundColor

MATERIAL DESIGN
© J.D.CABRERA
RECYCLERVIEW

MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW
Es una clase que hereda de ViewGroup
que permite mostrar grandes
colecciones o conjuntos de datos pero
solo se dedica a reciclar vistas, otros
componentes serán responsables de
acceder a los datos y mostrarlos.

MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW
RecyclerView necesita del método
setLayoutManager(LayoutManager
layout) para asignar un tipo de layout que
le indique cómo debe renderizar, dando
origen a un patrón por composición.

MATERIAL DESIGN
© J.D.CABRERA
StaggeredGridLayoutManager
RECICLERVIEW: TIPOS DE LAYOUTMANAGER
GridLayoutManager
LinearLayoutManager

MATERIAL DESIGN
© J.D.CABRERA
LinearLayoutManager
LinearLayoutManager linearLayoutManager = new
LinearLayoutManager( this,
LinearLayoutManager.VERTICAL, false);
LinearLayoutManager

MATERIAL DESIGN
© J.D.CABRERA
LinearLayoutManager – LISTAS HORIZONTALES

MATERIAL DESIGN
© J.D.CABRERA
GridLayoutManager
GridLayoutManager gridLayoutManager = new
GridLayoutManager ( this, 2,
GridLayoutManager.VERTICAL, false);
GridLayoutManager

MATERIAL DESIGN
© J.D.CABRERA
GridLayoutManager - VISTAS RESPONSIVAS
final int columnas=
getResources().getInteger(R.integer. columnas);
GridLayoutManager gridLayoutManager = new
GridLayoutManager ( this, columnas,
GridLayoutManager
<integer name=“columnas">1</integer>
<integer name=“columnas">2</integer>
VALUES
VALUES LARGOS

MATERIAL DESIGN
© J.D.CABRERA
GridLayoutManager + SpanSizeLookup
Usando el metodo
setSpanSizeLookup(SpanSize
Lookup spanSizeLookup)
establecemos la cantidad de
spans que debe ocupar cada
elemento en el adaptador.

MATERIAL DESIGN
© J.D.CABRERA
GridLayoutManager + SpanSizeLookup
gridLayoutManager.setSpanSizeLookup(new
GridLayoutManager.SpanSizeLookup()
@Override
public int getSpanSize(int position) {
int index = postion % 5;
switch(index){
case 0: return 1;
case 1: return 2;
case 2: return 1;
}
});
GridLayoutManager
SpanSizeLookup

MATERIAL DESIGN
© J.D.CABRERA
StaggeredGridLayoutManager staggeredGridLayoutManager
= new GridLayoutManager ( this, 2,
staggeredGridLayoutManager.setGapStrategy(StaggeredGridL
ayoutManager.GAP_HANDLING_NONE);

MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW
RecyclerView nos brinda un nuevo
componente de nombre Recycler una
clase encargada de gestionar si una vista
será (desechada o separada) scrapped or
detached para su reutilización.

MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW
LAYOUTMANAGER RECYCLER
ADAPTADOR
OBTIENE LA VISTA
RECICLA LA VISTA

MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW
Si un vista es scrapped indica que continúa
enlazada con el RecyclerView pero se ha
marcado para su posible eliminación o
reutilización. Cuando es reutilizada es
considerada dirty y el adaptador es quien debe
volver a enlazarla antes de ser mostrada.

MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW
RECYLER POOL
SCRAP HEAP

MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW: SCRAP HEAP
Es donde podemos interactuar con las vistas que
no estás utilizando en el momento pero vas a
volver a utilizar de forma inmediata, se consigue
mediante el método detachAndScrapView(View
child, Recycler recycler)

MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW: RECYCLER POOL
Es donde encuentran las vistas que no
necesitamos más y utilizando el método
removeAndRecycleView(View child, Recycler
recycler) removemos las vistas.

MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW: XML
<android.support.v7.widget.RecyclerView
android:id="@+id/reciclador"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="3dp"
android:scrollbars="vertical"
android:background="@color/colorDivider"/>

MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW: JAVA
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

MATERIAL DESIGN
© J.D.CABRERA
DECLARA ELEMENTOS DE ARQUITECTURA
RECICLERVIEW: JAVA

MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW: JAVA
private RecyclerView recycler;
private RecyclerView.Adapter adapter;
private RecyclerView.LayoutManager lManager;

MATERIAL DESIGN
© J.D.CABRERA
OBTIENE Y CONFIGURA EL RECYCLER
RECICLERVIEW: JAVA

MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW: JAVA
recycler = (RecyclerView) findViewById(R.id.reciclador);
recycler.setHasFixedSize(true);

MATERIAL DESIGN
© J.D.CABRERA
UTILIZA EL ADMINISTRADOR PARA LINEARLAYOUT
RECICLERVIEW: JAVA

MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW: JAVA
lManager = new LinearLayoutManager(this);
recycler.setLayoutManager(lManager);

MATERIAL DESIGN
© J.D.CABRERA
CREAMOS UN NUEVO ADAPTADOR
RECICLERVIEW: JAVA

MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW: JAVA
adapter = new Adaptador(datos);
recycler.setAdapter(adapter);

MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW: ADAPTADOR.JAVA
public class Adaptador extends RecyclerView.Adapter<Adaptador.AnimeViewHolder> {
private List<Encapsulador> items;
public static class AnimeViewHolder extends RecyclerView.ViewHolder {
--- ITEMS---
}

MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW: ADAPTADOR.JAVA
MÉTODOS
onBindViewHolder
onCreateViewHolder

MATERIAL DESIGN
© J.D.CABRERA
SNACKBAR

MATERIAL DESIGN
© J.D.CABRERA
SNACKBAR
Muestra feedback sobre alguna operación
realizada por el usuario, y es similar a un
toast ya que aparece en pantalla por un
corto periodo de tiempo y después
desaparece automáticamente.

MATERIAL DESIGN
© J.D.CABRERA
APARECE DESDE EL INFERIOR DE LA PANTALLA
SOLO PUEDE MOSTRARSE UN AL MISMO TIEMPO
DEBE MOSTRAR MENSAJES CORTOS
PUEDE DESCARTARSE HACIA UN LATERAL
SNACKBAR

MATERIAL DESIGN
© J.D.CABRERA
Snackbar.make(view, “TEXTO A MOSTRAR", Snackbar.LENGTH_LONG)
.setAction(“BOTON", new View.OnClickListener() {
@Override
public void onClick(View view) {
CÓDIGO RESPUESTA
}
})
.show();

MATERIAL DESIGN
© J.D.CABRERA
ESTILOS
Snackbar.make(view, “TEXTO A MOSTRAR", Snackbar.LENGTH_LONG)
.setActionTextColor(getResources().getColor(R.color.snackbar_action))
View snackBarView = snackbar.getView();
snackBarView.setBackgroundColor(getResources().getColor(R.color.snackbar_background));
TextView tv = (TextView) snackBarView.findViewById(android.support.design.R.id.snackbar_text);
tv.setTextColor(getResources().getColor(R.color.snackbar_message));
.setAction(“BOTON", new View.OnClickListener() {
@Override
public void onClick(View view) {
CÓDIGO RESPUESTA
}
})
.show();

MATERIAL DESIGN
© J.D.CABRERA
NAVIGATION DRAWER
Es un nuevo interfaz de usuario en forma de un
panel lateral que puede contener el menú
principal u otras opciones de navegación de la
App, y que permanece oculto por defecto.

MATERIAL DESIGN
© J.D.CABRERA
NAVIGATION DRAWER: APERTURA
DESLIZAMIENTO DESDE EL BORDE IZQUIERDO
TOCANDO EL ICONO DE LA APLICACIÓN

MATERIAL DESIGN
© J.D.CABRERA
PRESIONANDO EL BOTÓN ATRÁS
TOCANDO EL CONTENIDO FUERA DEL NAVIGATION
NAVIGATION DRAWER: CIERRE
DESLIZAMIENTO HACIA EL BORDE IZQUIERDO
TOCANDO EL ICONO DE LA APLICACIÓN

MATERIAL DESIGN
© J.D.CABRERA
NAVIGATION DRAWER: XML
<android.support.v4.widget.DrawerLayout
<include layout="@layout/contenido" />
<android.support.design.widget.NavigationView
android:id="@+id/navigation“
app:headerLayout="@layout/cabecera"
app:menu="@menu/menu_navegacion" />
</android.support.v4.widget.DrawerLayout>

MATERIAL DESIGN
© J.D.CABRERA
NAVIGATION DRAWER: DRAWERLAYOUT
Un DrawerLayout es un contenedor especial de
la librería de soporte, que alberga dos tipos de
contenido, el contenido principal y el
contenido para el Navigation Drawer.

MATERIAL DESIGN
© J.D.CABRERA
private DrawerLayout drawerLayout;
drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

MATERIAL DESIGN
© J.D.CABRERA
navigationView.setNavigationItemSelectedListener(
new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
menuItem.setChecked(true);
..//..
return true;
}
}
);

MATERIAL DESIGN
© J.D.CABRERA
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/circle_image"
android:layout_width=“20dp"
android:layout_height=“20dp"
android:layout_marginBottom="16dp"
android:scaleType="centerCrop"
android:src="@drawable/imagen"
app:border_color="@android:color/white"
app:border_width="1dp" />

MATERIAL DESIGN
© J.D.CABRERA
RecyclerView Y CustomView
RecyclerView.ItemAnimator
RecyclerView.ItemDecoration
ACTIVIDAD DE INVESTIGACIÓN
ESTILO DE LAS ETIQUETAS EN TEXTINPULAYOUT

DISPOSITIVOS MÓVILES: MATERIAL DESIGN

DISPOSITIVOS MÓVILES: MATERIAL DESIGN

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to DISPOSITIVOS MÓVILES: MATERIAL DESIGN

Similar to DISPOSITIVOS MÓVILES: MATERIAL DESIGN (20)

More from Jacinto Cabrera Rodríguez

More from Jacinto Cabrera Rodríguez (20)

DISPOSITIVOS MÓVILES: MATERIAL DESIGN