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

Investir em Você é Barra de Ouro a R$ 2,00. Cadastre-se e receba grátis conteúdos Android sem precedentes! Você receberá um email de confirmação. Somente depois de confirma-lo é que eu poderei lhe enviar os conteúdos semanais exclusivos. Os artigos em PDF são entregues somente para os inscritos na lista.

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
(1613) (1)
Go-ahead
"Sempre sonhe e mire mais alto do que você sabe que você pode fazer. Não se preocupe em ser melhor do que seus contemporâneos e antecessores. Tente ser melhor do que você mesmo."
William Faulkner
Kotlin Android
Capa do livro Mapas Android de Alta Qualidade - Masterização Android
TítuloMapas Android de Alta Qualidade - Masterização Android
CategoriasAndroid, Kotlin, Masterização, Especialização
AutorVinícius Thiengo
Edição
Ano2020
Capítulos11
Páginas166
Acessar Livro
Quer aprender a programar para Android? Acesse abaixo o curso gratuito no Blog.
Conteúdo Exclusivo
Investir em Você é Barra de Ouro a R$ 2,00. Cadastre-se e receba gratuitamente conteúdos Android sem precedentes!
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 e-mails 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 e-mails 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 e-mails, 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

Investir em Você é Barra de Ouro a R$ 2,00. Cadastre-se e receba grátis conteúdos Android sem precedentes!
Email inválido

Relacionado

Trabalhando Análise Qualitativa em seu Aplicativo AndroidTrabalhando Análise Qualitativa em seu Aplicativo 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