Material Design系列第二篇——Getting Started

Getting Started

This lesson teaches you to

1. Apply the Material Theme
2. Design Your Layouts
3. Specify Elevation in Your Views
4. Create Lists and Cards
5. Customize Your Animations

You should also read

• Material design specification
• Material design on Android

To create apps with material design:

1. Review the material design specification.
2. Apply the material theme to your app.
3. Create your layouts following material design guidelines.
4. Specify the elevation of your views to cast shadows.
5. Use system widgets for lists and cards.
6. Customize the animations in your app.

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.

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.

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.

Apply the Material Theme

---

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

<!-- res/values/styles.xml -->
<resources>
  <!-- your theme inherits from the material theme -->
  <stylename="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.

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

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:

<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.

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:

<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.

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:

publicclassMyActivityextendsActivity{

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

    publicvoid onSomeButtonClicked(View view){
        getWindow().setExitTransition(newExplode());
        Intent intent =newIntent(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.