Entendendo o Bug do Menu, Link de Cadastro e Parcelize - Android M-Commerce

Receba em primeira mão, e com prioridade, os conteúdos Android exclusivos do Blog. Você receberá um email de confirmação. Somente depois de confirma-lo é que poderei lhe enviar os conteúdos exclusivos.

Email inválido.
Blog /Android /Entendendo o Bug do Menu, Link de Cadastro e Parcelize - Android M-Commerce

Entendendo o Bug do Menu, Link de Cadastro e Parcelize - Android M-Commerce

Vinícius Thiengo
(522) (1)
Go-ahead
"A atividade que você está mais evitando contém sua maior oportunidade."
Robin S. Sharma
Kotlin Android
Capa do livro Desenvolvedor Kotlin Android - Bibliotecas para o dia a dia
TítuloDesenvolvedor Kotlin Android - Bibliotecas para o dia a dia
CategoriasAndroid, Kotlin
AutorVinícius Thiengo
Edição
Capítulos19
Páginas1035
Acessar Livro
Treinamento Oficial
Android: Prototipagem Profissional de Aplicativos
CursoAndroid: Prototipagem Profissional de Aplicativos
CategoriaAndroid
InstrutorVinícius Thiengo
NívelTodos os níveis
Vídeo aulas186
PlataformaUdemy
Acessar Curso
Receitas Android
Capa do livro Receitas Para Desenvolvedores Android
TítuloReceitas Para Desenvolvedores Android
CategoriaDesenvolvimento Android
AutorVinícius Thiengo
Edição
Ano2017
Capítulos20
Páginas936
Acessar Livro
Código Limpo
Capa do livro Refatorando Para Programas Limpos
TítuloRefatorando Para Programas Limpos
CategoriaEngenharia de Software
AutorVinícius Thiengo
Edição
Ano2017
Capítulos46
Páginas599
Acessar Livro
Quer aprender a programar para Android? Acesse abaixo o curso gratuito no Blog.
Conteúdo Exclusivo
Receba em primeira mão, e com prioridade, os conteúdos Android exclusivos do Blog.
Email inválido

Tudo bem?

Neste artigo vamos continuar com o projeto Android BlueShoes, nosso aplicativo de mobile-commerce. Aqui realizaremos algumas atualizações importantes, atualizações "esquecidas" em aulas anteriores.

Também explicaremos o "bug" presente no menu gaveta de usuário conectado:

Animação do bug no app Android BlueShoes

Antes de prosseguir, não deixe de se inscrever 📫 na lista de emails do Blog para ter acesso exclusivo às novas aulas e a outros conteúdos sobre o desenvolvimento Android.

A seguir os tópicos abordados:

Conheci somente agora o projeto Android BlueShoes

Este é o seu primeiro contato com o projeto Android BlueShoes? Se sim, saiba que esta é a 12ª aula e que é importante você seguir todas as aulas na ordem correta, isso para ter um melhor aproveitamento de tudo que é apresentado.

Lembrando que mesmo que você seja um completo iniciante no desenvolvimento Android, está série também será útil a ti, isso, pois estamos desenvolvendo o projeto do zero.

A seguir as aulas liberadas até antes deste artigo:

As aulas são liberadas semanalmente para a lista de e-mails 📩 do Blog, logo, não esqueça de se inscrever.

Como seguiremos com as atualizações

Apesar de o terma "atualizações" está sendo utilizado com frequência neste artigo, o trabalho aqui não deixe de ser também uma refatoração.

E a estratégia abordada é a mesma já apresentada em outras aulas:

  • Primeiro o trabalho em códigos estáticos, por ser mais simples e ainda importante;
  • Por fim o trabalho de atualização em códigos dinâmicos.

Antes de prosseguir, saiba que todo o projeto está disponível no GitHub dele, já atualizado: https://github.com/viniciusthiengo/blueshoes-kotlin-android.

Atualizando a barra de topo

A barra de topo das atividades do aplicativo Android BlueShoes está atualmente com a seguinte configuração de design:

Barra de topo atual das atividades

Mas a configuração esperada é a seguinte:

Barra de topo esperada nas atividades

Neste caso o que precisamos é de simples atualizações em alguns trechos de códigos estáticos. Primeiro, no arquivo /res/values/styles.xml, devemos adicionar dois novos estilos:

  • Um para a atualização do título (cor, negrito e família de fonte);
  • O outro para a atualização de cor de qualquer ícone em barra de topo, mesmo o ícone hambúrguer de menu gaveta.

Segue atualização em /res/values/styles.xml, adicione os trechos em destaque:

<resources>
...

<!--
Para colocarmos as cores, tamanho, negrito e família
de fonte corretos no título da Toolbar.
-->
<style
name="TitleAppearance"
parent="@android:style/TextAppearance">

<item name="android:fontFamily">@font/pathway_gothic_one_regular</item>
<item name="android:textSize">22sp</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">@color/colorText</item>
</style>

<!--
Para colocarmos a cor correta nos ícones da Toolbar.
-->
<style
name="Toolbar"
parent="ThemeOverlay.AppCompat.Dark.ActionBar">

<item name="colorControlNormal">@color/colorText</item>
</style>
</resources>

 

E agora a adição dos novos estilos a Toolbar das atividades, presente em /res/layout/app_bar.xml:

...
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/Toolbar"
app:popupTheme="@style/AppTheme.PopupOverlay"
app:titleTextAppearance="@style/TitleAppearance" />
...

 

Adicione os trechos em destaque, android:themeapp:titleTextAppearance.

Assim já temos a barra de topo como previsto:

Barra de topo atualizada das atividades

Trabalhando a atividade principal

Para a atividade principal, MainActivity, primeiro temos uma ação simples a ser adicionada, algo que implicará em mudança também em outras atividades.

E depois vamos a apresentação e discussão de um problema encontrado em um dos menu gaveta do projeto.

Ação no link de cadastro

O link de cadastro presente no cabeçalho do menu gaveta de "usuário não conectado" não está funcional:

Animação do link de cadastro não funcional

Para adicionar a funcionalidade de abertura da atividade SignUpActivity vamos, na MainActivity, criar o método callSignUpActivity():

...
fun callSignUpActivity( view: View ){
val intent = Intent(
this,
SignUpActivity::class.java
)
startActivity( intent )
}
...

 

Agora, no layout de cabeçalho de menu gaveta de "usuário não conectado", /res/layout/nav_header_user_not_logged.xml, atualize o último TextView para conter o atributo android:onClick como a seguir:

...
<TextView
android:id="@+id/tv_sign_up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@+id/tv_or"
android:layout_toEndOf="@+id/tv_or"
android:layout_centerVertical="true"
android:textColor="@color/colorLink"
android:text="@string/tx_me_sign_up"
android:onClick="callSignUpActivity"/>
...

 

Ainda é preciso atualizar um trecho na SignUpActivity, mais precisamente o trecho de acionamento da atividade de login, que atualmente está como a seguir:

...
fun callLoginActivity( view: View ){
finish()
}
...

 

Mas agora sabemos que não será somente a LoginActivity capaz de acionar a SignUpActivity, sendo assim podemos atualizar o método callLoginActivity() como abaixo:

...
fun callLoginActivity( view: View ){
/*
* Para evitar que tenhamos mais de uma
* LoginActivity na pilha de atividades.
* */
if( ActivityUtils.isActivityExistsInStack( LoginActivity::class.java ) ){
finish()
}
else{
val intent = Intent( this, LoginActivity::class.java )
startActivity( intent )
}
}
...

 

Mas Thiengo, se não me engano, e eu estou mesmo acompanhando o projeto, também será preciso atualizar a LoginActivity, mais precisamente o método callSignUpActivity(), certo?

Correto! Segue a nova configuração do método callSignUpActivity() em LoginActivity:

...
fun callSignUpActivity( view: View ){
/*
* Para evitar que tenhamos mais de uma
* SignUpActivity na pilha de atividades.
* */
if( ActivityUtils.isActivityExistsInStack( SignUpActivity::class.java ) ){
finish()
}
else{
val intent = Intent(
this,
SignUpActivity::class.java
)
startActivity( intent )
}
}
...

 

A classe ActivityUtils está presente na biblioteca AndroidUtilCode que adicionamos ao projeto em aulas anteriores. Os novos condicionais dos métodos call*() anteriores fazem valer o seguinte fluxograma:

Fluxograma do condicional de callSignUpActivity() em LoginActivity

Entendendo o Bug do menu gaveta

Com o código do aplicativo BlueShoes até este ponto do projeto, se você acessar as opções "Meus pedidos" ou "Sair" do menu gaveta de "usuário conectado" e logo depois acessar a opção "Minhas configurações". Desta forma, na volta da atividade de configurações de conta ocorrerá um crash:

Animação do problema do menu gaveta de usuário conectado

Ok Thiengo, isso é um bug, certo?

Não, não é um bug. Na verdade a condição "item acionador de atividade voltando a estar selecionado" nunca ocorrerá quando o usuário estiver voltando de uma atividade que foi acionada por algum item de menu gaveta.

Somente "itens acionadores de fragmentos" é que poderão voltar a ser selecionados após o usuário retornar de alguma atividade acionada via item de menu gaveta.

Sendo assim, o que parece ser um bug é na verdade uma limitação encontrada de acordo com o estado atual do projeto.

Assim que colocarmos funcionalidade nas opções "Meus pedidos" e "Sair" este problema não mais ocorrerá.

Dando uma atualizada no segundo fluxograma da aula anterior, "volta a MainActivity", temos:

Fluxograma 'volta a MainActivity' atualizado

Atualizando o domínio de problema

Essa é uma das vantagens de programar em equipe. Pois mesmo que eu esteja "tocando o barco" aqui, algumas das dicas de vocês nos artigos, e-mails ou vídeos são valiosas.

Com uma dessas dicas nós estaremos atualizando a classe User de nosso domínio do problema para consideravelmente diminuirmos a quantidade de códigos presente nela.

@Parcelize em User

Que a classe User precisa implementar o Parcelable nós já sabemos, alias ela já faz isso. Atualmente esta classe está como a seguir:

class User(
val name: String,
val image: Int,
val status: Boolean = false
) : Parcelable {

constructor(source: Parcel) : this(
source.readString(),
source.readInt(),
1 == source.readInt()
)

override fun describeContents() = 0

override fun writeToParcel(dest: Parcel, flags: Int) = with(dest) {
writeString(name)
writeInt(image)
writeInt((if (status) 1 else 0))
}

companion object {
const val KEY = "user-key"

@JvmField
val CREATOR: Parcelable.Creator<User> = object : Parcelable.Creator<User> {
override fun createFromParcel(source: Parcel): User = User(source)
override fun newArray(size: Int): Array<User?> = arrayOfNulls(size)
}
}
}

 

É, eu sei, não fomos nós que realmente colocamos todo o código do Parcelable em User, foi um plugin. Mesmo assim o código está presente na classe e uma coisa eu lhe garanto: até o final do projeto a classe User será muito mais ampla, tendo de comportar ainda mais dados.

Sendo assim, o que podemos fazer é ainda utilizarmos um plugin, mas o plugin kotlin-android-extensions, que desde a versão 1.1.4 do Kotlin nos permite utilizarmos a anotação @Parcelize para obtermos a implementação do Parcelable sem a necessidade de todo o código padrão desta Interface, isso em tempo de desenvolvimento.

Nossa primeira atualização aqui é no Gradle Nível de Aplicativo, build.gradle (Module: app). Nele adicione o trecho em destaque:

...

dependencies {
...
}

androidExtensions {
experimental = true
}

 

Sincronize o projeto.

E sim. O @Parcelize é parte do conjunto de APIs de kotlin-android-extensions que ainda estão em versão experimental. Mas para os nossos objetivos ele está funcionando "redondo", sendo assim vamos prosseguir com esta API.

Agora a atualização na classe User:

@Parcelize
class User(
val name: String,
val image: Int,
val status: Boolean = false
) : Parcelable {

companion object {
const val KEY = "user-key"
}
}

 

Simples, certo? Ainda é preciso colocar a referência a Interface Parcelable. O companion object foi mantido devido a constante adicionada em aula anterior, KEY, constante que foge do contexto de implementação do Parcelable.

Assim podemos partir para os testes e resultados.

Testes e resultados

Com a sua instalação do Android Studio aberta, vá ao menu de topo e acesse "Build", logo depois clique em "Rebuid project". Ao final do rebuild execute o aplicativo em seu emulador Android.

Ops! Antes de executar não esqueça de colocar o objeto user como um "usuário não conectado". Este objeto está na MainActivity:

...
val user = User(
"Thiengo Vinícius",
R.drawable.user,
false /* Usuário não conectado. */
)
...

 

Acessando o app e navegando entre a atividade principal, a atividade de login e a atividade de cadastro, temos:

Animação da navegação da atividade principal para a atividade de login e para a atividade de cadastro

Assim finalizamos mais uma atualização importante em nosso projeto Android.

Antes de prosseguir, não esqueça de se inscrever na 📫 lista de emails do Blog para receber todas as aulas deste projeto Android de mobile-commerce.

Se inscreva também no canal do Blog em: YouTube Thiengo.

Vídeos

A seguir os vídeos com todos os passos das atualizações descritas nesta 12ª aula de nosso Android mobile-commerce:

O código do projeto pode ser acessado pelo GitHub dele em: https://github.com/viniciusthiengo/blueshoes-kotlin-android.

Conclusão

Mesmo que algumas das atualizações tivessem de ter ocorrido em aulas anteriores, alguns pontos discutidos se encaixaram melhor aqui, como, por exemplo, a adição de ação ao link de acesso a atividade de cadastro, link presente na MainActivity.

Sobre o "bug": nem tudo que parece é. Eu sei, foi bem ruim a colocação. Mas é como informado em artigo, não é um bug, quando o app estiver pronto esse problema será sanado, pois todos os itens de menu gaveta estarão funcionais.

E o @Parcelize, mesmo que ainda em fase experimental, nos atende muito bem, deixando o código da classe User bem mais simples.

Caso você tenha dúvidas ou dicas para este projeto, não esqueça em deixar logo abaixo nos comentários.

Curtiu o conteúdo? Não deixe de compartilha-lo. E, por fim, se inscrever na 📩 lista de emails, respondo às suas dúvidas também por lá.

Abraço.

Fontes

Kotlin Android Extensions - Parcelable implementations generator

Kotlin Android Extensions: Say goodbye to findViewById

How to change Toolbar home icon color - Resposta de osrl

Receba em primeira mão, e com prioridade, os conteúdos Android exclusivos do Blog.
Email inválido

Relacionado

Trabalhando Análise Qualitativa em seu Aplicativo AndroidTrabalhando Análise Qualitativa em seu Aplicativo AndroidAndroid
Utilizando Intenções Para Mapas de Alta Qualidade no AndroidUtilizando Intenções Para Mapas de Alta Qualidade no AndroidAndroid
5 livros que não são de TI, mas que um desenvolvedor deveria ler5 livros que não são de TI, mas que um desenvolvedor deveria lerEmpreendedorismo
Android Mobile-Commerce, Apresentação e Protótipo do ProjetoAndroid Mobile-Commerce, Apresentação e Protótipo do ProjetoAndroid

Compartilhar

Comentários Facebook

Comentários Blog (1)

Para código / script, coloque entre [code] e [/code] para receber marcação especifica.
Forneça seu nome válido.
Forneça seu email válido.
Forneça o comentário.
Enviando, aguarde...
Alan Lucena (2) (0)
18/05/2019
Sensacional sua explicação professor, sem palavras para descrever esse artigo, é imensurável o valor deste, que um dia possamos ensinar com a mesma propriedade e amor que tu ensina aos alunos virtuais, parabéns por mais este artigo!
Responder