AppCompat v21 — Material Design for Pre-Lollipop Devices! の日本語訳

2014/10/22 に公開された [AppCompat v21 — Material Design for Pre-Lollipop Devices! | Android Developers Blog](http://android-developers.blogspot.jp/2014/10/appcompat-v21-material-design-for-pre.html) を翻訳(多少の意訳を含む)してみました。

ちなみに原文の草稿は 10/17 に https://chris.banes.me/2014/10/17/appcompat-v21/ にて公開されており、そのコメント欄でも著者との活発な議論(Q&A)が繰り広げられていたので貴重な情報源です。

あと、この記事で話題にしている appcompat-v7/21 を組み込んだ[Twitterアプリを公開](https://play.google.com/store/apps/details?id=com.twitpane&hl=ja)していますので興味がありましたらどうぞ(宣伝)。

(11/10 追記) http://googledevjp.blogspot.jp/2014/11/appcompat-v21-lollipop.html にてGoogle公式の日本語訳が公開されています。

----

# AppCompat v21 — Material Design for Pre-Lollipop Devices!

_By Chris Banes, Android Developer Relations_

![](http://2.bp.blogspot.com/-7fF9ayZ6PgI/U9iFpk5FNEI/AAAAAAAAAs0/4P4SCvdB_4M/s600/image00.png)

<!--The Android 5.0 SDK was released last Friday, featuring new UI widgets and material design, our visual language focused on good design. To enable you to bring your latest designs to older Android platforms we have expanded our support libraries, including a major update to AppCompat, as well as new RecyclerView, CardView and Palette libraries.-->

Android 5.0 SDK は、新しいUIウィジェットとMaterial Design(デザインに特化した視覚的な言語[visual language])をフィーチャーし、先週の金曜日(訳注:2014/10/17)にリリースしました。
古いAndroidプラットフォームに最新のデザインを届けるため、私たちはサポートライブラリ([AppCompat](https://developer.android.com/tools/support-library/features.html#v7-appcompat)へのメジャーアップデートを含む)を拡張しただけでなく、新たに [RecyclerView](https://developer.android.com/tools/support-library/features.html#v7-recyclerview)、[CardView](https://developer.android.com/tools/support-library/features.html#v7-recyclerview)および[Palette](https://developer.android.com/tools/support-library/features.html#v7-palette)ライブラリを追加しました。

<!--In this post we'll take a look at what’s new in AppCompat and how you can use it to support material design in your apps.-->
この記事では、AppCompatの新機能と、あなたのアプリがmaterial designをサポートするためにAppCompatを使用する方法について説明します。


<!--##What's new in AppCompat?-->
## AppCompatの新機能は？

<!-- AppCompat (aka ActionBarCompat) started out as a backport of the Android 4.0 ActionBar API for devices running on Gingerbread, providing a common API layer on top of the backported implementation and the framework implementation. AppCompat v21 delivers an API and feature-set that is up-to-date with Android 5.0 -->

AppCompat (別名ActionBarCompat) は、バックポート実装とフレームワーク実装の上に共通のAPI層を提供する、Gingerbread 端末用の Android 4.0 の ActionBar API バックポートとして始まりました。AppCompat v21 は Android 5.0 の最新の API と機能セットを提供します。

<!-- In this release, Android introduces a new [Toolbar](https://developer.android.com/reference/android/support/v7/widget/Toolbar.html) widget. This is a generalization of the Action Bar pattern that gives you much more control and flexibility. Toolbar is a view in your hierarchy just like any other, making it easier to interleave with the rest of your views, animate it, and react to scroll events. You can also set it as your Activity’s action bar, meaning that your standard options menu actions will be display within it. -->

このリリースでは、Android は新たに [Toolbar](https://developer.android.com/reference/android/support/v7/widget/Toolbar.html) ウィジェットを導入します。これはActionBarパターンを一般化したもので、より多くの制御と柔軟性を提供します。
Toolbar は他のviewと同様にレイアウト階層に組み込まれる view であり、他の view に挟み込んだり、アニメーションさせたり、スクロールイベントに反応させたりといったことを簡単にします。また、あなたはToolbarをActivityのAction Barとして設定することができます。つまり標準的なオプションメニューのアクションがその中に表示されることを意味します。

<!-- You’ve likely already been using the latest update to AppCompat for a while, it has been included in various Google app updates over the past few weeks, including Play Store and Play Newsstand. It has also been integrated into the Google I/O Android app, pictured above, which is [open-source](https://github.com/google/iosched). -->

あなたはおそらくすでにAppCompatの最新版を使用してきているでしょう。それは過去数週間にわたり、様々な(PlayストアやPlayNewsstandを含む)Googleアプリのアップデートに含まれていましたので。またそれは上の写真の Google I/O Android アプリにも含まれており、[ソースを公開](https://github.com/google/iosched)しています。


<!--##Setup-->
##セットアップ

<!--If you’re using Gradle, add appcompat as a dependency in your build.gradle file:-->
あなたが Gradle を利用しているのであれば、appcompat を dependency として build.gradle ファイルに追加してください：

```groovy
dependencies {
    compile "com.android.support:appcompat-v7:21.0.+"
}
```

<!--New integration-->
###新たに組み込む場合

<!--If you are not currently using AppCompat, or you are starting from scratch, here's how to set it up:-->
もしあなたが現在 AppCompat を使用していないか、または新規に作成するのであれば、下記がその設定方法になります：


<!--  * All of your Activities must extend from [ActionBarActivity](https://developer.android.com/reference/android/support/v7/app/ActionBarActivity.html), which extends from [FragmentActivity](https://developer.android.com/reference/android/support/v4/app/FragmentActivity.html) from the v4 support library, so you can continue to use fragments.-->
  * 全ての Activity は [ActionBarActivity](https://developer.android.com/reference/android/support/v7/app/ActionBarActivity.html) を継承してください。`ActionBarActivity` は v4 support library の [FragmentActivity](https://developer.android.com/reference/android/support/v4/app/FragmentActivity.html) を継承しているので、引き続き fragment を利用できます。

<!--  * All of your themes (that want an Action Bar/Toolbar) must inherit from Theme.AppCompat. There are variants available, including Light and NoActionBar.-->
  * (Action Bar/Toolbarが必要な)全てのテーマは、`Theme.AppCompat` を継承してください。`Light` や `NoActionBar` といったいくつかのバリエーションがあります。

<!--  * When inflating anything to be displayed on the action bar (such as a SpinnerAdapter for list navigation in the toolbar), make sure you use the action bar’s themed context, retrieved via getSupportActionBar().getThemedContext().-->
  * inflate したものをアクションバー上に表示する場合(例えばリストナビゲーション用の SpinnerAdapter のように)、アクションバーのテーマコンテキスト(`getSupportActionBar().getThemedContext()`で取得できます)を利用していることを確認してください。

<!--  * You must use the static methods in [MenuItemCompat](https://developer.android.com/reference/android/support/v4/view/MenuItemCompat.html) for any action-related calls on a MenuItem.-->
  * MenuItemの操作関連では [MenuItemCompat](https://developer.android.com/reference/android/support/v4/view/MenuItemCompat.html) の static メソッドを利用する必要があります。



<!--Migration from previous setup-->
###従来環境からの移行

<!--For most apps, you now only need one theme declaration, in ```values/```:-->
多くのアプリでは、```values/```に1つのテーマ宣言が必要です:

```xml:values/themes.xml:
<style name="Theme.MyTheme" parent="Theme.AppCompat.Light">
    <!-- Set AppCompat’s actionBarStyle -->
    <item name="actionBarStyle">@style/MyActionBarStyle</item>

    <!-- Set AppCompat’s color theming attrs -->
    <item name=”colorPrimary”>@color/my_awesome_red</item>
    <item name=”colorPrimaryDark”>@color/my_awesome_darker_red</item>
    
    <!-- The rest of your attributes -->
</style>
```

<!-- You can now remove all of your values-v14+ Action Bar styles. -->
全ての ```values-v14+``` ActionBar スタイルは削除できます。

>(訳注)従来は下記のようにして targetApi を指定した版も記述していましたが不要になったようです。
>
>```xml:values/styles.xml:
>    <style name="MyAppTheme.Light" parent="Theme.AppCompat.Light">
>        <item name="android:actionBarStyle" tools:targetApi="11">@style/MyActionBarStyle</item>
>        
>        <!-- Support library compatibility -->
>        <item name="actionBarStyle">@style/MyActionBarStyle</item>
>    </style>
>```



<!--##Theming-->
##テーマ設定

<!-- AppCompat has support for the new [color palette theme](http://developer.android.com/training/material/theme.html#ColorPalette) attributes which allow you to easily customize your theme to fit your brand with [primary and accent colors](http://www.google.com/design/spec/style/color.html#color-ui-color-application). For example: -->

AppCompat は新たな [color palette theme](http://developer.android.com/training/material/theme.html#ColorPalette) 属性をサポートします。これはあなたのブランドを [primary and accent colors](http://www.google.com/design/spec/style/color.html#color-ui-color-application) にあうように、テーマを簡単にカスタマイズできます。例：

```xml:values/themes.xml:
<style name="Theme.MyTheme" parent="Theme.AppCompat.Light">
    <!-- colorPrimary is used for the default action bar background -->
    <item name=”colorPrimary”>@color/my_awesome_color</item>

    <!-- colorPrimaryDark is used for the status bar -->
    <item name=”colorPrimaryDark”>@color/my_awesome_darker_color</item>

    <!-- colorAccent is used as the default value for colorControlActivated,
         which is used to tint widgets -->
    <item name=”colorAccent”>@color/accent</item>

    <!-- You can also set colorControlNormal, colorControlActivated
         colorControlHighlight, and colorSwitchThumbNormal. -->
    
</style>
```

<!--When you set these attributes, AppCompat automatically propagates their values to the framework attributes on API 21+. This automatically colors the status bar and Overview (Recents) task entry.-->
これらの属性を設定すると、AppCompat は自動的にこれらの値をAPI 21以上のフレームワークの値に変換(propagate)します。これにより自動的にステータスバーやOverview(Recents)のタスクエントリーを色づけします。

<!--On older platforms, AppCompat emulates the color theming where possible. At the moment this is limited to coloring the action bar and some widgets.-->
古いプラットフォームでは、AppCompat はそのカラーテーマを可能であればエミュレートします。今のところ、これはActionBarといくつかのウィジェットに限られます。


###ウィジェットティンティン(色付け) [Widget tinting]

<!--When running on devices with Android 5.0, all of the widgets are tinted using the color theme attributes we just talked about. There are two main features which allow this on Lollipop: drawable tinting, and referencing theme attributes (of the form ?attr/foo) in drawables.-->

Android 5.0 端末で動作させた場合、全てのウィジェットは(私たちが話題にしている)カラーテーマ属性を用いて色付けされます。Lollipopではこれを可能にする2つのメインフィーチャがあります：drawable tinting, and referencing theme attributes (of the form ?attr/foo) in drawables.

<!--AppCompat provides similar behaviour on earlier versions of Android for a subset of UI widgets:-->
AppCompat はこれに近い振る舞いを、以前のバージョンのAndroidにおける一部のUIウィジェットに提供します：

 *   Everything provided by AppCompat’s toolbar (action modes, etc)
 *   EditText
 *   Spinner
 *   CheckBox
 *   RadioButton
 *   Switch (use the new [android.support.v7.widget.SwitchCompat](https://developer.android.com/reference/android/support/v7/widget/SwitchCompat.html))
 *   CheckedTextView

<!--You don’t need to do anything special to make these work, just use these controls in your layouts as usual and AppCompat will do the rest (with some caveats; see the FAQ below).-->
これらの作業のために他の特別なことは必要ありません。いつも通り、これらのコントロールをレイアウト内で利用するだけで、AppCompat は残りの作業を行います。(いくつかの警告があります; 下記のFAQ参照)



<!--##Toolbar Widget-->
##Toolbar ウィジェット

![](http://2.bp.blogspot.com/-opO8On-LSWU/VEgoMYJiAOI/AAAAAAAAA3I/i0eM6kUktkU/s1600/md.png)

<!--`Toolbar` is fully supported in AppCompat and has feature and API parity with the framework widget. In AppCompat, `Toolbar` is implemented in the [android.support.v7.widget.Toolbar](https://developer.android.com/reference/android/support/v7/widget/Toolbar.html) class. There are two ways to use `Toolbar`:-->
`Toolbar` は AppCompat でフルサポートされ、フレームワークウィジェットと同等の機能とAPIを持ちます。AppCompat では `Toolbar` は [android.support.v7.widget.Toolbar](https://developer.android.com/reference/android/support/v7/widget/Toolbar.html) class で実装されます。`Toolbar`の利用方法は2種類あります：

<!-- *   Use a `Toolbar` as an Action Bar when you want to use the existing Action Bar facilities (such as menu inflation and selection, `ActionBarDrawerToggle`, and so on) but want to have more control over its appearance.-->
 *   `Toolbar` を Action Bar として利用する：従来のAction Bar機構(例えばメニューのinflate、選択、`ActionBarDrawerToggle` など)を使いたい場合。その見た目上で、もっとコントロールできます。

<!-- *   Use a standalone `Toolbar` when you want to use the pattern in your app for situations that an Action Bar would not support; for example, showing multiple toolbars on the screen, spanning only part of the width, and so on.-->
 *   単独の `Toolbar` として利用する：Action Barが提供しないシチュエーションで、そのパターンを利用したい場合。例えば、複数のツールバーを画面上に表示したり、一部の幅で配置したり、など。


###Action Bar

<!--To use `Toolbar` as an Action Bar, first disable the decor-provided Action Bar. The easiest way is to have your theme extend from `Theme.AppCompat.NoActionBar` (or its light variant).-->
`Toolbar` をAction Barとして利用する場合、まず標準のAction Barを無効化します。最も簡単な方法は、あなたのテーマを`Theme.AppCompat.NoActionBar` (またはそのlight版) から継承させます。

<!--Second, create a `Toolbar` instance, usually via your layout XML:-->
次に、`Toolbar`インスタンスを作ります。通常は layout XML を用いて：

```xml
<android.support.v7.widget.Toolbar
    android:id=”@+id/my_awesome_toolbar”
    android:layout_height=”wrap_content”
    android:layout_width=”match_parent”
    android:minHeight=”?attr/actionBarSize”
    android:background=”?attr/colorPrimary” />
```

<!--The height, width, background, and so on are totally up to you; these are just good examples. As `Toolbar` is just a `ViewGroup`, you can style and position it however you want.-->
高さ、幅、背景などは完全にあなた次第で、それらはただの良い例です。`Toolbar` はただの `ViewGroup` であり、スタイルや位置をどんな風にでも設定できます。

<!--Then in your `Activity` or `Fragment`, set the `Toolbar` to act as your Action Bar:-->
そして、`Activity` や `Fragment` において、`Toolbar` を ActionBar として動作するように設定します：

```java
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.blah);

    Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
    setSupportActionBar(toolbar);
}
```

<!--From this point on, all menu items are displayed in your `Toolbar`, populated via the standard options menu callbacks.-->
これ以降、全てのメニュー項目は`Toolbar`で表示され、標準のオプションメニューコールバック経由で追加されます。


###Standalone

<!--The difference in standalone mode is that you do not set the `Toolbar` to act as your action bar. For this reason, you can use any AppCompat theme and you do not need to disable the decor-provided Action Bar.-->
スタンドアローンモードの違いは、`Toolbar`をAction Barとして設定しないことです。これにより、様々な AppCompat テーマを利用でき、また、標準提供の Action Bar を無効化する必要がありません。

<!--In standalone mode, you need to manually populate the Toolbar with content/actions. For instance, if you want it to display actions, you need to inflate a menu into it:-->
スタンドアローンモードでは、Toolbarにコンテンツとアクションを手動で追加する必要があります。例えば、アクションを表示したい場合、メニューをそこにinflateする必要があります：


```java
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.blah);

    Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);

    // Set an OnMenuItemClickListener to handle menu item clicks
    toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem item) {
            // Handle the menu item
            return true;
        }
    });

    // Inflate a menu to be displayed in the toolbar
    toolbar.inflateMenu(R.menu.your_toolbar_menu);
}
```

<!--There are many other things you can do with `Toolbar`. For more information, see the [Toolbar API reference](https://developer.android.com/reference/android/support/v7/widget/Toolbar.html).-->
他にも多くのことを `Toolbar` で実行できます。詳しくは[Toolbar API reference](https://developer.android.com/reference/android/support/v7/widget/Toolbar.html) を参照してください。


###Styling

<!--Styling of `Toolbar` is done differently to the standard action bar, and is set directly onto the view.-->
`Toolbar` のスタイルは標準Action Barとは異なります。そして直接そのViewに設定します。

<!--Here's a basic style you should be using when you're using a `Toolbar` as your action bar:-->
下記はAction Barとして`Toolbar`を利用するときに設定する基本的なスタイルです：

```xml
<android.support.v7.widget.Toolbar  
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="?attr/actionBarSize"
    app:theme="@style/ThemeOverlay.AppCompat.ActionBar" />
```

<!--The `app:theme` declaration will make sure that your text and items are using solid colors (i.e 100% opacity white).-->
この `app:theme` 宣言はテキストや項目が固定色(すなわち 100% 不透明な白)で利用されることを確認してください。


####DarkActionBar

<!--You can style `Toolbar` instances directly using layout attributes. To achieve a `Toolbar` which looks like 'DarkActionBar' (dark content, light overflow menu), provide the `theme` and `popupTheme` attributes:-->
`Toolbar` インスタンスのスタイルをレイアウト属性で直接設定できます。'DarkActionBar' (暗めのコンテンツ, 明るいoverflowメニュー) のような `Toolbar` を得るには、`theme` と `popupTheme` 属性を与えてください。

```xml
<android.support.v7.widget.Toolbar
    android:layout_height=”wrap_content”
    android:layout_width=”match_parent”
    android:minHeight=”@dimen/triple_height_toolbar”
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
```


##SearchView ウィジェット

<!--AppCompat offers Lollipop’s updated SearchView API, which is far more customizable and styleable (queue the applause). We now use the Lollipop style structure instead of the old searchView* theme attributes.-->

AppCompat は Lollipop 版の `SearchView` API を提供します。それははるかに多くカスタマイズ可能で、スタイル可能です(queue the applause)。旧来の`searchView*`テーマ属性の代わりに Lollipop スタイル構造を利用します。

<!--Here’s how you style `SearchView`:-->
下記は`SearchView`のスタイル設定方法です:

```xml:values/themes.xml:
<style name=”Theme.MyTheme” parent=”Theme.AppCompat”>
    <item name=”searchViewStyle”>@style/MySearchViewStyle</item>
</style>
<style name=”MySearchViewStyle” parent=”Widget.AppCompat.SearchView”>
    <!-- Background for the search query section (e.g. EditText) -->
    <item name="queryBackground">...</item>
    <!-- Background for the actions section (e.g. voice, submit) -->
    <item name="submitBackground">...</item>
    <!-- Close button icon -->
    <item name="closeIcon">...</item>
    <!-- Search button icon -->
    <item name="searchIcon">...</item>
    <!-- Go/commit button icon -->
    <item name="goIcon">...</item>
    <!-- Voice search button icon -->
    <item name="voiceIcon">...</item>
    <!-- Commit icon shown in the query suggestion row -->
    <item name="commitIcon">...</item>
    <!-- Layout for query suggestion rows -->
    <item name="suggestionRowLayout">...</item>
</style>
```

<!--You do not need to set all (or any) of these, the defaults will work for the majority of apps.-->
これらの全て(または一部)を設定する必要はありません。初期値は多くのアプリ用に動作します。


##Toolbar is coming...

<!--Hopefully this post will help you get up and running with AppCompat and let you create some awesome material apps. Let us know in the comments/G+/Twitter if you’re have questions about AppCompat or any of the support libraries, or where we could provide more documentation.-->
この記事があなたがAppCompatを始める手助けになること、そして素晴らしいMaterialアプリを作成することを望みます。
AppCompatやsupport libraryのいずれかについての質問があれば、(同記事の)コメント/G+/Twitter で教えてください。そうすれば私たちはより多くの資料を提供できますので。


##FAQ

**Why is my EditText (or other widget listed above) not being tinted correctly on my pre-Lollipop device?**

The widget tinting in AppCompat works by intercepting any layout inflation and inserting a special tint-aware version of the widget in its place. For most people this will work fine, but I can think of a few scenarios where this won’t work, including:

 * You have your own custom version of the widget (i.e. you’ve extended EditText)
 * You are creating the EditText without a LayoutInflater (i.e., calling new EditText()).

The special tint-aware widgets are currently hidden as they’re an unfinished implementation detail. This may change in the future.


**Why has X widget not been material-styled when running on pre-Lollipop?**
    Only some of the most common widgets have been updated so far. There are more coming in future releases of AppCompat.


**Why does my Action Bar have a shadow on Android Lollipop? I’ve set android:windowContentOverlay to null.**
    On Lollipop, the action bar shadow is provided using the new elevation API. To remove it, either call getSupportActionBar().setElevation(0), or set the elevation attribute in your Action Bar style.


**Why are there no ripples on pre-Lollipop?**
    A lot of what allows RippleDrawable to run smoothly is Android 5.0’s new RenderThread. To optimize for performance on previous versions of Android, we've left RippleDrawable out for now.


**How do I use AppCompat with Preferences?**
    You can continue to use PreferenceFragment in your ActionBarActivity when running on an API v11+ device. For devices before that, you will need to provide a normal PreferenceActivity which is not material-styled.