These slides are part of the Android Development Course which I taught to 10 students, while participating in the IP Workshop Summer School 2011. http://www.scoaladevara.info/2011/?page_id=39

1. Android
User Interface
Vlad PETRE
vlad@vladpetre.com
http://twitter.com/vladpetre88
http://facebook.com/vladpetre88
http://www.linkedin.com/in/vladpetre88
1 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

2. Componentele Grafice
• UI-ul este alcatuit din
obiecte de tip View sau
ViewGroup:
– View este clasa moştenită
de widgets.
– ViewGroup este clasa
moştenită de layouts.
• Sunt plasate într-un
Activity.
2 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

3. Widgets
• Statice
– TextView
– ProgressBar
– ImageView
• Dinamice
– EditText
– Button
– CheckBox
– RadioButton
– MapView
3 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

4. Layouts
• Elemente de tip
container (pot conţine
alte View-uri)
• Tipuri:
– LinearLayout
– RelativeLayout
– TableLayout
– ScrollLayout
4 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

5. Resurse
• Se regasesc grupate in directorul
res.
• Imagini (drawable)
– drawable-hdpi
– drawable-mdpi
– drawable-ldpi
– Accesul din cod are loc
folosind: R.drawable.nume
5 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

6. Resurse
• Interfeţe grafice
– layout
– Accesul din cod are loc folosind:
R.layout.nume
• Constante
– values
6 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

7. Constructia Layout-urilor
• Din cod sau folosind un fişier xml.
• Fişierul xml se ataseaza unui Activity în cod:
– this.setContentView (R.layout.nume);
• Pentru a customiza un element dintr-o lista, se
defineşte corespunzător fişierul xml şi se încarcă
apoi asupra view-ului element:
– View element = inflater.inflate
(R.layout. list_element_view, null);
7 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

8. Exemplu de fişier GUI XML
8 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

9. Exemplu de fişier GUI XML
• xmlns:android – necesar de definit doar
pentru componenta radacina
• android:layout_width şi
android:layout_height sunt obligatorii
• Valori:
• fill_parent, wrap_content
• px, dp, sp, mm, in, pt
• android:id – necesar pentru utilizarea
componentei in codul Java
• @+id/button1 – în xml
• R.id.button1 – în cod
9 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

10. Exemplu de fişier GUI XML
10 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

11. Unităţi de Măsură pentru Dimensiuni
• dp – Density Independent Pixels
– Unitate de măsură abstractă, bazată pe densitatea de pixeli a ecranului.
Unitatea este relativă la 160dpi. Deci 160dp va avea mereu 1 inch indiferent de
densitatea ecranului. Se recomanda a fi aplicat asupra view-urilor pentru ca
sistemul sa scaleze corespunzator dimensiunea acestora indiferent de marimea
ecranului.
• sp – Scale Independent Pixels
– Analog cu dp, dar se recomanda a fi aplicat asupra fonturilor.
• pt – Points
– 1/72 dintr-un inch, bazată pe dimensiunea fizica a ecranului.
• px – Pixeli
• mm - Milimetri
• in - Inches
11 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

12. Resurse în funcţie de Densitatea Pixelilor
• ldpi – Low Density Screens
– 120dpi
• mdpi – Medium Density Screens
– 160dpi
• hdpi – High Density Screens
– 240dpi
• xhdpi – Extra High Density Screens
– 230dpi
• nodpi – folosit pe resurse de tip bitmap daca nu se doreste scalarea in
functie de dimensiunea ecranului
• Avem o scalare 3:4:6:8 intre cele cele 4 densitati. Deci un bitmap de
9x9 in ldpi va avea 12x12 în mdpi, 18x18 în hdpi şi 24x24 în xhdpi.
12 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

13. Meniu
• Activat la apăsarea tastei Meniu.
• Trebuie suprascrise metodele:
– public boolean
onCreateOptionsMenu(Meniu menu);
– public boolean onOptionsItemSelected
(MenuItem item)
• Adăugarea unui meniu din cod:
– menu.add(…);
• Definirea meniului într-un fişier xml.
13 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

14. Exemplu Meniu doar Cod Java
14 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

15. Exemplu Meniu XML
15 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

16. Exemplu Meniu XML în cod Java
16 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

17. Toast
17 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

18. Referinţe
• http://pdm.ipworkshop.ro
• http://developer.android.com/guide/topics/ui/index.html
• http://developer.android.com/resources/tutorials/views/index.h
• http://developer.android.com/guide/topics/resources/more-reso
• http://developer.android.com/guide/topics/resources/providing-
18 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea

19. Întrebări?
19 Scoala de Vara IP Workshop 2011 – Calimanesti Valcea