martes, 10 de diciembre de 2013

Android: Style

For instance, you have the following:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
     >

    <EditText
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        android:layout_marginLeft="2dp"
        android:layout_marginRight="2dp"
        android:background="@drawable/rounded_edit_text"

        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:hint="@string/username" />

    <EditText
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        android:layout_marginLeft="2dp"
        android:layout_marginRight="2dp"
        android:background="@drawable/rounded_edit_text"

        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:hint="@string/password" />

     ...

</LinearLayout>

As you can see both EditTexts are intented to look the same. Wouldn't it be nice to have a "CSS class" feature in Android to apply the same style to both edit texts?. Thats exactly what you achieve with Style.

Steps:

1 - In the styles.xml file located in res/values folder. Add a new Style entry. In this entry you will have one item for each attribute you want the UI element to have. The Style name will be the name you will use to refer to this Style.
2 - In the element of your layout add a style attribute and sets its value as @style/<style name>.

Step 1:

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

    // Other styles
 
    <style name="LogInEditText">
        <item name="android:paddingLeft">10dp</item>
        <item name="android:paddingRight">10dp</item>
        <item name="android:paddingTop">10dp</item>
        <item name="android:paddingBottom">10dp</item>
        <item name="android:layout_marginLeft">2dp</item>
        <item name="android:layout_marginRight">2dp</item>
        <item name="android:background">@drawable/rounded_edit_text</item>
    </style>


</resources>



Step 2:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
     >

    <EditText
        style="@style/LogInEditText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:hint="@string/username" />

    <EditText
        style="@style/LogInEditText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:hint="@string/password" />

     ...

</LinearLayout>

No hay comentarios:

Publicar un comentario