Nenhum comentário


Android Studio – Parte III

Estamos desenvolvendo artigos sobre o Android Studio, ferramenta gratuita para desenvolver projetos Android. Neste artigo, vamos conhecer um pouco da codificação Java para nosso aplicativo. No artigo anterior, comentei sobre informações da lentidão do Android Studio quando fazemos deploy da aplicação no device.

Temos uma ótima noticia, isso foi otimizado, a partir da versão 0.8.2. O deploy esta muito mais rápido. A primeira execução da app demora um pouco, mas as seguintes estão rápidas, demorando segundos para aparecer no device.

Neste artigo vamos mostrar um pouco do básico para o entendimento de app Android. Controles de telas, layouts e dicas interessantes.

Conhecendo o projeto

O projeto que criamos é do template Navigation Drawer Activity, com layout bastante comum atualmente. Nele, temos um menu lateral com opções para acesso a telas (Figura 1).

 

Figura 1. Projeto rodando

Se quisermos mudar os valores dos itens adicionados (Section), precisamos trabalhar com resource. Resource é um arquivo XML para armazenar textos que usaremos na aplicação. Abra o arquivo values>strings.xml.

Nesse arquivo, temos algumas strings prontas, basta mudar os valores que serão alterados no menu. Faça o teste (Figura 2).

 

Figura 2. Alterando o texto do menu

Vamos conhecer agora, alguns controles de tela mais comuns usados em aplicativos Android. Abra o arquivo fragment_my.xml da pasta layout. Coloque no mode de design, onde aparece os controles de tela. Note que já existe um TextView.

Adicione um Button. Basta escolher o controle na lista e arrastar para a tela. Vamos fazer o famoso “Hello World”, ou seja, ao clicar no botão, será mostrada a frase no TextView. Acesse o método onCreateView da classe PlaceholderFragment no arquivo MyActivity.java da pasta Java. Esse arquivo refere-se à tela inicial da aplicação.

Digite o seguinte código:

Button botao = (Button)rootView.findViewById(R.id.button);

botao.setOnClickListener(new View.OnClickListener() { 

@Override

public void onClick(View v) {

   TextView texto = (TextView)rootView.findViewById(R.id.section_label);

   texto.setText("Hello World!");

          }

});

 

Nota: por vezes ao digitar algumas classes, precisar fazer o import das mesmas. O Android Studio auxilia esse trabalho, onde você coloca o cursor do mouse na classe (sempre aparece em vermelho) e aperta ALT+ENTER. Aparece um menu e a opção Import class. Basta escolher e pronto, classe importada.


No código, usamos o método findViewById para “encontrar” o botão. Bastante semelhante ao que fazemos em JavaScript, quando precisamos acessar algum controle. Note que usamos a variável rootView (esta declarada no OnCreateView).

Isso ocorre, por que estamos em um Fragment e como podemos ver no OnCreateView, o rootView “carrega” o layout fragment_my.xml, onde adicionamos os controles de tela. Precisamos marcar a variável rootView com “final”, para que possamos acessá-la dentro do evento OnClick do botão. 

final View rootView = inflater.inflate(R.layout.fragment_my,

  container, false);

Continuando no código, pesquisamos com o findViewById para achar o TextView e atribuir valor para o mesmo. Execute a aplicação e veja o resultado (Figura 3).

Figura 3. Hello World no Android 

Vamos agora, mudar o rótulo do botão. Poderíamos usar a propriedade Text, trocando no XML do fragment_my.xml:

<Button

   ...

   android:text="New Button"

   android:id="@+id/button"

   android:layout_below="@+id/section_label"

   ...

 /> 

Como também poderíamos alterar na janela de propriedades do Android Studio (Figura 4) 

 

Figura 4. Modificando a propriedade Text do botão 

Modificar o texto assim, não é uma prática muito interessante de ser usada e por isso, aplicações no Android Studio (Android), usam arquivos de resource para organizar textos que mostramos no projeto.

Abra o arquivo strings.xml na pasta res>values. Crie um novo resource, conforme o código a seguir:

<string name="button_name">Hello World</string>

Para usar esse texto no botão ou outras partes do projeto, basta atribuir o mesmo em propriedades ou via código. Na propriedade Text do botão, modifique para o seguinte código:

android:text="@string/button_name"

Basta indicar @string, e depois o nome do resource, existente no arquivo. No preeview já deve aparecer o novo texto. Execute e teste a aplicação. Volte o valor da propriedade, pois vamos fazer agora um exemplo via código.

Novamente no OnCreateView, vamos usar o seguinte código, após o findViewById do botão:

botao.setText(R.string.button_name);

A classe R organiza todos os ids de controles, strings, imagens do projeto. Assim, temos mais facilidade para atribuir textos, imagens etc.

Nota: a classe R é gerada pela ferramenta, não pode ser editada.

Execute a aplicação para testar. Caso ainda não acredite, experimente mudar o valor do button_name.

Podemos usar o resource em quase todo o projeto. Abra o arquivo AndroidManifest.xml e veja que no item android:label é usado um resource para indicar o nome do projeto. Alterar essa propriedade ou o resource indicado nela modifica o texto em toda a aplicação que for mostrar o rótulo com o nome da app.

Criando novos forms

Temos três itens no menu lateral, assim, precisamos de três formulários/layout para abri-los na aplicação. Crie três layouts na pasta layout. Para isso, clique com o botão direito na pasta layout e escolha a opção New>Layout resource file

Digite o nome do layout (“activity_home.xml”, “activity_parametros.xml” e “activity_configuracoes.xml”). Veja os arquivos na Figura 5.

 

Figura 5. Criando layouts

Dentro de cada layout, adicione um TextView e configure na propriedade Text o nome do layout. Atente para o nome do controle (propriedade id).  Para abrir cada formulário, voltaremos ao OnCreateView do PlaceholderFragment. Precisamos saber, qual item do menu foi escolhido, para isso, temos a variável ARG_SECTION_NUMBER.

Usando ela, sabemos qual item foi selecionado e assim, carregar o respectivo formulário. Veja no código a seguir, como ficaria:

if (getArguments().getInt(ARG_SECTION_NUMBER) == 1) {

   //tela home

   rootView = inflater.inflate(R.layout.activity_home, container, false);

}

else if (getArguments().getInt(ARG_SECTION_NUMBER) == 2){

   //tela parâmetros

   rootView = inflater.inflate(R.layout.activity_parametros, container, false);

}

else {

   //tela configurações

   rootView = inflater.inflate(R.layout.activity_configuracoes, container, false);

}

return rootView; 

Comente o código do click do botão e remova o final da variável rootView. O código é simples, onde usamos if..elseif. Verificamos qual o item selecionado no menu e carregamos seu respectivo layout. Execute a aplicação e selecione os itens do menu, veja que o layout correspondente é carregado (Figura 6).

 

Figura 6. Abrindo formulários pelo menu

Estamos dentro de um fragment, todos os layouts, serão abertos no mesmo “espaço”. Mas e quando precisamos criar outro formulário e não usar o fragment, como fazer? Precisamos então criar uma Activity para o layout. Uma Activity, basicamente, gerencia a parte UI da aplicação Android. Toda aplicação, começa com uma Activity (nosso template adicionou a MyActivity.java). 

Clique com o botão direito na pasta do pacote (com.nomedaaplicacao) e escolha o item New>Java class. Vamos chamado de “ActivityParametros”. Na classe criada, precisamos herdar de Activity:

public class ActivityParametros extends Activity

E declarar o método Create:

@Override

public void onCreate(Bundle savedInstanceState) {

   super.onCreate(savedInstanceState);

   setContentView(R.layout.activity_parametros);

} 

Precisamos especificar no onCreate, qual o layout essa Activity vai carregar, usando o setContentView. No MyActivity.java para chamar essa tela, usamos o seguinte código:

//tela parâmetros

Intent formParametro = new Intent(getActivity(), ActivityParametros.class);

startActivity(formParametro);

A classe Intent, recebe dois parâmetros, a Activity que estamos e para qual ela será direcionada. Como estamos em um Fragment, precisamos usar o método getActivity, senão bastaria passar NomeDaClasse.this. No segundo, chamamos o Activity criada.

Para abrir o formulário, basta chamar startActivity, passando a variável Intent. Para finalizar, precisamos declarar essa Activity no manifesto. Abra o AndroidManifest.xml e adicione o seguinte código: 

<activity

   android:name=".ActivityParametros"

         android:label="@string/title_section2">

</activity> 

Adicione dentro da tag application, abaixo da activity principal. Apenas indicamos qual a Activity estamos declarando e passamos um nome para o título da mesma. Rode a aplicação para testar.

Passando dados entre formulários

E se precisássemos passar valores entre um formulário e outro? Variável global? Se você pensou isso, pensou errado. A classe Intent disponibiliza propriedades para podermos passar valores. Abra o arquivo de layout activity_parametros.xml. Remova o valor da propriedade Text do TextView

Ela será preenchida com valores oriundos de outro formulário. Na chamada do formulário de parâmetros, vamos modificar a chamada:

Intent formParametro = new Intent(getActivity(), ActivityParametros.class);

formParametro.putExtra("Name", "Tela de parâmetros");

startActivity(formParametro); 

Usamos putExtra de Intent para dar um nome e um valor. Na Activity de parâmetros, precisamos receber esse valor e atribui para o controle TextView. No onCreate da classe, usamos o seguinte código:

String name = getIntent().getExtras().get("Name").toString();

TextView texto = (TextView)findViewById(R.id.section_label);

texto.setText(name);

Atribuímos para uma variável o valor do Intent, usando getIntent. Pegamos o TextView e colocamos na propriedade Text o valor da variável. Bem simples e fácil. Veja na Figura 7 a aplicação. 

 

Figura 7. Passando valores entre formulários

Lembrando, podemos passar vários parâmetros. Usamos um putExtra (com nome e valor) para cada parâmetro. Veja na Figura 8 que usamos um parâmetro para configurar o título do formulário (usamos setTitle para atribuir o valor na Activity).

 

Figura 8. Alterando o título do formulário

Controles de tela

Vamos conhecer algumas caracteristicas dos controles mais comuns usados no Android. O TextView, como já vimos, é um Label onde mostramos textos na aplicação. Vamos conhecer o EditView que é uma caixa de texto semelhante há que temos em outros sistemas operacionais. 

Quais as características mais interessantes desse controle? Ele aceita alfanuméricos, somente números, senhas, datas etc. Quando configurado para aceitar somente números o teclado do device mostra somente números, isso é bom, pois não precisamos validar se o que foi digitado é número.

No layout da tela de configurações, adicione quatro TextView. O primeiro deixe com as propriedades default. No segundo, mude a propriedade inputType para “number”. No terceiro, mude para textPassword e por último numberDecimal.

Dê uma olhada na propriedade inputType e veja a quantidade de opções. Abaixo o código dos quatros controles:

<EditText

   android:layout_width="match_parent"

   android:layout_height="wrap_content"

   android:id="@+id/editText1"/>

 

<EditText

   android:layout_width="match_parent"

   android:layout_height="wrap_content"

   android:id="@+id/editText2"

   android:inputType="number"/>

 

<EditText

   android:layout_width="match_parent"

   android:layout_height="wrap_content"

   android:id="@+id/editText3"

   android:inputType="textPassword"/>

 

<EditText

   android:layout_width="match_parent"

   android:layout_height="wrap_content"

   android:id="@+id/editText4"

   android:inputType="numberDecimal"

   android:gravity="right"/> 

Rode a aplicação (Figura 9).

 

Figura 9. Controles com opções de dados de entrada

No primeiro controle, podemos digitar texto e números. No segundo, aceita apenas números. No terceiro, não aparece o que foi digitado, pois é uma senha. Por fim, o último controle tem a opção de ponto (“.”) para colocar valores decimais. Eu configurei o alinhamento, para que os números fiquem alinhados a direita.

ToogleButton

Esse controle é semelhante a um RadioButton, pois tem somente dois estados (on ou off). Podemos configurar seu estado e ainda um texto para quando estiver On ou Off. Adicione dois ToogleButton, um  TextView e um Button

Veja a seguir, o código dos controles:

<ToggleButton

   android:layout_width="wrap_content"

   android:layout_height="wrap_content"

   android:text="New ToggleButton"

   android:id="@+id/toggleButton1" />

 

<ToggleButton

   android:layout_width="wrap_content"

   android:layout_height="wrap_content"

   android:text="New ToggleButton"

   android:id="@+id/toggleButton2"

   android:textOn="Sim"

   android:textOff="Não"

   android:checked="true"/>

 

 <Button

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:text="New Button"

    android:id="@+id/button"

    android:layout_gravity="center_horizontal" />

 

<TextView

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:id="@+id/textView"

    android:layout_gravity="center_horizontal" /> 

Para codificar o OnClick do botão, vamos acessar o arquivo MyActivity.java e no else if, que abre a tela de configurações, codificar o seguinte código:

final ToggleButton toogle1 = (ToggleButton)rootView.findViewById(R.id.toggleButton1);

final ToggleButton toogle2 = (ToggleButton)rootView.findViewById(R.id.toggleButton2);

Button botao = (Button)rootView.findViewById(R.id.button);

final TextView texto = (TextView)rootView.findViewById(R.id.textView);

 

botao.setOnClickListener(new View.OnClickListener() {

   @Override

   public void onClick(View v) {

      StringBuffer buffer = new StringBuffer();

      buffer.append("ToggleButton1: Estado:" + toogle1.isChecked() + " - Texto: " + toogle1.getText());

      buffer.append("\nToggleButton2: Estado:" + toogle2.isChecked() + " - Texto: " + toogle2.getText());

 

      texto.setText(buffer);

   }

});

 

Criamos as variáveis dos controles de tela. Note que as variáveis que precisam ser acessadas dentro do evento onClick do botão, estão marcadas como final. No onClick, criamos uma variável para colocar um texto indicando o estado e o Text existente nos controles.

Por fim, apenas indicamos no TextView os valores. Veja na Figura 10, a aplicação em execução. 

 

Figura 10. ToggleButton em execução

Spinner

O controle Spinner nada mais é do que um DropDownList do Android. Podemos populá-lo usando um adapter ou resource. Para usarmos resource, vamos usar um array. Veja no código a seguir como seria um array de resource

<string-array name="paises">

   <item>Brasil</item>

   <item>Argentina</item>

   <item>Alemanha</item>

   <item>França</item>

   <item>México</item>

   <item>Uruguai</item>

   <item>Paraguai</item>

</string-array> 

Na propriedade entries do controle, vamos indicar o array criado no resource:

<Spinner

  android:layout_width="match_parent"

  android:layout_height="wrap_content"

  android:id="@+id/spinner"

  android:entries="@array/paises"/> 

Rode a aplicação e veja o Spinner em execução. Se a lista for mais que a altura do device, é colocado um scroll para navegar entre os itens. Adicione mais um Spinner na tela, vamos usar um adapter para preenchê-lo:

Spinner drop = (Spinner)rootView.findViewById(R.id.spinner2);

List<String> lista = new ArrayList<String>();

lista.add("Item 1");

lista.add("Item 2");

lista.add("Item 3");

lista.add("Item 4"); 

drop.setAdapter(new ArrayAdapter<String>(getActivity(), android.R.layout.simple_spinner_item, lista));

Criamos uma lista e preenchemos. Essa lista poderia ser preenchida com dados do banco do device, JSON etc. Usamos o método setAdapter para preencher o Spinner, onde criamos um ArrayAdapter, passando a Activity como parâmetro, depois indicamos o tipo de layout que usaremos e por final a própria lista.

Execute e veja o controle preenchido com a lista que criamos. Para pegarmos o valor escolhido no Spinner, adicione um botão e um TextView e adicione o seguinte código:

Button botao = (Button)rootView.findViewById(R.id.button);

final TextView texto = (TextView)rootView.findViewById(R.id.textView); 

botao.setOnClickListener(new View.OnClickListener() {

   @Override

   public void onClick(View v) {

      texto.setText(drop.getSelectedItem().toString());

   }

});

 

Note que a variável do TextView é final, para podermos acessá-la no evento onClick do botão. Mostramos no TextView, o valor do item selecionado no Spinner, usando o getSelectedItem. Simples e fácil (Figura 11).

 

Figura 11. Mostrando o item selecionado no Spinner

Caixas de mensagens

Qualquer aplicativo precisa mostrar mensagens ao usuário, seja para indicar que algo deu errado ou para mostrar que a funcionalidade foi executada com sucesso. No Android temos caixas de mensagens com interação ou não do usuário. 

O que quer dizer com interação do usuário, são caixas de mensagens onde o usuário precisa executar alguma ação, seja para fechar, ou para responder há uma pergunta. E as mensagens sem interação? No Android temos uma mensagem que fica aparecendo de acordo com um determinado tempo, depois disso, ela some.

Vamos ver um exemplo. Adicione um botão para a tela de parâmetros. Vamos fazer outra maneira de atribuir o onClick do botão (sem Listener). Vamos atribuir um valor para a propriedade onClick do botão:

android:onClick="BotaoClick" 

Agora, na Activity (ActivityParametros.java), vamos declarar um método com o mesmo nome, onde vamos colocar o código que precisamos. 

public void BotaoClick(View view){

}

Dentro desse método, vamos atribuir o código necessário a ser executado, quando o usuário clicar no botão. Bem simples. Vamos mostrar agora, como mostrar uma mensagem, sem a interação do usuário. Por padrão a mensagem é sempre mostrada na parte inferior do device. Dentro do BotaoClick, digite o seguinte código: 

Toast.makeText(this, "Mensagem Toast", Toast.LENGTH_LONG).show(); 

Usamos a classe Toast, invocando o método makeText, que recebe como primeiro parâmetro o contexto do projeto (nesse caso this).  No segundo parâmetro, adicionamos o texto. Aqui colocamos no código, mas como você já sabe, podemos usar resource.

O último parâmetro indica o tempo que a mensagem será mostrada, curto ou longo. Por fim, invocamos o show. Execute a aplicação e veja o Toast em execução (Figura 12).

 

Figura 12. Mostrando uma caixa de mensagem

Outro exemplo de caixa de mensagem, é usando a classe AlertDialog. Comente o código do Toast e adicione o seguinte código:

AlertDialog.Builder dialogBuilder = new AlertDialog.Builder(this);

dialogBuilder.setTitle("Título da mensagem");

dialogBuilder.setMessage("Mensagem da caixa de dialogo");

 

AlertDialog dialog = dialogBuilder.create();

dialog.show(); 

Nesse caso, teremos que trabalhar com duas classes: AlertDialog.Builder serve para criar a interface da caixa de mensagem e AlertDialog serve para mostrar a mesma no aplicativo. Configuramos o título da caixa e a mensagem que será mostrada.

Por fim, atribuímos as características da caixa de mensagem para o AlertDialog que vai exibir, usando o método show. Execute a aplicação e faça o teste. Note que não temos nenhum botão, apenas o título e a mensagem.

Precisamos codificar o botão, ele não tem nenhum default. Adicione o seguinte código, após configurar a mensagem:

dialogBuilder.setPositiveButton("OK", new DialogInterface.OnClickListener() {

   @Override

   public void onClick(DialogInterface dialog, int which) {

      Toast.makeText(ActivityParametros.this, "Clicou em OK",

        Toast.LENGTH_LONG).show();

   }

});

 

dialogBuilder.setNegativeButton("Não", new DialogInterface.OnClickListener() {

   @Override

   public void onClick(DialogInterface dialog, int which) {

      Toast.makeText(ActivityParametros.this, "Clicou em Não",

        Toast.LENGTH_LONG).show();

   }

}); 

O dialogBuilder disponibiliza dois métodos para configurar o botão OK e No, que são padrões. Claro, o nome dos mesmos pode ser modificado no primeiro parâmetro. Execute a aplicação e faça os testes clicando nos botões da caixa de mensagem (Figura 13).

 

Figura 13. Criando caixas de mensagens com AlertDialog

Podemos configurar um ícone na caixa, usando o método setIcon. Ainda podemos colocar na caixa de mensagem, itens, como se fossem ListView, bastando configurar com os itens a serem mostrados, o método setItems. Nesse caso, não configuramos setMessage (código fonte disponível para download).

Veja na Figura 14, uma caixa de mensagem com ícone e itens.

 

Figura 14. Caixa de mensagem customizada com ícone e itens

Conclusões

Vimos neste artigo, mais características de aplicativos Android com Android Studio. Conhecemos alguns controles de tela, usados em aplicativos. Com essas informações você tem base para começar a criar seus aplicativos Android e quem sabe ter uma idéia que irá revolucionar aplicativos mobile J. O céu é o limite.

Um grande abraço a todos e até a próxima!