TechBooster

AndroidではThemeというデザインを統一する仕組みがあります。

Themeを使用すると背景や文字色、各UIコンポーネントをアプリケーションやActivty単位で統一できます。

これは非常に便利な機能ですが、アプリを作っているとこの部分だけは違うデザインにしたいと思う箇所が出てくると思います。

そういう場合はstyle.xmlを使用して変更したい部分のデザインのみを変更するという方法が存在します。

詳細は以下から。

style.xmlファイルを用意する

はじめにファイルの用意をしましょう。

stlye.xmlというファイルを用意し、valuesフォルダに格納します。

ここではファイルの内容はタグのみを記述しておきます。

style.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

</resources>

カスタマイズ内容を記述する

style.xmlではstyleタグとitemタグを使用してデザインを定義していきます。

今回はTheme.Holo.LightのActionBarを例にカスタマイズしてみましょう。

styleタグではname属性に独自style名を、parent属性に変更したい属性の名前を使用します。

style.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="my_theme" parent="@android:style/Theme.Holo.Light">
    </style>
</resources>

上記のサンプルではTheme.Holo.LightというThemeを継承して、my_themeというThemeを定義しています。

継承できる代表的なThemeを以下に記述します。

上記以外にも多くのThemeが存在します。詳細はhttp://developer.android.com/reference/android/R.style.htmlを参考にして下さい。

itemタグではstyleタグのparentで指定した属性が保持している属性に対しての変更値を指定します。

name属性に変更したい属性名を、タグの中身に変更値を記述します。

style.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="my_theme" parent="@android:style/Theme.Holo.Light">
        <item name="android:actionBarStyle">@style/my_actionbar_style</item>
    </style>
</resources>

ActionBarの背景を変更してみよう

style.xmlの記述方法を理解したところで、実際にActionBarの背景をstyle.xmlで定義してみましょう。

以下のサンプルstyle”my_theme”を適用することで、Theme.Hole.LightのActionBarの背景が黒色になります。

style.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="my_theme" parent="@android:style/Theme.Holo.Light">
        <item name="android:actionBarStyle">@style/my_actionbar_style</item>
    </style>
    <style name="my_actionbar_style" parent="@android:style/Widget.Holo.Light.ActionBar">
        <item name="android:background">#000000</item>
    </style>
</resources>