Android Lollipop Material Design Trick ofrece una experiencia de usuario más refinada

En Android 5.0, uno de los conceptos clave de Material Design Specification es usar la elevación para promover los elementos de la interfaz de usuario en términos de importancia percibida. De acuerdo con la documentación y el ejemplo proporcionado por Google, siempre que el dispositivo esté ejecutando Lollipop o mejor, solo configure la propiedad de elevación y el marco manejará el efecto de sombra.

Sin embargo, en mis pruebas con Android 5.0 y 5.0.1, la documentación no menciona una advertencia muy importante: si tu dibujable aplica un alfa, la propiedad de elevación se ignora. Para ver este comportamiento, siga el tutorial a continuación o descargue e importe todo el proyecto directamente en Android Studio.

1. Cree un nuevo proyecto de Android en Android Studio. Objetivo SDK 21 o superior.

2. En la carpeta /res/drawable, cree una nueva forma xml. (Esta definición xml dibujable se tomó directamente de la documentación de Google sobre la personalización de las sombras de vista).

square.xml




3. En la carpeta /res/layout, edite su archivo activity_main.xml para incluir: una vista de imagen, algunos botones y un widget de vista de texto.

activity_main.xml

4. En el archivo /java/MainActivity.java, conecte oyentes de dos clics para subir y bajar la propiedad de elevación.

MainActivty.java
package com.authorwjf.shadows;

importar android.app.Actividad;
importar android.os.Bundle;
importar android.view.View;
importar android.widget.TextView;

clase pública MainActivity extiende la actividad implementa View.OnClickListener {

@Pasar otra
vacío protegido onCreate (paquete saveInstanceState) {
super.onCreate(estadoDeInstanciaGuardado);
setContentView(R.diseño.actividad_principal);
findViewById(R.id.raise).setOnClickListener(this);
findViewById(R.id.lower).setOnClickListener(this);
}

@Pasar otra
public void onClick(Ver v) {
int elevación = Integer.parseInt(((TextView) findViewById(R.id.label)).getText().toString());
if (v.getId()==R.id.raise) {
elevación+=5;
} otro {
elevación-=5;
}
si (elevación<0) {
elevación=0;
} más si (elevación>100) {
elevación=100;
}
findViewById(R.id.img).setElevation(elevación);
((TextView) findViewById(R.id.label)).setText(Integer.toString(elevation));
}
}

En este punto, esperaría que a medida que sube y baja la elevación, verá que el marco proyecta una sombra para indicar visualmente el eje Z. Puede verlo en la captura de pantalla a continuación (Figura A), este no es el caso. La vista de la imagen siempre parece tener una elevación de cero, a pesar de que la propiedad expuesta indique lo contrario.

Figura A


Lo que encontré después de buscar en Google y experimentar es que si el fondo asignado a su vista contiene un alfa, los efectos de sombra incorporados no funcionan. Me tomé la libertad de eliminar el alfa del dibujo XML anterior.

square.xml




Ahora la aplicación se comporta como se esperaba (Figura B). Es una diferencia sutil, pero creo que es una gran parte de lo que es el diseño de materiales: diferencias sutiles que permiten una experiencia de usuario (UX) más refinada.

Figura B



Si quieres conocer otros artículos similares a Android Lollipop Material Design Trick ofrece una experiencia de usuario más refinada puedes visitar la categoría Android.

Artículos de interés

Android Lollipop Material Design Trick ofrece una experiencia de usuario más refinada

En Android 5.0, uno de los conceptos clave de Material Design Specification es usar la elevación para promover los elementos de la interfaz de usuario en términos de importancia percibida. De acuerdo con la documentación y el ejemplo proporcionado por Google, siempre que el dispositivo esté ejecutando Lollipop o mejor, solo configure la propiedad de elevación y el marco manejará el efecto de sombra.

Sin embargo, en mis pruebas con Android 5.0 y 5.0.1, la documentación no menciona una advertencia muy importante: si tu dibujable aplica un alfa, la propiedad de elevación se ignora. Para ver este comportamiento, siga el tutorial a continuación o descargue e importe todo el proyecto directamente en Android Studio.

1. Cree un nuevo proyecto de Android en Android Studio. Objetivo SDK 21 o superior.

2. En la carpeta /res/drawable, cree una nueva forma xml. (Esta definición xml dibujable se tomó directamente de la documentación de Google sobre la personalización de las sombras de vista).

square.xml




3. En la carpeta /res/layout, edite su archivo activity_main.xml para incluir: una vista de imagen, algunos botones y un widget de vista de texto.

activity_main.xml

4. En el archivo /java/MainActivity.java, conecte oyentes de dos clics para subir y bajar la propiedad de elevación.

MainActivty.java
package com.authorwjf.shadows;

importar android.app.Actividad;
importar android.os.Bundle;
importar android.view.View;
importar android.widget.TextView;

clase pública MainActivity extiende la actividad implementa View.OnClickListener {

@Pasar otra
vacío protegido onCreate (paquete saveInstanceState) {
super.onCreate(estadoDeInstanciaGuardado);
setContentView(R.diseño.actividad_principal);
findViewById(R.id.raise).setOnClickListener(this);
findViewById(R.id.lower).setOnClickListener(this);
}

@Pasar otra
public void onClick(Ver v) {
int elevación = Integer.parseInt(((TextView) findViewById(R.id.label)).getText().toString());
if (v.getId()==R.id.raise) {
elevación+=5;
} otro {
elevación-=5;
}
si (elevación<0) {
elevación=0;
} más si (elevación>100) {
elevación=100;
}
findViewById(R.id.img).setElevation(elevación);
((TextView) findViewById(R.id.label)).setText(Integer.toString(elevation));
}
}

En este punto, esperaría que a medida que sube y baja la elevación, verá que el marco proyecta una sombra para indicar visualmente el eje Z. Puede verlo en la captura de pantalla a continuación (Figura A), este no es el caso. La vista de la imagen siempre parece tener una elevación de cero, a pesar de que la propiedad expuesta indique lo contrario.

Figura A


Lo que encontré después de buscar en Google y experimentar es que si el fondo asignado a su vista contiene un alfa, los efectos de sombra incorporados no funcionan. Me tomé la libertad de eliminar el alfa del dibujo XML anterior.

square.xml




Ahora la aplicación se comporta como se esperaba (Figura B). Es una diferencia sutil, pero creo que es una gran parte de lo que es el diseño de materiales: diferencias sutiles que permiten una experiencia de usuario (UX) más refinada.

Figura B



Si quieres conocer otros artículos similares a Android Lollipop Material Design Trick ofrece una experiencia de usuario más refinada puedes visitar la categoría Android.

Artículos de interés

Subir

Si continuas utilizando este sitio aceptas el uso de cookies. Más información