Android Design Support Libraryを使ってマテリアル化する

投稿者: | 2015年6月9日

Google I/O 2015でAndroid Support library v22.2.0が発表されました。
その中にDesign Libraryがあり、これはマテリアルデザイン対応を容易にしてくるコンポーネントが含まれています。
一通り触ってみたので、まとめます。

NavigationView

NavigationViewは、NavigationDrawerのリスト表示とヘッダーを楽々に実装できるViewです。
次のようにレイアウトで挿入可能です。

ヘッダー部分はapp:headerLayout属性でレイアウトリソースを、メニュー項目はapp:menu属性でメニューリソースを指定します。次のようなマテリアルデザインなNavigationDrawerが実装できます。

NavigartionDrawerView

TextInputLayout

TextInputLayoutは、Text fieldのHint表示をFloating Labelとして表示します。EditTextを囲むだけで適応できます。

次のような動きのあるEditTextが実装可能です。

FloatingActionButton

ついに、公式がFABの対応をしてくれました!
Viewとして提供されていますので、Layoutから指定可能です。
ただし、Android 5.0でShadowが表示されない現象やmarginの反映など、既知のBugとして本家Isssue Trackerに登録されていますので注意が必要です。
FAB doesn’t have shadow on Lollipop
The FloatingActionButton has different margins on Lollipop and pre-Lollipop.

FABのカラーはapp:backgroundTint属性で指定します。

device-2015-06-09-161503 device-2015-06-09-161607

左はLollipop、右はKitKatでの動作例です。

(追記)
「Android 5.0でShadowが表示されない現象」はこちらで回避可能とのことです。

TabLayout

いままでにTabの実装方法は何度も何度も変更されてきました。新しい方法として、TabLayoutが提供されています。
TabLayoutにViewPagerをセットするだけで適応できます。こちらも非常に簡単に実装できます。

次はViewPagerと合わせて使用するレイアウトの挿入例です。

あとはJavaソース側で、TabLayout#setupWithViewPager()やTabLayout#setTabsFromPagerAdapter()を使用して結合します。

CoordinatorLayout

CoordinatorLayoutは、AppBarLayoutやCollapsingToolbarLayoutと組み合わせて、次のような画面を作成することができます。

レイアウトは少し複雑ですが、次のような構成にします。

まとめ

Android Support library Designを使用することで、非常に楽にマテリアルデザイン対応が可能になりました。いままでは、GoogleIO 2014アプリを参考にオレオレ実装していましたが、すべてライブラリのコンポーネントに置き換えました。注意点としては、RecyclerViewやNestedScrollViewを使用しないと正常にスクロールしなかったり、既存のコンポーネントの組み合わせでは正常に動かないことがありました。
カラーの指定はマテリアル属性に依存することが多いので、以下のサイトのマテリアル対応を熟読しましょう。
Google Japan Developer Relations Blog
Android アプリにマテリアル デザインを導入する

実装時に問題があった場合は、まずは既知のバグかどうか本家Issue Trackerをチェックすることをおすすめします。

コントリビュータの方々、ありがとうございました!

Android Design Support Libraryを使ってマテリアル化する」への1件のフィードバック

  1. ピンバック: Android Design Support Library | android app作成記録

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Calculate it, plz.(captcha) * Time limit is exhausted. Please reload CAPTCHA.