DISPOSITIVOS MÓVILES: MATERIAL DESIGN II

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
NAVIGATORDRAWVER
RECYCLERVIEW
CARDVIEW
TOOLBAR
ACTION BAR
TABLAYOUT
SNACKBAR
FLOATING ACTION BUTTON
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
FLOATING ACTION BUTTONS (FAB)

MATERIAL DESIGN
© J.D.CABRERA
FLOATING ACTION BUTTONS (FAB): TAMAÑO

MATERIAL DESIGN
© J.D.CABRERA
FLOATING ACTION BUTTONS (FAB): TAMAÑO
FAB NORMAL
ICONO 24 X 24 DP
CÍRCULO 56 X 65 DP
FAB MINI
ICONO 24 X 24 DP
CÍRCULO 40 X 40 DP

MATERIAL DESIGN
© J.D.CABRERA
FLOATING ACTION BUTTONS (FAB): FEEDBACK

MATERIAL DESIGN
© J.D.CABRERA
FLOATING ACTION BUTTONS (FAB): ICONO

MATERIAL DESIGN
© J.D.CABRERA
FLOATING ACTION BUTTONS (FAB): ASPECTO

MATERIAL DESIGN
© J.D.CABRERA
FLOATING ACTION BUTTONS (FAB): USO

MATERIAL DESIGN
© J.D.CABRERA
FLOATING ACTION BUTTONS (FAB): MORPHING

MATERIAL DESIGN
© J.D.CABRERA
FLOATING ACTION BUTTONS (FAB): PANTALLA COMPLETA

MATERIAL DESIGN
© J.D.CABRERA
FLOATING ACTION BUTTONS (FAB): PANTALLA GRANDE

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

MATERIAL DESIGN
© J.D.CABRERA
import android.support.design.widget.FloatingActionButton;

MATERIAL DESIGN
© J.D.CABRERA
<android.support.design.widget.FloatingActionButton
android:id="@+id/miboton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_bot"
app:fabSize="normal"
app:borderWidth="0dp" />

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: MEDIDAS EN MÓVIL

MATERIAL DESIGN
© J.D.CABRERA
SNACKBAR: MEDIDAS EN TABLET

MATERIAL DESIGN
© J.D.CABRERA
SNACKBAR
import android.support.design.widget.Snackbar;

MATERIAL DESIGN
© J.D.CABRERA
CONTEXTO/VISTA
TEXTO
Snackbar.make()
DURACCIÓN
SNACKBAR: CONSTRUCCIÓN

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
SNACKBAR
<item name="colorAccent">@color/accentColor</item>
ESTILOS

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
ESTILOS
<android.support.design.widget.CoordinatorLayout

MATERIAL DESIGN
© J.D.CABRERA
TABLAYOUT

MATERIAL DESIGN
© J.D.CABRERA
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
testCompile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:23.0.1'
compile 'com.android.support:design:22.2.0‘
}
TABS: BUILDS GRANDLE

MATERIAL DESIGN
© J.D.CABRERA
TABS CON MATERIAL DESIGN
<android.support.design.widget.TabLayout
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
app:tabMode="scrollable" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_height="0px"
android:layout_weight="1"
android:background="@android:color/white" />

MATERIAL DESIGN
© J.D.CABRERA
TABS CON MATERIAL DESIGN
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tabs05);
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
viewPager.setAdapter(new Adaptador(getSupportFragmentManager(),
Tabs05.this));
TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
tabLayout.setupWithViewPager(viewPager);
}

MATERIAL DESIGN
© J.D.CABRERA
TABS CON MATERIAL DESIGN: ESTILOS
MANIFEST
TEMA
STYLES
COLOR
DIMENS

MATERIAL DESIGN
© J.D.CABRERA
TABS CON MATERIAL DESIGN: TABS CON TOOLBAR
CODIGO
<android.support.design.widget.AppBarLayout
CODIGO
<android.support.v7.widget.Toolbar
CODIGO
<android.support.design.widget.TabLayout
CODIGO
</android.support.design.widget.AppBarLayout>
CODIGO
<android.support.v4.view.ViewPager
CODIGO
</android.support.design.widget.CoordinatorLayout>

MATERIAL DESIGN
© J.D.CABRERA
ACTION BAR CON TABS

MATERIAL DESIGN
© J.D.CABRERA
IMPLEMENTAMOS EL VIEWPAGER
AGREGAMOS LA TABLAYOUT
IMPLEMENTAMOS LA TOOLBAR
AGREGAMOS EL COORDINATORLAYOUT
IMPLEMENTAMOS LA APPBAR
PERSONALIZAMOS EL TEMA
ACTION BAR CON TABS

MATERIAL DESIGN
© J.D.CABRERA
ACTION BAR CON TABS
CÓDIGO
<android.support.design.widget.AppBarLayout>
CÓDIGO
<android.support.v7.widget.Toolbar>
CÓDIGO
<android.support.design.widget.TabLayout>
CÓDIGO
</android.support.design.widget.AppBarLayout>
CÓDIGO
<android.support.v4.view.ViewPager>
CÓDIGO
</android.support.design.widget.CoordinatorLayout>

MATERIAL DESIGN
© J.D.CABRERA
CREAMOS EL ADAPTADOR
ACTION BAR CON TABS

MATERIAL DESIGN
© J.D.CABRERA
ACTION BAR CON TABS
public class Adaptador extends FragmentPagerAdapter {
public Adaptador(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return null;
}
@Override
public CharSequence getPageTitle(int position) {
return null;
}
@Override
public int getCount() {
return 0;
}
}

MATERIAL DESIGN
© J.D.CABRERA
MODIFICAMOS EL CONSTRUCTOR
ACTION BAR CON TABS

MATERIAL DESIGN
© J.D.CABRERA
ACTION BAR CON TABS
public class Adaptador extends FragmentPagerAdapter {
int numeroDeSeciones
public Adaptador(FragmentManager fm, int numeroDeSeciones) {
super(fm);
this. numeroDeSeciones = numeroDeSeciones
}
..//..
@Override
public int getCount() {
return numeroDeSeciones;
}
}

MATERIAL DESIGN
© J.D.CABRERA
MODIFICAMOS EL MÉTODO getItem()
ACTION BAR CON TABS

MATERIAL DESIGN
© J.D.CABRERA
ACTION BAR CON TABS
@Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return new Fragmento1();
case 1:
case 2:
default:
return null;
}
}

MATERIAL DESIGN
© J.D.CABRERA
MODIFICAMOS EL MÉTODO getPageTitle()
ACTION BAR CON TABS

MATERIAL DESIGN
© J.D.CABRERA
ACTION BAR CON TABS
@Override
public CharSequence getPageTitle(int position) {
switch (position) {
case 0:
return new “TAB 1”;
case 1:
return new “TAB 2“ ;
case 2:
return new “TAB 3”;
default:
return null;
}
}

MATERIAL DESIGN
© J.D.CABRERA
SE CREA LA VISTA DE LOS FRAGMENTOS
SE CREA EL JAVA DE LOS FRAGMENTOS
ACTION BAR CON TABS

MATERIAL DESIGN
© J.D.CABRERA
SE GESTIONA EL INFLADO DEL MENÚ
SE CREA EL JAVA PRINCIPAL
ACTION BAR CON TABS

MATERIAL DESIGN
© J.D.CABRERA
ACTION BAR CON TABS
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_actionbar03, menu);
return true;
}

MATERIAL DESIGN
© J.D.CABRERA
SE INICIA LA TOOLBAR
ACTION BAR CON TABS

MATERIAL DESIGN
© J.D.CABRERA
ACTION BAR CON TABS
Toolbar toolbar = (Toolbar) findViewById(R.id.Toolbar);
setSupportActionBar(toolbar);

MATERIAL DESIGN
© J.D.CABRERA
SE INICIA AÑADEN PESTAÑAS
SE CONFIGURA EL TABLAYOUT
SE INICIA EL TABLAYOUT
ACTION BAR CON TABS

MATERIAL DESIGN
© J.D.CABRERA
ACTION BAR CON TABS
TabLayout tabLayout = (TabLayout)
findViewById(R.id.TabLayout);
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
tabLayout.setTabMode(TabLayout.MODE_FIXED);
tabLayout.addTab(tabLayout.newTab());

MATERIAL DESIGN
© J.D.CABRERA
VINCULAMOS ADAPTADOR Y VIEWPAGER
INICIALIZAMOS ADAPTADOR
SE INICIA EL VIEWPAGER
ACTION BAR CON TABS

MATERIAL DESIGN
© J.D.CABRERA
ACTION BAR CON TABS
private Adaptador Adaptador;
private ViewPager ViewPager;
@Override
protected void onCreate(Bundle savedInstanceState)
ViewPager = (ViewPager) findViewById(R.id.ViewPager);
Adaptador = new Adaptador(getSupportFragmentManager(),
tabLayout.getTabCount());
ViewPager.setAdapter(Adaptador);

MATERIAL DESIGN
© J.D.CABRERA
AÑADIMOS EL CAPTURADOR DE EVENTOS
ACTION BAR CON TABS

MATERIAL DESIGN
© J.D.CABRERA
ACTION BAR CON TABS
tabLayout.setupWithViewPager(ViewPager);

MATERIAL DESIGN
© J.D.CABRERA
TOOLBAR

MATERIAL DESIGN
© J.D.CABRERA
TOOLBAR
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="@dimen/elevation"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
tools:ignore="UnusedAttribute"/>

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

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
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: 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_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
RECICLERVIEW: JAVA
private RecyclerView recycler;
private RecyclerView.Adapter adapter;
private RecyclerView.LayoutManager lManager;

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

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

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

Más contenido relacionado

La actualidad más candente (7)

Similar a DISPOSITIVOS MÓVILES: MATERIAL DESIGN II (20)

Más de Jacinto Cabrera Rodríguez (20)

Último (9)

DISPOSITIVOS MÓVILES: MATERIAL DESIGN II