Android Wear CodeLab

GDG Firenze Fabio Collini

Android Wear CodeLab – November 2015 – @fabioCollini 2

Ego slide@fabioCollini linkedin.com/in/fabiocollini Folder Organizer cosenonjaviste.it

nana bianca Freapp instal.com Rain tomorrow?

Android Wear CodeLab – November 2015 – @fabioCollini 3

Agenda

1. Android Wear 2. Creazione nuovo progetto 3. Aggiunta librerie 4. Layout per smartwatch 5. Comunicazione con smartphone 6. Layout multi fragment

Android Wear CodeLab - November 2015 - @fabioCollini 4

Android Wear1

Android Wear CodeLab – November 2015 – @fabioCollini 5

Android Wear

Notifiche Watch faces Wear apps

Android Wear CodeLab – November 2015 – @fabioCollini 6

Citymapper

Android Wear CodeLab – November 2015 – @fabioCollini 7

Android Wear CodeLab - November 2015 - @fabioCollini 8

2Creazione nuovo progetto

Android Wear CodeLab – November 2015 – @fabioCollini 9

Wizard creazione nuovo progetto

Android Wear CodeLab – November 2015 – @fabioCollini 10

Due moduli nel progetto

Android Wear CodeLab - November 2015 - @fabioCollini 11

3Aggiunta librerie

Android Wear CodeLab – November 2015 – @fabioCollini 12

Progetto su github

https://github.com/fabioCollini/AndroidWearCodeLab

Android Wear CodeLab – November 2015 – @fabioCollini 13

App smartphone

Android Wear CodeLab - November 2015 - @fabioCollini 14

4Layout per smartwatch

Android Wear CodeLab – November 2015 – @fabioCollini 15

WatchViewStub<?xml version="1.0" encoding="utf-8"?> <android.support.wearable.view.WatchViewStub 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:id="@+id/watch_view_stub" android:layout_width="match_parent" android:layout_height="match_parent" app:rectLayout="@layout/rect_activity_main" app:roundLayout="@layout/round_activity_main" tools:context=".MainActivity" tools:deviceIds="wear">

Android Wear CodeLab – November 2015 – @fabioCollini 16

WearableFrameLayout<android.support.wearable.view.WearableFrameLayout android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:layout_height="@dimen/watch_face_width" android:layout_width="@dimen/watch_face_width" android:layout_marginTop="@dimen/watch_face_margin_top" app:layout_heightRound="@dimen/watch_face_circular_size" app:layout_widthRound="@dimen/watch_face_circular_size" app:layout_marginTopRound="@dimen/watch_face_circular_margin_top" app:layout_gravityRound=“center_horizontal" /> </android.support.wearable.view.WearableFrameLayout>

Android Wear CodeLab – November 2015 – @fabioCollini 17

BoxInsetLayout

Gestisce il padding di un layout adattandolo a smartwatch quadrati e rotondi

Il layout contenuto specifica quali lati gestire (per esempio con app:layout_box=“all”)

Non deve contenere un padding specificato

Android Wear CodeLab – November 2015 – @fabioCollini 18

Layout risposta sondaggio

Android Wear CodeLab - November 2015 - @fabioCollini 19

5Comunicazione con smartphone

Android Wear CodeLab – November 2015 – @fabioCollini 20

GoogleApiClient

DataApi MessageApi NodeApi CapabilityApi ChannelApi

Android Wear CodeLab – November 2015 – @fabioCollini 21

Teleport

Data Sync & Messaging Library for Android Wear

Android Wear CodeLab – November 2015 – @fabioCollini 22

TeleportClientpublic class MobileActivity extends Activity {

private TeleportClient teleportClient; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.my_layout); teleportClient = new TeleportClient(this); } @Override protected void onStart() { super.onStart(); teleportClient.connect(); } @Override protected void onStop() { super.onStop(); teleportClient.disconnect(); }

}

Android Wear CodeLab – November 2015 – @fabioCollini 23

ClickListener

Aggiungere il click listener sui due button che mandano un messaggio usando teleportClient

Android Wear CodeLab – November 2015 – @fabioCollini 24

Servicepublic class MyService extends TeleportService {

private SurveyManager surveyManager; @Override public void onCreate() { super.onCreate(); surveyManager = new SurveyManager(this); setOnGetMessageCallback(new MyOnGetMessageCallback()); }private class MyOnGetMessageCallback extends OnGetMessageCallback { @Override public void onCallback(String s) {

… setOnGetMessageCallback(new MyOnGetMessageCallback());

}}

}

Android Wear CodeLab – November 2015 – @fabioCollini 25

Mobile manifest

<service android:name=".MyService" android:enabled="true" android:exported="true"> <intent-filter> <action android:name=

"com.google.android.gms.wearable.BIND_LISTENER"/> </intent-filter>

</service>

Android Wear CodeLab – November 2015 – @fabioCollini 26

Activity di conferma

Intent intent = new Intent(getActivity(), ConfirmationActivity.class); intent.putExtra(ConfirmationActivity.EXTRA_ANIMATION_TYPE, ConfirmationActivity.SUCCESS_ANIMATION); intent.putExtra(ConfirmationActivity.EXTRA_MESSAGE, getString(R.string.answer_sent)); startActivity(intent);

<activity android:name= "android.support.wearable.activity.ConfirmationActivity" />

Android Wear CodeLab - November 2015 - @fabioCollini 27

6Layout multi fragment

Android Wear CodeLab – November 2015 – @fabioCollini 28

Activity -> Fragment

Spostare tutto il codice in una nuova classe Creazione del layout in onCreateView usando

inflater.inflate(R.layout.answer, container, false); Metodi protected -> public this -> getActivity()

Android Wear CodeLab – November 2015 – @fabioCollini 29

activity_main.xml

<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id=“@+id/root"

android:layout_width="match_parent" android:layout_height="match_parent"> <fragment android:name="it.cosenonjaviste.mywearapp.AnswerFragment" android:layout_width="match_parent" android:layout_height=“match_parent"/>

</FrameLayout>

Android Wear CodeLab – November 2015 – @fabioCollini 30

GridViewPager & DotsPageIndicator<FrameLayout …. > <android.support.wearable.view.GridViewPager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent"/>

<android.support.wearable.view.DotsPageIndicator android:id="@+id/page_indicator" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal|bottom" android:layout_marginBottom="10dp"/> </FrameLayout>

Android Wear CodeLab – November 2015 – @fabioCollini 31

FragmentGridPagerAdapter

Tre metodi da implementare: • getRowCount • getColumnCount • getFragment(int row, int column)

Android Wear CodeLab – November 2015 – @fabioCollini 32

Activity

GridViewPager pager = (GridViewPager) findViewById(R.id.pager);

pager.setAdapter(new MyAdapter(getFragmentManager()));

DotsPageIndicator dotsPageIndicator = (DotsPageIndicator) findViewById(R.id.page_indicator);

dotsPageIndicator.setPager(pager);

Android Wear CodeLab – November 2015 – @fabioCollini 33

survey_detail.xml

Android Wear CodeLab – November 2015 – @fabioCollini 34

Survey detail fragment

onCreate aggiunge un listener sul sync per aggiornare la UI

onStart invia un messaggio di start allo smartphone

onStop invia un messaggio di stop allo smartphone

Android Wear CodeLab – November 2015 – @fabioCollini 35

Service su mobile

Messaggio di start surveyManager.addValueEventListener per

eseguire un sync ogni volta che cambiano i dati su Firebase usando

syncString("survey", survey.toJson()); Messaggio di stop

surveyManager.removeEventListener

Android Wear CodeLab – November 2015 – @fabioCollini 36

Sync su wear

Prendere la stringa con il json dal dataMap Eseguire il parsing usando Survey.parse Aggiornare la ui con i dati

Android Wear CodeLab – November 2015 – @fabioCollini 37

Thanks for your attention!

androidavanzato.it

Questions?