1 page.title=Como iniciar 2 3 @jd:body 4 5 <div id="tb-wrapper"> 6 <div id="tb"> 7 <h2>Esta lio ensina a</h2> 8 <ol> 9 <li><a href="#ApplyTheme">Aplicar o tema do Material</a></li> 10 <li><a href="#Layouts">Projetar layouts</a></li> 11 <li><a href="#Depth">Especificar a elevao em visualizaes</a></li> 12 <li><a href="#ListsCards">Criar listas e cartes</a></li> 13 <li><a href="#Animations">Personalizar animaes</a></li> 14 </ol> 15 <h2>Voc tambm deve ler</h2> 16 <ul> 17 <li><a href="http://www.google.com/design/spec">Especificaes do Material Design</a></li> 18 <li><a href="{@docRoot}design/material/index.html">Material Design no Android</a></li> 19 </ul> 20 </div> 21 </div> 22 23 24 <p>Para criar aplicativos com o Material Design:</p> 25 26 <ol> 27 <li style="margin-bottom:10px"> 28 Reveja as <a href="http://www.google.com/design/spec">especificaes do Material Design</a>.</li> 29 <li style="margin-bottom:10px"> 30 Aplique o <strong>tema</strong> do Material no seu aplicativo.</li> 31 <li style="margin-bottom:10px"> 32 Crie <strong>layouts</strong> de acordo com as orientaes do Material Design.</li> 33 <li style="margin-bottom:10px"> 34 Especifique a <strong>elevao</strong> das visualizaes para inserir sombras.</li> 35 <li style="margin-bottom:10px"> 36 Use <strong>widgets</strong> do sistema para listas e cartes.</li> 37 <li style="margin-bottom:10px"> 38 Personalize <strong>animaes</strong> no aplicativo.</li> 39 </ol> 40 41 <h3>Manter compatibilidade com verses anteriores</h3> 42 43 <p>Voc pode adicionar muitos recursos do Material Design ao aplicativo e, ao mesmo tempo, manter 44 a compatibilidade com verses anteriores ao Android 5.0. Para obter mais informaes, consulte 45 <a href="{@docRoot}training/material/compatibility.html">Como manter a compatibilidade</a>.</p> 46 47 <h3>Atualizar o aplicativo com o Material Design</h3> 48 49 <p>Para atualizar um aplicativo existente para incorporar o Material Design, atualize os layouts 50 de acordo com as orientaes do Material Design. Certifique-se tambm de incorporar profundidade, feedbacks de toque e 51 animaes.</p> 52 53 <h3>Criar novos aplicativos com o Material Design</h3> 54 55 <p>Se voc est criando um novo aplicativo com recursos do Material Design, as <a href="http://www.google.com/design/spec">orientaes do Material Design</a> fornecem uma 56 estrutura de projeto coesa. Siga tais orientaes e use a nova funcionalidade na estrutura do Android para 57 projetar e desenvolver o aplicativo.</p> 58 59 60 <h2 id="ApplyTheme">Aplicar o tema do Material</h2> 61 62 <p>Para aplicar o tema do Material no aplicativo, especifique um estilo herdado de 63 <code>android:Theme.Material</code>:</p> 64 65 <pre> 66 <!-- res/values/styles.xml --> 67 <resources> 68 <!-- your theme inherits from the material theme --> 69 <style name="AppTheme" parent="android:Theme.Material"> 70 <!-- theme customizations --> 71 </style> 72 </resources> 73 </pre> 74 75 <p>O tema do Material fornece widgets do sistema atualizados que permitem definir a paleta de cores e as animaes 76 padro para feedback de toque e transies de atividades. Para obter mais detalhes, consulte 77 <a href="{@docRoot}training/material/theme.html">Como usar o tema do Material</a>.</p> 78 79 80 <h2 id="Layouts">Projetar layouts</h2> 81 82 <p>Alm de aplicar e personalizar o tema do Material, os layouts devem estar em conformidade 83 com as <a href="http://www.google.com/design/spec">orientaes do Material Design</a>. Ao projetar os 84 layouts, d ateno especial ao seguinte:</p> 85 86 <ul> 87 <li>Grades das linhas de base</li> 88 <li>Linhas-chave</li> 89 <li>Espaamento</li> 90 <li>Tamanho do alvo de toque</li> 91 <li>Estrutura do layout</li> 92 </ul> 93 94 95 <h2 id="Depth">Especificar a elevao em visualizaes</h2> 96 97 <p>As visualizaes podem lanar sombras e o valor da elevao delas 98 determina o tamanho da sombra e a ordem dos desenhos. Para definir a elevao de uma visualizao, use o atributo 99 <code>android:elevation</code> nos layouts:</p> 100 101 <pre> 102 <TextView 103 android:id="@+id/my_textview" 104 android:layout_width="wrap_content" 105 android:layout_height="wrap_content" 106 android:text="@string/next" 107 android:background="@color/white" 108 android:elevation="5dp" /> 109 </pre> 110 111 <p>A nova propriedade <code>translationZ</code> permite a criao de animaes que refletem mudanas 112 temporrias na elevao de uma visualizao. As mudanas de elevao podem ser teis ao 113 <a href="{@docRoot}training/material/animations.html#ViewState">responder a gestos 114 de toque</a>.</p> 115 116 <p>Para obter mais detalhes, consulte <a href="{@docRoot}training/material/shadows-clipping.html">Como definir 117 sombras e recortar visualizaes</a>.</p> 118 119 120 <h2 id="ListsCards">Criar listas e cartes</h2> 121 122 <p>{@link android.support.v7.widget.RecyclerView} uma verso mais completa de {@link 123 android.widget.ListView} compatvel com diferentes tipos de layout e que fornece melhor desempenho. 124 {@link android.support.v7.widget.CardView} permite a exibio de informaes dentro dos cartes com uma 125 aparncia consistente nos aplicativos. O exemplo de cdigo a seguir mostra como incluir um 126 {@link android.support.v7.widget.CardView} no layout:</p> 127 128 <pre> 129 <android.support.v7.widget.CardView 130 android:id="@+id/card_view" 131 android:layout_width="200dp" 132 android:layout_height="200dp" 133 card_view:cardCornerRadius="3dp"> 134 ... 135 </android.support.v7.widget.CardView> 136 </pre> 137 138 <p>Para obter mais informaes, consulte <a href="{@docRoot}training/material/lists-cards.html">Como criar 139 listas e cartes</a>.</p> 140 141 142 <h2 id="Animations">Personalizar animaes</h2> 143 144 <p>O Android 5.0 (API de nvel 21) inclui novas APIs para criar animaes personalizadas no aplicativo. 145 Por exemplo, voc pode habilitar transies de atividades e definir uma transio de sada dentro 146 de uma atividade:</p> 147 148 <pre> 149 public class MyActivity extends Activity { 150 151 @Override 152 protected void onCreate(Bundle savedInstanceState) { 153 super.onCreate(savedInstanceState); 154 // enable transitions 155 getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS); 156 setContentView(R.layout.activity_my); 157 } 158 159 public void onSomeButtonClicked(View view) { 160 getWindow().setExitTransition(new Explode()); 161 Intent intent = new Intent(this, MyOtherActivity.class); 162 startActivity(intent, 163 ActivityOptions 164 .makeSceneTransitionAnimation(this).toBundle()); 165 } 166 } 167 </pre> 168 169 <p>Ao iniciar outra atividade a partir desta, a transio de sada ativada.</p> 170 171 <p>Para saber mais sobre as novas APIs de animao, consulte <a href="{@docRoot}training/material/animations.html">Como definir animaes personalizadas</a>.</p> 172
