Criação de App usando o ambiente Android Studio.
O Android Studio é o ambiente oficial da Google para o desenvolvimento de aplicativos que usam o sistema Android. Esse sistema é utilizado em cerca de 82% dos dispositivos móveis no mundo e continua crescendo. Existem vários outros ambientes para desenvolvimento de Apps para o sistema Android, como por exemplo o Xamarin da Microsoft que pode ser usado com o Visual Studio.
O Android Studio pode ser baixado gratuitamente pelo site
https://developer.android.com/studio/index.html?hl=pt-br
A programação é feita em Java e para o desenvolvimento de aplicativos complexos, exige conhecimentos de programação orientada a objetos, tais como criação de classes, métodos, conhecer a api do Java, etc.
Como o objetivo deste curso é apenas dar conhecimentos básicos sobre a programação para celulares sob ambiente Android, o conhecimento de Java e seus recursos serão fornecidos no correr do curso.
Parte deste material foi desenvolvido usando algumas ideias e figuras da apostila
(http://othonbatista.com/arquivos/android/apostila-android.pdf) de Luciano Alves da Silva (www.apostilaandroid.net) que apesar de ser uma excelente apostila distribuída
gratuitamente pela internet, é muito longa para os objetivos deste curso e está desatualizada.
Para começar , vamos entrar no ambiente do Android Studio.
Se for a primeira vez que é executado o Android Studio, virá esta tela que você deve dar um click em “Start a new Android Studio Project”:
Caso não seja a primeira vez, o Android Studio irá abrir o projeto anterior. Nesse caso, click em File / New / New Project…
Na próxima tela mude os nomes de acordo com a figura a seguir:
Dominio FatecSP – É o nome da empresa desenvolvedora.
Note que o Package name é uma junção do domínio com o nome da aplicação.
Project Location - é o local no computador onde a App será gravada.
Click em Next.
Na tela a seguir você deve escolher a versão inicial do Android que aceitará sua App.
A questão da versão é delicada. Você deve avaliar a situação da tecnologia atual e o público a que se destina seu aplicativo. Se optar por uma versão mais antiga abrangerá mais usuários potenciais, porém, os melhores e mais modernos recursos estão nas versões mais recentes.
Pesquisa realizada em 2016 sobre as versões do Android mais usadas no mundo:
Após pressionar Next, na tela seguinte você deve escolher o tipo de atividade a que se destina sua App.
Escolher a Activity – tipo de tela que vai abrigar a aplicação a desenvolver. Para o Android, cada classe (arquivos “.java”) que representa uma aplicação é considerada uma “atividade” (Activity).
Escolha Empty Activity e click em Next
Na figura seguinte vamos alterar o nome da Activity de acordo com a figura a seguir e pressione Finish:
A partir desse ponto inicia o processo de montagem do ambiente de desenvolvimento do Android. É um processo complexo e demorado.
A interface de desenvolvimento é um sistema de automação e compilação chamada de “Gradle”. É composto de dois ambientes: o Android SDK e um emulador de dispositivos.
Ao terminar o processo de montagem do ambiente, surge a tela da Activity:
Para configurarmos a interface gráfica, trabalharemos com a guia .XML:
Vamos entender as numerações indicadas na figura anterior, segundo a descrição de Luciano Alves da Silva (www.apostilaandroid.net):
Na indicação (1) temos a paleta de componentes onde os mesmos estão separados por seções. As seções são : Layouts, Widgets , Text Fields , Containers, Date e Time , Expert e Custom (Componentes personalizados, normalmente criados pelo usuário e entre outros recursos).
Na indicação (2) temos um preview de como ficará a interface da nossa aplicação quando a mesma for executada, nessa interface podemos arrastar e soltar os componentes (indicados por (1)) , construindo assim a nossa aplicação.
Na indicação (3) temos as propriedades do componente (Properties). Quando selecionamos um componente, as suas propriedades são visualizadas e assim, conforme nossa
necessidade, podemos alterá-las.
Na indicação (4) temos uma seção chamada “Component Tree”. Nessa seção podemos ver , de forma hierárquica, todos os componentes que estão presentes na tela da nossa aplicação
Na indicação (5) podemos alternar entre o modo gráfico (“Design”, onde temos a
visualização da tela da aplicação) e o modo XML (“Text”, onde visualizamos o código XML do arquivo, que corresponde a estrutura que forma a tela de nossa aplicação).
Na indicação (6) podemos alterar os temas que podemos utilizar em nossa aplicação Android, orientação da tela do dispositivo (retrato ou paisagem), resolução da tela do dispositivo e etc. A maioria das opções disponíveis nessa seção só terá efeito em tempo de projeto. É necessário configurar as mesmas opções para que elas aconteçam em tempo de execução (quando você executa o emulador ou dispositivo real), de acordo com a
necessidade.
Executando a nossa aplicação
Agora que já tivemos uma visão geral da ferramenta de desenvolvimento e do projeto em Android (com toda a sua estrutura de diretórios e arquivos), podemos a partir de agora executar a nossa aplicação. Mas antes de executarmos a nossa aplicação, faremos alguns comentários. Observe que quando criamos um projeto em Android, na tela do dispositivo já tem um componente TextView (situado na paleta de componentes , dentro da seção
“Widgets”) onde nele é exibida a frase “Hello world”. Quando executarmos a nossa aplicação através do emulador, ela sairá idêntica como está sendo exibida no projeto (uma tela “em branco” com a frase “Hello world”).
Como fazer para executarmos a nossa aplicação ? Para executarmos a nossa aplicação basta irmos no menu “Run” / “Run ‘app’ " (ou pressionar as teclas SHIFT+F10) . A forma mais usada, que adotaremos aqui, é clicando no botão presente na barra de ferramentas :
Pressione o botão Run e observe que é apresentada a janela solicitando em qual dispositivo você quer emular sua App:
Escolha o Galaxy Nexus API 23 e pressione OK.
Após alguns longos minutos, surge a imagem do dispositivo escolhido, com sua aplicação em execução:
Botão “Run” do Android Studio
f
Se você fechar o emulador, da próxima vez que o executar vai demorar novamente. Por isso vamos apenas minimizá-lo para as execuções ficarem um pouco mais rápidas.
Volte ao ambiente de desenvolvimento:
Se visualizarmos o lado esquerdo, existe uma seção chamada “Project”, onde existe uma pasta chamada “app” (que é o nosso projeto), constituído por vários subdiretórios , que por sua vez, possui seus respectivos arquivos, conforme mostra a figura seguinte:
Posteriormente verificaremos com mais detalhes essas pastas e arquivos.
Obs. O ambiente Android Studio é complexo e exige muito dos recursos do computador. Por isso ocorrem constantes travamentos e recomenda-se que o projeto seja salvo
continuamente.
Vamos agora fazer uma modificação em nossa aplicação. Selecione o texto da figura do celular e localize na janela Properties, a propriedade Text. Mude-a para: Estou estudando Android...
Execute novamente seu programa e confira as modificações que você realizou. Note que se você apenas minimizou o emulador (não o fechou) o processo agora é bem mais rápido.
Toda tela de uma aplicação é uma estrutura de layout que permite organizar e distribuir os componentes nela inseridos conforme a nossa necessidade. A estrutura de layout dessa versão do Android SDK, que e inserida por padrão toda vez que criamos este um projeto em Android, é a “RelativeLayout”. Essa estrutura permite que os componentes nela inseridos possam ser organizados e distribuídos de forma “relativa” a outros componentes presentes também na tela.
Vamos incluir um novo componente em nossa aplicação.
Note que na estrutura de layout RelativeLayout permite que os componentes sejam inseridos relativamente aos outros componentes e permanecerão onde os inserirmos.
Para exemplificar, vamos inserir um novo componente da paleta de componentes. Selecione o componente Large Text e solte-o na tela de desenvolvimento. Veja a figura:
Note que esse segundo componente já aparece no Component Tree e através da janela Properties podemos alterar seu texto. Mude seu texto para: Já estou programando...
Salve seus arquivos e execute o programa.
Veja que os dois componentes que colocamos em nossa tela são dois labels ou rótulos com textos pré formatados.
Vamos inserir componentes editáveis nos quais se pode digitar valores.
Selecione o componente Plain Text do grupo Text Fields e o insira na tela de desenvolvimento. Configure sua propriedade layout:width como match_parent. Essa propriedade faz com que ele fique do tamanho da tela.
Mude sua propriedade id para edtPrimeiroValor. Esse será o nome desse componente.
Inclua também o componente Number e mude sua propriedade id para edtSegundoValor.
Veja a figura:
Execute o programa e note que nesse componente só se pode digitar números.
Vamos incluir um botão de comando (Button) que ao receber o toque do usuário (ou click), irá exibir o conteúdo do primeiro EditText.
O componente Button faz parte do grupo de componentes Widgets. Mude suas propriedades de acordo com:
id: btnClickMe
Execute seu programa e verifique tudo deve funcionar. O botão acusa o recebimento do toque ou do click só que não faz nada pois, ainda não foi programado para responder.
Para programarmos a resposta que o botão Click-Me vai realizar ao receber o toque do usuário, devemos usar a janela de código, selecionando a guia AtividadeAloouu.java.
Acompanhe a imagem:
Note os três pontos após a instrução
import...
Os três pontos indica que mais de uma biblioteca será importada. Dê um click nos ... e inclua as instruções a seguir. Iremos importar mais algumas bibliotecas:
import android.widget.*; import android.view.*; import android.app.*;
Antes da linha @Override Devemos declarar os componentes a serem utilizados pela programação. Digite:
EditText edtPrimeiroValor; Button btnClickMe;
Até aqui apenas incluímos três bibliotecas em nosso projeto e declaramos os componentes que vamos utilizar.
Se no programa houver um widget do tipo EditText, para acessar esse componente pelo Java é preciso fazer uso da classe EditText e se possuir um widget Button, para acessá-lo devo fazer uso da classe Button e assim por diante.
Agora dentro do método onCreate após a linha:
setContentView(R.layout.activity_atividade_aloouu);
Digite as instruções a seguir (copie e cole):
edtPrimeiroValor = (EditText)findViewById(R.id.edtPrimeiroValor); btnClickMe = (Button) findViewById(R.id.btnClickMe);
Explicando:
edtPrimeiroValor = (EditText)findViewById(R.id.edtPrimeiroValor);
Faz referência ao componente EditText, através do método findViewById com o parâmetro “R.id.edtPrimeiroValor”.
btnClickMe = (Button) findViewById(R.id.btnClickMe);
Faz referência ao componente Button, através do método findViewById com o parâmetro “R.id.btnClickMe”.
Verifique se alguma instrução está na cor vermelha. Isso significa que há alguma coisa errada, como por exemplo, btnClickMe é diferente de BtnClickMe pois o Java diferencia maiúsculas de minúsculas. Execute o programa para conferir se há algum erro até aqui.
Salve seu projeto.
Agora iremos adicionar um tratador de evento em nosso componente Button que será responsável por “detectar” toda vez que ele for “clicado” (tocado na tela), executando um conjunto de instruções após o evento (que vai consistir na exibição do conteúdo de edtPrimeiroValor). Para adicionarmos esse evento em nosso componente, basta escrevermos, após a última instrução que adicionamos, as seguintes linhas de código:
btnClickMe.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String texto1 = edtPrimeiroValor.getText().toString();
AlertDialog.Builder dialogoTeste = new
AlertDialog.Builder(AtividadeAloouu.this);
dialogoTeste.setTitle("Cabeçalho Teste do Texto Digitado: "); dialogoTeste.setMessage("Texto Digitado: " + texto);
dialogoTeste.setNeutralButton("OK", null); dialogoTeste.show();
} });
Execute o programa e verifique o resultado. Observe que ao digitar caracteres no primeiro EditText, ao ocorrer o click no botão, uma caixa de mensagem é exibida e o que foi digitado é apresentado dentro dessa mensagem.
Vamos incluir um um outro botão que vai acessar o valor numérico digitado no segundo EditText, vai exibir seu valor e em seguida vai mostrar esse valor ao quadrado. Mude seu layout para ficar igual à figura a seguir:
Obs. Note que se você der um click duplo no componente você poderá alterar diretamente seu texto(text) e nome(id):
Para programarmos esses componentes precisamos declará-los ao Android: EditText edtPrimeiroValor, edtSegundoValor; Button btnClickMe, btnCalcula;
Para podermos referenciar esses componentes na programação precisamos das instruções:
edtSegundoValor = (EditText) findViewById(R.id.edtSegundoValor); btnCalcula = (Button) findViewById(R.id.btnCalcula);
Em seguida vamos copiar o tratador do evento Click do botão btnClickMe e adequá-lo ao botão btnCalcula.
Atenção: Ao ocorrer o click no primeiro botão, no edtPrimeiroValor temos apenas texto. Por esse motivo usamos na atribuição da variável texto1, a instrução:
String texto1 = edtPrimeiroValor.getText().toString();
No segundo caso, trabalharemos com valor numérico. Por esse motivo, a instrução é igual à abaixo, que atribui um valor numérico à variável num1:
Veja como ficar o tratador do evento Click no segundo botão:
Execute o programa e teste-o. Perceba que agora os dois botões funcionam e cada um exibe o conteúdo do respectivo EditText.
Vamos agora alterar a programação do segundo botão para exibir por meio de um TextView (Label) o quadrado do número.
Para isso inclua o TextView tipo Large Text, de nome lblQuadrado, de acordo com o layout:
Dê um duplo click nele e mude seu id para lblQuadrado.
Agora vamos aos ajustes no código:
Declaração do novo componente ao Android: TextView lblQuadrado;
Inclua a seguinte instrução para poder referenciá-lo na programação:
lblQuadrado = (TextView) findViewById(R.id.lblQuadrado);
Declaraçao de variável, cálculo de valor do quadrado e instrução para atribuição do valor ao componente:
double quadrado = num1 * num1;
lblQuadrado.setText("Valor ao quadrado = " + quadrado);
Obs.: Note que em um EditText você pode exibir valores e também digitar valores. Em um componente TextView você pode atribuir valores a ele através de programação, mas não tem acesso por edição.
Mudando o ícone de sua App:
Para alterar o ícone de sua App no celular: Crie seu ícone com o Paint, por exemplo, com a extensão .png e grave-o na área de trabalho, por exemplo.
Em seguida, em app / res / mipmap dê um click com o botão direito do mouse em mipmap. Na janela que abrir, click em New e em Image Asset:
Em Asset Type selecione o botão de opção Image e click nos ... para o caminho do arquivo.
Localize seu arquivo e click em Ok
Agora basta confirmar a modificação, executar novamente o programa e verificar o ícone.
Se você quiser gravar e rodar sua App diretamente no seu celular, você deve tornar o seu aparelho Android acessível ao Android Studio. Para isso, você deve habilitar o “modo debug”, clicando 7 vezes no “Número de Compilação” (Configurações / Sobre o Dispositivo / Info. Software / Número de Compilação ) nas opções do celular. Após habilitá-lo, ficará disponível a “Opção do desenvolvedor”. Abra-a e marque a opção “Depuração de USB” dentro do menu “Opções de desenvolvedor”. Esses nomes podem variar conforme o modelo e linguagem do aparelho.
Ligue seu celular ao computador através de um cabo usb.
Isso feito, se você tiver o driver de seu celular instalado no computador, basta abrir o Debug ‘App’ e selecionar o seu dispositivo como device para debug. Veja a figura a seguir:
A partir desse momento sua App será gravada em seu aparelho e rodará diretamente no celular.
