A typical flow of a gallery app that changes the Shared Element after a Window Transition.

🌄 How did I get there?

Many apps that use images has some kind of feature to pick images from a gallery in order to add them in the app.

You can choose to use a default Intent to pick image and pray for user having some gallery app that resolves that Intent (usually all manufacturer have a default gallery app embedded).

And when you have to pick more than one image?

In most of case you don’t have an embedded solution or you have different user experiences that differ per app…

And when you have the same feature in more and more projects?

It’s better to build a library to do…


Image from Google

According to Material Design specs:

Animation can exist within all components of an app and at all scales, from finely detailed icons to key transitions and actions.

A menu icon that smoothly changes to an arrow serves dual functions: to inform the user and delight them when animation is used in ways beyond the obvious.


Some developers have difficult to code when the UI proposal is a bit “sophisticated” or “complex”. Many of them strip a lot of significant portion of the UI or even the Motion when they are coding, and the result ends up quite different of the original proposal.

This article talks about how would be to code an UI proposal, skipping some basic Android details and focusing on transition and animation approach.

MaterialUp

A great website where designers and developers can find and share resources to build apps and sites using Material Design. …


According to Material Design specs:

“Motion design can effectively guide the user’s attention in ways that both inform and delight. Use motion to smoothly transport users between navigational contexts, explain changes in the arrangement of elements on a screen, and reinforce element hierarchy.”

The app mustn’t let the user lose the focus on the content during animations. There’s a post from John Sherwin saying there are two kinds of animation: the ‘sparkle animation’ and the ‘obvious animation’:

“Sparkle animations are cool to look at, but generally pull our attention away from content or important tasks.”

“Obvious animations are exactly what…


Imagem do Google

De acordo com as especificações do Material Design:

“Animações podem existir dentro de todos os componentes de um aplicativo e em todas as escalas, desde ícones detalhados a transições-chave e ações.”

Um ícone de menu que suavemente se transforma em uma seta serve para duas funções: informar ao usuário e fasciná-lo quando uma animação é usada além do óbvio.


Acredito que não exista algum desenvolvedor Android que ainda não ouviu falar sobre o Material Design, uma vez que ele se tornou oficialmente um padrão de design.

Não era tão simples aplicar o Material Design em aplicações Android porque muitos componentes de interface do usuário (UI) como o Floating Action Button (FAB) não estavam disponíveis publicamente. Algumas das opções eram implementar o seu próprio componente ou usar alguma biblioteca de terceiro publicada por algum desenvolvedor independente Android.

Durante o Google I/O 2015, a Google anunciou uma importante biblioteca de suporte chamada Android Design Support Library que fornece uma série de…

André Mion

🇧🇷 Android Engineer living in 🇵🇹 • Full time Husband and Dad • Occasionally Drummer and Inline Skater… I write mostly about Android and Tech…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store