Material Design es un nuevo sistema para el diseño visual, de interacción y movimiento. Inicialmente presentamos la
aplicación web de Topeka como un ejemplo de código abierto de
Material Design en la Web.
En la actualidad, publicamos un nuevo ejemplo de Material Design: La versión de Android de Topeka. Esta demuestra que es posible utilizar los mismos principios de marca y de Material Design para crear una experiencia consistente entre las plataformas. Consigue el código hoy
en GitHub.
Lo más interesante
Si bien el proyecto demuestra muchos aspectos diferentes sobre Material Design, centrémonos rápidamente en algunas de las partes más interesantes.
Transiciones
Topeka para Android presenta varias posibilidades para la implementación de transiciones. Para comenzar, la API de transiciones en
ActivityOptions ofrece una manera sencilla, pero efectiva, para realizar buenas transiciones entre las actividades.
Para lograrlo, registramos la cadena compartida en un archivo de recursos como este:
<resources>
<string name="transition_avatar">AvatarTransition</string>
</resources>
Lo usamos dentro de la vista de origen y de destino como transitionName.
<ImageView
android:id="@+id/avatar"
android:layout_width="@dimen/avatar_size"
android:layout_height="@dimen/avatar_size"
android:layout_marginEnd="@dimen/keyline_16"
android:transitionName="@string/transition_avatar"/>
Y luego hacemos que la transición actual se reproduzca en
SignInFragment.
private void performSignInWithTransition(View v) {
Activity activity = getActivity();
ActivityOptions activityOptions = ActivityOptions
.makeSceneTransitionAnimation(activity, v,
activity.getString(R.string.transition_avatar));
CategorySelectionActivity.start(activity, mPlayer, activityOptions);
activity.finishAfterTransition();
}
Para los participantes de transiciones múltiples con ActivityOptions, puedes observarlo en
CategorySelectionFragment.
Animaciones
Cuando se trata de animaciones más complejas, puedes dirigir tus propias animaciones tal como lo hicimos con la puntuación.
Para hacerlo de manera correcta, es importante asegurarse de que todos los elementos estén cuidadosamente organizados. La clase
AbsQuizView realiza un puñado de animaciones creadas cuidadosamente cuando se contesta una pregunta:
La animación comienza con un cambio de color para el botón de acción flotante (FAB), según la respuesta proporcionada. Después de que esto ha terminado, el botón se hace más pequeño y desaparece con una animación en escala. La vista que muestra la pregunta en sí también se mueve y desaparece de la pantalla. Modificamos la escala de esta vista hasta transformarse en un pequeño cuadrado verde antes de que se deslice hacia arriba detrás de la barra de la aplicación. Durante la modificación de la escala, el fondo de la vista cambia de color para que coincida con el color del FAB que acaba de desaparecer. Esto establece una continuidad en los diversos estados de preguntas del cuestionario.
Todo esto se produce en menos de un segundo. Presentamos una serie de pausas menores (demoras en el inicio) para que la animación no sea demasiado abrumadora, a la vez que nos aseguramos de que siga siendo rápida.
El código responsable de esto existe en
AbsQuizView a través del método performScoreAnimation.
Ubicación del FAB
Los
botones de acción flotantes recientemente anunciados son fantásticos para ejecutar las acciones promovidas. En el caso de Topeka, lo usamos para enviar una respuesta. El FAB también se extiende sobre dos superficies de diversas alturas, como el siguiente:
Para lograrlo, consultamos la altura de la vista superior (R.id.question_view) y luego ajustamos el relleno del botón FloatingActionButton una vez que la jerarquía de vista se ha dispuesto:
private void addFloatingActionButton() {
final int fabSize = getResources().getDimensionPixelSize(R.dimen.fab_size);
int bottomOfQuestionView = findViewById(R.id.question_view).getBottom();
final LayoutParams fabLayoutParams = new LayoutParams(fabSize, fabSize,
Gravity.END | Gravity.TOP);
final int fabPadding = getResources().getDimensionPixelSize(R.dimen.padding_fab);
final int halfAFab = fabSize / 2;
fabLayoutParams.setMargins(0, // left
bottomOfQuestionView - halfAFab, //top
0, // right
fabPadding); // bottom
addView(mSubmitAnswer, fabLayoutParams);
}
Para asegurarse de que esto solo suceda después del diseño inicial, usamos un OnLayoutChangeListener en el constructor de
AbsQuizView:
addOnLayoutChangeListener(new OnLayoutChangeListener() {
@Override
public void onLayoutChange(View v, int l, int t, int r, int b,
int oldLeft, int oldTop, int oldRight, int oldBottom) {
removeOnLayoutChangeListener(this);
addFloatingActionButton();
}
});
OutlineProvider redondo
La creación de máscaras circulares desde API 21 en adelante ahora es realmente simple. Simplemente extiende la clase
ViewOutlineProvider y anula el método getOutline() de la siguiente manera:
@Override
public final void getOutline(View view, Outline outline) {
final int size = view.getResources().
getDimensionPixelSize(R.id.view_size);
outline.setOval(0, 0, size, size);
}
y setClipToOutline(true) en la vista de destino para dibujar la sombra correcta.
Interfaces dibujables en vector
Utilizamos interfaces dibujables en vector para mostrar iconos en varios lugares de toda la aplicación. Es posible que estés al tanto de nuestra colección de
iconos de Material Design en GitHub que contiene cerca de 750 iconos para que los utilices. Lo mejor para los desarrolladores de Android: Desde Lollipop, puedes utilizar estas
VectorDrawables dentro de tus aplicaciones de modo que aporten nitidez, independientemente de cuál sea la densidad de pantalla del dispositivo. Por ejemplo: la flecha hacia atrás
ic_arrow_back de los iconos del repositorio se adaptaron al formato de elemento de diseño de interfaces dibujables en vector de Android.
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="48"
android:viewportHeight="48">
<path
android:pathData="M40 22H15.66l11.17-11.17L24 8 8 24l16 16 2.83-2.83L15.66 26H40v-4z"
android:fillColor="?android:attr/textColorPrimary" />
</vector>
Las interfaces dibujables en vector solo deben almacenarse una vez en la carpeta res/interfaces dibujables en vector. Esto significa que se usa menos espacio para los recursos de elemento de diseño.
Animaciones de propiedades
¿Sabías que puedes animar fácilmente cualquier propiedad de una vista más allá de las transformaciones estándar ofrecidas por la clase
ViewPropertyAnimator (y es una sintaxis práctica View#animate)? Por ejemplo: en
AbsQuizView podemos definir una propiedad para animar el color de fondo de una vista.
// Property for animating the foreground
public static final Property FOREGROUND_COLOR =
new IntProperty("foregroundColor") {
@Override
public void setValue(FrameLayout layout, int value) {
if (layout.getForeground() instanceof ColorDrawable) {
((ColorDrawable) layout.getForeground()).setColor(value);
} else {
layout.setForeground(new ColorDrawable(value));
}
}
@Override
public Integer get(FrameLayout layout) {
return ((ColorDrawable) layout.getForeground()).getColor();
}
};
Esto puede utilizarse más adelante a fin de animar los cambios para dicho color de fondo de un valor a otro, de la siguiente manera:
final ObjectAnimator foregroundAnimator = ObjectAnimator
.ofArgb(this, FOREGROUND_COLOR, Color.WHITE, backgroundColor);
Esto no es particularmente nuevo, ya que se ha agregado con la API 12, pero sigue siendo bastante práctico cuando quieres animar los cambios de color de manera sencilla.
Pruebas
Además de ejemplificar los componentes de Material Design, Topeka para Android también presenta una serie de pruebas de unidad e instrumentación que utilizan nuevas API de prueba, a saber “
Compatibilidad de pruebas de unidad de Gradle” y la “
Biblioteca de compatibilidad de pruebas de Android”. Las pruebas implementadas hacen más fuerte a la aplicación contra los cambios del modelo de datos. Esto detecta las rupturas a tiempo, ofrece mayor confianza en tu código y permite una reprogramación sencilla. Dale un vistazo a las carpetas
androidTest y
test para obtener más información sobre cómo se implementan estas pruebas dentro de Topeka. Para ahondar más en la realización de pruebas de Android, comienza a leer sobre las
herramientas de realización de pruebas.
¿Qué será lo siguiente?
Con Topeka para Android, puedes ver cómo Material Design te permite crear una experiencia más consistente a través de Android y la Web. El proyecto también destaca algunos de las mejores funciones de Material Design de Android 5.0 SDK y la nueva biblioteca de diseño de Android.
No dejes de revisar el
proyecto y comunícanos en el rastreador de problemas de proyectos si quisieras contribuir, o mediante
Google+ o
Twitter si tienes preguntas.
