Nell’articolo precedente avevamo visto tutte le varie tipologie di Layout disponibili per iniziare a creare un’app Android con l’utilizzo di Android Studio.
Vediamo adesso come iniziare a mettere tutto in pratica iniziando a creare una semplice applicazione con alcuni dei componenti più utilizzati: TextView, EditText e Button.
Il risultato finale sarà una semplice schermata con all’interno un campo di testo editabile (EditText), un bottone da cliccare (Button) e un campo di testo (TextView) che non farà altro che riscrivere il testo scritto manualmente da noi nel campo EditText.
Per installare e configurare correttamente l’ambiente di lavoro segui la guida completa di Android Studio.
TextView, EditText e Button
Questi tre campi solo alcuni dei più importanti e tra quelli più utilizzati in quasi tutte le app che ognuno di noi utilizza giornalmente.
Basti semplicemente pensare a un form di login di qualsiasi applicazione presente su molti smartphone e tablet.
I campi utilizzati sono proprio un campo di testo che permette di inserire il nome e la password, un tasto da cliccare per confermare i dati e successivamente un eventuale messaggio di testo di benvenuto.
Andiamo a scoprire adesso cosa sono e come vengono utilizzati questi tre componenti per poterli far interagire tra di loro.
Tre classi fondamentali
A livello puramente visivo, EditText, TextView e Button sono tre oggetti posizionati all’interno dello schermo di un dispositivo.
Inserisco un dato, premo un pulsante e ottengo un risultato!!
Niente di più semplice intuitivamente per qualsiasi persona, ma dietro questi tre semplici componenti ci sta una logica che fa si che tutto ciò possa avere un corretto funzionamento.
Tutti e tre sono delle classi java contenute all’interno del pacchetto (Package in inglese) android.widget che solitamente viene importanto ogni qualvolta si crea un nuovo progetto con Android Studio.
Infatti, nel momento in vui si va a creare una classe di Main o se si utilizza quella di default, “MainActivity.java”, bisognerà soltanto importare i tre widget indispensabili.
package com.example.lentux.nuovoprogetto;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
Button b1;
TextView t1;
EditText e1;
// ...TUTTO IL RESTO DEL CODICE....
}
E’ importante tenere bene a mente queste tre classi perchè saranno quelle più utilizzate da qui in avanti, anche con le successive guide.
Il magico CTRL+SPACE
Per chi è già pratico di programmazione potrebbe sembrare banale, ma per chi non lo è e sta iniziando soltanto adesso a muovere i primi passi vorrei fare una piccola, ma importante, precisazione.
In quasi tutti i linguaggi di programmazione, compresa la programmazione Android, un’utilissima combinazione di tasti da utilizzare molto molto spesso è CTRL+SPAZIO.
Questa combinazione di tasti, utilizzata in un qualsiasi ambiente di lavoro, permette di completare una riga/pezzo di codice senza dover necessariamente scriverla manualmente.
Nell’esempio precedente, non bisogna per forza scrivere le tre righe di codice che effettuano l’importazione delle tre classi da utilizare (Button, EditText e TextView).
Si può direttamente iniziare a scrivere l’inizializzazione degli oggetti all’interno della classe e premere CTRL+SPAZIO per importare automaticamente le classi necessarie.
Questo meccanismo di importazione e completamento del codice tramite combinazione di tasti è disponibile sia nei files .java sia in quelli .xml.
NOTA: A differenza di ciò che succede nella programmazione Java, in questo caso il funzionamento è Case Sensitive(fa differenza fra lettere maiuscole e minuscole). Per importare la classe Button bisogna iniziare a scrivere Bu.. con la B maiuscola altrimenti non viene riconosciuta la classe da importare.
Configurazione colori, stili e stringhe
Passiamo adesso a vedere altri tre files molto importanti all’interno di un progetto Android.
Oltre al file activity main.xml visto già in precedenza, che rappresenta il layout vero e proprio, ci sono altri tre files che interagiscono in maniera diretta con activity_main.xml.
Questi tre files, di default sono contenuti all’interno della directory “values” del progetto creato.
- Colors.xml: contiene l’insieme di colori da aggiungere a proprio piacimento.
- Strings.xml: contiene stringhe che possono essere richiamate all’interno dell’activity_main.xml.
- Styles.xml: contiene gli stili (che comprendono i diversi colori presenti all’interno di colors.xml) e verrà richiamato all’interno di AndroidManifest.xml.
Di seguito alcuni esempi di questi tre files:
Colors.xml
<xml version="1.0" encoding="utf-8">
<resources>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
</resources>
Strings.xml
<resources>
<string name="app_name">App Android di prova</string>
<string name="buttonOk">Invia</string>
<string name="nome">;Inserisci Nome</string>
</resources>
Styles.xml
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
Creazione Layout app
Passiamo adesso alla creazione del layout della nostra applicazione.
In questo caso verrà utilizzato il Linear Layout visto in precedenza, che è tra quelli più semplici e più usati.
Quindi per poter creare il layout basta aprire il file “activity_main.xml” e aggiungere i tre componenti citati in precedenza: TextView, EditText e Button.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp"
tools:context="com.example.lentux.nuovoprogetto.MainActivity">
<EditText
android:id="@+id/editText"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_above="@+id/button1"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginBottom="18dp"
android:gravity="center"
android:hint="@string/nome" />
<Button
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginBottom="10dp"
android:text="@string/buttonOk" />
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="@+id/editText"
android:gravity="center"
android:textSize="30sp"
android:textStyle="bold" />
</LinearLayout>
Oltre ai tre tag (TextView, EditText e Button) che rappresentanto i tre componenti da creare, va notato anche il codice nella parte iniziale del file.
Innanzitutto si è scelto di utilizzare un orientamento verticale e le righe
android:layout_width="match_parent" android:layout_height="match_parent"
stanno a indicare che verrà utilizzato tutto lo schermo del dispositivo.
Inoltre con
tools:context="com.example.lentux.nuovoprogetto.MainActivity"
viene specificato che la classe di riferimento si chiama MainActivity e si trova all’interno del package “com.example.lentux.nuovoprogetto”.
Android Studio permette anche la doppia visualizzazione del layout, la visualizzazione grafica e quella testuale.
In tal modo è possibile selezionare graficamente gli elementi da inserire all’interno del layout e in tempo reale verrà scritto automaticamente il file activity_main.xml.
Quindi una volta aperto il file activity_main.xml basta andare nella parte destra dello schermo e cliccare la voce “Preview” evidenziata in rosso.
All’interno della visualizzazione grafica cliccando sulla voce “Palette” si potranno visualizzare tutti gli elementi disponibili.
Tramite Drag&Drop potranno poi essere aggiunti all’interno del layout stesso.
All’interno di queste poche righe di codice si possono notare due riferimenti al file strings.xml visto in precedenza.
Infatti le due righe di codice in cui è presente @string stanno ad indicare al compilatore che il valore relativo a quella stringa è contenuto all’interno del file strings.xml.
android:hint="@string/nome"
android:text="@string/buttonOk"
Creazione classe Main
Adesso che il layout è completo non resta altro che creare la classe principale (MainActivity.java) per poter eseguire correttamente l’applicazione.
Senza una classe di main non sarebbe possibile eseguire un’applicazione.
Nel caso in questione, è indispensabile per assegnare un’azione al click del tassto presente.
Quindi ciò che dovrà essere fatto sarà quello di inizializzare i tre componenti da utilizzare e associare una determinata azione al bottone creato.
Come detto precedentemente, una volta inserita una stringa e premuto il tasto, il risultato finale sarà quello di catturare la parola inserita e riscriverla.
package com.example.lentux.nuovoprogetto;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
Button b1;
TextView t1;
EditText e1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
b1 = (Button) findViewById(R.id.button1);
t1 = (TextView) findViewById(R.id.textView);
e1 = (EditText) findViewById(R.id.editText);
buttonClick();
}
private void buttonClick(){
b1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
t1.setText("Ciao " + e1.getText().toString());
}
});
}
}
Quello che viene fatto all’interno del MainActivity non è altro che creare tre oggetti e richiamare il metodo associato al click.
b1 = (Button) findViewById(R.id.button1); t1 = (TextView) findViewById(R.id.textView); e1 = (EditText) findViewById(R.id.editText); buttonClick();
Successivamente, dopo il click del bottone viene chiamato un metodo che non fa altro che settare dentro la variabile t1(TextView), il valore della variabile e1(EditView).
private void buttonClick(){
b1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
t1.setText("Ciao " + e1.getText().toString());
}
});
}
Se sono stati seguiti tutti i passaggi precedenti, il risultato finale sarà quello mostrato di seguito.
Nelle prossime guide vedremo come utilizzare altre tipologie di layout, in particolar modo il Relative Layout, il layout più moderno e flessibile tra quelli disponibili.
