既存のAndroidアプリにMaterial Themeを適用する方法

2014/11/16 23638hit

Android LollipopではMaterial Designが本格的に採用され、Material Designを実現するために、Material Themeという新しいテーマが用意されました。
Material Designに関しては非常に挑戦的かつ包括的な内容のため、アプリ全体の見直しが必要になりますが、まずMaterial Themeを適用することでその第一歩を始めることが出来ます。
新規でLollipop向けのアプリをつくるには良いのですが、既にアプリを公開済みのものに対してMaterial Themeを適用するにはいくつかの注意点が有ります。

Material Themeを適用する2つの方法

従来と互換性をもたせたままMaterial Themeを適用するには2種類の方法があります。

・LollipopではMaterial Themeを使用し、従来のバージョンではHoloを使う。
・Support Libraryを使用して従来のバージョンでもMaterialTheme風のテーマを使用する。

LollipopではMaterial Themeを使用し、従来のバージョンではHoloを使う。

従来バージョンではHoloを利用したままLollipopでMaterial Designを使用するにはqualifierでテーマを適用します。

従来のVersionではHolo.Lightを使用する。
res/values/styles.xml

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


Android Lollipop以上ではMaterial.Lightを使用する。
res/values-v21/styles.xml

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


applicationのmanifestにAppThemeを適用する。
AndroidManifest.xml

...
<application
android:theme="@style/AppTheme"
...
  >
...


この場合、従来のアプリの見た目を保ったままLollipopではMaterial Themeを利用できます。

Galaxy Nexus(Android 4.4.2 Jelly Bean)で動作させると従来通りのHoloが適用されているのがわかります。

Nexus 5(Android 5.0.0 Lollipop)で動作させると新しいMaterial Designが適用されました。


Support Libraryを使用して従来のバージョンでもMaterialTheme風のテーマを使用する。

もう一つの方法として、Suppor Libraryを使用して従来バージョンもMaterial Theme風にすることが出来ます。
まずはSuppor Libraryのv7:21以上をインストールします。
AndroidStudioならbuild.gradleのdependenciesに以下の1行を追加します。
app/build.gradle

compile 'com.android.support:appcompat-v7:21.0.+'



EclipseならSDK_HOME配下の/extras/android/support/v7/appcompatのプロジェクトをインポートしてプロジェクトのPropertiesからAndroidをえらびLibraryにインポートしたSuppor Libraryのプロジェクトを追加します。

なお、これを行うとコンパイル時に以下の様なエラーが発生することが有ります
<プロジェクトファイル>\app\build\intermediates\exploded-aar\com.google.android.gms\play-services\5.0.89\res\values\wallet_attrs.xml
Error:Attribute "theme" has already been defined
Error:Execution failed for task ':app:processDebugResources'.
> com.android.ide.common.internal.LoggedErrorException: Failed to run command:
<プロジェクトファイル>\app\build\intermediates\res\debug\values\values.xml:1077: error: Attribute "theme" has already been defined
これは"theme"がGooglePlay ServicesとSupport Libraryで重複してしまっていることが原因でGooglePlay Servicesをver6以上にアップグレードすることで回避できます。
AndroidStudioならbuild.gradleのdependenciesに以下の1行を追加します。
app/build.gradle

compile 'com.google.android.gms:play-services:6.+'


values/styles.xmlでTheme.AppCompatを継承したテーマを作ります。
背景色が明るいTheme.AppCompat.Lightやアクションバーが暗いTheme.AppCompat.Light.DarkActionBarなどが有ります。
values/styles.xml

<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar" />
</resources>

applicationのmanifestでApplicationにAppThemeを適用します。
AndroidManifest.xml

...
<application
android:theme="@style/AppTheme"
...
  >
...

Activityでandroid.support.v7.app.ActionBarActivityを継承させます。

public class MyActivity extends ActionBarActivity{


これにより、Lollipop以上ではシステム純正のMaterial Themeが、それ以前ではSuppor LibraryがシミュレーションするMaterial Themeっぽいテーマが設定されます。

Galaxy Nexus(Android 4.4.2 Jelly Bean)で動作させた様子
Material Design風のUIが適用されています。
シークバーなど一部のウィジェットは実装が完了していない模様です。


Nexus 5(Android 5.0.0 Lollipop)で動作させた様子
シークバーを含めMaterial Designが適用されます。


完全にMaterial Designがシミュレーションされるわけではなく、シークバーやシステムバーなどは既存のままとなってしまうようです。
OSレベルの問題であるシステムバーはともかく、シークバーの対応についてはSupport Libraryのバージョンアップで解決することを期待します。

配色を変更する

Material Themeの便利な特徴の一つとしてassetを用意せずに簡単にUIパーツの配色を変えることが出来るようになりました。

配色で指定するのは主にcolorPrimary,colorPrimaryDark,colorAccentの3つ
それぞれ、アクションバーの色、システムバーの色、UIの色になります。

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#3F51B5</item>
<item name="colorPrimaryDark">#303F9F</item>
<item name="colorAccent">#E91E63</item>
</style>

Galaxy Nexus(Android 4.4.2 Jelly Bean)で動作させた様子
4.4.2ではOSレベルでシステムバーの色変更に対応していなかったためシステムバーの変更には対応していません。
アクションバーやUIウィジェットは一部を除き指定した色に変更されています。


Nexus 5(Android 5.0.0 Lollipop)で動作させた様子
システムバーやシークバーを含めて正しく色が付きました。


Material Themeでは他にもCard ViewやZ-indexなど新しい要素が多く追加されています。
それらについては今後まとめていく予定です。

Material Designについては必須の要件ではないですが、OSや標準アプリで積極的に採用されていること、導入アプリが増えていることから、特にLollipop以降を対象とするアプリでは、対応しないと古臭く見えてしまう可能性が高いです。
Material Themeに関しては適用するだけなら簡単。だけれどMaterial "Design"に適合させるにはアプリ全体のデザインを含めた見直しが必要だと感じています。

Material Designに関しての考え方については今年中に公開予定です。

前:AndroidStudioでVolleyを使う方法 次:独自のBackgroundでRipple Effectを使用する

関連キーワード

[Android][Java][モバイル][IT]

コメントを投稿する

名前URI
コメント