Skip to content

Most visited

Recently visited

navigation

スタートガイド

マテリアル デザインでアプリを作成するには:

  1. マテリアル デザインの仕様を確認します。
  2. マテリアル テーマをアプリに適用します。
  3. マテリアル デザインのガイドラインに沿ってレイアウトを作成します。
  4. ビューのエレベーションを設定してシャドウを付与します。
  5. リストやカードにシステムウィジェットを使用します。
  6. アプリでアニメーションをカスタマイズします。

下方互換性を維持する

Android 5.0 より前のバージョンとの互換性を維持しながら、マテリアル デザインのさまざまな機能をアプリに追加できます。 詳細については、 互換性の維持をご覧ください。

マテリアル デザインでアプリをアップデートする

既存のアプリをアップデートしてマテリアル デザインを組み込むには、マテリアル デザインのガイドラインに沿ってレイアウトをアップデートします。 深度、タッチ フィードバック、アニメーションを組み込んでいることも確認してください。

マテリアル デザインで新しいアプリを作成する

マテリアル デザインの機能を使って新しいアプリを作成すると、マテリアル デザインのガイドラインから凝縮したデザイン フレームワークが得られます。 ガイドラインに従い、Android フレームワークの新しい機能を使ってアプリを設計、開発してください。

マテリアル テーマを適用する

アプリでマテリアル テーマを適用するには、次のように android:Theme.Material から継承したスタイルを指定します。

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

マテリアル テーマはアップデートされたシステム ウィジェットを提供しています。これにより、タッチ フィードバックやアクティビティ遷移のためのカラーパレットやデフォルトのアニメーションを指定できます。 詳細については、 マテリアル テーマの使用をご覧ください。

レイアウトを設計する

マテリアル テーマを適用したり、カスタマイズしたりすることに加えて、レイアウトがマテリアル デザインのガイドラインに準拠している必要があります。 レイアウトを設計するときは、次の項目に特に注意してください。

ビューでエレベーションを指定する

ビューにはシャドウを付与できます。ビューのエレベーションの値によって、付与されるシャドウのサイズと表示される順序が決まります。 ビューのエレベーションを設定するには、次のようにレイアウトの 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" />

新しい translationZ プロパティを使用すると、ビューのエレベーションの一時的な変更が反映されるアニメーションを作成できます。 エレベーションの変更は、 タッチ操作に応答するときに便利です。

詳細については、シャドウとクリッピング ビューの定義をご覧ください。

リストとカードを作成する

RecyclerViewListView のさらに柔軟なバージョンで、異なるレイアウト タイプをサポートしてパフォーマンスを向上します。 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>

詳細については、リストとカードの作成をご覧ください。

アニメーションをカスタマイズする

Android 5.0(API レベル 21)には、アプリでカスタム アニメーションを作成する新たな API が含まれています。 たとえば次のように、アクティビティ遷移を有効にしてアクティビティ内部で ExitTransition を定義できます。

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());
    }
}

このアクティビティから別のアクティビティを開始するときに Exit 遷移がアクティベートされます。

新しいアニメーション API の詳細については、カスタム アニメーションの定義をご覧ください。

This site uses cookies to store your preferences for site-specific language and display options.

Get the latest Android developer news and tips that will help you find success on Google Play.

* Required Fields

Hooray!

WeChat で Google Developers をフォローする

Browse this site in ?

You requested a page in , but your language preference for this site is .

Would you like to change your language preference and browse this site in ? If you want to change your language preference later, use the language menu at the bottom of each page.

This class requires API level or higher

This doc is hidden because your selected API level for the documentation is . You can change the documentation API level with the selector above the left navigation.

For more information about specifying the API level your app requires, read Supporting Different Platform Versions.

Take a short survey?
Help us improve the Android developer experience. (Dec 2017 Android Platform & Tools Survey)