0

Custom attributes in styles.xml

Dưới đây là cách để tạo ra một custom attributes trong styles.xml.

values/styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    ...
    <item name="defaultButtonColor">@color/red</item>
    <item name="defaultButtonHeight">@dimen/dp_100</item>
</style>

values/attrs.xml

<resources> 
    ...
    <attr name="defaultButtonColor" format="reference" />
    <attr name="defaultButtonHeight" format="reference"/>
</resources>

values/colors.xml

<resources>
    ...
    <color name="red">#f00</color>
</resources>

values/dimens.xml

<resources>
    ...
    <dimen name="dp_100">100dp</dimen>
</resources>

Demo cách sử dụng

<Button
    android:layout_width="wrap_content"
    android:layout_height="?attr/defaultButtonHeight"
    android:text="Button"
    android:textColor="?attr/defaultButtonColor"
    />

Mình nghĩ việc tạo ra custom styles.xml dạng này có lợi thế hơn việc tạo ra 1 color dạng như

values/colors.xml

<resources>
    ...
    <color name="defaultButtonColor">#f00</color>
</resources>

đó là cái mã màu và tên màu nó ăn khớp với nhau và sau này bạn có thể tạo ra nhiều theme cho app của mình (ví dụ là tạo ra thêm 1 theme dark có defaultButtonColor = ...)

Tuy vậy custom attributes hiện tại cũng đang có 1 hạn chế đó là custom attributes chưa dùng được trong drawable files ở android < 5 (dùng là crash), có thể workaround bằng cách tạo ra luôn một custom attributes cho drawable đó luôn.

Android thì đã có khá nhiều default attributes rồi nhưng attributes của nó lại thường ảnh hưởng tới nhiều thứ nên mình nghĩ là cái nào không chắc thì nên custom ra luôn. Bên dưới là log ảnh hưởng của một số text color của default android attributes

   <!-- affect Button, EditText text color -->
   <item name="android:textColorPrimary">#f00</item>
   
   <!-- affect none -->
    <item name="android:textColorPrimaryInverse">#f00</item>

    <!-- affect CheckBox text, Radio Button text -->
    <item name="android:textColorPrimaryDisableOnly">#f00</item>

    <!-- affect EditText line, Radio button, CheckBox border color lor -->
    <item name="android:textColorSecondary">#f00</item>

    <!-- affect none -->
    <item name="android:textColorSecondaryInverse">#f00</item>

    <!-- affect TextView color -->
    <item name="android:textColorTertiary">#f00</item>

    <!-- affect none -->
    <item name="android:textColorTertiaryInverse">#f00</item>

    <!-- affect edit text hint -->
    <item name="android:textColorHint">#f00</item>

    <!-- affect none -->
    <item name="android:textColorHintInverse">#f00</item>

    <!-- affect none -->
    <item name="android:textColorHighlight">#f00</item> 

Hy vọng bài viết phần nào sẽ giúp bạn tạo ra được ui cho android có sự thống nhất về style, dễ dàng thay đổi màu sắc, size, ... cho toàn app


All rights reserved

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí