Yukiの枝折: Android: Creating Apps with Material Design

Getting Started

To create apps with material design:

Review the material design specification.

Apply the material theme to your app.

Create your layouts following material design guidelines.

Specify the elevation of your views to cast shadows.

Use system widgets for lists and cards.

Customize the animations in your app.

Material designに対応したアプリを作成するためには…

Material designの仕様を確認する
Material themeを適用する
Material designガイドラインに従ったlayoutを作成する
Viewの影をおとすelevationを指定する
リストとカードのためのwidgetを利用する
animationをカスタマイズする

Maintain backward compatibility
You can add many material design features to your app while maintaining compatibility with versions of Android earlier than 5.0. For more information, see Maintaining Compatibility.

下位互換性の維持
Android 5.0以前のバージョンとの互換性を維持しつつ, 多くのMaterial designの機能をアプリに追加できます. 詳細はMaintaining Compatibilityを参照.

Update your app with material design
To update an existing app to incorporate material design, update your layouts following material design guidelines. Also make sure to incorporate depth, touch feedback, and animations.

Material design化されたアプリにアップデート
Material designを組み込むために既存のアプリを改良するには, レイアウトをMaterial designのガイドラインに従って更新します. また, 奥行きやタッチフィードバック, アニメーションを組み込むようにして下さい.

Create new apps with material design
If you are creating a new app with material design features, the material design guidelines provide you with a cohesive design framework. Follow those guidelines and use the new functionality in the Android framework to design and develop your app.

新しいMaterial design化されたアプリの作成
もし, Material designの機能を持つ新しいアプリを作成する場合は, Material designのガイドラインがデザインフレームワークにもなる. これらのガイドラインに従い, Androidフレームワークの新しい機能を利用・設計してアプリを開発します.

Apply the Material Theme

To apply the material theme in your app, specify a style that inherits from android:Theme.Material:

アプリにMaterial themeを適用するには, android:Theme.Materialを継承したstyleを指定します.

<!-- res/values/styles.xml -->
<resources>
  <!-- your theme inherits from the material theme -->
  <style name="AppTheme" parent="android:Theme.Material">
    <!-- theme customizations -->
  </style>
</resources>

The material theme provides updated system widgets that let you set their color palette and default animations for touch feedback and activity transitions. For more details, see Using the Material Theme.

Material themeはカラーパレット, タッチフィードバックのための標準アニメーション, Activity transitionsを提供する刷新されたWidgetを提供します. 詳細は, Using the Material Themeを参照.

Design Your Layouts

In addition to applying and customizing the material theme, your layouts should conform to the material design guidelines. When you design your layouts, pay special attention to the following:

Baseline grids

Keylines

Spacing

Touch target size

Layout structure

Material themeを適用しカスタマイズすることに加えて, レイアウトをMaterial designガイドラインこれに準拠させる必要があります. レイアウトの設計には, 次の点に注意しましょう.

Baseline grids
Keylines
Spacing
Touch target size
Layout structure

Specify Elevation in Your Views

Views can cast shadows, and the elevation value of a view determines the size of its shadow and its drawing order. To set the elevation of a view, use the android:elevation attribute in your layouts:

Viewには影を設定することができ, Viewのelevation値は影のサイズと描画順序を決定します. Viewにelevationを設定するためには, レイアウトのattributeにandroid:elevationを使用します.

<TextView
    android:id="@+id/my_textview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/next"
    android:background="@color/white"
    android:elevation="5dp" />

The new translationZ property lets you create animations that reflect temporary changes in the elevation of a view. Elevation changes can be useful when responding to touch gestures.

For more details, see Defining Shadows and Clipping Views.

新しいプロパティtranslationZは, Viewのelevationの変更をアニメーションさせることができます. elevationの変更はタッチジェスチャーの反応を表現する時に役立ちます.

詳細は, Defining Shadows and Clipping Viewsを参照.

Create Lists and Cards

RecyclerView is a more pluggable version of ListView that supports different layout types and provides performance improvements. CardView lets you show pieces of information inside cards with a consistent look across apps. The following code example demonstrates how to include a CardView in your layout:

RecyclerViewはListViewと比べて拡張性に富み, 様々なレイアウトタイプをサポートしパフォーマンスの向上を見込めます. CardViewは情報をカード内に表示し, アプリ間で一貫した外観を提供します. 次のコードはレイアウト内にCardViewを含める方法です.

<android.support.v7.widget.CardView
    android:id="@+id/card_view"
    android:layout_width="200dp"
    android:layout_height="200dp"
    card_view:cardCornerRadius="3dp">
    ...
</android.support.v7.widget.CardView>

For more information, see Creating Lists and Cards.

詳細はCreating Lists and Cardsを参照.

Customize Your Animations

Android 5.0 (API level 21) includes new APIs to create custom animations in your app. For example, you can enable activity transitions and define an exit transition inside an activity:

Android5.0 (API level 21)は, カスタムアニメーションを作成するための新しいAPIを含んでいます. 例えば, Activity transitionsと終了時のtransitionを定義することができます.

public class MyActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // enable transitions
        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
        setContentView(R.layout.activity_my);
    }

    public void onSomeButtonClicked(View view) {
        getWindow().setExitTransition(new Explode());
        Intent intent = new Intent(this, MyOtherActivity.class);
        startActivity(intent,
                      ActivityOptions
                          .makeSceneTransitionAnimation(this).toBundle());
    }
}

When you start another activity from this activity, the exit transition is activated.

To learn more about the new animation APIs, see Defining Custom Animations.

このActivityから別のActivityを起動する時, 終了transitionが始動します.

新しいアニメーションのAPIについてさらに学ぶには, Defining Custom Animationsを参照.

LICENSE
Portions of this page are modifications based on work created and shared by the Android Open Source Project and used according to terms described in the Creative Commons 2.5 Attribution License.

Original source: http://developer.android.com/training/material/get-started.html