Posted:
Publicado por Ben Weiss, Developer Programs Engineer by +Nicolás Bortolotti

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.
Consulta más detalles en el paquete outlineprovider de Topeka para Android.

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.

Si bien el proyecto solo es compatible actualmente con API 21+, ya existe una solicitud de función pendiente para admitir versiones anteriores, utilizando herramientas como AppCompat y la nueva Biblioteca de compatibilidad para Android Design.

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.

Posted:
Publicado por Benjamin Frenkel, Gerente de producto

Para brindar más apoyo a los desarrolladores de juegos, actualizamos nuestras populares herramientas de desarrolladores para ofrecerte una serie de servicios de juego consistente a través de todas las plataformas, esto permite tener una experiencia más estable y mejor, con un enfoque particular en las mejoras del complemento Unity de los servicios de Play Game. Además, agregamos soporte para la API de conexión cercana, presentada a principios de este año en la conferencia de desarrolladores de videojuegos (GDC), para nuestro SDK de C++ y complemento de Unity.

Analicémoslo más de cerca.

Mejoras en la paridad y estabilidad de la función del complemento de Unity

Agregamos soporte completo para los eventos y desafíos en el complemento de Unity. Si eres un desarrollador de Unity, ahora puedes incorporar desafíos en tus juegos y aprovechar al máximo Player Analytics de forma nativa dentro del IDE de Unity.
También tuvimos en cuenta las opiniones de nuestra comunidad de usuarios sobre el complemento de Unity y realizamos mejoras en la estabilidad de Play Game en cuanto a los servicios de multijugador, partidas guardadas y de inicio de sesión. Ahora tendrás una experiencia mucho mejor que integra estos servicios de Play Game, con menos bloqueos y fallas.

Soporte para SDK de C++ y Unity para la API de conexiones cercanas

Agregamos soporte para la API de conexiones cercanas a nuestro SDK de C++ y complemento de Unity. Ahora puedes desarrollar fácilmente experiencias fantásticas de pantalla doble y de multijugador local, como se demuestra en este ejemplo del juego Beach Bugging Racing, mediante las herramientas de desarrollo con las que estás más familiarizado.

Desarrollo de iOS más fácil y estable con CocoaPods

También realizamos mejoras considerables en CocoaPods de nuestros servicios de Play Game, que simplifica la gestión de dependencia y el desarrollo de paquetes de App Store desde Xcode. CocoaPods mejorará el desarrollo de iOS con los servicios de Play Game para iOS y los SDK de C++, y el complemento de Unity. También mejoramos la estabilidad de multijugador en iOS, al eliminar muchos de los problemas en torno a la aceptación de invitaciones para partidas.
Finalmente, mejoramos nuestro soporte para iOS 8, lo que facilita la configuración de notificaciones push de multijugador y soluciona los problemas de compatibilidad de la IU.

Página de desarrolladores de servicios de Play Game: https://developers.google.com/games/services/
Estudios de casos: http://developer.android.com/distribute/stories/games.html

Descargas
by +Nicolás Bortolotti

Posted:
Publicado por Sean Meng,  Marketing, AdMob by +Nicolás Bortolotti
¡Estamos muy contentos! Hoy anunciamos el lanzamiento del Kit empresarial para desarrolladores de aplicaciones en 10 idiomas más. El sitio web incluye sugerencias para los nuevos desarrolladores de aplicaciones para que puedan crear, promocionar y monetizar su aplicación. Dale un vistazo al kit empresarial, según tu idioma:
Con el objetivo de ayudarte a tomar decisiones acerca el crecimiento del negocio para tu aplicación a otras regiones, agregamos 6 nuevos informes de mercado que proporcionan una excelente información sobre el mercado de usuarios de aplicaciones en Italia, España, Alemania, Brasil, Francia y Rusia. ¿Sabías que los usuarios de smartphones en Brasil interactúan con los anuncios publicitarios con mayor frecuencia que los usuarios de Estados Unidos y Japón? ¿O que aproximadamente dos tercios de los usuarios franceses descargan exclusivamente aplicaciones gratuitas y solo el 31% de los usuarios de smartphones brasileros lo hacen? Aquí puedes consultar estadísticas acerca de las diversas regiones alrededor del mundo.


No pierdas contacto y mantente informado sobre el mundo móvil; síguenos en Google+ y en Twitter.

Posted:
Autor Fabian Schlup, Ingeniero de Software

A partir de ahora, los enlaces cortos goo.gl funcionarán como enlaces únicos que podrás utilizar para todo tu contenido, independientemente de si está en tu aplicación de Android, iOS o en tu sitio web. Cuando hayas seguido los pasos necesarios para configurar la indexación de aplicaciones para Android y iOS, las URL de goo.gl enviarán a los usuarios directamente a la página correcta de tu aplicación si la tienen instalada y, si no es así, a tu sitio web. Esto ofrece muchas más oportunidades a los usuarios de interactuar de nuevo con tu aplicación.

Esta característica funciona con las nuevas URL cortas y con las anteriores de forma retroactiva, de modo que todos los enlaces cortos goo.gl que ya existían para tu contenido también enviarán ahora a los usuarios a tu aplicación.
Fig.1 Zillow comparte una URL corta en Twitter que enlaza de forma automática a su aplicación nativa

Compartir enlaces que "hacen lo correcto"

Saca el máximo partido a esta función mediante la integración de la API de acortamiento de URL en el flujo de contenido compartido de tu aplicación. De esta manera, los usuarios podrán compartir enlaces que redireccionen automáticamente a tu aplicación nativa en todas las plataformas. Además, otros usuarios podrán insertar enlaces en sus sitios web y aplicaciones que lleven directamente a tu aplicación.

Veamos el ejemplo de Google Maps. Gracias a los nuevos enlaces goo.gl para todas las plataformas, el botón de compartir de Maps genera un enlace óptimo para todos.

Cuando se abre, el enlace detecta de forma automática la plataforma del usuario y si este tiene Maps instalado. Si tiene la aplicación instalada, el enlace corto abre el contenido directamente en la aplicación Maps en Android o en iOS. En caso contrario o si el usuario utiliza un ordenador, el enlace corto abre la página en el sitio web de Maps.

Pruébalo tú mismo. No te olvides de usar un teléfono con la aplicación Google Maps instalada: http://goo.gl/maps/xlWFj.

Configuración

Para configurar enlaces profundos de aplicaciones en goo.gl:
  1. Sigue los pasos necesarios para participar en la indexación de aplicaciones para Android y iOS descritos en g.co/AppIndexing. Ten en cuenta que los enlaces profundos goo.gl están abiertos a todos los desarrolladores de iOS a diferencia de los enlaces profundos de Búsqueda actuales. Después de este paso, los enlaces cortos goo.gl comenzarán a actuar de enlaces profundos y enviarán a los usuarios a tu aplicación.
  2. (Opcional) Integra la API de acortamiento de URL en el flujo de contenido compartido de tu aplicación, tus campañas de correo electrónico, etc. para generar automáticamente enlaces profundos que envíen a los usuarios a tu aplicación.
Esperamos que disfrutes de esta nueva funcionalidad y que se compartan muchos contenidos tuyos en todas las plataformas. by +Nicolás Bortolotti

Posted:
Llevamos un tiempo ayudando a los usuarios a descubrir contenido relevante de aplicaciones Android en los resultados de búsqueda de Google. Desde hoy, esta tecnología de indexación llega también a las aplicaciones de iOS. Esto significa que los usuarios de ambas plataformas, Android e iOS, podrán abrir contenido de aplicaciones para móviles directamente desde la Búsqueda de Google.

Los enlaces indexados, procedentes de un grupo inicial de aplicaciones con las que hemos estado trabajando, comenzarán a aparecer en iOS en los resultados de búsqueda en los próximos días tanto en la aplicación Google como en Chrome para los usuarios de todo el mundo que hayan iniciado sesión:

Fig.1

Cómo hacer que tu aplicación de iOS sea indexada

Aunque la indexación de aplicaciones para iOS ha comenzado su recorrido inicialmente para un pequeño grupo de socios de prueba, estamos trabajando para ampliar la disponibilidad de esta tecnología a un mayor número de desarrolladores de aplicaciones. Hasta que llegue ese momento, sigue estos pasos para obtener las ventajas que proporciona la indexación de aplicaciones para iOS:

1. Permite que se puedan añadir enlaces profundos en tu aplicación de iOS.
2. Asegúrate de que sea posible volver a los resultados de la Búsqueda con un clic.
3. Proporciona anotaciones con enlaces profundos en tu sitio web.
4. Comunícanos tu interés por esta tecnología. Ten en cuenta que expresar tu interés no garantiza automáticamente que los enlaces profundos de aplicaciones de iOS aparezcan en los resultados de búsqueda.

Si vas a asistir al Google I/O esta semana, no te pierdas nuestra presentación titulada “Get your app in the Google index” (Consigue que tu aplicación sea indexada por Google), donde podrás aprender más sobre el indexado de aplicaciones. También encontrarás documentación detallada sobre la indexación de aplicaciones para iOS en g.co/AppIndexing.
Si tienes más preguntas, pásate por nuestro foro de ayuda para webmasters.


Publicado por Eli Wald, Director de producto by +Nicolás Bortolotti

Posted:
Ankur Kotwal, Ingeniero de software

El espíritu navideño se centra en la capacidad de dar, y aunque estamos a principios de abril, aún conservamos ese espíritu. Hoy anunciamos que Sigue a Papá Noel de Google ahora es de código abierto en GitHub, podrás encontrarlo en google/santa-tracker-web y en google/santa-tracker-android. Ahora puedes ver cómo utilizamos muchos de los productos de nuestros desarrolladores para crear una experiencia divertida que se ejecuta en la Web y en Android.

Fig.1
Sigue a Papá Noel no solo sirve para ver el trayecto de Papá Noel mientras reparte regalos el 24 de diciembre. Los visitantes también pueden divertirse con los juegos inspirados en la temporada invernal y con una villa interactiva en el Polo Norte mientras Papá Noel se prepara para su largo viaje durante las fiestas.

A continuación se proporciona un resumen de lo que se lanzará como código abierto:

Aplicación para Android


  • La aplicación para Android "Sigue a Papá Noel" es un APK compatible con todos los dispositivos que funcionan con Ice Cream Sandwich (4.0) y posteriores. Puedes encontrar el código fuente de la aplicación aquí.

Fig.2

  • La villa de Papá Noel es un lanzador gráfico de videos, juegos y del rastreador. Para poder distribuir 10.000 píxeles de ancho, la villa utiliza la jerarquía de recursos de Android de una forma única para escalar gráficos sin la necesidad de utilizar objetos para depósitos de múltiples densidades, reduciendo así el tamaño del APK.
  • Los juegos en Sigue a Papá Noel se crearon mediante una combinación de tecnologías como JBox2D (juego de Gumball), jerarquía de vista de Android (juego de la memoria) y OpenGL con un motor de representación diseñado para este fin (juego de jetpack).
  • Para ayudar con la interactividad del usuario, la aplicación utiliza la API de indexación de aplicaciones a fin de permitir el uso de autocompletado en los juegos de Sigue a Papá Noel desde la búsqueda de Google. Esto se logra mediante el uso la técnica de enlaces profundos.

Fig.3

Android Wear



Fig.4

En la Web

Fig.5

  • Sigue a Papá Noel en la Web se creó con Polymer, una nueva y potente biblioteca del equipo de Chrome, basada en componentes web. La utilización de Polymer en Sigue a Papá Noel demuestra lo fácil que es empaquetar código en componentes reutilizables. Cada escena de la villa de Papá Noel (juegos, videos y páginas interactivas) es un elemento personalizado que solo se carga cuando es necesario, y esto minimiza el costo de inicio de Sigue a Papá Noel.
  • La experiencia interactiva y divertida de Sigue a Papá Noel se crea mediante el uso de la API de animaciones web: una API de JavaScript estandarizada que unifica el contenido animado; esto representa un enorme avance respecto al uso de animaciones CSS. Las animaciones web se pueden escribir de forma imperativa, son compatibles con todos los navegadores modernos a través de polyfills, y Polymer las utiliza internamente para crear sus increíbles efectos de Diseño material. Puedes encontrar ejemplos de esas animaciones a través de esta búsqueda en GitHub.

Fig.6



Ahora que también está disponible el código fuente, los desarrolladores podrán ver cómo se integran las partes que forman a Sigue a Papá Noel. Esperamos que le sirva de inspiración a los desarrolladores, y que puedan crear sus propias experiencias llenas de magia.

Ankur Kotwal, Ingeniero de software by +Nicolas Bortolotti

Posted:
TinyBytes, una de las startups integrantes de Launchpad nos cuenta su experiencia día a día en el desarrollo de videojuegos:

Nuestra interacción con Google empieza con el comienzo de cada nuevo juego. Desarrollamos en Unity para Android, que es la plataforma más sencilla y práctica para desarrollar, con lo que la mayoría de las veces prototipamos juegos que primero corren en Android.  

Una vez que esos juegos están medianamente avanzados, los subimos al Google Beta Testing y pedimos feedback de los jugadores. Seguimos iterando y puliendo el juego hasta lanzar una versión más avanzada (algo parecido a un Producto Mínimo Viable) en Google Play para unos pocos países, donde medimos el comportamiento de los usuarios. 

Si vemos que los usuarios vuelven al juego después de varios días, seguimos incorporando features y contenido al juego, haciéndolo cada vez mejor. Por otro lado, Google Docs nos permite guardar muchas listas de ideas y prioridades que compartimos con el equipo para su seguimiento en el tiempo. 

Una vez que el juego esta listo con los features y el contenido planeado y pasa los controles de calidad, trabajamos en los assets de marketing, y lo lanzamos en Google Play mundialmente. 

Nuestros juegos están integrados con Google Game Services, permitiendo a los usuarios registrarse con su cuenta de Google+ para así tener acceso a leaderboards y achievements de Google y competir contra amigos y otros usuarios. 

Uno de los aspectos más satisfactorios de trabajar en Android es que en pocas horas (o minutos!) el juego esta publicado y disponible para su descarga en Google Play. El backend de Google Play para la carga de textos y assets es sencillo e intuitivo.



En desarrollo de juegos para móvil, los tiempos son claves. Como desarrolladores, queremos saber cuanto antes qué piensan nuestros usuarios sobre el juego para poder mejorarlo, o alternativamente trabajar en ofrecerles otro juego aún mejor. Es por eso que Android y Google Play son de gran ayuda en game development, y lo recomendamos ampliamente.   

Si tu también quieres formar parte del programa Launchpad y disfrutar de sus beneficios accede aquí.

Este post ha sido escrito por TiniBytes, startup chilena parte del programa #Launchpad. Editor by +Nicolas Bortolotti