Android User Interface Styles – partea a doua

Prezentul tutorial reprezintă o completare la anteriorul. La adresa articolului trecut au existat comentarii pro și contra. Sunt conștientă de faptul că nu poate fi toată lumea mulțumită, însă de asemenea realizez faptul că sunt multe persoane interesate, iar acest lucru mă bucură enorm și cu această ocazie le mulțumesc tuturor pentru feedback-uri.

Deși subiectul ales a fost considerat desuet (aproximativ 29% dintre comentarii), totuși vreau să mă țin de cuvânt și să adaug completarea promisă, mai precis realizarea unui stil capabil să genereze efecte de umbră la selectarea unui buton și nu numai.

Așadar să trecem la treabă! 😉

Există numeroase tool-uri de procesare a imaginilor capabile să realizeze elemente grafice care dețin diverse efecte, incluzînd aici și obținerea efectului de umbră. Android oferă de asemenea posibilitatea de a atașa un efect de umbră. Această transformare poate fi aplicată mai multor tipuri de controale aparținând interfeței grafice. Acest tutorial vine să “umbrească” elemente precum TextView și Button, eliminănd astfel necesitatea de a adăuga o multitudine de imagini ce trebuiau să fie asociate textelor sau butoanelor. În plus realizarea design-ului pentru mai multe tipuri de rezoluții va fi mult mai ușor de realizat deoarece Layout Managerul pus la dispoziție de Android poate scala TextView-urile mult mai simplu față de scalarea imaginilor în ImageView-uri.

Pentru a aplica un efect de umbră sunt necesari 4 parametrii:

  1. culoarea pentru umbră – android:shadowColor
  2. ofset pentru valoarea X – android:shadowDx
  3. ofset pentru valoarea Y – android:shadowDy
  4. raza – android:shadowRadius

Stilurile ce vor fi aplicate elementelor grafice sunt declarate sub formă de fişiere xml în folderul de resurse res/values, iar elementele necesare în realizarea background-urilor vor fi adăugate în res/drawable. De asemenea la partea de generare umbre atributele pot fi declarate direct în fișierul din res/layout sau într-un fișier xml separat.

Unicul ecran al mini-proiectului este declarat în main.xml și are următoarea alcătuire:

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
style="@style/LayoutFillFill"
android:fillViewport="true" >

<LinearLayout
style="@style/LayoutFillWrap"
android:layout_marginBottom="15dip"
android:background="@drawable/light_gray"
android:gravity="center_horizontal"
android:orientation="vertical"
android:padding="10dip" >

<TextView
style="@style/LayoutFillWrap"
android:layout_marginBottom="20dip"
android:shadowColor="#7F0000"
android:shadowDx="3"
android:shadowDy="3"
android:shadowRadius="0.01"
android:text="@string/txt_shadow"
android:textColor="@drawable/black"
android:textSize="25dip" />

<TextView
style="@style/LayoutFillWrap"
android:layout_marginBottom="20dip"
android:padding="2dp"
android:shadowColor="#7F0000"
android:shadowDx="3"
android:shadowDy="-3"
android:shadowRadius="1.5"
android:text="@string/txt_soft_shadow"
android:textColor="@drawable/black"
android:textSize="25dip" />

<TextView
style="@style/LayoutFillWrap"
android:layout_marginBottom="20dip"
android:background="@drawable/profile_dark_blue"
android:padding="2dp"
android:shadowColor="@drawable/white"
android:shadowDx="0"
android:shadowDy="0"
android:shadowRadius="3"
android:text="@string/txt_glow"
android:textColor="@drawable/white"
android:textSize="25dip" />

<Button
android:layout_width="fill_parent"
android:layout_height="50dip"
android:layout_marginBottom="25dip"
android:background="@drawable/btn_shadow_left_bottom"
android:text="@string/btn_shadow_left_bottom" />

<Button
android:layout_width="fill_parent"
android:layout_height="50dip"
android:layout_marginBottom="25dip"
android:background="@drawable/btn_shadow_bottom"
android:text="@string/btn_shadow_bottom" >
</Button>

<Button
android:layout_width="fill_parent"
android:layout_height="50dip"
android:layout_marginBottom="25dip"
android:background="@drawable/btn_shadow_top_right"
android:text="@string/btn_shadow_top_right" >
</Button>

</LinearLayout>

</ScrollView>

Rezultatul grafic:

După cum bine se poate observa ecranul conține 3 TextView-uri și 3 Button-uri. Primul TextView are aplicat un efect de umbră situat la o distanță de 3px față de text . De remarcat faptul ca shadowRadius trebuie să fie mereu prezent, altfel umbra nu va fi desenată.

<TextView
style="@style/LayoutFillWrap"
android:layout_marginBottom="20dip"
android:shadowColor="#7F0000"
android:shadowDx="3"
android:shadowDy="3"
android:shadowRadius="0.01"
android:text="@string/txt_shadow"
android:textColor="@drawable/black"
android:textSize="25dip" />

Al doilea TextView deține un efect de umbră mai discret față de primul. Diferența este realizată de valoarea negativă pentru android:shadowDy și de valoarea mai mare pentru android:shadowRadius :

<TextView
style="@style/LayoutFillWrap"
android:layout_marginBottom="20dip"
android:padding="2dp"
android:shadowColor="#7F0000"
android:shadowDx="3"
android:shadowDy="-3"
android:shadowRadius="1.5"
android:text="@string/txt_soft_shadow"
android:textColor="@drawable/black"
android:textSize="25dip" />

În cazul celui de-al treilea TextView situația este total diferită. Scopul vizat a fost obțineare unui text “strălucitor”, iar manipularea celor 4 atribute declarate inițial ca necesare pentru obținerea umbrelor au contribuit la realizarea obiectivului dorit:


<TextView
style="@style/LayoutFillWrap"
android:layout_marginBottom="20dip"
android:background="@drawable/profile_dark_blue"
android:padding="2dp"
android:shadowColor="@drawable/white"
android:shadowDx="0"
android:shadowDy="0"
android:shadowRadius="3"
android:text="@string/txt_glow"
android:textColor="@drawable/white"
android:textSize="25dip" />

La capitolul butoane, rezultatele obținute sunt ceva mai spectaculoase, mai precis se creează un efect de umbră atunci când butonul este selectat. Există 3 situații:

  • umbra este situată în colțul din stânga-jos,
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item android:right="5dp" android:top="5dp">
<shape>
<corners android:radius="3dp" />
<solid android:color="#669999" />
</shape>
</item>
<item android:bottom="2dp" android:left="2dp">
<shape>
<gradient android:angle="270" android:endColor="#66FFCC" android:startColor="#66CC99" />
<stroke android:width="1dp" android:color="#66CC99" />
<corners android:radius="4dp" />
<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
    • umbra este generată în partea de jos a butonului,
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- "shadow" -->
<item>
<shape android:shape="rectangle" >
<solid android:color="#000000" />
<corners android:radius="12dp" />
</shape>
</item>

<item android:bottom="3px">
<shape android:shape="rectangle" >
<gradient
android:angle="270"
android:endColor="#800080"
android:startColor="#DA70D6" />
<corners android:radius="12dp" />
</shape>
</item>
</layer-list>
  • umbra apare în colțul din dreapta-sus.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- "shadow" -->
<item>
<shape android:shape="rectangle" >
<solid android:color="#000000" />
<corners android:radius="12dp" />
</shape>
</item>

<item android:top="3px"
android:right="2px">
<shape android:shape="rectangle" >
<gradient
android:startColor="#FFA500"
android:endColor="#FF4500"
android:angle="270" />
<corners android:radius="12dp" />
</shape>
</item>
</layer-list></pre>
</div>

Resurse:

  1. Codul sursă asociat exemplului prezentat poate fi downloadat de aici.
  2. Initial, tutorialul a fost publicat pe androider.ro.
Advertisements
Android User Interface Styles – partea a doua

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