Tutorial android

nick4xd · 21 de janeiro de 2016

Olá a todos. Estarei nesse post frequentemente para atualizá-lo com conteúdo em programação Android.

Sem mais delonga, vamos começar!!

21/02/2016

Introdução ao Android - Instalação e Primeiro Contato

Spoiler

PROGRAMAS NECESSÁRIOS

Primeiramente, precisamos preparar nosso computador para trabalhar com android.

Os programas necessários são:

Clique nos itens acima para baixá-los.

O java é essencial para programar, pois o mesmo será em linguagem java com adaptação android

O Android Studio é a plataforma onde vamos desenvolver os nossos projetos.

O Blue Stacks será nosso simulador para testar o aplicativo desenvolvido.

A instalação dos programas acima não possuem segredo, basta instalar de forma padrão.

CRIANDO O PRIMEIRO PROJETO

Agora, abra o Android Studio e vá em New Project.
Defina um nome para o projeto e um domínio (procure um que seja único, no meu caso, mantive o padrão: user.example.com)
Clique em Next e escolha o tipo de dispositivo do seu aplicativo, que por padrão vem marcado para Phone And Tablet
Escolha a versão com qual deseja usar seu aplicativo. Se clicar no link Help me Choose, ele irá mostrar a estatística de uso das versões, onde a usual mais antiga é a Froyo (2.2)
Por padrão, escoli 4.4 Kitkat
Next
Agora você pode escolher alguns modelos (activity). Neste tópico tutorial, estarei escolhendo o primeiro, ou seja, Add No Activity, sem Activity, pois vamos criar nosso do zero
Finish

Aguarde ele carregar tudo.

Após carregado, verás um menu vertical à esquerda do programa. Clique sobre o Project, para ver a estrutura de seu aplicativo.

Nele temos o item app, e em seus sub-itens temos:

Manifests
Java
- dominio.myapplication
res
- drawable
- minimap
- values
  - colors.xml
  - strings.xml
  - styles.xml

CRIANDO NOSSO ACTIVITY PRINCIPAL

Agora vamos criar nossa tela principal, chamada activity_main.xml

Para isso siga os passos

Clique com o botão direito no sub-item res
Vá em New
XML
Layout XML

No nome desse layout coloquemos activity_main e mantemos Root Tag como LinearLayout. Pressione Finish

Observe que esse layout foi para o item res, sub-item layout.

Ao darmos dois cliques sobre ele, aparecerá um prévia de seu aplicativo. Podemos trabalhar nele via Código (Text) ou via Design. Essas duas opções estão logo abaixo da tela, como se fossem abas.

Vamos primeiramente adicionar um textview (um texto) diretamente do código. Para isso, clique na aba inferior Text e cole o seguinte código (entre as tags <LinearLayout e LinearLayout/>)


<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Seu Texto Aqui" />

Observe que temos apenas três referências: comprimento, altura, texto

wrap_content significa o seguinte: Tamanho necessário para visualização do mesmo na tela. Ou seja, a primeira linha quer dizer que o tamanho em comprimento dele será o suficiente para ser exibido na tela. A segunda linha refere-se a sua altura.

A terceira linha é o seu texto.

Se retornar agora para a aba Design, verás seu texto ali.

Agora vamos editar o texto pela aba Design.

Clique sobre o texto e altere suas propriedades do lado direito em Properties

Pode alterar cor, orientação, posição, tamanho, fonte, etc etc...

Você pode dar zoom nesse pré-visualização clicando na lupa no menu superior do celular

Aqui no meu caso, eu alterei a cor do texto e deixei-o negrito. Observe o que aconteceu se for na aba Text.


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Seu Texto Aqui"
        android:textColor="#ff0000"
        android:textStyle="bold"/>

Esta é uma boa maneira para você aprender um pouco do código Android.

USANDO VARIÁVEIS

Agora, para finalizar o tutorial do dia 21/01/2016, vamos utilizar uma variável. Vamos supor que o texto que você inseriu deve variar conforme a situação. Para isso, vamos mudar a linha


android:text="Seu Texto Aqui"

por


android:text="@string/texto" />

@string significa o tipo da variável, ou seja, string. O que vem após o / (texto) significa o nome da variável string.

Observe que @string/texto fica da cor vermelha, pois o mesmo não foi ainda declarado. Para isso, vamos no item values e sub-item strings.xml

Cole essa linha entre as tags Resources o seguinte:


<string name="texto">Seu Texto</string>

Volte para o activity_main e veja que o resultado é o mesmo, porém, ele puxa de uma variável. Isso torna mais fácil manipular a propriedade de texto dele.

Uma função muito legal do Android Studio, é declarar ou reparar erros de forma automática. Vamos fazer um teste.

Remova a linha que você acabou de inserir e vá para o activity_main, Text.

A linha android:text"@string/texto" /> voltou a ficar vermelha. Clique sobre ela e pressione as teclas: "Alt" + "Enter"

Repare que ela apareceu uma opção: Create string value resource 'texto'

Podemos declarar apenas pressionando Enter novamente.

Aparecerá uma janela para definir o valor inicial desta variável. Digite o que quiser, no meu caso: Seu Texto Aqui. Pressione OK e verás que a linha passa a ficar verde. Observe que a mesma linha que pedi para colocares manualmente na strings.xml é o que foi adicionado agora através do "Alt" + "Enter"

Com isso encerramos o primeiro tutorial de Android.

Qualquer dúvida, comente abaixo.

Até a próxima.

22/01/2016

Criando Classe Java, Declaração em Android Manifest, Caixa de Texto e Botão

Spoiler

CRIANDO JAVA CLASS MAIN ACTIVITY E DECLARANDO NO ANDROID MANIFEST

Bom Pessoal, devemos criar (antes mesmo da primeira aula hehe) o MainActivity Principal, uma classe do java, e não o layout como fizemos na aula passada.

Para tal, devemos ir no item java, e com botão direito sobre domínio.myapplication (myapplication pois é o nome da minha aplicação, que optei por manter em default)

New

Java Class

Nomeamos como MainActivity e pressionamos OK

Feito isso, para torná-la principal, adicione após MainActivity o seguinte: extends Activity. Repare que a palavra Activity ficou vermelha, pois não a importamos ainda no projeto. Podemos fazê-lo inserindo na linha acima import android.app.Activity; ou clicar sobre a palavra em vermelho e pressionar "Alt" + "Enter" (muito mais simples).

Agora vamos colocar entre os {} a seguinte chamada do layout:


@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }


Importe o Bundle que ficou em vermelho clicando sobre ele e "Alt" + "Enter" e se tudo está correto, é para ficar desse jeito:


import android.app.Activity;
import android.os.Bundle;

/**
 * Created by cypri on 22/01/2016.
 */
public class MainActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

Agora vamos adicionar o código inicial necessário para que o layout seja carregado. Vá em AndroidManifest, dentro do item manifest e insira o seguinte código entre as tags <application:


<activity android:name=".MainActivity" >
    <intent-filter> <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER"/>
    </intent-filter>
</activity>

CAIXA DE TEXTO E BOTÃO

Agora vamos inserir uma caixa de texto e um botão.

Para isso, abra o projeto. Vamos inserir um objeto que é do tipo <Edit Text

Vamos antes, alterar a mensagem que colocamos na aula anterior, algo como "Digite seu nome". Para isso, vá no item res, sub-item values e clique duplo em strings.xml.

Altere a propriedade text da string texto para a mensagem acima.

Agora volte para o activity_main e insira o código abaixo (depois do <TextView) :


<EditText
    android:id="@+id/nomeTxt"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:inputType="textPersonName" >
    <requestFocus />
</EditText>

Observe que estamos usando na primeira linha, um ID, nomeado como nomeTxt (igual a estrutura do string -> @tipoDaVariável /nomeDaVariável). Podemos a partir desse id, chamar o valor desta caixa de texto alterar o seu valor, tornando-o dinâmico.

Na penúltima linha, inputType é o tipo de texto (textPersonName é normalmente usado para texto que só contenham letras, texto puro).

Na última linha, requestFocus, o cursor será posicionado automaticamente na caixa de texto.

Tente executar clicando no ícone Play no menu superior ou "Alt" + "Shift" + "F10"

Caso não consiga ou apareça erros na tela, tente reescrever o código manualmente.

Perceba-se que a caixa de texto ficou na mesma linha que o texto. Para fazer a "quebrar de página" precisamo adicionar no activity_main, antes do primeiro textview a seguinte linha:

android:orientation="vertical">

O código desta página deverá ficar assim:


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/texto"
        android:textColor="#ff0000"
        android:textStyle="bold"
        android:layout_gravity="center_horizontal" />

    <EditText
        android:id="@+id/nomeTxt"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPersonName">
        <requestFocus />
    </EditText>

    </LinearLayout>

Quem estiver bem atento, verás que alterei o alinhamento do texto.
Agora execute novamente e veja o resultado.
Se estiver com o blue stacks aberto, basta ir no menu Run e Debug 'app' (no Android Studio)

Aí o aplicativo na plataforma do Blue Stacks será automaticamente atualizado (Caso usas windows 10, recebes uma notificação a direita)

BOTÃO

Agora vamos adicionar o botão. Desta vez, o elemento será será <Button (Jura?)

Insira esse código abaixo do </EditText>


<Button
	android:id="@+id/OKButton"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
 	android:layout_gravity="center"
	android:text="@string/MensagemOK" />


Observe que temos id do botão e id para o texto do botão, para caso queira editar de forma dinâmica... Para uso com o arduino talvez... (captou @Isadora Ferraz?)

Entretanto, precisaremos declarar a variável string.. Já sabem: "Alt" + "Enter" nele + nome do botão, que optei por "Enviar"

Fica declarado automaticamente então a linha <string name="MensagemOK">Enviar</string>

Observe ainda neste Button, que usamos também o alinhamento, layout_gravity, deixando-o centralizado.

Compile e teste o seu progresso.

Por hoje é só. Pra quem quiser se aventurar a aplicar alguma função com este botão enquanto não posto a próxima aula, segue algumas dicas:


android:onClick="exibeMensagem"

public void exibeMensagem(View v) {
        Editable texto = this.Nome.getText();
        this.Mensagem.setText(texto);
}

<TextView android:id="@+id/mensagemText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

private EditText Nome;
private TextView Mensagem;

this.Nome = (EditText) findViewById(R.id.nomeText);
this.Mensagem = (TextView) findViewById(R.id.mensagemText);

Até a próxima!

23/01/2016

Tratamento da informação da Caixa de Texto

Spoiler

Esta será a última aula de fundamentos básicos de Android. A partir da próxima, vamos desenvolver algo mais complexo, uma calculadora (Tá, não é muito complexo, mas pra segunda etapa está ótimo).

Hoje vamos capturar a informação do TextBox e exibir esses dados. Para isso vamos utilizar os códigos que deixei na aula passada para quem quisesse se aventurar sozinho. Vamos lá.

Antes de mais nada, devemos inserir a linha android:onClick="exibeTexto" nas propriedades do botão, pois ela indica qual ação executará ao clicar

Agora, vamos adicionar um novo TextView abaixo do botão. Esse textview será o valor entrado na caixa de texto, ou seja, não vamos informar nada em sua propriedade text ainda.

Insira abaixo do <Button o seguinte código


 <TextView android:id="@+id/mensagemTexto"
           android:layout_width="match_parent"
           android:layout_height="wrap_content" />

Agora vamos criar duas variáveis, uma do tipo EditText para capturar o Nome (valor da caixa de texto) e outra do tipo TextView para exibir o texto capturado da caixa de texto.

Essas duas variáveis serão declaradas no MainActivity.java com a estrutura private, ou seja, apenas onde elas forem declaradas é que serão reconhecidas.

A estrutura das variáveis ficaram assim:


private EditText Nome;
private TextView Texto;

Insira-os antes @Override, logo após a primeira chave “{“

Note que as duas strings ficarão em vermelhas, pois necessita a importação de suas respectivas classes.. “Alt” + “Enter” nelas.

Agora precisamos informar que a string Nome equivale ao valor da caixa de texto e string Texto equivale à propriedade text do último TextView que adicionamos. (Repare que em ambos os objetos nós declaramos um id, sendo elas respectivamente: nomeTxt e mensagemTexto)

Faremos isso da seguinte forma:


this.Nome = (EditText) findViewById(R.id.nomeTxt);
this.Texto = (TextView) findViewById(R.id.mensagemTexto);

Calma, vou explicar essa estrutura.

This.Nome quer dizer literalmente: “Essa variável Nome”

O = será o atribuidor, ou seja, estaremos atribuindo um valor ou uma definição para a variável Nome

(EditText) findViewById(R.id.nomeTxt); significa o seguinte:

EditText quer reforçar o tipo da variável.

findViewById significa Identificador.. do que? Do nomeTxt. Resumindo:

Estou dizendo que a variável nome, que é do tipo EditText, será o identificador da caixa de texto nomeTxt.

O mesmo se refere para a segunda linha.

Cole as duas linhas na classe java (MainActivity.java) dentro de public void onCreate(Bundle savedInstanceState){

Logo após as duas linhas já existentes. Tudo deverá ficar assim:


 public class MainActivity extends Activity {

    private EditText Nome;
    private TextView Texto;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        this.Nome = (EditText) findViewById(R.id.nomeTxt);
        this.Texto = (TextView) findViewById(R.id.mensagemTexto);
    }
}

Agora basta criar o método que vai exbir a mensagem (lembra do primeiro código dessa aula? Evento onClick do botão? Então..)

Então, após fechar as chaves “}” do método onCreate, dentro ainda de MainActivity.java, vamos adicionar o método:


 public void exibeTexto(View v) {
		Editable mensagem = this.Nome.getText();
        this.Texto.setText(mensagem);
}

Após colar, Importe o View e Editable com "Alt" + "Enter".

Neste método, estamos fazendo o seguinte:

Estamos criando uma variável do tipo editável com o nome de mensagem que está recebendo o texto do EditText (caixa de texto) nome (getText)

Já no this.Texto, estamos inserindo o texto, (no caso é a mensagem que está entre “()” ), devido a propriedade setText

Teste o aplicativo e se tudo deu certo, ao digitar um texto e pressionar o botão Enviar, seu texto deve exibir abaixo do botão.

Personalizando a mensagem

Agora, rapidamente, vamos formatar este texto. Faça as alterações gráficas que você desejar, seja pelo Text ou Design. Optei por apenas deixar da cor azul, centralizado, tamanho negrito.

Por curiosidade:


 <TextView android:id="@+id/mensagemTexto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:gravity="center_horizontal"
    android:textColor="#0000ff"
    android:textStyle="bold"
    android:textSize="18dp" />

Agora, vamos criar uma variável do tipo String com nome de msg e atribuir a nossa formatação, da qual chamamos de concatenação, que é quando queremos juntar (concatenar) texto fixo com dinâmico, valores, etc, etc.

String msg = "Olá " + mensagem.toString() +", seja bem-vindo(a)!";

E substituir


this.Texto.setText(mensagem);

por


this.Texto.setText(msg);

Tudo isso no método exibeTexto, ficando:


 public void exibeTexto(View v) {
    Editable mensagem  = this.Nome.getText();
    String msg = "Olá " + mensagem.toString() + ", seja bem-vindo(a)!";
    this.Texto.setText(msg);
}

Se tudo deu certo, você deverá ser recebido com uma saudação de boas vindas após pressionar o botão.

Desafio: Refaça todo o projeto, agora porém, sem olhar os código, apenas seguindo o que aprendeu. Caso ainda não consiga lembrar tudo, sugiro que refaça o projeto, mas desde que os nomes, IDs, variáveis sejam diferentes do usado aqui, pois assim, você será obrigado a saber quem chamando quem ou declarando algo..

Por hoje é só. Até o próximo.

30/01/2016

Calculadora

Spoiler

Hoje, iniciaremos um projeto funcional, uma calculadora. Para isso, inicie um novo projeto no Android Studio e de um nome. Irei chamar de Calc.

Dê um Next. Selecione a versão mínima do Android para executar o app, usarei o 4.4 KitKat, e de um Next.

Clique em “Add No Activity” e Finish.

Vamos agora começar a desenvolver primeiro o layout da calculadora. Para isso, clique com o botão direito no sub-item “res”, “new”, “XML”, “XML Layout File”

Manterei o nome como “layout”. Vamos utilizar o modo Design dessa vez. Observe que no canto direito, em “Component Tree” você terá o “Linear Layout”. Nele podemos ajustar a orientação, no quadro “Properties”. Mude a Orientação para Vertical e o Gravity para “center_horizontal”.

Agora, no canto esquerdo, clique no item Large Text e arraste-o para o centro da tela. Ele será o visor da nossa calculadora. Dê dois cliques sobre ele e defina um id, no meu caso “txtVisor” (Sem Aspas)

Altere a s propriedades de fonte, tamanho, plano de fundo, alinhamento do texto (o padrão das calculadoras é deixar o alinhamento na direita “ViewEnd”). Lembre-se de deixar sem texto.

Agora vamos adicionar os botões. Serão 10 para os números...

Para isso, vamos lançar alguns LinearLayouts Horizontal para que os botões fiquem mais organizados. Vamos aqui, inserir 4 botões por linha. Altere a propriedade desejada do botão e Adicione os outros 3 com o “Ctrl” “C” – “Ctrl” “V” + “Clique”

Ajuste o tamanho do LinearLayout Adicionado em volta dos botões para que se tenha uma centralização dos mesmos. Copie a primeira linha e cole mais três abaixo. Serão 16 botões.

Ajuste-os desta forma (por exemplo):

7 8 9 CE

4 5 6 +

1 2 3 -

0 / * =

Não esqueça de nomear os IDs dos botões. Utilizei: "btn1, btn2, btnCE, btnAdicao, btnIgual, etc..."

Você pode usar estes LinearLayout Horizontal para criar espaçamentos entre o visor e os botões e entre o topo e o visor.

Personalize da forma que quiser, coloque títulos, textos, enfim... Fica a seu critério.

Aqui está o código de como ficou o layout da primeira aula.

Spoiler



 <?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center_horizontal"
    android:weightSum="1">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.05"></LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.07" >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Calculadora"
            android:id="@+id/textView"
            android:layout_gravity="center_horizontal"
            android:textStyle="bold"
            android:textSize="30dp"
            android:textAlignment="center" />
    </LinearLayout>

    <TextView
        android:layout_width="249dp"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:id="@+id/txtVisor"
        android:textSize="25dp"
        android:textStyle="bold"
        android:background="#cf9f9898"
        android:textAlignment="viewEnd"
        android:layout_weight="0.05" />

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.16"></LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="7"
            android:id="@+id/btn7"
            android:textSize="20dp" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="8"
            android:id="@+id/btn8"
            android:textSize="20dp" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="9"
            android:id="@+id/btn9"
            android:textSize="20dp" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="CE"
            android:id="@+id/btnCE"
            android:textSize="20dp" />
    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="4"
            android:id="@+id/btn4"
            android:textSize="20dp" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="5"
            android:id="@+id/btn5"
            android:textSize="20dp" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="6"
            android:id="@+id/btn6"
            android:textSize="20dp" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="+"
            android:id="@+id/btnAdicao"
            android:textSize="20dp" />
    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1"
            android:id="@+id/btn1"
            android:textSize="20dp" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2"
            android:id="@+id/btn2"
            android:textSize="20dp" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="3"
            android:id="@+id/btn3"
            android:textSize="20dp" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="-"
            android:id="@+id/btnSubtracao"
            android:textSize="20dp" />

    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="0"
            android:id="@+id/btn0"
            android:textSize="20dp" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="/"
            android:id="@+id/btnDivisao"
            android:textSize="20dp" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="*"
            android:id="@+id/btnMult"
            android:textSize="20dp" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="="
            android:id="@+id/btnIgual"
            android:textSize="20dp" />
    </LinearLayout>
</LinearLayout>

Farei outro ainda hoje para compensar a falta de conteúdo durante as próximas semanas.

Até Breve

30/01/2016

Funções nos botões e cálculo matemático (Corrigido)

Spoiler

Vamos prosseguir. Criemos um Java Class clicando com o botão direito sob o item java sub-item seudominio

Vamos a New, Java Class. Nomeie como calculadora por exemplo. Teremos então, a nossa classe para colocarmos as funções desejadas. Adicionamos na primeira linha da classe, um extends Activity para torna-la principal.

Adicione o código Override padrão:


@Override

     public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.layout);

}


Dê um Alt Enter no Bundle para importá-lo. Agora vá para o Android Manifest para indicar o layout dentro do application o seguinte código:


<activity android:name=".calculadora" >

    <intent-filter><action android:name="android.intent.action.MAIN"/>
        <category android:name="android.intent.category.LAUNCHER"/>

    </intent-filter>

</activity>


Agora precisamos adicionar um evento onClick nos botões da calculadora para que seja exibido o mesmo no visor. Vamos então no Layout, no modo Text e procuramos o botão “0”. Podemos usar o Ctrl + F para pesquisar (“btn0”).


Abaixo da última linha desse botão, antes de /> inserimos a linha:


android:onClick="func0"


Voltemos na nossa java class e inserimos as seguintes variáveis antes de Override:


String GetVisor;
private TextView Visor;


Agora vamos, dentro de Override, inserir a linha que refere-se o nosso visor:


this.Visor = (TextView) findViewById(R.id.txtVisor);


Agora vamos criar o método func0. Basta inserir, após o Override, esse método:


public void func0(View v) {

    GetVisor = Visor.getText().toString();
    this.Visor.setText(GetVisor + "0");

}


Dê Alt + Enter + Enter no nosso View.


Nesse método, o GetVisor, declarado como string anteriormente, irá pegar pelo getText o que estiver no Visor, e após pegar o dado, irá definir o texto (setText) do visor com o valor atual + o 0. Caso você tenha digitado “45” e digitar o 0 ficará “450” e não apenas “0”.


Faça o teste no emulador.


Agora, vamos colocar o restante das funções. Para isso, basta copiar e colar e alterar apenas o que estiver em vermelho:


public void func0(View v) {

    GetVisor = Visor.getText().toString();
    this.Visor.setText(GetVisor + "0");

}


Faça isso para todos os botões, exceto o Igual e o CE, pois eles tem códigos diferentes que veremos em breve.

Spoiler



public void func1(View v) {

    GetVisor = Visor.getText().toString();
    this.Visor.setText(GetVisor + "1");

}

public void func2(View v) {

    GetVisor = Visor.getText().toString();
    this.Visor.setText(GetVisor + "2");

}

public void func3(View v) {

    GetVisor = Visor.getText().toString();
    this.Visor.setText(GetVisor + "3");

}

public void func4(View v) {

    GetVisor = Visor.getText().toString();
    this.Visor.setText(GetVisor + "4");

}

public void func5(View v) {

    GetVisor = Visor.getText().toString();
    this.Visor.setText(GetVisor + "5");

}

public void func6(View v) {

    GetVisor = Visor.getText().toString();
    this.Visor.setText(GetVisor + "6");

}

public void func7(View v) {

    GetVisor = Visor.getText().toString();
    this.Visor.setText(GetVisor + "7");

}

public void func8(View v) {

    GetVisor = Visor.getText().toString();
    this.Visor.setText(GetVisor + "8");

}

public void func9(View v) {

    GetVisor = Visor.getText().toString();
    this.Visor.setText(GetVisor + "9");

}

public void funcAdicao(View v) {

    GetVisor = Visor.getText().toString();
    this.Visor.setText(GetVisor + "+");

}

public void funcSubtracao(View v) {

    GetVisor = Visor.getText().toString();
    this.Visor.setText(GetVisor + "-");

}

public void funcMultiplicacao(View v) {

    GetVisor = Visor.getText().toString();
    this.Visor.setText(GetVisor + "*");

}

public void funcDivisao(View v) {

    GetVisor = Visor.getText().toString();
    this.Visor.setText(GetVisor + "/");

}


Não se esqueça de adicionar também o android:onClick=”funcX”

Agora, vamos adicionar uma biblioteca externa, pois o java não tem um método nativo para calcular expressões matemáticas. Para isso, baixe o anexo para instalar a biblioteca. Para adicioná-la, copie-o e cole-o na pasta:

C:\User\seuUser\AndroidStudioProjects\Calc\app\libs

Volte para a aplicação e execute-o para que seja incorporado a biblioteca no projeto. Ela se encontrará no item Gradle Scripts, Sub-item build.gradle

Ao dar dois cliques sobre ele, verás que na última linha, terá criado dependencies, e nela tem a compilação do libs.

Agora adicione o evento onClick de CE e de Igual

Vamos antes de executar as expressões matemáticas, adicionar a seguinte função CE:


public void funcCE(View v) {

    this.Visor.setText("");

}

E abaixo dele, vamos executar as expressões matemáticas.


public void funcIgual(View v) {

    GetVisor = Visor.getText().toString();
    Expression e = new ExpressionBuilder(GetVisor).build();
    double result = e.evaluate();
    String exibeResult = String.valueOf(result);
    this.Visor.setText(exibeResult);

}

Execute, mesmo com as linhas em vermelho. Após dar o erro, dê “Alt” + “Enter” em Expression e ExpressionBuilder

Explicação do código acima na próxima aula. Já está funcionando os cálculos, falta agora corrigir erros de entrada (45//2 ou 45*/7)

Até amanhã.

09/02/2016

Tratando erros e Finalizando Projeto de Calculadora

Spoiler

Depois de um longo tempo sem continuação, vamos agora tratar o erro que se obtém ao tentar executar uma expressão matemática inválida.

Primeiramente, vamos ao nosso javaclass - calculadora.java e usar o método try - catch do java, dentro do método igual, ou seja, verificar o possível erro somente após pressionar o botão "=".

Colocamos na segunda linha, após GetVisor = ... o seguinte:

try {

código atual

}

Esse código atual é o método de resolução do cálculo, que já está presente aí no seu código. Basicamente ficou:

Try = "Tente executar o que está entre as chaves ({})"

Caso resulte em erro, precisamos fazer alguma outra coisa, e é aí que entra o catch

Após o fechamento da chave do try, digite o seguinte código


	catch (Exception ex) {
            AlertDialog alertDialog = new AlertDialog.Builder(this).create();
            alertDialog.setTitle("Erro!");
            alertDialog.setMessage("Verifique a expressão matemática utilizada!!");
            alertDialog.show();
        }

Dê um Alt + Enter no "AlertDialog"

Spoiler

A função completa do igual ficou assim:



public void funcIgual(View v) {

        GetVisor = Visor.getText().toString();


        try {

            Expression e = new ExpressionBuilder(GetVisor).build();
            double result = e.evaluate();
            String exibeResult = String.valueOf(result);
            this.Visor.setText(exibeResult);

        } catch (Exception ex) {

            AlertDialog alertDialog = new AlertDialog.Builder(this).create();
            alertDialog.setTitle("Erro!");
            alertDialog.setMessage("Expressão matemática Inválida!");
            alertDialog.show();

        }
    }

Explicação: Simplesmente quando ocorre algum erro, se é utilizado o método try e catch, o erro é direcionado para o catch, e neste caso, nós exibimos uma mensagem utilizando o "AlertDialog", declarando-o na primeira linha, definido o título na segunda, a mensagem na terceira e a exibição na quarta.

Agora, para utilizar a calculadora em seu dispositivo móvel real, basta acessar o seguinte diretório de seu computador:

C:\Users\seuUser\AndroidStudioProjects\Calc\app\build\outputs\apk

Copie o app-debug.apk para seu celular e execute-o. Lembre-se de habilitar em seu celular, a opção "Fontes Desconhecidas" para que seja permitido sua execução.

Todos os códigos:

Spoiler

layout.xml



<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center|center_horizontal"
    android:weightSum="1">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.05"></LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.07">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Calculadora"
            android:id="@+id/textView"
            android:layout_gravity="center_horizontal"
            android:textStyle="bold"
            android:textSize="30dp"
            android:textAlignment="center" />
    </LinearLayout>

    <TextView
        android:layout_width="249dp"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:id="@+id/txtVisor"
        android:textSize="25dp"
        android:textStyle="bold"
        android:background="#cf9f9898"
        android:textAlignment="viewEnd"
        android:layout_weight="0.05" />

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.16"></LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="7"
            android:id="@+id/btn7"
            android:textSize="20dp"
            android:onClick="func7"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="8"
            android:id="@+id/btn8"
            android:textSize="20dp"
            android:onClick="func8"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="9"
            android:id="@+id/btn9"
            android:textSize="20dp"
            android:onClick="func9"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="CE"
            android:id="@+id/btnCE"
            android:textSize="20dp"
            android:onClick="funcCE"/>
    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="4"
            android:id="@+id/btn4"
            android:textSize="20dp"
            android:onClick="func4"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="5"
            android:id="@+id/btn5"
            android:textSize="20dp"
            android:onClick="func5"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="6"
            android:id="@+id/btn6"
            android:textSize="20dp"
            android:onClick="func6"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="+"
            android:id="@+id/btnAdicao"
            android:textSize="20dp"
            android:onClick="funcAdicao"/>
    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1"
            android:id="@+id/btn1"
            android:textSize="20dp"
            android:onClick="func1"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2"
            android:id="@+id/btn2"
            android:textSize="20dp"
            android:onClick="func2"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="3"
            android:id="@+id/btn3"
            android:textSize="20dp"
            android:onClick="func3"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="-"
            android:id="@+id/btnSubtracao"
            android:textSize="20dp"
            android:onClick="funcSubtracao"/>

    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="0"
            android:id="@+id/btn0"
            android:textSize="20dp"
            android:onClick="func0" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="/"
            android:id="@+id/btnDivisao"
            android:textSize="20dp"
            android:onClick="funcDivisao"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="*"
            android:id="@+id/btnMult"
            android:textSize="20dp"
            android:onClick="funcMultiplicacao"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="="
            android:id="@+id/btnIgual"
            android:textSize="20dp"
            android:onClick="funcIgual"/>
    </LinearLayout>

    <Button
        android:layout_width="126dp"
        android:layout_height="wrap_content"
        android:text="."
        android:id="@+id/btnDecimal"
        android:onClick="funcDecimal"
        android:layout_gravity="center_horizontal" />

</LinearLayout>

Spoiler

calculadora.java



package com.example.cypri.calc;

import android.app.Activity;
import android.app.AlertDialog;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

import net.objecthunter.exp4j.Expression;
import net.objecthunter.exp4j.ExpressionBuilder;

/**
 * Created by cypri on 30/01/2016.
 */
public class calculadora extends Activity {

    String GetVisor;
    private TextView Visor;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout);

        this.Visor = (TextView) findViewById(R.id.txtVisor);
    }


    public void func0(View v) {

        GetVisor = Visor.getText().toString();
        this.Visor.setText(GetVisor + "0");

    }

    public void func1(View v) {

        GetVisor = Visor.getText().toString();
        this.Visor.setText(GetVisor + "1");

    }

    public void func2(View v) {

        GetVisor = Visor.getText().toString();
        this.Visor.setText(GetVisor + "2");

    }

    public void func3(View v) {

        GetVisor = Visor.getText().toString();
        this.Visor.setText(GetVisor + "3");

    }

    public void func4(View v) {

        GetVisor = Visor.getText().toString();
        this.Visor.setText(GetVisor + "4");

    }

    public void func5(View v) {

        GetVisor = Visor.getText().toString();
        this.Visor.setText(GetVisor + "5");

    }

    public void func6(View v) {

        GetVisor = Visor.getText().toString();
        this.Visor.setText(GetVisor + "6");

    }

    public void func7(View v) {

        GetVisor = Visor.getText().toString();
        this.Visor.setText(GetVisor + "7");

    }

    public void func8(View v) {

        GetVisor = Visor.getText().toString();
        this.Visor.setText(GetVisor + "8");

    }

    public void func9(View v) {

        GetVisor = Visor.getText().toString();
        this.Visor.setText(GetVisor + "9");

    }

    public void funcAdicao(View v) {

        GetVisor = Visor.getText().toString();
        this.Visor.setText(GetVisor + "+");

    }

    public void funcSubtracao(View v) {

        GetVisor = Visor.getText().toString();
        this.Visor.setText(GetVisor + "-");

    }

    public void funcMultiplicacao(View v) {

        GetVisor = Visor.getText().toString();
        this.Visor.setText(GetVisor + "*");

    }

    public void funcDivisao(View v) {

        GetVisor = Visor.getText().toString();
        this.Visor.setText(GetVisor + "/");

    }

    public void funcDecimal(View v) {

        GetVisor = Visor.getText().toString();
        this.Visor.setText(GetVisor + ".");

    }

    public void funcCE(View v) {

        this.Visor.setText("");

    }

    public void funcIgual(View v) {

        GetVisor = Visor.getText().toString();


        try {

            Expression e = new ExpressionBuilder(GetVisor).build();
            double result = e.evaluate();
            String exibeResult = String.valueOf(result);
            this.Visor.setText(exibeResult);

        } catch (Exception ex) {

            AlertDialog alertDialog = new AlertDialog.Builder(this).create();
            alertDialog.setTitle("Erro!");
            alertDialog.setMessage("Expressão matemática Inválida!");
            alertDialog.show();

        }
    }
}

Spoiler

AndroidManifest.xml



<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.cypri.calc">

    <application android:allowBackup="true" android:label="@string/app_name"
        android:icon="@mipmap/ic_launcher" android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <activity android:name=".calculadora" >
            <intent-filter> <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>

    </application>

</manifest>

Com isso concluímos nosso tutorial básico de Android. Vamos nas próximas dicas, acionar o hardware do aparelho, no caso, a câmera, seja para fotos ou vídeos. Partindo disso, vamos criar galerias e outros relacionados. Aguardem!

exp4j-0.4.5.jar.7z

Calc.rar

DiF · 21 de janeiro de 2016

Muito boa sua iniciativa de tutorial básica.... mas ali eu só trocaria o android studio e o blue stacks pelo Eclipse(ele já tem um testador) . de resto está ótimo.. Parabéns.

nick4xd · 21 de janeiro de 2016

Obrigado pelo apoio.

Estou usando o Android Studio por ter mais familiaridade com ele, já o Blue Stacks, é pelo fato do emulador do Android Studio só funcionar em computadores equipados com processador Intel, e também por ser mais rápido do que o padrão.

Mas talvez futuramente eu faço no Eclipse.

nick4xd · 22 de janeiro de 2016

Aula dia 22/01/2016 postada

.if · 22 de janeiro de 2016

muito bom amigo! Favoritei esta página pra quando for fazer uma brincadeira séria qualquer. Só acho que não precisa editar aquele post. Vá criando novos.

Há muitos e muitos e muitos anos me lembro de ter usado um eclipse pra um compilador de um mc...

Agora me responda uma coisa, você ou o amigo @dif , os fontes são portáveis pro tal de eclipse? Este eclipse é aquela IDE que serve pra absolutamente tudo? você ou o amigo @dif pode portar todo o post do amigo @nick4xd como se fosse usando o eclipse? Só esta introdução, só pra efeito de comparação das dificuldades, facilidades, otimizações e tal. Ok.. já sei.. sem tempo.. Tudo bem.. é sério!

Sucessos amigo!

DiF · 22 de janeiro de 2016

@Isadora Ferraz O eclipse é a IDE mais usada. Tem várias versões tanto para programar em java, php ou c... Os arquivos .java sim você pode portar para eclipse. o que ele não porta é o "projeto"

No caso tem que criar primeiro o projeto no eclipse e depois sim colar dentro dele os arquivos java ou xml.. e etc.

nick4xd · 23 de janeiro de 2016

Isso mesmo.

Farei um tutorial futuramente no eclipse. Acho que para os iniciantes, um primeiro contato com Android Studio é mais aconselhável, para aí partir ao Eclipse (mas não tem muito segredo não)

Quanto criar novos post, será que não ficaria desorganizado? Pois é sempre a continuação do anterior. Pensei em sempre que atualizar o post, comentar uma resposta para alertar os seguidores.

DiF · 23 de janeiro de 2016

Eu também acho que é melhor atualizar do que postar em posts separados... ainda mais agora que é o tópico já tem respostas.. aí ficaria tudo espalhado e aí eu teria trabalho para unir os posts.

Continue atualizando normalmente. Só acho o seguinte, ao invés de só colocar a data "21/02/2016" antes da parte oculta pela tag spoiler, coloque um título para identificação.

Por exemplo:

21/02/2016 - Introdução ao android

22/01/2016 - Criando java class main activity e declarando no android manifest

e por aí vai.. assim fica mais fácil de saber o que exatamente vamos encontrar naquele bloco de explicação dentro da tag spoiler.

ps: de preferência sem ser com as letras maiúsculas.. mas como é um título podes colocar em negrito para destaque.

nick4xd · 23 de janeiro de 2016

Show!

DiF · 23 de janeiro de 2016

@nick4xd Depois vou criar um tópico para juntar os tópicos mais importantes do setor de java e seu tutorial fará parte dele.

ps: ele vai ficar em destaque.

Obrigado e continue o excelente trabalho.

nick4xd · 23 de janeiro de 2016

Terceira aula saindo mais cedo pois vou retirar nesse fds kk

Bons estudos.

nick4xd · 30 de janeiro de 2016

Nova aula adicionada! Calculadora. A noite terá mais uma.

nick4xd · 9 de fevereiro de 2016

Depois de longa semana, postei a última aula da calculadora. Em breve, acionaremos a câmera do celular (hardware). Até

LEOPUENA · 10 de fevereiro de 2016

@nick4xd Gostei muito do tópico, Nesse momento estou a tentar largar o AppInventor e passar para o AndroidStudio.

Estou já há 3 dias a tentar programar a calculadora. Estou com problemas ao adicionar a biblioteca. Tentei inserir as linhas

import net.objecthunter.exp4j.Expression;
import net.objecthunter.exp4j.ExpressionBuilder;

mas dá erro.

Podes esclarecer melhor como importar a biblioteca?

______________

Por outro lado, como posso configurar o meu telemovel para simulação por USB?

nick4xd · 10 de fevereiro de 2016

@LEOPUENA Boa noite. Para inserir a biblioteca, você deve primeiro baixá-la do anexo. Após isso deve colocar esse anexo (descompactado) nesta pasta:

C:\User\seuUser\AndroidStudioProjects\Calc\app\libs

Ao fazer isso, é necessário que você compile e execute o seu projeto novamente. Dessa forma, a sua biblioteca será incorporada na árvore de projetos, do lado esquerdo, no item Gradle Scripts, Sub-item build.gradle

Quando você der dois cliques sobre ele, é para que esse trecho seja adicionado:

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.1.1'
}

Tente executar dessa forma. Onde você inseriu as linhas que citou?

Quanto ao emular direto no celular, creio que apenas o App Inventor e o Eclipse.

PS: As duas linhas que inseriu é pra ser automática, quando você da um "Alt" + "Enter" em Expression e ExpressionBuilder na função do botão Igual (=)

LEOPUENA · 11 de fevereiro de 2016

Baixei o ficheiro "exp4j-0.4.5.jar" e copiei para a pasta C:\ProjectosAndroid\CalculadoraFCH\app\libs

Ao compilar não há nenhuma alteração. Ao abrir o "build.gradle" aparece algumas dessas linhas, mas parece que não influenciada pela biblioteca.

9 horas atrás, nick4xd disse:

PS: As duas linhas que inseriu é pra ser automática, quando você da um "Alt" + "Enter" em Expression e ExpressionBuilder na função do botão Igual (=)

Quando dou "Alt" + "Enter" em Expression e ExpressionBuilder o compilador sugere criar duas novas classes, não há opção de importação, por isso inseri manualmente.

Citação

Quanto ao emular direto no celular, creio que apenas o App Inventor e o Eclipse.

É possivel a emulação directa por USB, mas creio que é necessario alguma drive que não sei qual é.

nick4xd · 11 de fevereiro de 2016

@LEOPUENA Ok, então signifca que por algum motivo seu projeto não conseguiu mesmo incorporar a biblioteca. Tente o seguinte:

Remova essas duas linhas que inseriu manualmente, e certifique-se de que a função do botão igual esteja assim:

public void funcIgual(View v) {
        GetVisor = Visor.getText().toString();
        Expression e = new ExpressionBuilder(GetVisor).build();
        double result = e.evaluate();
        String exibeResult = String.valueOf(result);
        this.Visor.setText(exibeResult);
}

(Estou considerando sem o try catch nesse caso)

Certifique-se de que Expression e ExpressionBuilder estejam vermelhos, aí execute assim mesmo, propositando o erro. Após gerar o erro, é provável que a opção de importação apareça.

Caso ainda não resolva, certifique-se novamente o local onde copiou a biblioteca e reinicie o AndroidStudio.

Se por acaso ainda não der certo, posto aqui o projeto em rar, visto que o mesmo já foi concluído. Aí tente localizar as divergências ou se dá erro o meu também.

Abraços.

LEOPUENA · 12 de fevereiro de 2016

Não estou com o meu PC nesse momento, mas creio que já fiz isso. Contudo, seria bom se disponibilizasses o projecto, daí tentarei ver onde está o meu erro.