08 Prima applicazione – Grafica

Nelle lezioni precedenti abbiamo visto come creare la prima applicazione vuota, come essa è organizzata all’interno di AndroidStudio e infine gli oggetti grafici essenziali per qualsiasi applicazione.
Siamo pronti per creare una prima applicazione che unisca tutte le conoscenze apprese finora.
L’obiettivo di questa lezione è quello di darvi un’idea chiara di come poter creare un’applicazione, quindi non mi soffermerò molto su certe opzioni che uso (ad esempio settaggio delle dimensioni dei vari componenti). Successivamente farò guide più specifiche ma, se volete iniziare, è bene avere almeno un’idea generale di come creare un app, piuttosto che conoscere tutte le proprietà di un Button (e, tra l’altro, non le conosco neanch’io tutte!)

Descrizione applicazione
Nell’app avremo un text layout in cima con il “Titolo”. Sotto di esso il pulsante “Reset”, che porterà allo stato iniziale l’app che verrà modificata da un altro pulsante, posizionato al di sotto di Reset, che chiameremo “Colora”.
Quando premeremo Colora, il colore dello sfondo verrà cambiato in base al nome del colore che avremo scritto nella edit text che posizioneremo sotto di esso, e che chiameremo “Nome_Colore”.
Infine avremo un’altra text view che chiameremo “Colore_Scelto” che verrà modificata quando premeremo Colora e ci dirà l’ultimo colore scelto.
TITOLO
RESET
COLORA
NOME_COLORE
COLORE_SCELTO

In questa lezione ci concentreremo sulla grafica dell’applicazione, mentre nella successiva vedremo il codice Java.
Create l’app come visto in uno degli articoli precedenti.
Io imposterò per tutto il tempo la visuale del mio progetto a sinistra su “Android”.
Andiamo sulla cartella app->res->layout e aprite l’unico xml presente.
In basso a sinistra premete text, cancellate tutto il testo presente e copiate e incollate il seguente codice (che commenterò):

<LinearLayout 1
    xmlns:android="http://schemas.android.com/apk/res/android" 2
    android:layout_width="match_parent" 3
    android:layout_height="match_parent" 4
	android:orientation="vertical">5
    6
</LinearLayout> 7

Commenti:
1) apro il “contenitore”
2) sinceramente non so a cosa serva di preciso, comunque non la dovrete mai modificare, quindi non perdiamo tempo in cose per ora inutili
3 e 4) settiamo le dimensioni del layout, dove “match_parent” sono le dimensioni del contenitore che lo contiene, cioè in questo caso il nostro schermo (invece un’altra opzione, “wrap_content”, setta le dimensioni del layout in base agli oggetti che contiene).
5) diamo un ordine, o meglio un “orientamento”, agli oggetti che inseriremo nel layout. Con il simbolo “>” indichiamo finita la parte in cui descriviamo le proprietà del nostro layout.
6) in questo spazio inseriremo tutti gli oggetti che visualizzaremo nello schermo (i button, editText e textView)
7) indica la fine del nostro contenitore
PS: per commentare in xml dovete scrivere in questo modo:

<!-- commento --> 

Tornate adesso alla modalità “Design”.
Inserite nell’ordine i seguenti oggetti trascinandoli con il mouse dalla zona chiamata “Palette” allo smartphone:
Plain TextView
Button
Button
PlainText (che sarebbe l’edit text)
Plain TextView

Ritornate nella modalità “Text”, in questa modalità sarà più rapido modificare le proprietà degli elementi che abbiamo inserito. Seguite i seguenti passaggi:
► Aggiungete la seguente riga alle proprietà del nostro Layout
android:id=”@+id/contenitore”
Ci servirà per modificare il colore del nostro sfondo.
► Nella prima TextView cambiate la scritta “New Text” con il titolo che volete dare alla vostra app (io la chiamero “coloriamo”)
► Nel primo Button cambiate il testo “New Button” che appare nel bottone con “Reset”. Aggiungiamo poi la seguente riga nelle sue proprietà:
android:onClick=”reset”
Nella prossima lezione creeremo la funzione “reset” che si attiverà quando button verrà premuto.
► Nel Button successivo cambiamo ancora una volta il nome in “Colora” come fatto nel precedente e aggiungiamo la riga:
android:onClick=”colora”
► Andiamo avanti con l’editText e modifichiamo il nome dell’id da “editText” a “nome_colore”, così da ricordarcelo più facilmente e non confondere l’editText con eventuali altre editText (nel caso ne avessimo altre)
► Infine cambiano il nome dell’id dell’ultima textView in “colore_scelto”

Se avete seguito bene i passi fatti dovreste avere il seguente codice davanti:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/contenitore">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Text"
        android:id="@+id/textView" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="reset"
        android:id="@+id/button"
        android:onClick="reset"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="colora"
        android:id="@+id/button2"
        android:onClick="colora"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/nome_colore" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Text"
        android:id="@+id/colore_scelto" />
</LinearLayout>

E nella sezione view la seguente situazione:
8.1

Adesso che abbiamo preparato la grafica vedremo nella prossima lezione come usarla, ovvero monteremo il motore che sta dietro la grafica e che permette all’applicazione di interagire con l’utente.
Non perdetevi quindi la prossima lezione!

Please follow and like us: