Seconda lezione del corso android tenuto presso il TuLug (Tuscia Lug) A Viterbo. Le slides sono completamente in italiano (Slides are in italian! Sorry!)

1. Android@Tulug #2
By Ivan Gualandri

2. Cosa vedremo oggi
Ecco gli argomenti che tratteremo stasera
● Come funziona il layout in android, dal punto
di vista xml e java
● Vedremo alcuni tipi di layout:
○ RelativeLayout
○ LinearLayout
○ TableLayout
● Vedremo alcune componenti dell'interfaccia
grafica:
○ Button
○ EditText
○ Slider, etc...

3. Riassunto delle lezioni precedenti
Abbiamo visto:
● Da cosa è composto l'sdk
● Come è strutturata un applicazione
● Cosa è un Activity e il suo ciclo di vita
● I primi rudimenti su cosa è un layout

4. Riassunto delle lezioni precedenti/2
L'SDK Android è composto da tre componenti:
1. L'SDK Manager - una specie di gestori
pacchetti per installare/rimuovere le varie
versioni dell'sdk e alcune componenti
aggiuntive
2. L'AVD Manager - Per creare e gestire gli
emulatori android
3. L'ADB - Android debug bridge, l'interfaccia
fra la nostra macchina e lo smartphone.

5. Riassunto delle lezioni precedenti/3
L'Activity é il componente fondamentale di una
app android. Normalmente è associata ad una
schermata dell'applicazione.
Normalmente una applicazione android viene
lacniata eseguento una activity. Il punto di
ingresso (aka metodo main) è il metodo
onCreate(Bundle savedInstancestate)
Ha un suo ciclo di vita (che parte con onCreate)

6. Riassunto delle lezioni precedenti/4
Riptere non fa mai
male...
:)

7. Riassunto delle lezioni precedenti/5
Il file AndroidManifest.xml é un pò la scheda
informativa dell'applicazione per il sistema
operativo.
Gli dice
● quale è l'activity principale da chiamare.
● quali sono i permessi usati dall'applicazione
● informazioni sul nome, versione, package
● le activity che la compongono
● etc.

8. L'argomento di oggi
Layout e componenti grafiche di un app

9. Un schermata a colpo d'occhio
Una schermata di una
app android è
composta da varie
componenti:
Bottoni, Etichette,
oggetti grafici, caselle
di testo, etc....
Ma come gestire tutte
queste cose?

10. Come si fanno?
Esistono tre modi per creare una finestra, che
molte volte ci capiterá di usarli tutti
● Il primo modo è quello di farci guidare
dall'ambiente di sviluppo che contiene un
editor WYSIWYG che scrive per noi il codice
xml.
● Il secondo è direttamente utilizzando l'xml
● Il terzo invece è disegnare l'interfaccia
tramite codice java.

11. Del primo modo solo un immagine...

12. Un layout xml... e come appare...
<RelativeLayout xmlns:android="http://schemas.android.
com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TextView
android:id="@+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" />
<Button
android:id="@+id/buttonExample"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dip"
android:layout_below="@+id/label"
android:text="Press me..." />
</RelativeLayout>

13. Cosa abbiamo?
Tutto quello che vediamo (a destra) è stato
specificato all'interno del codice XML (a
sinistra).
In questo esempio molto semplice l'interfaccia
grafica è composta da:
● Una TextView
● Un bottone
Che sono facilmente identificabili nel codice
xml.

14. Cosa abbiamo?/2
I tag
<RelativeLayout ...></RelativeLayout>
● Specificano come il sistema dovrá
posizionare gli oggetti all'interno
dell'interfaccia grafica.
● Ne esistono diversi tipi, quali:
RelativeLayout, TableLayout, LinearLayout
● I Layout si possono annidare.

15. Cosa abbiamo?/3
● Come vedete per ogni oggetto che
inseriamo nel file XML abbiamo anche degli
attributi (alcuni comuni a tutti, altri specifici
del singolo oggetto).
● Ovviamente con questi attributi andiamo a
modellare apparenza e comportamento
dell'oggetto.

16. Cosa abbiamo?/4
● Vediamo brevemente gli attributi comuni:
android:layout_width="match_parent"
android:layout_height="match_parent"
Questi servono per specificare i margini
(larghezza e altezza) esistono tre possibilitá:
1. match_parent: prendi la dimensione
dell'ogetto che la contiene
2. wrap_content: adatta la dimensione al
contenuto
3. Oppure si possono specificare le dimensioni
in termini assoluti (pixel, dip, etc.)

17. Il RelativeLayout
● Il RelativeLayout permette di posizionare gli
oggetti relativamente gli uni rispetto gli altri,
● Quindi possiamo dire la che l'oggetto button
si trova "sotto" l'oggetto TextView
● Gli attributi utilizzabili sono:
android:layout_below="@+id/upperobjectname"
android:layout_above="@+id/rightobjectname"
android:layout_toLeftOf="@+id/leftobjectname"
android:layout_toRightOf="@+id/rightobjectname"
Dove l'argomento è l'id dell'oggetto che si trova
appunto sopra/sotto/a destra/a sinistra

18. La TextView
● L'Abbiamo gia incontrata nella lezione
precedente
● É una etichetta, che possiamo usare per
mostrare del testo (statico, o generato dal
codice java).
<TextView
android:id="@+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" />

19. Il Button
● Si tratta del classico bottone da premere.
● Possiamo aggiungergli del testo (o una
immagine) come etichetta.
● Il codice è:
<Button
android:id="@+id/buttonExample"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dip"
android:layout_below="@+id/label"
android:text="Press me..." />
Fra poco vedremo come far interagire fra di
loro gli oggetti.

20. L'EditText
● È simile alla textview, ma in questo caso
l'utente può scriverci all'interno.
● Se l'utente la seleziona, compare una
tastiera
● Il codice è:
<EditText
android:id="@+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/buttonExample"
android:layout_marginTop="40dp"
android:text="Example Edit"
android:layout_toRightOf="@+id/buttonExample"
android:ems="10" >
<requestFocus />
</EditText>

21. Proviamo a farli interagire...
Esercizio:
Creare un programma android composta da:
● Una casella di testo (EditText)
● Un pulsante (Button)
● Una TextView
La TextView quando viene lanciata può avere
un qualsiasi testo. Se viene premuto il
pulsante, e la casella di testo non è vuota,
allora il testo all'interno della TextView verrà
sostituito con quello che si trova nella casella di
testo.

22. Esercizio - Passo 1 (Layout)
Ecco come potrebbe
apparire
l'applicazione...

23. Esercizio - Passo 2
Cosa sappiamo fare? (per chi ha seguito la
lezione precedente):
1. Accedere agli oggetti definiti nel layout xml
2. Modificarne alcuni attributi
Cosa non sappiamo fare?
1. Come gestire il click sul bottone.

24. Esercizio - Il clickListener
Uno dei modi di android per gestire le
interazioni dell'utente con lo smartphone è
quello dei Listener.
I listener sono delle interfaccie, che contengono
normalmente un metodo di callback, ovvero un
metodo che viene chiamato al verificarsi di un
certo evento. In questo caso del click

25. Esercizio - Il clickListener/2
Per il bottone l'interfaccia da utilizzare è:
android.view.View.OnClickListener
Questa interfaccia è composta di un solo
metodo:
abstract void onClick(View v)
Facciamo si che la nostra MainActivity
implementi onClickListener.
Implementare l'interfaccia, vuol dire
implementare i metodi "abstract"

26. Esercizio - Il clickListener/3
Quindi avremo:
public class MainActivity extends Activity implements OnClickListener {
//...
//...
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
}
}
Che è il metodo che viene chiamato quando si
clicka sul bottone.

27. Esercizio - Il clickListener/4
E di cosa si occuperá?

28. Esercizio - Il clickListener/5
1. Leggere il contenuto della EditText
2. Inserirlo nella TextView
Indizi:
1. Ricordate findViewById(R.blablabla)
2. La EditText si comporta in maniera identica
alla TextView, dal punto di vista del Java.

29. Esercizio - Il clickListener/5
Dopo che abbiamo implementato il metodo
onClick dobbiamo informarne il bottone, quindi:
● Ottengo un istanza del bottone con
findViewById
● Gli setto l'onClickListener mediante il metodo
setOnClickListener(OnClickListener l),
● Dove l'argomento sará la classe Activity
(ricordate: estende l'interfaccia
OnClickListener)!

30. Aggiungere oggetti via codice
Android permette di inserire oggetti nel layout
anche direttamente via codice java.
L'idea è molto semplice:
● Utilizzando sempre la findViewById ottengo
l'istanza del layout al quale voglio
aggiungere i miei oggetti (o ne creo uno
nuovo e poi lo setto con setContentView)
● Creo gli oggetti da aggiungere e li inserisco
con il metodo add(View v) del Layout.

31. ● Per esempio vogliamo aggiungere un nuovo
elemento: una seconda TextView.
● Prima di tutto, creiamone una, e
aggiungiamoci del testo:
TextView secondTv = new TextView(this);
secondTv.setText("TEST");
● Se necessario gli impostiamo il layout.
Trattandosi di un RelativeLayout abbiamo un
oggetto chiamato RelativeLayoutParams
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams
(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
params.addRule(RelativeLayout.RIGHT_OF, resid-1)
Aggiungere oggetti via codice/2

32. ● Associamo i parametri del layout alla TextView:
secondTv.setLayoutParams(params);
● Prendiamo l'istanza del layout:
RelativeLayout layout = (RelativeLayout) findViewById
(R.id.layout1);
● Aggiungiamo l'oggetto al layout:
layout.addView(secondTv)
Aggiungere oggetti via codice/3

33. ● Dispone gli oggetti in maniera lineare
(orizzontale o verticale), uno per linea
Gli altri Layout - LinearLayout

34. ● Permette di creare una tabella di
Layout.
● Ogni riga contiene un oggetto di
tipo: TableRow
● All'interno di ogni TableRow
possiamo aggiungere un layout
specifico
Gli altri Layout - TableLayout

35. ● Possiamo usare layout speciali per
gestire alcune categorie particolari,
quali per esempio:
○ WebView per le pagine web
○ ListView per visualizzare delle liste
di
● E poi esistono oggetti di tutti i tipi: bottoni,
slider, checkbox, menu a tendina, etc.
● Ovviamente possiamo crearne di nostri.
E poi?....

36. Grazie per
l'attenzione...
Fine...