a consistent base for your Android

AppCompatを使うとマテリアルデザインの 原則に基づいたアプリを作成できます

app built on the principles of material design.

AppCompatを使うとマテリアルデザインの 原則に基づいたアプリを作成できます

But material design is a lot more

ツールバーやアクセントカラーだけが マテリアルデザインではありません

than adding a toolbar and some accent colors.

ツールバーやアクセントカラーだけが マテリアルデザインではありません

For everything else, there's a design library.

マテリアルデザインに必要なものはすべて デザインライブラリに用意されています

The design library provides many of the high-level components

マテリアルデザインに必要なものはすべて デザインライブラリに用意されています

you'll need to build a great app that feels

高度なコンポーネントも多数あります

at home with material design.

高度なコンポーネントも多数あります

So what do you get?

フローティングラベルや エラーを追加するTextInputLayout

A text input layout for adding floating labels and errors

フローティングラベルや エラーを追加するTextInputLayout

to edit text.

フローティングラベルや エラーを追加するTextInputLayout

Floating action button for the primary action

主なアクション向けの FloatingActionButton

in your interface.

主なアクション向けの FloatingActionButton

SnackBars for quick feedback messages

SnackBarは すばやいフィードバックを提供

with an optional action.

SnackBarは すばやいフィードバックを提供

Material design compliant tabs and navigation

マテリアルデザインに適したタブ

view for building your Navigation Drawer menu items.

ドロワーメニュー用のNavigationView

Plus a lot of work, specifically around motion and scrolling.

モーションやスクロール関連の機能

All this back through API7.

これらはAPI7と同じです

Text Input Layer wraps and edits text, providing always visible

TextInputLayoutを使えば 簡単にヒントやエラーを表示できます

hint text, and a convenient way of showing error

TextInputLayoutを使えば 簡単にヒントやエラーを表示できます

text via the set error method.

TextInputLayoutを使えば 簡単にヒントやエラーを表示できます

Floating Action Buttons are ideal for that primary action

FloatingActionButtonは UIの主なアクションに最適です

in your UI.

FloatingActionButtonは UIの主なアクションに最適です

The design library's Floating Action Button

既定のサイズとミニサイズがあるので 他の要素に合わせて選べます

sports both a default size as well as a mini size,

既定のサイズとミニサイズがあるので 他の要素に合わせて選べます

useful for when the Floating Action Button needs

既定のサイズとミニサイズがあるので 他の要素に合わせて選べます

to match with other elements.

既定のサイズとミニサイズがあるので 他の要素に合わせて選べます

Snackbars are a new way to provide lightweight feedback

SnackBarは軽量なフィードバックを提供します

to your users.

SnackBarは軽量なフィードバックを提供します

Unlike toast messages, SnackBars are an interactive part

トーストメッセージとは異なり インタラクティブな操作が可能

of your UI, allowing you to add an optional action

トーストメッセージとは異なり インタラクティブな操作が可能

or allow the user to swipe to dismiss the SnackBar.

スワイプして閉じることもできます

This makes SnackBars very useful around potentially destructive

これは操作性を損なう可能性のある 場面で役立ちます

operations.

これは操作性を損なう可能性のある 場面で役立ちます

A Click Undo Action can save a lot of headache,

[元に戻す]で訂正も簡単

while providing a far better experience than confirmation

確認ダイアログを表示するよりも 便利です

dialogs.

確認ダイアログを表示するよりも 便利です

Tabs have always been a common pattern on Android,

タブはトップレベルの移動やグループ化に Androidでよく使われます

both as top level navigation for your app,

タブはトップレベルの移動やグループ化に Androidでよく使われます

and for grouping content within your app.

タブはトップレベルの移動やグループ化に Androidでよく使われます

The design library's tab layout supports fixed tabs

TabLayoutには 固定タブとスクロールタブがあります

where each views width is split equally between tabs, suitable

TabLayoutには 固定タブとスクロールタブがあります

if you only have a few important tabs,

タブ数が少ない場合は固定タブ 多い場合はスクロールタブを使います

as well supporting scrollable tabs where you

タブ数が少ない場合は固定タブ 多い場合はスクロールタブを使います

have a large number of tabs.

タブ数が少ない場合は固定タブ 多い場合はスクロールタブを使います

We've made it easy to attach your tab layout to a ViewPager,

TabLayoutはViewPagerと簡単に接続でき タブとページコンテンツが連携されます

keeping your tabs and pages content in sync.

TabLayoutはViewPagerと簡単に接続でき タブとページコンテンツが連携されます

Just make sure your pager adapter overrides

必ずページアダプタがgetPageTitleを 上書きするようにします

Get Page Title.

必ずページアダプタがgetPageTitleを 上書きするようにします

And then call Set Up With ViewPager

次にsetupWithViewPagerを呼び出して 全部をひとまとめにします

to tie everything together.

次にsetupWithViewPagerを呼び出して 全部をひとまとめにします

An alternative to using tabs as your top-level navigation

タブによるトップレベルナビゲーションに 代わるナビゲーションドロワー

is the Navigation Drawer-- a slide out

タブによるトップレベルナビゲーションに 代わるナビゲーションドロワー

pane which offers navigation between different parts

スライドアウトペインによって アプリ内を移動できます

of your app.

スライドアウトペインによって アプリ内を移動できます

Navigation View gives you a perfectly styled drawer.

NavigationViewで ドロワーの作成も簡単

You just provide the header, and then you

ヘッダーを入力してから ナビゲーションアイテムを追加するだけです

can add navigation items programmatically

ヘッダーを入力してから ナビゲーションアイテムを追加するだけです

or via a Menu Resource File.

ヘッダーを入力してから ナビゲーションアイテムを追加するだけです

The simplest drawer menus will have a group of checkable menu

もっともシンプルなドロワーメニューは オン オフのメニューのリストです

items, using the checkable behavior

もっともシンプルなドロワーメニューは オン オフのメニューのリストです

equals single attribute.

もっともシンプルなドロワーメニューは オン オフのメニューのリストです

This ensures that the checked items will appear highlighted

オンになった項目は ナビゲーションビューでハイライト表示されます

in the Navigation View.

オンになった項目は ナビゲーションビューでハイライト表示されます

Support for subheaders using subviews is also available.

サブビューを使った サブヘッダーも設定できます

That takes care of a lot of the visuals of material design.

外観については以上です

What about the motion side of material design?

次はモーションについてです

Coordinator motion is critical to a great experience.

優れた操作性には モーションが重要になります

That's why the design library is introducing CoordinatorLayout.

そのためにCoordinatorLayoutがあります

CoordinatorLayout is a new layout

CoordinatorLayoutでは 子を作って動作を宣言できます

that allows children to declare a behavior, giving them

CoordinatorLayoutでは 子を作って動作を宣言できます

extra controls around touch events

たとえばタッチイベントの制御や ビュー間の関係構築が可能です

and the ability to build dependencies between views.

たとえばタッチイベントの制御や ビュー間の関係構築が可能です

A great example of this is when you use CoordinatorLayout

好例を紹介しましょう

with the floating action button, and then show a Snackbar.

フローティング操作ボタンがスナックバーに 合わせて自動的に移動します

The default behavior for these components

フローティング操作ボタンがスナックバーに 合わせて自動的に移動します

allow the floating action button to automatically move up

フローティング操作ボタンがスナックバーに 合わせて自動的に移動します

as the Snackbar animates onto the screen,

フローティング操作ボタンがスナックバーに 合わせて自動的に移動します

ensuring that components don't overlap,

特別なコードを記述しなくても コンポーネント同士が重なりません

without you writing any code at all.

特別なコードを記述しなくても コンポーネント同士が重なりません

A major focus for CoordinatorLayout

メインコンテンツのスクロールに合わせて アプリバーが動きます

in this initial release is around

メインコンテンツのスクロールに合わせて アプリバーが動きます

enabling your appbar to react to your main content scrolling.

メインコンテンツのスクロールに合わせて アプリバーが動きます

By wrapping your toolbar and other views, such as Tab

ツールバーと他のビューをラッピングして 特別な制御フラグを使用できます

Layout, in an appbar layout, you'll

ツールバーと他のビューをラッピングして 特別な制御フラグを使用できます

gain access to the special control flags,

ツールバーと他のビューをラッピングして 特別な制御フラグを使用できます

allowing you to annotate each component as something that

このフラグにより各コンポーネントに 注釈を付けることができます

scrolls off the screen, stays pinned

このフラグにより各コンポーネントに 注釈を付けることができます

to the top of the screen, or even returns immediately,

そしてXMLを数行記述するだけで さまざまな動作を設定できます

when you downward scroll, making implementing a quick return

そしてXMLを数行記述するだけで さまざまな動作を設定できます

pattern just a few lines of XML.

同期スクロールさせるために カスタムコードは必要ありません

No custom synchronized scrolling code needed.

同期スクロールさせるために カスタムコードは必要ありません

You can take things even further by using a collapsing toolbar

CollapsingToolbarLayoutを使えば さらにカスタマイズできます

layout.

CollapsingToolbarLayoutを使えば さらにカスタマイズできます

This allows an extended hide toolbar

ツールバーを折りたたんだときの タイトルのテキストサイズも変更できます

to grow and shrink its title text size as it collapses.

ツールバーを折りたたんだときの タイトルのテキストサイズも変更できます

Pin elements to the top of the collapsing toolbar,

要素の固定や視差画像の使用 スクリムカラーの追加なども可能です

parallax images, and even add a full bleed scrim color

要素の固定や視差画像の使用 スクリムカラーの追加なども可能です

once it becomes collapsed.

要素の固定や視差画像の使用 スクリムカラーの追加なども可能です

Again, just a few lines of XML, and that's all you'll need.

必要なのは数行のXMLだけです

Getting started with the design library is easy.

デザインライブラリは依存関係を 1行記述するだけで使用できます

It's just a single dependency to add.

デザインライブラリは依存関係を 1行記述するだけで使用できます

With AppCompat as the base, and the components provided

AppCompatをベースに 各種コンポーネントを活用しましょう

by the design library on top of it,

AppCompatをベースに 各種コンポーネントを活用しましょう

there's no better time to get started building great material

優れたマテリアルデザインアプリを すぐ作成できます

design apps.

優れたマテリアルデザインアプリを すぐ作成できます

We've only touched on the features in the design library.

紹介した機能はごく一部です

You're can learn even more about the design library in the blog

詳しくはデベロッパーサイトの ブログをご覧ください

post and on the developer site.

詳しくはデベロッパーサイトの ブログをご覧ください

I'm looking forward to your great material design apps.

素晴らしいアプリを作ってください