Contenu connexe
Similaire à DISPOSITIVOS MÓVILES: MATERIAL DESIGN II (20)
Plus de Jacinto Cabrera Rodríguez (20)
DISPOSITIVOS MÓVILES: MATERIAL DESIGN II
- 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
NAVIGATORDRAWVER
RECYCLERVIEW
CARDVIEW
TOOLBAR
ACTION BAR
TABLAYOUT
SNACKBAR
FLOATING ACTION BUTTON
EDITTEXT/TEXTINPUTLAYOUT
NUEVAS LIBRERÍAS
- 33. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
TEXTINPUTLAYOUT
textColorHint
colorControlActivated
- 35. 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.
- 36. 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
- 37. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
TEXTINPUTLAYOUT
LABEL TEXT
INPUT TEXTROBOTO REGULAR 16P
ROBOTO REGULAR 12
- 38. 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>
- 39. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
TEXTINPUTLAYOUT: JAVA
import android.support.design.widget.TextInputLayout;
- 40. 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;
- 44. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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
- 53. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
FLOATING ACTION BUTTONS (FAB): PANTALLA COMPLETA
- 54. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
FLOATING ACTION BUTTONS (FAB): PANTALLA GRANDE
- 55. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
dependencies {
…
compile ‘com.android.support:design:22.2.0’
}
FLOATING ACTION BUTTONS (FAB)
- 56. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
import android.support.design.widget.FloatingActionButton;
FLOATING ACTION BUTTONS (FAB)
- 57. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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" />
FLOATING ACTION BUTTONS (FAB)
- 59. 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.
- 61. 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
- 65. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
SNACKBAR
import android.support.design.widget.Snackbar;
- 66. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
CONTEXTO/VISTA
TEXTO
Snackbar.make()
DURACCIÓN
SNACKBAR: CONSTRUCCIÓN
- 67. 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();
- 68. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
SNACKBAR
<item name="colorAccent">@color/accentColor</item>
SNACKBAR: CONSTRUCCIÓN
ESTILOS
- 69. 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();
- 70. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
SNACKBAR: CONSTRUCCIÓN
ESTILOS
<android.support.design.widget.CoordinatorLayout
- 72. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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
- 73. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
TABS CON MATERIAL DESIGN
<android.support.design.widget.TabLayout
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"
android:background="@android:color/white" />
- 74. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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);
}
- 75. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
TABS CON MATERIAL DESIGN: ESTILOS
MANIFEST
TEMA
STYLES
COLOR
DIMENS
- 76. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
TABS CON MATERIAL DESIGN: TABS CON TOOLBAR
<android.support.design.widget.CoordinatorLayout
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>
- 78. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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
- 79. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
ACTION BAR CON TABS
<android.support.design.widget.CoordinatorLayout
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>
- 81. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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;
}
}
- 82. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
MODIFICAMOS EL CONSTRUCTOR
ACTION BAR CON TABS
- 83. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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;
}
}
- 84. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
MODIFICAMOS EL MÉTODO getItem()
ACTION BAR CON TABS
- 85. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
ACTION BAR CON TABS
@Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return new Fragmento1();
case 1:
return new Fragmento2();
case 2:
return new Fragmento3();
default:
return null;
}
}
- 86. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
MODIFICAMOS EL MÉTODO getPageTitle()
ACTION BAR CON TABS
- 87. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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;
}
}
- 88. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
SE CREA LA VISTA DE LOS FRAGMENTOS
SE CREA EL JAVA DE LOS FRAGMENTOS
ACTION BAR CON TABS
- 89. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
SE GESTIONA EL INFLADO DEL MENÚ
SE CREA EL JAVA PRINCIPAL
ACTION BAR CON TABS
- 90. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
ACTION BAR CON TABS
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_actionbar03, menu);
return true;
}
- 92. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
ACTION BAR CON TABS
Toolbar toolbar = (Toolbar) findViewById(R.id.Toolbar);
setSupportActionBar(toolbar);
- 93. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
SE INICIA AÑADEN PESTAÑAS
SE CONFIGURA EL TABLAYOUT
SE INICIA EL TABLAYOUT
ACTION BAR CON TABS
- 94. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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());
tabLayout.addTab(tabLayout.newTab());
tabLayout.addTab(tabLayout.newTab());
- 95. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
VINCULAMOS ADAPTADOR Y VIEWPAGER
INICIALIZAMOS ADAPTADOR
SE INICIA EL VIEWPAGER
ACTION BAR CON TABS
- 96. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
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);
- 97. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
AÑADIMOS EL CAPTURADOR DE EVENTOS
ACTION BAR CON TABS
- 98. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
ACTION BAR CON TABS
tabLayout.setupWithViewPager(ViewPager);
- 100. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
TOOLBAR
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="@dimen/elevation"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
tools:ignore="UnusedAttribute"/>
- 102. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
ACTION BAR CON TABS
Toolbar toolbar = (Toolbar) findViewById(R.id.Toolbar);
setSupportActionBar(toolbar);
- 103. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
NAVIGATORDRAWVER
RECYCLERVIEW
CARDVIEW
SNACKBAR
EDITTEXT/TEXTINPUTLAYOUT
NUEVAS LIBRERÍAS
- 107. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
CARDVIEW
dependencies {
…
compile ‘com.android.support:cardview-v7:22.2.0’
}
- 108. 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>
- 109. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
contentPadding
cardUseCompatPadding
cardPreventCornerOverlap
cardMaxElevation
cardElevation
cardCornerRadius
CARDVIEW: XML
cardBackgroundColor
- 111. 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.
- 112. 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.
- 113. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
StaggeredGridLayoutManager
RECICLERVIEW: TIPOS DE LAYOUTMANAGER
GridLayoutManager
LinearLayoutManager
- 114. 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
- 115. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW: TIPOS DE LAYOUTMANAGER
LinearLayoutManager – LISTAS HORIZONTALES
- 116. 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
- 117. 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
- 118. 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.
- 119. 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
- 120. 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
- 121. 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.
- 122. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW
LAYOUTMANAGER RECYCLER
ADAPTADOR
OBTIENE LA VISTA
RECICLA LA VISTA
- 123. 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.
- 125. 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)
- 126. 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.
- 127. 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"/>
- 128. 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;
- 129. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
DECLARA ELEMENTOS DE ARQUITECTURA
RECICLERVIEW: JAVA
- 130. 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;
- 131. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
OBTIENE Y CONFIGURA EL RECYCLER
RECICLERVIEW: JAVA
- 132. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW: JAVA
recycler = (RecyclerView) findViewById(R.id.reciclador);
recycler.setHasFixedSize(true);
- 133. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
UTILIZA EL ADMINISTRADOR PARA LINEARLAYOUT
RECICLERVIEW: JAVA
- 134. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW: JAVA
lManager = new LinearLayoutManager(this);
recycler.setLayoutManager(lManager);
- 135. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
CREAMOS UN NUEVO ADAPTADOR
RECICLERVIEW: JAVA
- 136. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW: JAVA
adapter = new Adaptador(datos);
recycler.setAdapter(adapter);
- 137. 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---
}
- 138. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
RECICLERVIEW: ADAPTADOR.JAVA
MÉTODOS
onBindViewHolder
onCreateViewHolder
- 140. 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.
- 142. 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
- 143. 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
- 147. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
NAVIGATION DRAWER: ELEMENTOS
ELEMENTOS PLEGABLES
CONTADORES
ICONOS
TÍTULOS
- 148. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
NAVIGATION DRAWER: ELEMENTOS
TÍTULOS – ICONOS - CONTADORES
- 149. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
NAVIGATION DRAWER: ELEMENTOS
ELEMENTOS PLEGABLES
- 152. 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>
- 153. 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.
- 154. 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
- 155. 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);
- 156. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
NAVIGATION DRAWER: JAVA
SE CREA UN ESCUCHADOR AL NAVIGATION DRAWER
- 157. 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;
}
}
);
- 159. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
dependencies {
…
compile 'de.hdodenhof:circleimageview:1.3.0'
}
NAVIGATION DRAWER: CIRCLEIMAGEVIEW
- 160. 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" />
- 161. 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
- 162. PROGRAMACIÓN MULTIMEDIA Y DISPOSITIVOS MÓVILES
MATERIAL DESIGN
© J.D.CABRERA
PROGRAMACIÓN MULTIMEDIA
Y
DISPOSITIVOS MÓVILES