Introduction à la plateforme Android. Cours 3

Transcription

1 Introduction à la plateforme Android Cours 3

2 Matérial Design

3 Material Design Guideline pour l UI, les animations, les interactions. Cross plateforme.

4 Material Theme

5 Styles & Thèmes

6 Styles & Thèmes Vous pouvez créer un style ou hériter d un style pour votre application (dans le fichier styles.xml). A spécifier dans le manifest et dans la balise «Application». Utiliser de préférence les thèmes «AppCompat» pour avoir le même design quelques soit la version d Android. <application android:theme="@style/customtheme"> <activity android:theme="@style/customtheme">

7 Styles & Thèmes <style name="apptheme" parent="theme.appcompat.light.darkactionbar"> <item <item <item <item </style>

8 Styles & Thèmes

9 Styles & Thèmes Pour utiliser les thèmes «appcompat» il faut étendre d AppCompatActivity au lieu d Activity. public class HomeActivity extends AppCompatActivity { } // Implementation

10 Styles & Thèmes Définir un style est très simple, par exemple pour la taille d une zone de texte. <style name="largeredfont"> <item name="android:textcolor">#c80000</item> <item name="android:textsize">40sp</item> </style> <TextView android:id="@+id/tv_text" style="@style/largeredfont" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" />

11 Styles & Thèmes Vous pouvez hériter d un style existant et modifier les propriétés voulues. <style name="custombutton" parent="@android:style/widget.button"> <item name="android:gravity">center_vertical center_horizontal</item> <item name="android:textcolor">#ffffff</item> </style>

12 Drawables

13 Drawable Plusieurs possibilités de création d éléments avec les drawables. Fichiers xml crée dans le dossier «drawable» de votre projet.

14 Shape Drawable <shape xmlns:android=" android:shape="rectangle" > <corners android:radius="4dp"/> <stroke android:color="#c1e1a6" android:width="4dp" /> <solid android:color="#118c4e"/> <padding android:bottom="20dp" android:left="20dp" android:right="20dp" android:top="20dp" /> </shape>

15 Shape Drawable <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textcolor="#ffffff" />

16 Gradiant <shape xmlns:android=" android:shape="rectangle" > <corners android:radius="4dp"/> <stroke android:color="#0078a5" android:width="1dp" /> <gradient android:angle="90" android:endcolor="#00adee" android:startcolor="#0078a5" /> </shape>

17 Etat d un élément Permet de gérer les différents états d un élément, par exemple un bouton. Pressed, Focused, Enabled

18 Etat d un élément <selector xmlns:android=" <item android:state_pressed="true" android:state_enabled="true" android:drawable="@drawable/button_pressed" /> <item android:state_focused="true" android:state_enabled="true" android:drawable="@drawable/button_focused" /> <item android:state_enabled="true" android:drawable="@drawable/button_enabled" /> </selector>

19 Android Design Library

20 Android Design Library Regroupe des composants Material Design. Très facile à inclure compile 'com.android.support:design:25.3.1'

21 Floating Button Utiliser pour afficher une action principale / récurrente d une vue. Très facile à utiliser

22 Floating Button <android.support.design.widget.floatingactionbutton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end bottom" android:layout_margin="16dp" />

23 Floating Button La gestion du clic s effectue avec un simple click listener (comme un bouton). Vous pouvez modifier les attributs suivants : L élévation : «app:elevation» ou «setcompatelevation». La taille : «app:fabsize» ou «setsize»

24 TextInputLayout <android.support.design.widget.textinputlayout android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerhorizontal="true" android:layout_centervertical="true" android:hint="username" /> </android.support.design.widget.textinputlayout>

25 TextInputLayout floatingusernamelabel.seterror(getstring(r.string.username_required)); floatingusernamelabel.seterrorenabled(true);

26 Vector Drawable Permet d utiliser des images vector dans les vues. L avantage est que l image scale pour supporter toutes les résolutions. 1 seule fichier par image.

27 Vector Drawable Pour activer les VectorDrawables pour les versions < Lollipop. Ajouter cette ligne dans votre configuration gradle. vectordrawables.usesupportlibrary = true Ajouter dans la dépendance compile "com.android.support:support-vector-drawable:x.x.x"

28 Vector Drawable

29 Vector Drawable

30 Vector Drawable ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" />

31 BottomNavigationView

32 BottomNavigationView <android.support.design.widget.bottomnavigationview android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignparentbottom="true" />

33 ActionBar / Toolbar

34 ActionBar S affiche sur le top d un écran. Contient des actions (principales de l application), de la navigation

35 Toolbar Remplace l ActionBar. Fait partie intégrante de votre vue. Peux être placée à l emplacement de votre choix.

36 Toolbar Inclure Support v7 à votre projet. Vos activités doivent hériter de AppCompatActivity. Le thème surcharger par votre application, doit être un thème NoActionBar. <style name="apptheme" parent="theme.appcompat.light.noactionbar">

37 Toolbar Déclarer votre Toolbar dans vos vues. <android.support.v7.widget.toolbar android:layout_width="match_parent" android:layout_height="?attr/actionbarsize" android:elevation="4dp"/>

38 Toolbar Spécifier la Toolbar dans le OnCreate de l protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_my); Toolbar mytoolbar = (Toolbar) findviewbyid(r.id.my_toolbar); setsupportactionbar(mytoolbar); }

39 Toolbar Créer dans actions dans un fichier placé dans le dossier «menu» <menu xmlns:android=" > <!-- "Mark Favorite", should appear as action button if possible --> <item app:showasaction="ifroom"/> <!-- Settings, should always be in the overflow --> <item app:showasaction="never"/> </menu>

40 Toolbar Binder le menu à l public boolean oncreateoptionsmenu(menu menu) { getmenuinflater().inflate(r.menu.main_activity_actions, menu); return super.oncreateoptionsmenu(menu); }

41 Toolbar Surcharger la méthode «onoptionsitemselected» pour réagir au clic sur les éléments du public boolean onoptionsitemselected(menuitem item) { switch (item.getitemid()) { case R.id.action_settings: return true; case R.id.action_favorite: return true; default: return super.onoptionsitemselected(item); } }

42 Toolbar Activer le bouton «Up» sur une activité. // Get a support ActionBar corresponding to this toolbar ActionBar ab = getsupportactionbar(); // Enable the Up button ab.setdisplayhomeasupenabled(true);

43 Toolbar Spécifier l activité parent de l activité courante <activity android:name="com.example.myfirstapp.mychildactivity" android:label="@string/title_activity_child" android:parentactivityname="com.example.myfirstapp.mainactivity" > <!-- Parent activity meta-data to support 4.0 and lower --> <meta-data android:name="android.support.parent_activity" android:value="com.example.myfirstapp.mainactivity" /> </activity>

44 Notifications

45 Notification Créer une notification NotificationCompat.Builder mbuilder = new NotificationCompat.Builder(this).setSmallIcon(R.drawable.notification_icon).setContentTitle("My notification").setcontenttext("hello World!");

46 Notification Lancer une notification NotificationManager mnotificationmanager = (NotificationManager) getsystemservice(context.notification_service); // mid allows you to update the notification later on. mnotificationmanager.notify(mid, mbuilder.build());

47 Notification Ajouter des actions // First let's define the intent to trigger when notification is selected Intent intent = new Intent(this, SomeActivity.class); // Next, let's turn this into a PendingIntent using int requestid = (int) System.currentTimeMillis(); //unique requestid to differentiate between int flags = PendingIntent.FLAG_CANCEL_CURRENT; // cancel old intent and create new one PendingIntent pintent = PendingIntent.getActivity(this, requestid, intent, flags); // Now we can attach the pendingintent to a new notification using setcontentintent Notification noti = new NotificationCompat.Builder(this).setSmallIcon(R.drawable.notification_icon).setContentTitle("My notification").setcontenttext("hello World!").setContentIntent(pIntent).setAutoCancel(true) // Hides the notification after its been selected.build();