Curso Android – Widgets Básicos e seus eventos

Cada vez mais, a programação de aplicações Android está em voga. Para que os leitores possam aprender e criaraplicações, iremos mostrar numa primeira fase o básico, os widgets. Para isso, terá que ter instalado o Android Studio, pois o curso irá ser todo realizado com ajuda dessa ferramenta. Após a instalação do mesmo, deverá ser criado um projeto novo e realizar os seguintes passos:

  1. Start a new Android Project -> Next
  2. Application Name: MyFirstApplication ->Next
  3. Choose API 15: Android 4.0.3 (IceCreamSandwich) ->Next
  4. Empty Activity -> Next
  5. Finish

Conteúdo Projeto Android

O projeto android é criado imediatamente com muito material, como se pode ver na imagem anterior. As pastas essenciais para o tutorial de hoje são:

  • pasta Java – é a pasta onde todo o código Java é guardado
  • layout – irá guardar todos os ecrãs que poderemos utilizar no formato .xml

Para saber mais acerca da distribuição de pastas, leia o tutorial anterior aqui.

Programar Widgets

Existe uma grande variedade de widgets que podemos utilizar, tais como, “Button”, “TextView”, “ImageView”, entre outros. Para que possa aceder ao conteúdo e realizar operações sobre eles, devemos sempre instanciar um objecto do tipo deles e utilizar a função findViewById, como no exemplo a seguir:

// Para ir buscar o meu botão
Button btn = (Button )findViewById(R.id.BUTTON_ID);

// Para ir buscar a minha text view
TextView tv = (TextView) findViewById(R.id.TEXT_VIEW_ID);

Layout com widgets:

Para que possa prosseguir com sucesso durante o tutorial, deverá ser utilizado no layout “activity_main.xml” o seguinte código (colocar dentro das tags “RelativeLayout”):

<LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Nome:"
            android:id="@+id/textView" />
        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/editName_txt"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@+id/textView" />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Submeter Dados"
            android:id="@+id/btnSubmit"
            android:layout_below="@+id/editIdade_txt"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_marginTop="45dp"/>
    
</LinearLayout>

Widgets e eventos:

Com o layout criado, devemos reparar que cada widget tem um ID. Para prosseguir no tutorial é importante esclarecer o seguinte:

  • findViewById(int id) – Esta função vai buscar um tipo Object com o ID que lhe passarmos.
  • Toast – Mostra uma mensagem no ecrã

Podemos ver o id que damos ao widget na linha do id:

<TextView
            (...)
            android:id="@+id/editName_txt" />

O nosso próximo objetivo é programar o comportamento do nosso botão quando clicamos nele. Existem duas formas de o programar. A primeira, é no ficheiro .xml dizer ao botão que no evento onClick ele terá de chamar a função submeterDados:

<Button
            (...)
            android:onClick="submeterDados"/>

De seguida, na MainActivity.java, devemos tratar essa função da seguinte forma:

public void submeterDados(View view) {
        // Vou submeter os dados mas, e se os dados estiverem vazios?
        // Como vou buscar o conteúdo da editText?
        EditText nome = (EditText)findViewById(R.id.editName_txt);
        if(nome.getText().toString() == "")
            return;

        Toast.makeText(getApplicationContext(), nome.getText().toString(), Toast.LENGTH_LONG);
}

Uma segunda forma é programar o comportamento do botão dinamicamente. Para isso vamos acrescentar um segundo botão ao nosso layout:

(...)
<Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Botão Dinamico"
            android:id="@+id/btnDinamico"/>
</LinearLayout>

Para terminar, no método onCreate da MainActivity.java acrescentar o seguinte:

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button dinamico = (Button) findViewById(R.id.btnDinamico);
        dinamico.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                submeterDados(v);
            }
        });
    }

Pode verificar que o comportamente de ambos os botões é exatamente o mesmo mas ambos foram codificados de formas completamente distintas.

Próximo tutorial: Utilização de Intents para passar de um ecrã para outro.

Fonte das imagens