あんざいゆき

2012年7月7日

Android style ハンズオン by あんざいゆき is licensed

under a Creative Commons 表示 - 非営利 - 改変禁止 3.0 非移植 License.

docs.google.comにある作品に基づいている。

第14回Android勉強会in札幌

 Android style  ハンズオン

この資料のURL : http://goo.gl/zsLR4


0. はじめに

Android アプリのカスタマイズに必要なこと

今日のサンプルコード

1. ベースのテーマを決める

res/values/styles.xml

AndroidManifest.xml

2. 背景をカスタマイズする

res/values/styles.xml

res/values/colors.xml

res/values/styles.xml

res/values/colors.xml

res/values/styles.xml

res/drawable/window_bg3.xml

res/values/styles.xml

3. ActionBar をカスタマイズする

res/values/styles.xml

res/values/styles.xml

res/drawable/actionbar_bg.xml

res/values/styles.xml

res/valuse/style.xml

res/values/styles.xml

4. 全体のテキストの色を変える

res/values/colors.xml

res/values/styles.xml

5. スクロールバーのスタイルを変える

res/values/styles.xml

res/drawable/scrollbar_thumb_h.xml

res/drawable/scrollbar_thumb_v.xml

res/drawable/scrollbar_track_h.xml

res/drawable/scrollbar_track.xml

6. Button をカスタマイズする

res/values/style.xml

res/drawable/btn.xml

res/drawable/btn_drawable.xml

7. Action Item をタップしたときの色を変える

res/values/styles.xml

res/drawable/actionitem_bg.xml

8.  ActionItem の文字色を変える

res/values/styles.xml



0. はじめに

Android アプリのカスタマイズに必要なこと

・デザインガイドラインを読みましょう

 http://developer.android.com/design/index.html

 日本語訳もぐぐれば出ると思います(でも簡単な英語かつ英文の量が少ないので原文を読んだほうがいいと思います)

・カスタマイズの基礎がわかりません

 → Android Layout Cookbook を読みましょう

   ・http://goo.gl/gdGmL

   ・PDF版もあります

     ・impress Direct : http://goo.gl/Q5Ugz

     ・達人出版会 : http://tatsu-zine.com/books/androidlayoutcookbook

・ICS 以降のカスタマイズ方法(ActionBarなど)が知りたい

 → Android UI Cookbook を読みましょう。

   ・http://goo.gl/oyGv8

   ・PDF版もあります

     ・impress Direct : http://goo.gl/5FjCQ

     ・達人出版会 : http://tatsu-zine.com/books/androiduicookbook40

今日のサンプルコード

https://docs.google.com/open?id=0B99tkpQpgWT2ck1GdDdfdlJvVXM

をダウンロード([File] - [Download])して展開し、Eclipse で [File] - [Import...] - [Existing Projects into Workspace] で Select root directory に展開したディレクトリを指定して Finish をクリック


1. ベースのテーマを決める

Android 4.0 では

がベーステーマとして用意されています

   Theme.Holo

  Theme.Holo.Light

Theme.Holo.Light.DarkActionBar

例えば、 Theme.Holo.Light をベースにしてオリジナルテーマを作るには、次のように res/values/ の下にテーマ用の XML ファイルを用意し、AndroidManifest.xml で <application> タグもしくは <activity> タグに android:theme 属性で指定します。

res/values/styles.xml


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

<resources>

    <style name="MyTheme" parent="@android:style/Theme.Holo.Light">

        <!-- オリジナルテーマ用のカスタマイズ -->

    </style>

</resources>


AndroidManifest.xml


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

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

    package="yanzm.example.mystylesample"

    android:versionCode="1"

    android:versionName="1.0" >

    <uses-sdk android:minSdkVersion="11" />

    <uses-permission android:name="android.permission.INTERNET" />

    <application

        android:icon="@drawable/icon"

        android:label="@string/app_name"

        android:theme="@style/MyTheme" >

    …

    </application>

</manifest>



2. 背景をカスタマイズする

各 Activity の XML レイアウトのルート View に同じ色や画像を指定して全体の背景を指定してませんか?こういう方法は記述漏れを誘発してバグを生む原因になります。

スタイルを使えばデフォルトの背景をセットすることができるので、いちいちレイアウトに記述する必要がありません。

スタイルで背景を指定するには android:windowBackground 属性を使います。

注意点として、android:windowBackground にはカラーコードを直接指定することができません。指定できるのは色リソースIDか drawable リソースIDだけです。

これはだめ

res/values/styles.xml


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

<resources>

    <style name="MyTheme" parent="@android:style/Theme.Holo.Light">

        <item name="android:windowBackground">#fdf3de</item>

    </style>

</resources>


次の用に color リソースとして定義するか drawable リソースとして定義する必要があります。

・color リソースとして定義する場合

res/values/colors.xml


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

<resources>

    <color name="window_bg">#FDF3DE</color>

</resources>


res/values/styles.xml


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

<resources>

    <style name="MyTheme" parent="@android:style/Theme.Holo.Light">

        <item name="android:windowBackground">@color/window_bg</item>

    </style>

</resources>


・drawable リソースとして定義する場合

res/values/colors.xml


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

<resources>

    <drawable name="window_bg2">#FDF3DE</color>

</resources>


res/values/styles.xml


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

<resources>

    <style name="MyTheme" parent="@android:style/Theme.Holo.Light">

        <item name="android:windowBackground">@drawable/window_bg2</item>

    </style>

</resources>


もちろん画像リソースを指定することもできます。

小さい画像を並べて(タイルのようにして)背景にするには次のように <bitmap> タグを使います。

res/drawable/window_bg3.xml


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

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

    android:src="@drawable/tile"

    android:tileMode="repeat" />


res/values/styles.xml


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

<resources>

    <style name="MyTheme" parent="@android:style/Theme.Holo.Light">

        <item name="android:windowBackground">@drawable/window_bg3</item>

    </style>

</resources>



3. ActionBar をカスタマイズする

ActionBar にはいくつかカスタマイズするためのスタイル属性があります。詳しくは Android UI Cookbook にあるのでそちらを参照してください。ここではそのなかのいくつかを取り上げます。

ActionBar のスタイルは android:actionBarStyle 属性にまとめて定義します。

res/values/styles.xml


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

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

    <style name="MyTheme" parent="@android:style/Theme.Holo.Light">

        <item name="android:windowBackground">@drawable/window_bg3</item>

        <item name="android:actionBarStyle">@style/MyActionBar</item>

    </style>

   

    <style name="MyActionBar" parent="@android:style/Widget.ActionBar">

        <!-- オリジナルの ActionBar の設定 -->

    </style>

</resources>


まずは ActionBar の背景を変えてみましょう。背景を変えるには android:background 属性を使います。この属性にはカラーコードを直接していすることができます。もちろん drawable や color のリソースIDも指定できます。

res/values/styles.xml


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

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

    <style name="MyTheme" parent="@android:style/Theme.Holo.Light">

        <item name="android:windowBackground">@drawable/window_bg3</item>

        <item name="android:actionBarStyle">@style/MyActionBar</item>

    </style>

   

    <style name="MyActionBar" parent="@android:style/Widget.ActionBar">

        <item name="android:background">#9C0C0A</item>

    </style>

</resources>


<shape> を使うと簡単にグラデーションの drawable を作ることができます。ActionBar の背景を上から下に暗くなるグラデーションにしてみましょう。

グラデショーンを作る際には明るさ(HSVの Value)のことなる2色で作ると失敗しません。(http://ja.wikipedia.org/wiki/HSV%E8%89%B2%E7%A9%BA%E9%96%93

色の作成には Adobe Kuler が便利です。 http://kuler.adobe.com/

res/drawable/actionbar_bg.xml


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

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

    <gradient

        android:angle="270"

        android:endColor="#690806"

        android:startColor="#9C0C0A" />

</shape>


■ angle="0"

endColor ---- startColor

■ angle="90"

endColor

|

startColor

■ angle="180"

startColor --- endColor

■ angle="270"

startColor

|

endColor

res/values/styles.xml


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

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

    <style name="MyTheme" parent="@android:style/Theme.Holo.Light">

        <item name="android:windowBackground">@drawable/window_bg3</item>

        <item name="android:actionBarStyle">@style/MyActionBar</item>

    </style>

   

    <style name="MyActionBar" parent="@android:style/Widget.ActionBar">

        <item name="android:background">@drawable/actionbar_bg</item>

    </style>

</resources>


ActionBar の文字色を変えるには android:titleTextStyle を使います。赤に黒だと文字の視認性が良くないので、文字色を白にしましょう。

res/valuse/styles.xml


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

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

    <style name="MyTheme" parent="@android:style/Theme.Holo.Light">

        <item name="android:windowBackground">@drawable/window_bg3</item>

        <item name="android:actionBarStyle">@style/MyActionBar</item>

    </style>

    <style name="MyActionBar" parent="@android:style/Widget.ActionBar">

        <item name="android:background">@drawable/actionbar_bg</item>

        <item name="android:titleTextStyle">@style/MyActionBarTitleStyle</item>

    </style>

    <style name="MyActionBarTitleStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">

        <item name="android:textColor">#FFFAE8</item>

    </style>

</resources>


2.x のときのように ActionBar にアイコンを表示したくない場合は、android:displayOptions で showTitle だけを指定します。

res/values/styles.xml


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

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

    <style name="MyTheme" parent="@android:style/Theme.Holo.Light">

        <item name="android:windowBackground">@drawable/window_bg3</item>

        <item name="android:actionBarStyle">@style/MyActionBar</item>

    </style>

    <style name="MyActionBar" parent="@android:style/Widget.ActionBar">

        <item name="android:background">@drawable/actionbar_bg</item>

        <item name="android:titleTextStyle">@style/MyActionBarTitleStyle</item>

        <item name="android:displayOptions">showTitle</item>

    </style>

    <style name="MyActionBarTitleStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">

        <item name="android:textColor">#FFFAE8</item>

    </style>

</resources>



4. 全体のテキストの色を変える

TextView のデフォルトの文字のスタイルは TextAppearance.Small が指定されてします。この TextAppearance.Small の文字色には android:textColorSecondary に指定されている色が参照されています。そのため、android:textColorSecondary に指定する色を上書きすれば TextAppearance.Small が指定されている各ウィジェットの色がすべて変わります。

res/values/colors.xml


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

<resources>

    <color name="window_bg">#FDF3DE</color>

    <drawable name="window_bg2">#FDF3DE</drawable>

    <color name="small_text">#8F6031</color>

    <color name="medium_text">#3B3013</color>

</resources>


res/values/styles.xml


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

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

    <style name="MyTheme" parent="@android:style/Theme.Holo.Light">

        <item name="android:windowBackground">@drawable/window_bg3</item>

        <item name="android:actionBarStyle">@style/MyActionBar</item>

        <!-- 文字(Large, Medium)の色 -->

        <item name="android:textColorPrimary">@color/medium_text</item>

        <!-- 文字(Small)の色 -->

        <item name="android:textColorSecondary">@color/small_text</item>

    </style>

    <style name="MyActionBar" parent="@android:style/Widget.ActionBar">

        <item name="android:background">@drawable/actionbar_bg</item>

        <item name="android:titleTextStyle">@style/MyActionBarTitleStyle</item>

        <item name="android:displayOptions">showTitle</item>

    </style>

    <style name="MyActionBarTitleStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">

        <item name="android:textColor">#FFFAE8</item>

    </style>

</resources>



5. スクロールバーのスタイルを変える

スクロールバーのスタイルとして、つまみ部分とつまみが移動する部分を変えることができます。

res/values/styles.xml


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

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

    <style name="MyTheme" parent="@android:style/Theme.Holo.Light">

        <item name="android:windowBackground">@drawable/window_bg3</item>

        <item name="android:actionBarStyle">@style/MyActionBar</item>

        <!-- 文字(Large, Medium)の色 -->

        <item name="android:textColorPrimary">@color/medium_text</item>

        <!-- 文字(Small)の色 -->

        <item name="android:textColorSecondary">@color/small_text</item>

        <!-- スクロールバー用の領域幅 -->

        <item name="android:scrollbarSize">4dip</item>

        <!-- つまみのスタイル -->

        <item name="android:scrollbarThumbHorizontal">@drawable/scrollbar_thumb_h</item>

        <item name="android:scrollbarThumbVertical">@drawable/scrollbar_thumb_v</item>

        <!-- つまみの移動する部分スタイル -->

        <item name="android:scrollbarTrackHorizontal">@drawable/scrollbar_track</item>

        <item name="android:scrollbarTrackVertical">@drawable/scrollbar_track</item>

    </style>

    <style name="MyActionBar" parent="@android:style/Widget.ActionBar">

        <item name="android:background">@drawable/actionbar_bg</item>

        <item name="android:titleTextStyle">@style/MyActionBarTitleStyle</item>

        <item name="android:displayOptions">showTitle</item>

    </style>

    <style name="MyActionBarTitleStyle"parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">

        <item name="android:textColor">#FFFAE8</item>

    </style>

</resources>


res/drawable/scrollbar_thumb_h.xml


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

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

    <gradient

        android:angle="0"

        android:endColor="@color/scrollbar_thumb_bottom"

        android:startColor="@color/scrollbar_thumb_top" />

    <corners android:radius="2dp" />

</shape>


res/drawable/scrollbar_thumb_v.xml


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

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

    <gradient

        android:angle="270"

        android:endColor="@color/scrollbar_thumb_bottom"

        android:startColor="@color/scrollbar_thumb_top" />

    <corners android:radius="2dp" />

</shape>


res/drawable/scrollbar_track.xml


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

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

    <solid android:color="@color/scrollbar_track" />

</shape>


res/values/colors.xml


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

<resources>

    <color name="window_bg">#FDF3DE</color>

    <color name="small_text">#8F6031</color>

    <color name="medium_text">#3B3013</color>

    <color name="scrollbar_thumb_top">#9C0C0A</color>

    <color name="scrollbar_thumb_bottom">#690806</color>

    <color name="scrollbar_track">#668F6031</color>

</resources>


6. Button をカスタマイズする

shape を使って Holo テーマっぽい独自ボタンを作ってみます。

ボタンのスタイルは android:buttonStyle で指定します。

res/values/style.xml


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

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

    <style name="MyTheme" parent="@android:style/Theme.Holo.Light">

        <item name="android:windowBackground">@drawable/window_bg3</item>

        <item name="android:actionBarStyle">@style/MyActionBar</item>

        <!-- 文字(Large, Medium)の色 -->

        <item name="android:textColorPrimary">@color/medium_text</item>

        <!-- 文字(Small)の色 -->

        <item name="android:textColorSecondary">@color/small_text</item>

        <!-- スクロールバー用の領域幅 -->

        <item name="android:scrollbarSize">4dip</item>

        <!-- つまみのスタイル -->

        <item name="android:scrollbarThumbHorizontal">@drawable/scrollbar_thumb_h</item>

        <item name="android:scrollbarThumbVertical">@drawable/scrollbar_thumb_v</item>

        <!-- つまみの移動する部分スタイル -->

        <item name="android:scrollbarTrackHorizontal">@drawable/scrollbar_track</item>

        <item name="android:scrollbarTrackVertical">@drawable/scrollbar_track</item>

        <!-- Button のスタイル -->

        <item name="android:buttonStyle">@style/MyButton</item>

    </style>

    <style name="MyButton" parent="@android:style/Widget.Button">

        <item name="android:background">@drawable/btn</item>

        <item name="android:textColor">#690806</item>

    </style>

    <style name="MyActionBar" parent="@android:style/Widget.ActionBar">

        <item name="android:background">@drawable/actionbar_bg</item>

        <item name="android:titleTextStyle">@style/MyActionBarTitleStyle</item>

        <item name="android:displayOptions">showTitle</item>

    </style>

    <style name="MyActionBarTitleStyle"parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">

        <item name="android:textColor">#FFFAE8</item>

    </style>

</resources>


res/drawable/btn.xml


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

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item

        android:bottom="4dip"

        android:left="4dip"

        android:right="4dip"

        android:top="4dip">

        <shape>

            <corners android:radius="2dip" />

            <gradient

                android:angle="270"

                android:endColor="#99aaaaaa"

                android:startColor="#99cccccc" />

        </shape>

    </item>

   

    <item android:drawable="@drawable/btn_drawable" />

</layer-list>


res/drawable/btn_drawable.xml


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

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

    <item android:state_pressed="true">

        <shape>

            <corners android:radius="4dip" />

            <solid android:color="#33ff0000" />

        </shape>

    </item>

   

    <item android:state_focused="true">

        <shape>

            <corners android:radius="2dip" />

            <stroke android:color="#33ff0000" android:width="4dip" />

            <solid android:color="#00ff0000" />

        </shape>

    </item>

    <item>

        <shape>

            <corners android:radius="4dip" />

            <solid android:color="#00ff0000" />

            <padding android:bottom="16dip" android:left="24dip" android:right="24dip"android:top="16dip" />

        </shape>

    </item>

</selector>


7. Action Item をタップしたときの色を変える

Action Itemをタップした時の色を一括して変えるには android:selectableItemBackground 属性を使います。

res/values/styles.xml


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

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

    <style name="MyTheme" parent="@android:style/Theme.Holo.Light">

        <item name="android:windowBackground">@drawable/window_bg3</item>

        <item name="android:actionBarStyle">@style/MyActionBar</item>

        <!-- 文字(Large, Medium)の色 -->

        <item name="android:textColorPrimary">@color/medium_text</item>

        <!-- 文字(Small)の色 -->

        <item name="android:textColorSecondary">@color/small_text</item>

        <!-- スクロールバー用の領域幅 -->

        <item name="android:scrollbarSize">4dip</item>

        <!-- つまみのスタイル -->

        <item name="android:scrollbarThumbHorizontal">@drawable/scrollbar_thumb_h</item>

        <item name="android:scrollbarThumbVertical">@drawable/scrollbar_thumb_v</item>

        <!-- つまみの移動する部分スタイル -->

        <item name="android:scrollbarTrackHorizontal">@drawable/scrollbar_track</item>

        <item name="android:scrollbarTrackVertical">@drawable/scrollbar_track</item>

        <!-- Button のスタイル -->

        <item name="android:buttonStyle">@style/MyButton</item>

       

        <item name="android:selectableItemBackground">@drawable/actionitem_bg</item>

    </style>

    <!-- Button のスタイル -->

    <style name="MyButton" parent="@android:style/Widget.Button">

        <item name="android:background">@drawable/btn</item>

        <item name="android:textColor">#690806</item>

    </style>

    <style name="MyActionBar" parent="@android:style/Widget.ActionBar">

        <item name="android:background">@drawable/actionbar_bg</item>

        <item name="android:titleTextStyle">@style/MyActionBarTitleStyle</item>

        <item name="android:displayOptions">showTitle</item>

    </style>

    <style name="MyActionBarTitleStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">

        <item name="android:textColor">#FFFAE8</item>

    </style>

</resources>


res/drawable/actionitem_bg.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="#33ffffff" />

        </shape>

    </item>

   

    <item android:state_focused="true">

        <shape>

            <stroke android:color="#33ffffff" android:width="4dip" />

            <solid android:color="#00ffffff" />

        </shape>

    </item>

    <item>

        <shape>

            <solid android:color="#00ff0000" />

        </shape>

    </item>

</selector>


8.  ActionItem の文字色を変える

ActionItem の文字色を変えるには android:actionMenuTextColor 属性を使います。

res/values/styles.xml


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

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

    <style name="MyTheme" parent="@android:style/Theme.Holo.Light">

        <item name="android:windowBackground">@drawable/window_bg3</item>

        <item name="android:actionBarStyle">@style/MyActionBar</item>

        <!-- 文字(Large, Medium)の色 -->

        <item name="android:textColorPrimary">@color/medium_text</item>

        <!-- 文字(Small)の色 -->

        <item name="android:textColorSecondary">@color/small_text</item>

        <!-- スクロールバー用の領域幅 -->

        <item name="android:scrollbarSize">4dip</item>

        <!-- つまみのスタイル -->

        <item name="android:scrollbarThumbHorizontal">@drawable/scrollbar_thumb_h</item>

        <item name="android:scrollbarThumbVertical">@drawable/scrollbar_thumb_v</item>

        <!-- つまみの移動する部分スタイル -->

        <item name="android:scrollbarTrackHorizontal">@drawable/scrollbar_track</item>

        <item name="android:scrollbarTrackVertical">@drawable/scrollbar_track</item>

        <!-- Button のスタイル -->

        <item name="android:buttonStyle">@style/MyButton</item>

       

        <item name="android:selectableItemBackground">@drawable/actionitem_bg</item>

        <item name="android:actionMenuTextColor">#FFFFFF</item>

    </style>

    <!-- Button のスタイル -->

    <style name="MyButton"parent="@android:style/Widget.Button">

        <item name="android:background">@drawable/btn</item>

        <item name="android:textColor">#690806</item>

    </style>

    <style name="MyActionBar" parent="@android:style/Widget.ActionBar">

        <item name="android:background">@drawable/actionbar_bg</item>

        <item name="android:titleTextStyle">@style/MyActionBarTitleStyle</item>

        <item name="android:displayOptions">showTitle</item>

    </style>

    <style name="MyActionBarTitleStyle"parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">

        <item name="android:textColor">#FFFAE8</item>

    </style>

</resources>


おつかれさまでした。

パチパチパチ。

  第14回Android勉強会in札幌 Android styleハンズオン    /