1 of 53

Tehnici avansate pentru

dezvoltarea aplicațiilor mobile

Compose - Material Design, animații

2 of 53

Material Design

  • Sistem de design
  • Android
  • Alte platforme mobile sau web
  • Experiențe digitale de înaltă calitate
  • Material Theming
    • culori
    • tipografie
    • forme

Compose - Material Design, animații

2

3 of 53

Schema de culori

3

4 of 53

Schema de culori

  • Combinația de culori folosite de aplicație
  • Culoarea - valoare hexazecimală

​

​

​

​

  • alpha = transparenta culorii
    • 00 = complet transparent
    • FF = complet opac (valoarea implicită)
  • roșu, verde și albastru

Compose - Material Design, animații

4

5 of 53

Material Theme Builder

Compose - Material Design, animații

5

6 of 53

Material Theme Builder

6

7 of 53

Schema de culori

Compose - Material Design, animații

7

8 of 53

Schema de culori

Compose - Material Design, animații

8

9 of 53

Schema de culori

  • Culori primare - folosite pentru componentele cheie din UI

​

  • Culorile secundare - componentele mai puțin importante

​

  • Culorile terțiare - accente contrastante
    • pentru a echilibra culorile primare și secundare
    • pentru a atrage atenția asupra unui element

Compose - Material Design, animații

9

10 of 53

Schema de culori

  • Elementele de culoare “on”
    • Apar deasupra altor culori
    • De obicei pentru text, iconografie, linii
    • onPrimary, onSecondary, etc.

Compose - Material Design, animații

10

11 of 53

Material Theme Builder

  • Material Theme Builder => Export
  • Color.kt
    • Include definițiile culorilor
  • Theme.kt
    • Definește tema
    • Se poate activa modul light sau dark
  • În folderul ui/theme/

Compose - Material Design, animații

11

12 of 53

Maparea culorilor

  • Culorile sunt în mod automat mapate pe tipurile de componente din UI
    • Ex. status bar, butoane vor avea culoarea primară
    • Nu trebuie să asignăm explicit culori componentelor
  • Putem suprascrie în mod explicit culoarea unei componente în cod

Compose - Material Design, animații

12

13 of 53

Dimensiunile resurselor

  • Salvate în app/res/values/dimens.xml

​

​

​

​

​

  • Accesate în cod:

​

Compose - Material Design, animații

13

14 of 53

Dimensiunile resurselor

  • Dimensiunea padding-ului

Compose - Material Design, animații

14

15 of 53

Dark Theme

  • Reduce consumul de energie

​

  • Îmbunătățește vizibilitatea pentru persoanele cu probleme de vedere sau sensibilitate la lumină

​

  • Potrivită pentru medii cu luminozitate scăzută

Compose - Material Design, animații

15

16 of 53

Dark Theme

  • Folosește o culoare închisă pentru suprafață și accente de culoare limitate

​

  • Aplicația poate opta pentru Force Dark
    • = SO va implementa o temă întunecată pentru aplicație

​

  • De preferat să implementăm propria temă întunecată

​

Compose - Material Design, animații

16

17 of 53

Light vs. Dark Theme

17

18 of 53

Culoarea dinamică

  • Material 3 - personalizare pe baza preferințelor utilizatorului
  • Dynamic color
    • De la Android 12 în sus, pe anumite dispozitive
    • Crează o temă bazată pe wallpaper-ul utilizatorului

Compose - Material Design, animații

18

19 of 53

Forma elementelor

19

20 of 53

Forma elementelor

  • Aspectul unui composable - dat de forma acestuia
  • Forma elementelor definită cu RoundedCornerShape
    • Parametrii specifică cât de rotunjite sunt colțurile

20

21 of 53

Forma elementelor

  • Formele definite în ui/theme/Shape.kt
    • Tipuri de componente: small, medium, large

​

​

​

​

  • În ui/theme/Theme.kt

21

22 of 53

Folosirea formelor

  • Folosire implicită
    • Un Card este un element mediu => forma pentru medium
  • Folosire explicită
    • Decuparea unei imagini într-o anumită formă

22

23 of 53

Comparație

Compose - Material Design, animații

23

24 of 53

Tipografie

24

25 of 53

Scara tipografică Material Design

  • O selecție de stiluri de font care pot fi folosite în aplicație

​

  • 15 stiluri de font

​

  • Categorii: display, headline, title, body, label

​

  • Dimensiuni: large, medium, small

Compose - Material Design, animații

25

26 of 53

Scara tipografică implicită

  • Display: text scurt, numere
    • ecrane mari
  • Headline: titlu scurt, cu accent mare
    • ecrane mici
  • Title: titlu cu accent mediu
  • Body: pasaje de text lungi
  • Label: etichete, legende, text în interiorul componentelor

26

27 of 53

Font-uri

  • Multe font-uri oferite deja de platforma Android

​

  • Dar se pot adăuga și alte font-uri custom
    • https://fonts.google.com/

​

  • Font-urile se pot adăuga în res/font/

Compose - Material Design, animații

27

28 of 53

Inițializarea font-urilor

  • Font-urile se pot inițializa în ui/theme/Type.kt

Compose - Material Design, animații

28

29 of 53

Stiluri de text

  • Type.kt
  • Stilurile de text definite folosind obiectul Typography

29

30 of 53

Stiluri de text

  • În Material Theme, în Theme.kt
    • parametrul typography primește obiectul Typography

Compose - Material Design, animații

30

31 of 53

Aplicarea stilurilor

Compose - Material Design, animații

31

32 of 53

Comparație

Compose - Material Design, animații

32

33 of 53

Top Bar

33

34 of 53

Scaffold

  • Scaffold include:
    • slot-uri pentru diverse elemente (Image, Row, Column)
    • slot pentru TopAppBar

​

  • TopAppBar
    • brading, personalitatea aplicației
    • 4 tipuri: center, small, medium, large

Compose - Material Design, animații

34

35 of 53

Scaffold - exemplu

Compose - Material Design, animații

35

36 of 53

TopAppBar - exemplu

36

37 of 53

Comparație

Compose - Material Design, animații

37

38 of 53

Animații

38

39 of 53

Iconițe Material Design

  • Reprezintă funcționalitatea în mod vizual
  • Material Design oferă un număr mare de iconițe

​

39

40 of 53

Iconiță de expandare - exemplu

Compose - Material Design, animații

40

41 of 53

Iconiță de expandare - exemplu

….

Compose - Material Design, animații

41

42 of 53

Iconiță de expandare - exemplu

42

43 of 53

Animații

  • Indicii vizuale -> ce se întâmplă în aplicație
  • Animația spring
    • bazată pe fizică
    • forța unui arc
    • Cand dăm drumul la iconiță, se comportă ca un arc

Compose - Material Design, animații

43

44 of 53

Animația Spring

  • Forța arcului este dictată de 2 proprietății
    • Damping ratio - raportul de amortizare
      • elasticitatea arcului

​

Elasticitate mare Fără elasticitate

44

45 of 53

Animația Spring

  • Stiffness level = nivelul de rigiditate al arcului
    • cât de repede se mișcă arcul spre capăt

​

Rigiditate mare Rigiditate redusă

45

46 of 53

Animația spring - exemplu

  • fără elasticitate, rigiditate medie

Compose - Material Design, animații

46

47 of 53

Animația spring - exemplu

47

48 of 53

animate*AsState

  • Animarea unei singure valori
    • Pornește de la valoarea curentă până la valoarea țintă
  • Funcții animate*AsState pentru multe tipuri de date:
    • Float, Color, Dp, Size, Offset, Int
  • Se poate adăuga suport și pentru alte tipuri de date
    • animateValueAsState()

Compose - Material Design, animații

48

49 of 53

animate*AsState - exemplu

​

  • Se delegă inițializarea către funcția animateColorAsState()
  • targetValue este valoarea țintă

Compose - Material Design, animații

49

50 of 53

animate*AsState - exemplu

​

  • Culoarea este o stare care se modifică în funcție de valoarea unui alt obiect (expanded)
  • Culoarea este apoi folosită în UI
    • de exemplu pentru a configura background-ul unui Card

Compose - Material Design, animații

50

51 of 53

animate*AsState - exemplu

51

52 of 53

Bibliografie

Compose - Material Design, animații

52

53 of 53

Cuvinte cheie

  • Material Design
  • Material Theming
  • Schema de culori
  • Material Theme Builder
  • Dark Theme
  • Light Theme
  • Culoare dinamică
  • Forma
  • Tipografie
  • Scara tipografică
  • Top bar
  • Animații

​

​

Compose - Material Design, animații

53

53