1page.title=Getting Started 2 3@jd:body 4 5<div id="tb-wrapper"> 6<div id="tb"> 7<h2>This lesson teaches you to</h2> 8<ol> 9 <li><a href="#ApplyTheme">Apply the Material Theme</a></li> 10 <li><a href="#Layouts">Design Your Layouts</a></li> 11 <li><a href="#Depth">Specify Elevation in Your Views</a></li> 12 <li><a href="#ListsCards">Create Lists and Cards</a></li> 13 <li><a href="#Animations">Customize Your Animations</a></li> 14</ol> 15<h2>You should also read</h2> 16<ul> 17 <li><a href="http://www.google.com/design/spec">Material design specification</a></li> 18 <li><a href="{@docRoot}design/material/index.html">Material design on Android</a></li> 19</ul> 20</div> 21</div> 22 23 24<p>To create apps with material design:</p> 25 26<ol> 27 <li style="margin-bottom:10px"> 28 Review the <a href="http://www.google.com/design/spec">material design specification</a>.</li> 29 <li style="margin-bottom:10px"> 30 Apply the material <strong>theme</strong> to your app.</li> 31 <li style="margin-bottom:10px"> 32 Create your <strong>layouts</strong> following material design guidelines.</li> 33 <li style="margin-bottom:10px"> 34 Specify the <strong>elevation</strong> of your views to cast shadows.</li> 35 <li style="margin-bottom:10px"> 36 Use system <strong>widgets</strong> for lists and cards.</li> 37 <li style="margin-bottom:10px"> 38 Customize the <strong>animations</strong> in your app.</li> 39</ol> 40 41<h3>Maintain backward compatibility</h3> 42 43<p>You can add many material design features to your app while maintaining compatibility with 44versions of Android earlier than 5.0. For more information, see 45<a href="{@docRoot}training/material/compatibility.html">Maintaining Compatibility</a>.</p> 46 47<h3>Update your app with material design</h3> 48 49<p>To update an existing app to incorporate material design, update your layouts following 50material design guidelines. Also make sure to incorporate depth, touch feedback, and 51animations.</p> 52 53<h3>Create new apps with material design</h3> 54 55<p>If you are creating a new app with material design features, the <a 56href="http://www.google.com/design/spec">material design guidelines</a> provide you with a 57cohesive design framework. Follow those guidelines and use the new functionality in the Android 58framework to design and develop your app.</p> 59 60 61<h2 id="ApplyTheme">Apply the Material Theme</h2> 62 63<p>To apply the material theme in your app, specify a style that inherits from 64<code>android:Theme.Material</code>:</p> 65 66<pre> 67<!-- res/values/styles.xml --> 68<resources> 69 <!-- your theme inherits from the material theme --> 70 <style name="AppTheme" parent="android:Theme.Material"> 71 <!-- theme customizations --> 72 </style> 73</resources> 74</pre> 75 76<p>The material theme provides updated system widgets that let you set their color palette and 77default animations for touch feedback and activity transitions. For more details, see 78<a href="{@docRoot}training/material/theme.html">Using the Material Theme</a>.</p> 79 80 81<h2 id="Layouts">Design Your Layouts</h2> 82 83<p>In addition to applying and customizing the material theme, your layouts should conform to 84the <a href="http://www.google.com/design/spec">material design guidelines</a>. When you design 85your layouts, pay special attention to the following:</p> 86 87<ul> 88<li>Baseline grids</li> 89<li>Keylines</li> 90<li>Spacing</li> 91<li>Touch target size</li> 92<li>Layout structure</li> 93</ul> 94 95 96<h2 id="Depth">Specify Elevation in Your Views</h2> 97 98<p>Views can cast shadows, and the elevation value of a view 99determines the size of its shadow and its drawing order. To set the elevation of a view, use the 100<code>android:elevation</code> attribute in your layouts:</p> 101 102<pre> 103<TextView 104 android:id="@+id/my_textview" 105 android:layout_width="wrap_content" 106 android:layout_height="wrap_content" 107 android:text="@string/next" 108 android:background="@color/white" 109 android:elevation="5dp" /> 110</pre> 111 112<p>The new <code>translationZ</code> property lets you create animations that reflect temporary 113changes in the elevation of a view. Elevation changes can be useful when 114<a href="{@docRoot}training/material/animations.html#ViewState">responding to touch 115gestures</a>.</p> 116 117<p>For more details, see <a href="{@docRoot}training/material/shadows-clipping.html">Defining 118Shadows and Clipping Views</a>.</p> 119 120 121<h2 id="ListsCards">Create Lists and Cards</h2> 122 123<p>{@link android.support.v7.widget.RecyclerView} is a more pluggable version of {@link 124android.widget.ListView} that supports different layout types and provides performance improvements. 125{@link android.support.v7.widget.CardView} lets you show pieces of information inside cards with 126a consistent look across apps. The following code example demonstrates how to include a 127{@link android.support.v7.widget.CardView} in your layout:</p> 128 129<pre> 130<android.support.v7.widget.CardView 131 android:id="@+id/card_view" 132 android:layout_width="200dp" 133 android:layout_height="200dp" 134 card_view:cardCornerRadius="3dp"> 135 ... 136</android.support.v7.widget.CardView> 137</pre> 138 139<p>For more information, see <a href="{@docRoot}training/material/lists-cards.html">Creating Lists 140and Cards</a>.</p> 141 142 143<h2 id="Animations">Customize Your Animations</h2> 144 145<p>Android 5.0 (API level 21) includes new APIs to create custom animations in your app. 146For example, you can enable activity transitions and define an exit transition inside an 147activity:</p> 148 149<pre> 150public class MyActivity extends Activity { 151 152 @Override 153 protected void onCreate(Bundle savedInstanceState) { 154 super.onCreate(savedInstanceState); 155 // enable transitions 156 getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS); 157 setContentView(R.layout.activity_my); 158 } 159 160 public void onSomeButtonClicked(View view) { 161 getWindow().setExitTransition(new Explode()); 162 Intent intent = new Intent(this, MyOtherActivity.class); 163 startActivity(intent, 164 ActivityOptions 165 .makeSceneTransitionAnimation(this).toBundle()); 166 } 167} 168</pre> 169 170<p>When you start another activity from this activity, the exit transition is activated.</p> 171 172<p>To learn more about the new animation APIs, see <a 173href="{@docRoot}training/material/animations.html">Defining Custom Animations</a>.</p> 174