Laborator 03. Proiectarea Interfețelor Grafice

În cadrul bibliotecii de controale, organizarea elementelor grafice se face prin împărțirea lor în mai multe categorii:

• forme de bază (Widgets);
• câmpuri text (Texts);
• mecanisme de dispunere a conținutului (Layouts);
• controale grafice ce pot conține alte componente(Containers);
• resurse multimedia (Images);
• elemente pentru gestiunea datei calendaristice și a timpului (Date);
• animații (Transitions);
• componente complexe de interacțiune cu utilizatorul (Advanced);
• componente Google (Google);
• elemente grafice definite în Material Design (Design);
• obiecte definite în bibliotecile de suport (AppCompat);

Structura interfeței grafice (ierarhia de controale grafice) poate fi (pre)vizualizată, pentru fiecare obiect în parte indicându-se identificatorul său (dacă este definit) și tipul (între paranteze rotunde), în secțiunea Component Tree.

Pentru fiecare control grafic, atributele sale pot fi gestionate în secțiunea Properties, fiind afișate toate proprietățile pe care le poate avea (proprii sau moștenite de la părinte), împreună cu valorile pe care le poate lua, utilizatorul putând alege dintre acestea.

activity_layout_sample_1.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:paddingBottom="@dimen/activity_vertical_margin"
  android:paddingLeft="@dimen/activity_horizontal_margin"
  android:paddingRight="@dimen/activity_horizontal_margin"
  android:paddingTop="@dimen/activity_vertical_margin"
  tools:context="ro.pub.cs.systems.eim.lab03.examples.layoutsample1.LayoutSample1Activity" >
 
  <EditText
    android:id="@+id/introduce_yourself_edit_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:ems="10"
    android:hint="@string/introduce_yourself"
    android:inputType="text" >
 
    <requestFocus />
 
  </EditText>
 
  <CheckBox
    android:id="@+id/display_identity_check_box"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@id/introduce_yourself_edit_text"
    android:layout_below="@id/introduce_yourself_edit_text"
    android:text="@string/display_identity" />
 
  <Button
    android:id="@+id/submit_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@id/display_identity_check_box"
    android:layout_below="@id/display_identity_check_box"
    android:text="@string/submit" />
 
  <TextView
    android:id="@+id/greeting_text_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignLeft="@id/submit_button"
    android:layout_below="@id/submit_button"
    android:text="@string/greeting"
    android:textSize="32sp"
    android:gravity="center"
    android:alpha="0" />
 
</RelativeLayout>

Fiecare control din cadrul interfeței grafice va fi reprezentat printr-un element corespunzător, denumirea acestuia fiind identică cu cea a clasei care îi implementează funcționalitatea (de regulă, din pachetul android.widget).

Elementele interfeței grafice sunt caracterizate prin anumite proprietăți, cum ar fi poziționarea, dimensiunile, conținutul pe care îl afișează, tipurile de date acceptate de la utilizator, informațiile ajutătoare. Fiecare parametru va fi indicat prin sintaxa android:proprietate=“valoare” unde proprietate și valoare trebuie să respecte restricțiile definite în clasa ce descrie controlul respectiv.

Pentru fiecare control vor fi specificate (manual, prin apelul metodei corespunzătoare) diferitele caracteristici, asociindu-i-se și un identificator (uzual, acesta poate fi orice număr întreg). Pentru fiecare proprietate a unui control grafic, sunt definite programatic metodele de tip getter și setter corespunzătoare.

Ulterior, controlul va trebui asociat containerului din care face parte, prin intermediul metodei addView(), specificându-se modul în care va fi poziționat (precum și dimensiunile sale) prin intermediul unui obiect de tip LayoutParams, specific mecanismului de dispunere respectiv.

LayoutSample2Activity.java

public class LayoutSample2Activity extends Activity {
 
  final private static long TRANSPARENCY_EFFECT_DURATION = 5000;
 
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
 
    RelativeLayout container = new RelativeLayout(this);
    container.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
 
    final EditText introduceYourselfEditText = new EditText(this);
    introduceYourselfEditText.setId(1);
    introduceYourselfEditText.setEms(10);
    introduceYourselfEditText.setHint(getString(R.string.introduce_yourself));
    introduceYourselfEditText.setInputType(InputType.TYPE_CLASS_TEXT);
    introduceYourselfEditText.setFocusable(true);
    RelativeLayout.LayoutParams introduceYourselfEditTextLayoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
    container.addView(introduceYourselfEditText, introduceYourselfEditTextLayoutParams);
 
    final CheckBox displayIdentityCheckBox = new CheckBox(this);
    displayIdentityCheckBox.setId(2);
    displayIdentityCheckBox.setText(getString(R.string.display_identity));
    RelativeLayout.LayoutParams displayIdentityCheckBoxLayoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
    displayIdentityCheckBoxLayoutParams.addRule(RelativeLayout.ALIGN_LEFT, introduceYourselfEditText.getId());
    displayIdentityCheckBoxLayoutParams.addRule(RelativeLayout.BELOW, introduceYourselfEditText.getId());
    container.addView(displayIdentityCheckBox, displayIdentityCheckBoxLayoutParams);
 
    final Button submitButton = new Button(this);
    submitButton.setId(3);
    submitButton.setText(getString(R.string.submit));
    RelativeLayout.LayoutParams submitButtonLayoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
    submitButtonLayoutParams.addRule(RelativeLayout.ALIGN_LEFT, displayIdentityCheckBox.getId());
    submitButtonLayoutParams.addRule(RelativeLayout.BELOW, displayIdentityCheckBox.getId());
    container.addView(submitButton, submitButtonLayoutParams);
 
    final TextView greetingTextView = new TextView(this);
    greetingTextView.setId(4);
    greetingTextView.setText(getString(R.string.greeting));
    greetingTextView.setTextSize(32);
    greetingTextView.setGravity(Gravity.CENTER);
    greetingTextView.setAlpha(0);
    RelativeLayout.LayoutParams greetingTextViewLayoutParams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);
    greetingTextViewLayoutParams.addRule(RelativeLayout.ALIGN_LEFT, submitButton.getId());
    greetingTextViewLayoutParams.addRule(RelativeLayout.BELOW, submitButton.getId());
    container.addView(greetingTextView, greetingTextViewLayoutParams);
 
    submitButton.setOnClickListener(new View.OnClickListener() {
 
      @Override
      public void onClick(View view) {
        String identity = introduceYourselfEditText.getText().toString();
        greetingTextView.setText(getResources().getString(R.string.greeting).replace("???", (displayIdentityCheckBox.isChecked())?identity:getResources().getString(R.string.anonymous)));
        greetingTextView.setAlpha(1);
        AlphaAnimation fadeEffect = new AlphaAnimation(1.0f, 0.0f);
        fadeEffect.setDuration(TRANSPARENCY_EFFECT_DURATION);
        fadeEffect.setFillAfter(true);
        greetingTextView.setAnimation(fadeEffect);
      }
 
    });
 
    setContentView(container);
  }
 
  // ...
 
}

Conținutul pe care îl afișează un obiect TextView este indicat de proprietatea text. De regulă, acesta referă o constantă definită în resursa care conține șirurile de caractere utilizate în cadrul aplicației. Gestiunea acestui atribut poate fi realizată prin metodele getter și setter respective.

Pentru un control de tip TextView pot fi specificate mai multe proprietăți, printre care minLines, maxLines, minEms, maxEms și textcolor.

Pentru a avertiza utilizatorul de faptul că textul nu a fost afișat complet, se poate folosi parametrul ellipsible, care atașează șirul de caractere (…) în finalul secvenței vizibile. În cazul în care textul este trunchiat și totuși textul afișat are sens, fără a exista indicii că ar mai fi urmat și altceva, utilizarea acestui atribut este foarte utilă.

O componentă de tip TextView NU implementează doar funcționalitatea unei etichete, ea putând fi utilizată și pentru a realiza anumite acțiuni, în cazul în care conținutul pe care îl afișează are un format cunoscut:

• android:autoLink=“none” - dezactivează orice tip de acțiune care poate fi atașată unui text;
• android:autoLink=“web” - pentru pagini Internet care vor fi accesate prin intermediul unui navigator;
• android:autoLink=“email” - pentru adrese de poștă electronică la care se vor trimite mesaje prin intermediul unei aplicații dedicate;
• android:autoLink=“phone” - pentru numere de telefon care se doresc a fi formate;
• android:autoLink=“map” - pentru coordonate GPS care se doresc a fi vizualizate pe hartă;
• android:autoLink=“all” - activează orice tip de acțiune care poate fi atașată unui text.

Programatic, comportamentul unui obiect de acest tip poate fi stabilit prin intermediul metodei setAutoLinkMask(), care va primi ca parametru o constantă a clasei Linkify.

În situația în care se dorește ca informația să fie afișată într-un mod care să o evidențieze, însă fără a permite utilizatorului să lanseze în execuție o altă activitate prin intermediul ei, se poate utiliza atributul linksClickable (având valoarea false).

În mod obișnuit, valoarea introdusă va fi afișată doar pe o linie. Dacă se dorește redimensionarea controlului pe măsură ce este introdus un text de dimensiuni mai mari, va trebui specificată proprietatea inputType=“textMultiLine”. De asemenea, se poate specifica explicit numărul de linii prin intermediul proprietății lines (în cazul în care aceasta nu este specificată, câmpul va fi redimensionat în mod automat pentru ca textul introdus să poată fi afișat; totuși indicarea acestui atribut este util pentru că impune o dimensiune fixă, utilizatorul având posibilitatea de a naviga în cadrul textului prin operația de derulare).

De asemenea, există posibilitatea indicării unei sugestii, care va fi afișată pe fundal, semitransparentă, prin intermediul proprietății hint. Aceasta precizează utilizatorului ce fel de informații ar trebui specificate prin intermediul controlului. Ea va dispare în mod automat în momentul în care utilizatorul începe să introducă textul respectiv.

Printre funcționalitățile elementului de tip EditText se numără și posibilitatea de a corecta un text (proprietatea inputType are valoarea textAutoCorrect) sau de a accepta doar valori care respectă un anumit format (număr de telefon, adresă de poștă electronică, parolă, număr zecimal (cu sau fără semn), dată calendaristică, oră). Totodată, utilizatorul poate fi forțat să introducă valori care respectă doar un anumit format, prin intermediul metodei setFilters() care primește ca parametru un tablou de filtre (asigurându-se în acest mod îndeplinirea concomitentă a condițiilor specificate de fiecare în parte):

• predefinite în clasa InputFilter
  • InputFilter.AllCaps - toate caracterele trebuie scrise cu majusculă;
  • InputFilter.LengthFilter - sunt acceptate doar șiruri de caractere care au o dimensiune fixă (precizată ca parametru în constructor);
• definite de utilizator, prin implementarea metodei filter() din interfața InputFilter, indicându-se valoarea cu care se înlocuiește o anumită secvență.

Operația de tip apăsare lungă în cadrul unui control de tip EditText invocă meniul contextual, care oferă facilități pentru copierea unui text într-o / dintr-o zonă de memorie tampon (eng. copy-cut-paste), schimbarea mecanismului de introducere a textului, modificarea dicționarului ce conține cele mai frecvent folosite cuvinte. De asemenea, poate fi selectată (evidențiată) un fragment din textul respectiv (programatic, această funcționalitate poate fi obținută prin metodele setSelection() / selectAll()).

AutoCompleteTextView coursesAutoCompleteTextView = (AutoCompleteTextView)findViewById(R.id.courses_auto_complete_text_view);
 
String[] suggestions = {"vlsi", "eim", "ts", "std", "so2", "idp", "ia", "scad", "pw", "ecom"};
ArrayAdapter<String> coursesArrayAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_dropdown_item_1line, suggestions);
 
coursesAutoCompleteTextView.setAdapter(coursesArrayAdapter);

Sugestia este oferită pentru întregul conținut al componentei, astfel încât dacă se dorește specificarea mai multor cuvinte, nu se va lua în calcul fiecare dintre acestea.

Întrucât un buton este un tip de control ce interacționează cu utilizatorul, pentru aceasta trebuie definită o clasă ascultător (ce implementează View.OnClickListener) pentru tratarea evenimentelor de tip apăsare. Aceasta definește o metodă onClick() ce primește ca parametru componenta (de tip android.view.View) care a generat evenimentul respectiv. Există două mecanisme de tratare a unui eveniment:

1. precizarea metodei care tratează evenimentul în fișierul XML corespunzător activității, având dezavantajul că nu se pot transmite parametrii clasei ascultător

   android:onClick="myButtonClickHandler"

2. definirea unei clase ascultător în codul sursă
   1. clasă dedicată, având dezavantajul că nu poate accesa decât acele resurse ale activității care sunt publice (referința către obiectul de tip Activity trebuind să fie transmisă ca parametru);
   2. folosirea unei clase interne cu nume în cadrul activității, având avantajul posibilității accesării tuturor resurselor din cadrul acesteia, fără necesitatea transmiterii unei referințe către ea; aceasta este abordarea recomandată pentru tratarea evenimentelor pentru orice tip de control;
   3. folosirea unei clasei interne anonime în cadrul activității, având dezavantajul că trebuie (re)definită pentru fiecare control în parte, ceea ce se poate dovedi ineficient în cazul în care se poate elabora un cod comun pentru tratarea evenimentelor mai multor componente din cadrul interfeței grafice;
   4. utilizarea clasei corespunzătoare activității ca ascultător, prin implementarea interfeței respective și a metodei aferente, având dezavantajul unei scalări ineficiente în cazul în care există mai multe controale pentru care tratarea evenimentului se realizează în mod diferit.

Formatele suportate sunt png, jpeg, gif și bmp.

Dacă se doreşte să se omită afişarea propriu-zisă a butonului, reţinându-se doar imaginea sa, se poate specifica un fundal vid (în XML, android:background=”@null” sau în codul sursă se poate apela setBackground(null)).

Un buton de tip ImageButton poate avea şi una din următoarele stări:

• focus - dacă este controlul ce captează toate evenimentele (în cazul în care selecția a fost mutată pe el)
• pressed - dacă este apăsat de utilizator (înainte ca evenimentul corespunzător să fie procesat)

În funcție de aceste stări, unui buton de tip ImageButton i se pot asocia diferite imagini, specificate într-un fișier XML din directorul /res/drawable, care va fi referit ulterior ca sursă a acestuia:

imagebuttonselector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_pressed="true"
        android:drawable="@drawable/button_pressed" />
  <item android:state_focused="true"
        android:drawable="@drawable/button_focused" />
  <item android:drawable="@drawable/button" />
</selector>

<Button
  ... 
  android:src="@drawable/imagebuttonselector" 
  ... />

Textele afișate pentru valorile stărilor pot fi controlate în fișierul XML prin intermediul proprietăților android:textOn respectiv android:textOff, iar programatic prin metodele setTextOn() și setTextOff().

Inițial, toate butoanele din cadrul unui grup sunt deselectate, deși se poate preciza această proprietate atât prin fișierul XML cât și programatic. Odată ce un utilizator a selectat un buton radio din cadrul unui grup, acesta nu mai poate fi deselectat (decât prin schimbarea selecției pe un alt buton radio din cadrul grupului), anularea selecției putând fi realizată prin metoda clearCheck() apelată pe obiectul RadioGroup care conține obiectul de tip RadioButton.

Proprietățile care determină selecția unui RadioButton sunt aceleași ca și în cazul celorlalte tipuri de butoane cu două stări.

Evenimentele de selecție a unui RadioButton în cadrul unui RadioGroup pot fi realizate:

1. prin definirea unei clase ascultător pe fiecare buton radio din cadrul grupului, aceasta implementând interfața CompoundButton.OnCheckChangeListener cu metoda onCheckChanged(CompoundButton, boolean) care transmite starea butonului radio (selectat, deselectat)
2. prin definirea unei clase ascultător pe grupul de butoane, aceasta implementând interfața RadioGroup.OnCheckChangeListener cu metoda onCheckChanged(RadioGroup, int) care transmite identificatorul (din clasa R.id) butonului care a fost selectat

În situația în care nu se dorește generarea unui eveniment de fiecare dată când se realizează o selecție, ci preluarea acesteia la un moment dat de timp ulterior, va fi utilizată metoda getCheckedRadioButtonId() din clasa RadioGroup care întoarce identificatorul butonului (din clasa R.id) care a fost selectat (sau -1 dacă nu este selectat nici un buton radio din cadrul grupului).

ImageView someImageView = (ImageView)findViewById(R.id.some_image_view);
Bitmap someBitmap = BitmapFactory.decodeResource(this.getResources(), R.drawable.some_image);
 
// realizeaza modificari asupra obiectului Bitmap
 
someImageView.setImageBitmap(someBitmap);

• dintr-un fișier local, apelând pentru obiectul de tip ImageView una dintre metodele:
  • setImageDrawable() ce primește ca parametru rezultatul întors de metoda statică createFromPath() a clasei Drawable pentru indicarea locației la care se găsește fișierul ce conține imaginea
  • setImageURI(), transmițându-se un URI care să indice locația la care se găsește fișierul ce conține imaginea; în acest caz, va putea fi utilizat doar protocolul file
• de la un furnizor de conținut

Pentru un astfel de obiect pot fi precizate parametrii precum lățimea și înălțimea maximă (maxWidth, respectiv maxHeight), precum și mecanismul folosit pentru scalarea conținutului în situația în care suprafața pe care se realizează afișarea este diferită de dimensiunile reale ale resursei (scaleType).

Conținutul acestui control poate fi specificat prin una din metodele setVideoPath(String) sau setVideoUri(Uri), prin care se indică locația unui fișier stocat pe dispozitiv sau aflat la distanță, pe un server.

Metodele pe care le pune la dispoziție un astfel de obiect pentru controlul procesului de redare sunt start(), pause(), respectiv stopPlayback(). De asemenea, se pot verifica anumiți parametri ai conținutului prin metodele isPlaying(), getDuration() și getCurrentPosition().

De asemenea, pot fi monitorizate o serie de evenimente, cum ar fi începutul și sfârșitul redării conținutului video, generarea unor informații cu privire la redarea conținutului, producerea unei erori:

videoView.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
  @Override
  public void onPrepared(MediaPlayer mediaPlayer) {
    // TODO Auto-generated method stub
  }
});
videoView.setOnCompletionListener(new MediaPlayer.OnCompletionListener() {
  @Override
  public void onCompletion(MediaPlayer mediaPlayer) {
    // TODO Auto-generated method stub
  }
});
videoView.setOnInfoListener(new MediaPlayer.OnInfoListener() {
  @Override
  public boolean onInfo(MediaPlayer mediaPlayer, int what, int extra) {
    // TODO Auto-generated method stub
    return false;
  }
});
videoView.setOnErrorListener(new MediaPlayer.OnErrorListener() {
  @Override
  public boolean onError(MediaPlayer mediaPlayer, int what, int extra) {
    // TODO Auto-generated method stub
    return false;
  }
});

Pentru ca utilizatorul aplicației să poată controla redarea conținutului video, obiectului de tip VideoView trebuie să i se asocieze un obiect MediaController care va pune la dispoziție o serie de controale prin care se poate realiza pornirea și oprirea procesului.

MediaController mediaController = new MediaController(this);
mediaController.setAnchorView(videoView);
videoView.setMediaController(mediaController);

Controalele obiectului MediaController pot fi afișate sau nu prin metodele show(int timeout) respectiv hide().

Majoritatea bibliotecilor de controale pun la dispoziția dezvoltatorilor componente pentru gestiunea informațiilor legate de data calendaristică și timp. În Android, cele mai frecvent uzitate elemente de acest tip sunt DatePicker, TimePicker, AnalogClock și DigitalClock.

DatePicker

Obiectul de tip DatePicker este folosit pentru gestiunea componentelor unei date calendaristice (zi, lună, an).

Inițializarea unei astfel de componente se realizează prin metoda init(), ce primește ca parametrii anul, luna, ziua și o clasă ascultător (ce implementează interfața DatePicker.OnDateChangedListener cu metoda onDateChanged()). De regulă, evenimentele pe acest control nu sunt monitorizate, preluându-se conținutul său la un moment de timp ulterior. În cazul în care nu se specifică nici o valoare pentru acest control, va fi preluată data calendaristică a sistemului Android.

Conținutul controlului se obține prin metodele getDayOfMonth(), getMonth(), respectiv getYear().

Valorile pe care le poate lua acest element pot fi controlate prin intermediul proprietăților minDate (respectiv minYear) și maxDate (respectiv maxYear). De asemenea, dacă se dorește sau nu afișarea unui calendar va fi indicat prin intermediul proprietății calendarViewShown.

TimePicker

Obiectul de tip TimePicker este folosit pentru gestiunea componentelor timpului (oră, minut).

Inițializarea unei astfel de componente se realizează prin metodele setCurrentHour(), respectiv setCurrentMinute() care primesc ca parametrii obiecte de tip Integer. Clasa ascultător pentru evenimentele produse în legătură cu acest obiect implementează interfața TimePicker.OnTimeChangedListener și metoda onTimeChanged(). În cazul în care nu se specifică nici o valoare pentru acest control, va fi preluat timpul sistemului Android.

Conținutul controlului se obține prin metodele getCurrentHour(), respectiv getCurrentMinute().

AnalogClock

Obiectul de tip AnalogClock este folosit pentru afișarea timpului curent, folosind un ceas analogic. Utilizatorul nu poate interacționa cu un astfel de control, actualizarea conținutului său fiind realizată în mod automat, la fiecare minut.

DigitalClock (nivel API < 17)

Obiectul de tip DigitalClock este folosit pentru afișarea timpului curent, folosind un ceas digital. Este un control de tip TextView de la care moștenește toate funcționalitățile. Utilizatorul nu poate interacționa cu un astfel de control, actualizarea conținutului său fiind realizată în mod automat, la fiecare secundă.

TextClock (nivel API >= 17)

Obiectul de tip TextClock este folosit pentru afișarea datei calendaristice și/sau a timpului curent (folosind formatul 12/24 ore și permițând schimbarea zonei de timp).

Implicit, acest control nu afișează și secundele.

Chronometer

Un obiect de tip Chronometer este utilizat pentru monitorizarea timpului scurs începând de la un anumit moment, pentru activitățile în care un astfel de element este esențial.

Modul în care este afișat contorul ce indică trecerea timpului este controlat prin intermediul parametrului android:format:

• %h - număr de ore;
• %m - număr de minute;
• %s - număr de secunde.

Cronometrarea propriu-zisă este realizată între apelurile metodelor start(), respectiv stop(). De asemenea, se poate indica momentul de timp care este considerat drept referință pentru numărătoare, prin intermediul metodei setBase(). Pornirea de la 0 se face transmițând metodei setBase() un parametru de tip android.os.SystemClock.elapsedRealTime().

Monitorizarea evenimentelor legate de un obiect de tip Chronometer se face prin implementarea unui obiect ascultător de tip Chronometer.OnChronometerTickListener prin (re)definirea metodei onChronometerTick().

În momentul în care sunt realizate acțiuni care durează o perioadă de timp mai mare, o practică uzuală este de a indica utilizatorului faptul că un proces este în desfășurare și că aplicația nu s-a blocat prin intermediu unei bare de progres. O altă situație în care se dorește să se afișeze progresul este indicarea evoluției pe care a realizat-o un utilizator în cadrul unei aplicații (rularea unui fișier multimedia - timp scurs vs. timp rămas, nivelul la care s-a ajuns în cadrul unui joc) sau chiar controlul acestei poziții.

SDK-ul de Android oferă mai multe controale care pot fi utile în monitorizarea progresului: bară de progres (ProgressBar) sau bară de căutare (SeekBar), precum și alte obiecte pentru a indica diferite forme de activitate.

ProgressBar

Obiectul de tip ProgressBar are mai multe forme:

1. un indicator circular animat, care nu oferă nici un fel de informații cu privire la procentul de completitudine al procesului realizat în fundal (util mai ales pentru operații a căror lungime nu poate fi determinată); stilurile care pot fi folosite pentru acest tip de bară de progress sunt progressBarStyleLarge și progressBarStyleSmall, animația fiind realizată în mod automat;
2. o bară de progres orizontală care indică și măsura în care sarcina din fundal a fost realizată (poate fi însoțită și de o altă bară de progres orizontală care indică starea unui proces imbricat); stilul folosit în acest caz este progressBarStyleHorizontal, suportând proprietăți cum ar fi progress (valoarea curentă), respectiv min / max.

Se obișnuiește ca progresul să fie afișat direct în bara de titlu, ceea ce poate economisi din spațiul folosit de interfața grafică, acesta putând fi activat / dezactivat cu ușurință. Semnificația unui indicator de progres în acest caz este aceea că trebuie așteptată încărcarea mai multor resurse înainte ca utilizatorul să poată interacționa cu aplicația respectivă.

@Override
protected void onCreate(Bundle savedInstanceState) {
  requestWindowFeature(Window.FEATURE_INDETERMINATE_PROGRESS);
  setContentView(R.layout.progress_bar_activity);
  setProgressBarIndeterminateVisibility(true);
}

@Override
protected void onCreate(Bundle savedInstanceState) {
  requestWindowFeature(Window.FEATURE_PROGRESS);
  setContentView(R.layout.progress_bar_activity);
  setProgressBarVisibility(true);
  setProgress(0); // valoarea maxima implicita este 10000
}

De remarcat faptul că metoda requestWindowFeature() trebuie apelată înainte de încărcarea propriu-zisă a interfeței grafice prin metoda setContentView(). Implicit, indicatorul de progres este vizibil, metodele setProgressBarIndeterminateVisibility() și setProgressBarVisibility() având rolul de a-l activa, respectiv dezactiva în funcție de parametrul care este transmis. În momentul în care progresul atinge valoarea maximă, starea obiectului asociat trece de la vizibil la non-vizibil, prin intermediul unei animații.

În situația în care nu se poate evalua progresul pe care îl înregistrează un proces, se folosesc indicatori de activitate, care pot avea forma unei bare de stare sau a unui cerc.

Se folosesc tot obiecte de tip ProgressBar, pentru care se precizează faptul că vor rula o perioadă de timp nedeterminată:

• prin precizarea proprietății android:indeterminate;
• prin invocarea metodei setProgressBarIndeterminateVisibility().

SeekBar

În situația în care se dorește să se ofere utilizatorului posibilitatea de a controla progresul unei anumite operații, se folosește un obiect de tip SeekBar, care are în plus un selector a cărui locație poate fi modificată manual prin interfața grafică, la orice poziție cuprinsă între 0 și valoarea indicată de proprietatea max.

Notificările cu privire la modificările operate pe un astfel de obiect sunt primite prin intermediul unui obiect ascultător de tipul SeekBar.OnSeekBarChangeListener pentru care se definește metoda onProgressChanged() (aceasta primește și un parametru de tip boolean care indică dacă actualizarea controlului a fost realizată în urma unei intervenții a utilizatorului sau programatic):

SeekBar moviePlayerSeekBar = (SeekBar)findViewById(R.id.movie_player_seek_bar);
moviePlayerSeekBar.setOnSeekBarListener(new SeekBar.OnSeekBarChangeListener() {
 
  @Override
  public void onProgressChanged(SeekBar seekBar, int progress, boolean fromTouch) {
    // ...
  }
 
});

Alte Tipuri de Controale Grafice – facultativ

NumberPicker

Un obiect de tip NumberPicker este folosit pentru a alege o valoare dintr-un interval definit de proprietățile min și max. Forma în care este afișat depinde de tema pe care o folosește aplicația:

• dacă tema curentă este derivată din Theme, elementul este prezentat ca un câmp text editabil cu un buton de incrementare deasupra și un buton de decrementare dedesubt; operația de apăsare lungă a butoanelor determină schimbarea rapidă a valorii curente;
• dacă tema curentă este derivată din Theme_Holo sau Theme_Holo_Light, elementul este prezentat ca un câmp text editabil, având o valoare mai mică deasupra și o valoare mai mare dedesubt; operația de apăsare lungă pe valorile mai mici / mai mari determină schimbarea rapidă a valorii curente; apăsarea pe valoarea curentă activează tastatura virtuală pentru a indica valoarea dorită; de asemenea, se poate folosi operația de derulare pentru a naviga prin întreaga gamă de valori.

Valoarea curentă este reprezentată de proprietatea value.

Identificarea momentului în care a fost modificată o valoare poate fi realizată prin implementarea unui obiect ascultător de tip NumberPicker.OnValueChangeListener și rederinirea valorii onValueChange().

RatingBar

Un obiect de tip RatingBar este utilizat pentru a gestiona calificative, exprimate sub formă de număr de stele. Definirea unui astfel de obiect implică:

• precizarea calificativului maxim, prin intermediul proprietății numStars (număr întreg);
• diferența utilizată între valori succesive, prin atributul stepSize (număr real, cu zecimale).

Evenimentele reprezentate de interacțiunea cu utilizatorul sunt gestionate prin intermediul unui obiect ascultător de tip RatingBar.OnRatingBarChangeListener și (re)definirea metodei onRatingChanged(), apelată în momentul în care a fost înregistrată o modificare a calificativului (în timpul selecției propriu-zise a valorii nu se invocă metoda).

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:paddingBottom="@dimen/activity_vertical_margin"
  android:paddingLeft="@dimen/activity_horizontal_margin"
  android:paddingRight="@dimen/activity_horizontal_margin"
  android:paddingTop="@dimen/activity_vertical_margin"
  android:orientation="..."
  tools:context="..." >
 
  <!-- other layouts or widgets -->
 
</LinearLayout>    

De regulă, acest tip de layout se folosește atunci când se dorește să se realizeze o animație folosind mai multe imagini, dintre care una singură este vizibilă la un moment dat.

În cazul în care mai multe controale grafice sunt vizibile simultan, ele vor fi afișate sub forma unei structuri de tip stivă, în funcție de ordinea în care sunt declarate, elementele din vârful stivei având vizibilitate maximă iar cele de la baza stivei vizibilitate minimă.

Alte atribute utilizate de acest mecanism de dispunere a conținutului sunt:

• foreground, indicând o resursă de tip grafic (din res/drawable) care va fi afișată peste conținutul interfeței grafice;
• foregroundGravity, precizând poziționarea resursei de tip grafic care va fi afișată peste conținutul interfeței grafice (putând avea valorile top, bottom, left, right, center_vertical, fill_vertical, center_horizontal, fill_horizontal, center, fill, clip_vertical, clip_horizontal sau combinații ale acestora, realizate prin intermediul operatorului |, pe biți).

Cele mai importante proprietăți ale unui layout de acest tip sunt:

• stretchColumns - specifică o listă de indecși indicând coloanele care ar trebui mărite în cazul în care tabelul este mai mic decât spațiul de afișare pe care îl pune la dispoziție;
• shrinkColumns - specifică o listă de indecși indicând coloanele care ar trebui micșorate în cazul în care tabelul este mai mare decât spațiul de afișare pe care îl are la dispoziție;
• collapseColumns - specifică o listă de indecși indicând coloanele care ar trebui omise în totalitate.

De obicei, componentele sunt plasate într-un obiect de tip TableRow. De asemenea, este permisă definirea de componente și în afara acestui element, dacă se dorește ca obiectul respectiv să ocupe întregul spațiu al rândului respectiv.

Dacă se dorește ca unele coloane să fie lăsate goale, pot fi utilizate și unele proprietăți:

• layout_column - se folosește pentru a specifica o anumită coloană, lăsând coloanele anterioare fără nici un conținut (în mod obișnuit, ordinea de procesare a coloanelor este de la stânga la dreapta);
• layout_span - este utilizat în situația în care se dorește afișarea unui anumit conținut în cadrul a mai multor coloane consecutive (colspan); numărul acestora este indicat prin intermediul acestei proprietăți.

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:stretchColumns="1"
  tools:context="..." >
  <TableRow>
    <TextView 
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:gravity="center_vertical"
      android:text="@string/username" />
    <EditText 
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:inputType="text" />
  </TableRow>
  <TableRow>
    <TextView 
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:gravity="center_vertical"
      android:text="@string/password" />
    <EditText 
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:inputType="textPassword" />
  </TableRow>
  <TableRow>
    <CheckBox
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_span="2"
      android:text="@string/keepmesignedin" />
  </TableRow>   
  <TableLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <TableRow>
      <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/signin" />
      <Button 
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="@string/signup" />
    </TableRow>  	    
  </TableLayout>
</TableLayout>

Astfel, pentru specificarea numărului de rânduri și de coloane se vor utiliza proprietățile rowCount și columnCount, indicându-se pentru fiecare element grafic în parte poziția la care va fi plasat, prin atributele layout_row și layout_column. În cazul în care pentru o componentă grafică nu se specifică linia sau coloana din care face parte, atributul orientation (având va valori posibile horizontal sau vertical indică dacă elementul următor va fi plasat pe linia sau pe coloana succesivă).

În cazul în care se dorește extinderea unui element grafic pe mai multe rânduri sau pe mai multe coloane, se vor utiliza atributele layout_rowSpan și layout_columnSpan. Pentru controlul modului de dispunere se va folosi proprietatea layout_gravity. Precizarea layout_width și layout_height nu este neapărat necesară, valoarea lor implicită în acest caz fiind wrap_content.

În acest scop, poate fi adoptată una din următoarele abordări:

1. ancorarea elementelor grafice (de regulă, de cele patru colțuri ale ecranului), folosind o dispunere de tip RelativeLayout împreună cu o combinație a proprietăților layout_alignParentTop, layout_alignParentBottom, layout_alignParentLeft, layout_alignParentRight, layout_centerHorizontal, layout_centerVertical
2. redimensionarea și repoziționarea
   1. creând un fișier XML corespunzător fiecărei activități pentru fiecare orientare a ecranului, plasate în /res/layout, respectiv în /res/layout-land
   2. programatic, detectând modificarea dimensiunilor dispozitivului de afișare în metoda onCreate()

      @Override
      public void onCreate(Bundle state) {
        super.onCreate(state);
        WindowManager windowManager = getWindowManager();
        Display display = windowManager.getDefaultDisplay();
        if (display.getWidth() <= display.getHeight()) {
          // create graphic user interface for portrait mode
        }
        else {
          // create graphic user interface for landscape mode
        }
      }

De asemenea, o activitate poate fi forțată să afișeze conținutul folosind un singur tip de orientare, indiferent de poziția în care se află dispozitivul mobil:

1. în fișierul AndroidManifest.xml, în elementul <activity> corespunzător, se specifică proprietatea android:screenOrientation cu valorile portrait, respectiv landscape;
2. programatic, în metoda onCreate(), se apelează setRequestedOrientation() cu unul din parametrii ActivityInfo.SCREEN_ORIENTATION_PORTRAIT sau ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE.

Deși în cadrul unui ecran pot fi utilizate combinații între mai multe mecanisme de dispunere a conținutului, se recomandă ca o astfel de abordare să fie evitată întrucât se poate ajunge la situația în care interfața grafică nu scalează pe mai multe dispozitive de afișare cu rezoluții diferite sau prezintă probleme de performanță.

În situația în care se dorește spațierea controalelor grafice, poate fi utilizat un obiect de tip android.widget.Space.

Dacă se folosesc elemente grafice definite de utilizator, se poate recurge la etichetele <merge> sau <include> pentru a le reutiliza (în loc de a le duplica). De asemenea, un obiect de tip ViewStub poate fi încărcat în mod dinamic la rulare (numai atunci când este nevoie), în loc de a fi definit static în cadrul interfeței XML.

Pentru optimizarea unei interfețe grafice pot fi utilizate și alte utilitare cum ar fi Hierarchy View sau Lint.