Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

Androidのマテリアルデザイン ~マテリアルデザインとツールバー~

Android Studio 2で始めるアプリ開発入門 第16回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2017/02/07 14:00

 Androidアプリを開発するにはAndroid Studioを使います。そのAndroid Studioのメジャーアップデートであるバージョン2.0が正式公開されました。本連載では、最新のAndroid Studio 2系を使い、Androidアプリ開発の基本を解説していきます。前回はカメラアプリとの連携を扱いました。今回は、次回と2回に分けて、マテリアルデザインを解説します。

目次

対象読者

  • Androidアプリ開発未経験な方
  • Java言語は一通り習得済みである方

マテリアルデザイン

 Android関係の解説に入る前に、マテリアルデザインそのものについて解説しておきましょう。

マテリアルデザインとは

 マテリアルデザインとは、Googleが2014年6月にGoogle I/O Conferenceにおいて発表した画面デザインの考え方です。この考え方のポイントを簡単にまとめると、以下のようになります。

  • 画面という2次元の世界に3次元を持ち込む。画面部品に影をつけることであたかも3次元的に配置されているように表現する。
  • 画面部品に動きをつける。ただ単に動きをつけるのではなく、動きそのものに意味がないといけない。
  • ひとつの画面にたくさんの色を使うのではなく、主に4色を使い、それぞれの色に意味を持たせる。

 詳細に関しては、Googleが開設しているマテリアルデザイン専用のサイトを参照してください。特に、このサイト内のマテリアルデザインのガイドラインは、一読しておいても損はありません。なお、これらのサイトは全て英語ですが、ガイドラインは日本語化されPDFとして公開されています。こちらのページからダウンロードできます。

Androidのマテリアルデザイン

 マテリアルデザインは、あくまでも考え方なので、Androidに限らずWebデザインなどさまざまなところで適用できるようになっています。それをAndroidに適用した場合に関しては、こちらのページで解説されています。

 Androidはマテリアルデザインの提唱元であるGoogleが開発しているOSなので、標準でマテリアルデザインをサポートしています。上に挙げたページにも記載があるように、その中心となるのが「マテリアルテーマ」というものです。

 Androidアプリには、「テーマ」というものがあります。テーマとは、アプリで使われる文字スタイルや配色などを定義したものです。テーマを利用することで、統一された画面イメージを提供することができます。そのテーマとして、マテリアルデザインを採用したものが「マテリアルテーマ」です。これらマテリアルテーマはAndroid 5.0(API レベル21)で導入され、Android Studioによって作られた最近のプロジェクトでは標準として適用されています。

 つまり、今までこの連載で作成してきたアプリは、実は既にマテリアルデザインとなっているのです。

Androidのマテリアルテーマの確認

 過去にこの連載で作成したプロジェクトで、マテリアルテーマを確認してみましょう。例えば、下図は第14回で作成したImplicitIntentSampleの、起動後の画面を拡大したものです。

図1 拡大されたImplicitIntentSampleの画面
図1 拡大されたImplicitIntentSampleの画面

 アクションバーやボタンが少し浮いたように見えると思います。これまでに作成した全てのアプリは、ボタンが背景から少し浮いたデザインとなっています。これが「画面という2次元の世界に3次元を持ち込む」ということなのです。そして、それを成しえているのが「影」です。アクションバーもボタンも影がついています。影をつけることで浮いたように見せているのです。

 何もしていないのにも関わらず、初期状態でマテリアルデザインが適用されているのは、マテリアルテーマのなせる技です。では、そのマテリアルテーマはどこに記述されているのでしょうか。

 [resフォルダ] > [valuesフォルダ] > [styles.xml]

を開いてください。

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

 このようなタグが確認できると思います。style.xmlはこのアプリで使うテーマを設定するためのファイルであり、<style>タグで定義します。このうちname属性が「AppTheme」のものが、アプリのテーマとして使用されます。このタグ内に自分で配色や文字スタイルを記述していけばそれが適用されますが、通常はあらかじめAndroid SDKで用意されたものを親として指定し、必要な部分だけ書き換えます。その指定がparent属性です。ここでparent属性で記述された

Theme.AppCompat.Light.DarkActionBar

が、まさにマテリアルテーマなのです。Android SDKで用意されたマテリアルテーマは以下の3種あります。

  • Theme.Material:暗い色のテーマ
  • Theme.Material.Light:明るい色のテーマ
  • Theme.Material.Light.DarkActionBar:明るい色で、アクションバーだけ暗い色のテーマ

 ただし、このテーマはAndroid 5.0(API レベル21)以降でのみ使用できます。それ以前のバージョンも含めて幅広く適応させたい場合は、アクティビティクラスの親クラスとしてAppCompatActivityを使用し、以下のテーマを使用します。

  • Theme.AppCompat:暗い色のテーマ
  • Theme.AppCompat.Light:明るい色のテーマ
  • Theme.AppCompat.Light.DarkActionBar:明るい色で、アクションバーだけ暗い色のテーマ

 Materialの部分をAppCompatに変えるだけです。もっとも、Android Studioでプロジェクトを使用すると、標準でAppCompatActivityを継承したアクティビティクラスが作成され、テーマもAppCompatのものになっています。

[Note]アプリのテーマ指定

 実はどのsytleをアプリのテーマとするかはAndroidManifest.xmlで設定できます。

 以下のように、AndroidManifest.xmlの<application>タグの属性としてandroid:themeというのがあり、ここで指定します。

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

マテリアルデザインの4色

 もう少し、このstyles.xmlを見てみましょう。<style>タグ以下に<item>タグの記述が3カ所あると思います。それぞれのname属性は、「colorPrimary」「colorPrimaryDark」「colorAccent」となっています。これまでの解説の通り、マテリアルデザインは配色数を限定し、それぞれの色に意味を持たせています。Androidにマテリアルテーマを指定した場合、以下のような意味を持ちます。

  • メインとなる色(colorPrimary):アクションバーの色
  • colorPrimaryと同系色で一段回濃い色(colorPrimaryDark):アクションバーのさらに上のバーの色
  • アクセントカラー(colorAccent): colorPrimaryに対して目立つ色で、図1ではEditTextのアンダーバーの色
  • 背景色(windowBackground): 今回の<item>タグには指定がないが、画面の背景で使用されている色

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 齊藤 新三(サイトウ シンゾウ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:Android Studio 2で始めるアプリ開発入門

もっと読む

All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5