Recriando App Nubank — Parte 2 — Tela Principal

Com a nossa SplashActivity criada, agora é hora de implementar a tela principal, que chamaremos de DashboardActivity. Vamos começar analisando sua estrutura e dividindo os componentes para melhor visualização de sua implementação. Caso não tenha lido o primeiro artigo, onde mostro a abordagem utilizada na criação da SplashActivity, seu link encontra-se logo abaixo:

Recriando App Nubank — Parte 1 — SplashActivity

Estrutura do layout original

Destaquei na imagem abaixo os principais componentes que compõem a tela

1. ViewPager: apresenta o saldo da conta, assim como a última transação;
2. Menu principal;
3. Bottom Cards.

O menu principal e os bottom cards fazem parte da mesma tela e tem sua opacidade (alpha) alternada gradualmente de acordo com o posicionamento vertical da ViewPager, para que um não sobreponha o outro.

Implementando DashboardActivity

Menu Principal e Bottom Cards

Considerando que a lógica para montar esses dois componentes é basicamente a mesma, estarei apresentando apenas a lógica do menu principal, onde utilizo uma RecyclerView para tornar o componente mais dinâmico. De qualquer maneira, o código completo encontra-se no link no final do artigo.

Os arquivos de layout utilizados estão no GitHub (final da página).

Como iremos manipular e animar componentes em diversos momentos, procurei evitar o uso de ConstraintLayout por questões de performance. (https://android.jlelse.eu/constraint-layout-performance-870e5f238100).

MenuAccountEnum.kt

Note que no código acima já podemos definir o ícone do menu, o titulo e subtítulo (caso do “Perfil”)

MenuAccountAdapter.kt

O adapter recebe a lista de itens do menu e um callback para retornar o item clicado.

DashboardActivity.kt

Precisamos passar a lista de itens do menu ao adapter e associá-lo à RecyclerView responsável por montar o menu principal. Isso é feito na DashboardActivity:

Como temos um callback no MenuAccountAdapter, fica fácil trabalhar com as interações no menu, bastando apenas identificar qual MenuAccountEnum está sendo passado e fazer o devido tratamento.

ViewPager

Aqui vamos precisar implementar uma Custom ViewPager, pois, além do scroll horizontal default, também é possível mudar o seu posicionamento vertical dentro de um range específico, retornando um valor para que possa ser alternada a opacidade do menu principal e dos bottom cards. Devido a sua maior complexidade, decidi escrever sua implementação em um artigo dedicado, portanto, abordaremos a criação de um CustomViewPager no próximo artigo.

Acompanhe o desenvolvimento no GitHub:

arildojr7/nubank