Corso di programmazione di sistemi mobile 1. Android. Android Style, Material Design, Google Services

Transcript

1 Corso di programmazione di sistemi mobile 1 Android Android Style, Material Design, Google Services

2 Corso di programmazione di sistemi mobile 2 Temi e Stili Android Un tema è un insieme di regole grafiche che contribuiscono ad una coerenza visiva di tutte le activity e componenti grafici all interno dell applicazione che si sta sviluppando. In ogni applicazione Android deve essere dichiarato un teme, altrimenti viene utilizzato quello di default di sistema. I temi e gli stili, eredi della filosofia dei CSS per le pagine web, sono risorse definite nei file della cartella /res/values del progetto. Già all inizio dello sviluppo di un app, definiamo sempre un tema di default. Spesso possiamo trovare tale definizione nel file AndroidManifest.xml nel tag application o relativo a singoleactivity <application android:theme="@style/apptheme" > AppTheme la troviamo nelle risorse

3 Corso di programmazione di sistemi mobile 3 Material Design Il MaterialDesign è l insieme delle linee guida dettate da Google per l interfaccia del nuovo sistema operativo Android «L». Il materialdesingnon si applica solo alle applicazione per dispositivi mobile ma a tutte le realtà informatiche dove vi è una UI (Tv, Web, Smartwatch ). Il material desing si applica alle seguenti sezioni: Colori: A dominare saranno i colori vivaci accostati grazie ad aree tenui. E l architettura contemporanea a dare lo spunto. Font: Sarà Roboto a dominare nel nuovo ambiente grafico con particolare attenzione al contrasto per il raggiungimento della massima leggibilità. Immagini: Si alla desaturazione ma stop all utilizzo di filtri invasivi ed alle modifiche che cambiano la sostanza della rappresentazione. L imperativo mantenere l integrità originale delle immagini. Icone: Moderne, eccentriche e minimal. Le icone tornano al significato semiotico del termine: Il segno è icona quando la correlazione significante/significato esiste in virtù di una similarità effettiva. Nessuna arbitrarietà.

4 Corso di programmazione di sistemi mobile 4 Per adottare questo nuovo tema occorre utilizzare una versione di Android 5.0 ( API 21 ) o superiore. Inoltre alcune risorse grafiche sono inserite nella libreria di supporto AppCompat-v7. Esiste di essa sia la versione chiara, Light, sia la scusa, Dark che troviamo impostata di default con Theme.Material. Troviamo anche disponibile la variante Light con l ActionBar scura: Light.DarkActionBar <resources> <style name="apptheme" parent="android:theme.material.light"> </style> </resources>

5 Corso di programmazione di sistemi mobile 5 Per integrare in Android Studio le librerie di supporto si ricorre all SDK Manager che deve mostrare la voce relativa all Android Support Repository, così da aggiornare o scaricare anche quest ultimo. Entrambi sono reperibili nella sezione Extras. Dopo aver effettuato l installazione per inserirla nella nostra app la aggiungiamo fra le dipendenze nel file build.gradle dependencies { compile 'com.android.support:design:22.2.0' } E aggiorniamo il gradle con Sync Pro.ject with Gradle Files I nuovi elementi supportati da questa libreria sono: nativationview, Floating Action Button, Snackbar, TabLayout, Toolbar e CollapsingToolbar.

6 Corso di programmazione di sistemi mobile 6 Palette Colori Per personalizzare la palette dei colori si deve modificare il file contenente le resource dove abbiamo specificato il tema Material utilizzato. Ad esempio: <style name="apptheme" parent="android:theme.material.light"> <!-- your app branding color for the app bar --> <item name="android:colorprimary">@color/primary</item> <!-- darker variant for the status bar and contextual app bars --> <item name="android:colorprimarydark">@color/primary_dark</item> <!-- theme UI controls like checkboxes and text fields --> <item name="android:coloraccent">@color/accent</item> </style>

7 Corso di programmazione di sistemi mobile 7 Toolbar Con la nuova versione di Android Lollipop l OS ha incluso dei nuovi componenti grafici, il più importante è la Toolbar. Essa è retro compatibile con le precedenti versioni di Android grazie alla presenza della libreria «com.android.support:appcompat-v7» A differenza delle precedenti versioni di Android dove vi era l Action Bar, di default nell ultima release di Android la toolbar non è presente all interno di un progetto Android. Questo perché la toolbar è diventata un componente fluttuante all interno di un activity. Per aggiungere quindi la toolbar alla propria activity bisogna dichiarare all interno del file di layout una view di tipo Toolbar <android.support.v7.widget.toolbar xmlns:android=" xmlns:app=" android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorprimary" android:minheight="?attr/actionbarsize" app:theme="@style/themeoverlay.appcompat.dark.actionbar" app:popuptheme="@style/themeoverlay.appcompat.light" />

8 Una volta definito il file di layout della toolbar sarà necessario creare un nuovo tema all interno del file styles.xml per personalizzare la toolbar. Una volta scritto il tema sarà infine necessario andare a specificare l utilizzo del tema da noi creato all interno del manifest. Corso di programmazione di sistemi mobile 8

9 Infine sarà necessario impostare a livello di progammazione la toolbar all activity, in modo che quest ultima possa intercettare gli eventi, come la pressione su un icona, e restituire l azione alla nostra activity Corso di programmazione di sistemi mobile 9

10 Corso di programmazione di sistemi mobile 10 Recycle View Per creare liste e cards complesse usanto lo style Material Design si possono usare i widget RecyclerView o CardView. RecyclerView è un componente più flessibile e avanzato della ListView ed è anch esso un contenitore per mostrare grandi quantità di dati. È principalmente usato in caso di collezioni di elementi che possono cambiare in fase run-time in base a eventi della rete o ad azioni dell utente. Per poterlo utilizzare occorre implementare un adapter estendendo la classe RecyclerView.Adapter, e un LayoutManager. Quest ultimo ci aiuta nel posizionare gli elementi nel contenitore e determinare quando riusare/recycle elementi che non sono più visibili all utente.

11 Corso di programmazione di sistemi mobile 11 I layout utilizzabili per la lista sono: LinearLayoutManager con orientamento verticale o orizzontale GridLayoutManager per visualizzare gli elementi all interno di una griglia StaggeredGridLayoutManager per posizionare gli elementi in modo sfalsato Personalizzati estendendo la classe RecyclerVIew.LayoutManager Si possono inoltre utilizzare delle animazioni disponibili estendendo la classe RecyclerVIew.IntemAnimator e usando il metodo RecyclerView.setItemAnimator()

12 Corso di programmazione di sistemi mobile 12 Coordinator Layout È un potente FrameLayout che prevede numerosi effetti di scrolling o movimento di view al suo interno. È usato principalmente in due casi: Come decorazione principale In alternativa come un contenitore per una specifica interazione con una o più Views figlie. In questo caso specificando chiamato "Behaviors" si possono indicare differenti interazioni con la view padre e gli altri elementi. Behavior può essere utilizzato per implementare una grande quantità di interazioni o modifiche al layout aggiuntive. I figli di un CoordinatorLayout possono indicare attraverlo l attraibuto anchor un altra view per poter impostare view flottanti relative ad altre componenti.

13 Corso di programmazione di sistemi mobile 13 <android.support.design.widget.coordinatorlayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.floatingactionbutton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end bottom" android:layout_margin="16dp" /> </android.support.design.widget.coordinatorlayout> E nella nostra mainactivity: findviewbyid(r.id.button).setonclicklistener(new View.OnClickListener() public void onclick(view view) { Snackbar.make(view, "Hello", Snackbar.LENGTH_LONG).show(); } });

14 Corso di programmazione di sistemi mobile 14

15 Corso di programmazione di sistemi mobile 15 Google Play Services Integrandoli nell app Android possiamo utilizzare i servizi principali di Google come Maps, Google+, e altri. Si utilizza per questo l apposita libreria che contiene le interfacce per i servici Google e ti permette di chiedere all utente l autorizzazione per gli accessi ai servizi richiesti. Sono inoltre presenti numerose API di supporto per la programmazione in fase run-time. Occorre innanzitutto installare i Google Play Service API dall SDK.

16 Corso di programmazione di sistemi mobile 16 La versione minima richiesta per introdurre nella nostra app i servici di Android è 2.3. Nel nostro progetto, apriamo il file build.gradle e aggiungiamo alle dependencies l ultima versione dei playservice E sincronizziamo nuovamente il gradle. compile 'com.google.android.gms:play-services:8.4.0 Dalla versione 6.5 si possono inoltre aggiungere direttamente i servizi necessari per l app. I principali sono Google Play Services API Google+ Google Account Login Google Drive Google Maps Google Wallet Android Wear Compile.. in build.gradle com.google.android.gms:play-services-plus:8.4.0 com.google.android.gms:play-services-auth:8.4.0 com.google.android.gms:play-services-drive:8.4.0 com.google.android.gms:play-services-maps:8.4.0 com.google.android.gms:play-services-wallet:8.4.0 com.google.android.gms:play-services-wearable:8.4.0

17 Per poter implementare la nostra App occorre ottenere una istanza di GoogleApiClient che si occupa della connessione fra l app Android e i Google Services. Lo si fa utilizzando GoogleApiClient.Builder Corso di programmazione di sistemi mobile 17

18 Corso di programmazione di sistemi mobile 18 Google Maps APIs Per utilizzare i servizi di Mappe di Google è necessario importare la libreria indicando nel build.gradle la dependences: 'com.google.android.gms:play-services-maps:8.4.0' Prima di poter però utilizzare le mappe all interno dell applicazione è necessario recarsi all url dove oltre ad abilitare le Google Maps Android API occorre ottenere una chiave di autorizzazione (Credentials) di tipo Key Android Key. Una volta ottenuta la chiave all interno del manifest dell applicazione bisogna aggiungere i seguenti meta-dati all interno del tag application <meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" /> <meta-data android:name="com.google.android.geo.api_key" android:value="your Api Key" />

19 Corso di programmazione di sistemi mobile 19 Google mette a disposizione l oggetto Mappe attraverso i Fragment. public class MainActivity extends AppCompatActivity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); } } MapFragment mmapfragment = MapFragment.newInstance(); mmapfragment.getmapasync(new OnMapReadyCallback() public void onmapready(googlemap googlemap) { } }); FragmentTransaction fragmenttransaction = getfragmentmanager().begintransaction(); fragmenttransaction.replace(r.id.container, mmapfragment); fragmenttransaction.commit(); Nota: per poter testare i servizi di google comele mappe è necessario utilizzare un dispositivo reale oppure un emulare con le Google APIs

20 Corso di programmazione di sistemi mobile 20 Una volta ottenuto un oggetto di tipo GoogleMap possiamo eseguire diverse azioni come spostarci sulla mappa, aggiungere dei markers e/o modificare le impostazioni di visualizzazione. mmapfragment.getmapasync(new OnMapReadyCallback() public void onmapready(googlemap map) { LatLng CESENA = new LatLng( , ); map.animatecamera(cameraupdatefactory.newlatlngzoom( CESENA, 12), 2000, null); map.addmarker(new MarkerOptions().position(CESENA).title("Cesena")); map.setonmapclicklistener(new OnMapClickListener() public void onmapclick(latlng latlng) { Toast.makeText(MainActivity.this, "Latitudine: " + latlng.latitude + " Longitudine: " + latlng.longitude, Toast.LENGTH_LONG).show(); } }); }); }