Contenu connexe
Similaire à DISPOSITIVOS MÓVILES: MATERIAL DESIGN (20)
Plus de Jacinto Cabrera Rodríguez (20)
DISPOSITIVOS MÓVILES: MATERIAL DESIGN
- 6. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
Presentado durante el Google
I/O 2014, y bajo la autoría del
chileno Matías Duarte.
- 7. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
A partir de la versión 5.0 de
Android (API 21)
- 8. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
dependencies {
…
compile ‘com.android.support:design:22.2.0’
}
- 9. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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.
- 10. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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.
- 12. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
Está basado en objetos materiales.
Piezas colocadas en un espacio
(lugar) y con un tiempo
(movimiento) determinado.
- 13. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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.
- 14. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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.
- 15. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
CASILLAS BIEN ORDENADAS
COLORES E IMÁGENES LLAMATIVOS
TIPOGRAFÍAS CLARAS
LUCES Y SOMBRAS JERARQUIZADAS
- 21. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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
- 22. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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));
}
});
- 23. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
ELEMENTOS: PALETTE
dependencies {
…
compile ‘com.android.support:palette-v7:22.2.0’
}
- 27. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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>
- 28. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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());
...//…
- 31. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
TABLAYOUT
ACTION BAR
FLOATING ACTION BUTTON
TOOLBAR
NUEVAS LIBRERÍAS
- 32. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
NAVIGATORDRAWVER
RECYCLERVIEW
CARDVIEW
SNACKBAR
EDITTEXT/TEXTINPUTLAYOUT
NUEVAS LIBRERÍAS
- 34. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
TEXTINPUTLAYOUT
textColorHint
colorControlActivated
- 36. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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.
- 37. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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
- 38. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
TEXTINPUTLAYOUT
LABEL TEXT
INPUT TEXTROBOTO REGULAR 16P
ROBOTO REGULAR 12
- 39. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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>
- 40. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
TEXTINPUTLAYOUT: JAVA
import android.support.design.widget.TextInputLayout;
- 41. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
TEXTINPUTLAYOUT: JAVA
import android.widget.EditText;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.Patterns;
- 45. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
CARDVIEW
dependencies {
…
compile ‘com.android.support:cardview-v7:22.2.0’
}
- 46. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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>
- 47. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
contentPadding
cardUseCompatPadding
cardPreventCornerOverlap
cardMaxElevation
cardElevation
cardCornerRadius
CARDVIEW: XML
cardBackgroundColor
- 49. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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.
- 50. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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.
- 51. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
StaggeredGridLayoutManager
RECICLERVIEW: TIPOS DE LAYOUTMANAGER
GridLayoutManager
LinearLayoutManager
- 52. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW: TIPOS DE LAYOUTMANAGER
LinearLayoutManager
LinearLayoutManager linearLayoutManager = new
LinearLayoutManager( this,
LinearLayoutManager.VERTICAL, false);
LinearLayoutManager
- 53. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW: TIPOS DE LAYOUTMANAGER
LinearLayoutManager – LISTAS HORIZONTALES
- 54. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW: TIPOS DE LAYOUTMANAGER
GridLayoutManager
GridLayoutManager gridLayoutManager = new
GridLayoutManager ( this, 2,
GridLayoutManager.VERTICAL, false);
GridLayoutManager
- 55. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW: TIPOS DE LAYOUTMANAGER
GridLayoutManager - VISTAS RESPONSIVAS
final int columnas=
getResources().getInteger(R.integer. columnas);
GridLayoutManager gridLayoutManager = new
GridLayoutManager ( this, columnas,
GridLayoutManager.VERTICAL, false);
GridLayoutManager
<integer name=“columnas">1</integer>
<integer name=“columnas">2</integer>
VALUES
VALUES LARGOS
- 56. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW: TIPOS DE LAYOUTMANAGER
GridLayoutManager + SpanSizeLookup
Usando el metodo
setSpanSizeLookup(SpanSize
Lookup spanSizeLookup)
establecemos la cantidad de
spans que debe ocupar cada
elemento en el adaptador.
- 57. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW: TIPOS DE LAYOUTMANAGER
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
- 58. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW: TIPOS DE LAYOUTMANAGER
StaggeredGridLayoutManager
StaggeredGridLayoutManager staggeredGridLayoutManager
= new GridLayoutManager ( this, 2,
GridLayoutManager.VERTICAL, false);
staggeredGridLayoutManager.setGapStrategy(StaggeredGridL
ayoutManager.GAP_HANDLING_NONE);
StaggeredGridLayoutManager
- 59. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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.
- 60. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW
LAYOUTMANAGER RECYCLER
ADAPTADOR
OBTIENE LA VISTA
RECICLA LA VISTA
- 61. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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.
- 63. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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)
- 64. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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.
- 65. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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"/>
- 66. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW: JAVA
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
- 67. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
DECLARA ELEMENTOS DE ARQUITECTURA
RECICLERVIEW: JAVA
- 68. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW: JAVA
private RecyclerView recycler;
private RecyclerView.Adapter adapter;
private RecyclerView.LayoutManager lManager;
- 69. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
OBTIENE Y CONFIGURA EL RECYCLER
RECICLERVIEW: JAVA
- 70. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW: JAVA
recycler = (RecyclerView) findViewById(R.id.reciclador);
recycler.setHasFixedSize(true);
- 71. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
UTILIZA EL ADMINISTRADOR PARA LINEARLAYOUT
RECICLERVIEW: JAVA
- 72. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW: JAVA
lManager = new LinearLayoutManager(this);
recycler.setLayoutManager(lManager);
- 73. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
CREAMOS UN NUEVO ADAPTADOR
RECICLERVIEW: JAVA
- 74. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW: JAVA
adapter = new Adaptador(datos);
recycler.setAdapter(adapter);
- 75. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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---
}
- 76. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW: ADAPTADOR.JAVA
MÉTODOS
onBindViewHolder
onCreateViewHolder
- 78. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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.
- 80. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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
- 81. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
SNACKBAR
import android.support.design.widget.Snackbar;
- 82. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
CONTEXTO/VISTA
TEXTO
Snackbar.make()
DURACCIÓN
SNACKBAR: CONSTRUCCIÓN
- 83. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
SNACKBAR: CONSTRUCCIÓN
Snackbar.make(view, “TEXTO A MOSTRAR", Snackbar.LENGTH_LONG)
.setAction(“BOTON", new View.OnClickListener() {
@Override
public void onClick(View view) {
CÓDIGO RESPUESTA
}
})
.show();
- 84. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
SNACKBAR
<item name="colorAccent">@color/accentColor</item>
SNACKBAR: CONSTRUCCIÓN
ESTILOS
- 85. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
SNACKBAR: CONSTRUCCIÓN
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();
- 86. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
SNACKBAR: CONSTRUCCIÓN
ESTILOS
<android.support.design.widget.CoordinatorLayout
- 88. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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.
- 90. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
NAVIGATION DRAWER: APERTURA
DESLIZAMIENTO DESDE EL BORDE IZQUIERDO
TOCANDO EL ICONO DE LA APLICACIÓN
- 91. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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
- 95. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
NAVIGATION DRAWER: ELEMENTOS
ELEMENTOS PLEGABLES
CONTADORES
ICONOS
TÍTULOS
- 96. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
NAVIGATION DRAWER: ELEMENTOS
TÍTULOS – ICONOS - CONTADORES
- 97. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
NAVIGATION DRAWER: ELEMENTOS
ELEMENTOS PLEGABLES
- 100. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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>
- 101. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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.
- 102. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
NAVIGATION DRAWER: JAVA
SE REFERENCIA EL NAVIGATION DRAWER
SE DECLARA EL NAVIGATION DRAWER
- 103. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
NAVIGATION DRAWER: JAVA
private DrawerLayout drawerLayout;
drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
- 104. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
NAVIGATION DRAWER: JAVA
SE CREA UN ESCUCHADOR AL NAVIGATION DRAWER
- 105. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
NAVIGATION DRAWER: JAVA
navigationView.setNavigationItemSelectedListener(
new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
menuItem.setChecked(true);
..//..
return true;
}
}
);
- 107. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
dependencies {
…
compile 'de.hdodenhof:circleimageview:1.3.0'
}
NAVIGATION DRAWER: CIRCLEIMAGEVIEW
- 108. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
NAVIGATION DRAWER: CIRCLEIMAGEVIEW
<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" />
- 109. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
RecyclerView Y CustomView
RecyclerView.ItemAnimator
RecyclerView.ItemDecoration
ACTIVIDAD DE INVESTIGACIÓN
ESTILO DE LAS ETIQUETAS EN TEXTINPULAYOUT
- 110. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
PROGRAMACIÓN MULTIMEDIA
Y
DISPOSITIVOS MÓVILES