Android User Interface Styles

Android este o platformă interesantă pentru dezvoltatori, dar nu toţi designerii au aceeaşi opinie. Să realizezi o aplicaţie care să arate bine pe toate device-urile care se diferenţiază prin mărimea ecranului, densitatea pixelilor, aspectul ratio este o adevărată provocare. Dacă reuşeşti să atingi acest obiectiv succesul aplicaţiei nu va întârzia să apară deşi utilizatorii sunt din ce în ce mai selectivi, iar de concurenţă nu ducem lipsă. Cu acest scop şi cei de la Google au lansat, după cum probabil ştiţi, o secţiune dedicată realizării unor proiecte Android cu design excepţional.

În cadrul procesului de elaborarea a design-ului este necesar să fie respectate 3 idei principale prezentate pe site-ul oficial Android:

  1. Flexibilitate : layout-urile utilizate trebuie să fie capabile să se extindă sau să se comprime în funcţie de caracteristicile device-ului.
  2. Optimizare: în cazul device-urilor cu un ecran mare  trebuie să profităm de spaţiul liber şi să creăm view-uri compuse care să ofere user-ului mai mult conţinut şi o navigare uşoară în cadrul aplicaţiei.
  3. Resurse diversificate: aplicaţia trebuie să dispună de resurse utile pentru device-uri cu densităţi de pixeli (dpi) diferite.

Cu gândul la aceste principii şi cu dorinţa de a realiza o aplicaţie stilată acest tutorial oferă câteva modele de resurse ce pot fi utilizate ca bază în crearea unei aplicaţii Android. De ce o aplicaţie “stilată”? Pentru că exemplele din cadrul acestui tutorial definesc stiluri aplicabile componentelor interfeţei grafice.

Stilurile ce vor fi aplicate elementelor grafice sunt declarate sub formă de fişiere xml în folderul de resurse res/values . De asemenea stilurile pot moşteni alte stiluri într-o modalitate asemănătoare cu CSS.

Un exemplu de stil ce poate fi aplicat unei componente de tip Button este definit în interiorul unui fişier xml

btn_style.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <style name="ButtonText">
 <item name="android:layout_width">fill_parent</item>
 <item name="android:layout_height">50dip</item>
 <item name="android:textColor">#ffffff</item>
 <item name="android:gravity">center</item>
 <item name="android:layout_margin">3dp</item>
 <item name="android:textSize">20dp</item>
 <item name="android:textStyle">bold</item>
 <item name="android:shadowColor">#000000</item>
 <item name="android:shadowDx">1</item>
 <item name="android:shadowDy">1</item>
 <item name="android:shadowRadius">2</item>
</style>
</resources>

Acest stil poate fi apelat astfel:

style="@style/ButtonText"

Android oferă posibilitatea de a defini fişiere xml, tot ca resurse, de data aceasta definite în folderul res/drawable, capabile să realizeze background-uri în gradient.

background_gradient.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="rectangle" >

<gradient
 android:angle="270"
 android:endColor="#009966"
 android:startColor="#FF99CC" />

</shape>

Aplicabilitate:

android:background="@drawable/background_gradient"

Un alt element de stil care poate să îmbunătăţească aspectul interfeţei grafice este reprezentat de colţurile rotunjite:

round_corners.xml


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:padding="10dp"
 android:shape="rectangle" >
<solid android:color="#FF9999" />
<corners
 android:bottomLeftRadius="5dp"
 android:bottomRightRadius="5dp"
 android:topLeftRadius="5dp"
 android:topRightRadius="5dp" />
</shape>

Cum se aplică?

android:background="@drawable/round_corners"

O combinaţie de stiluri :

btn_violet.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:state_pressed="true" >
 <shape>
 <solid
 android:color="#ef4444" />
 <stroke
 android:width="1dp"
 android:color="#992f2f" />
 <corners
 android:radius="3dp" />
 <padding
 android:left="10dp"
 android:top="10dp"
 android:right="10dp"
 android:bottom="10dp" />
 </shape>
 </item>
 <item>
 <shape>
 <gradient
 android:startColor="#DA70D6"
 android:endColor="#800080"
 android:angle="270" />
 <stroke
 android:width="1dp"
 android:color="#992f2f" />
 <corners
 android:radius="3dp" />
 <padding
 android:left="10dp"
 android:top="10dp"
 android:right="10dp"
 android:bottom="10dp" />
 </shape>
 </item>
</selector>

Animaţiile reprezintă un alt centru de interes pentru design. Tot cu ajutorul fişierelor xml se pot declara :

bottom_up.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
 android:interpolator="@android:anim/accelerate_interpolator" >

<translate
 android:duration="700"
 android:fromYDelta="0%"
 android:toYDelta="60%" >
 </translate>

</set>

Aplicaţia model pentru a exemplifica aceste noi concepte are în componenţă 3 screen-uri:

  • screen 1: conţine o serie de butoane carora le sunt aplicate mai multe stiluri;

  • screen 2: este afişat după ce a fost selectat butonul “Animation” din primul screen;

  • screen 3: cuprinde un layout asupra căruia sunt exercitate mai multe tipuri de animaţii.

Din cadrul implementării, ca element de noutate se remarcă metoda care permite lansarea animaţiilor:

private void startAnimationPopOut(int rr)
{
 LinearLayout myLayout = (LinearLayout) findViewById(R.id.anim_layout);

  android.view.animation.Animation animation = AnimationUtils
  .loadAnimation(this, rr);
  animation.reset();
  animation.setAnimationListener(new AnimationListener()
{

@Override
public void onAnimationEnd(
  android.view.animation.Animation animation)
{
}

@Override
public void onAnimationRepeat(
android.view.animation.Animation animation)
{
}

@Override
public void onAnimationStart(
android.view.animation.Animation animation)
{
}

});
myLayout.startAnimation(animation);
}

Resurse:

  1. http://developer.android.com/design/index.html
  2. Tutorialul a fost publicat inițial pe androider.ro.
  3. Codul sursă asociat acestui tutorial poate fi downloadat de aici.
Advertisements
Android User Interface Styles

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s