1page.title=Comencemos
2
3@jd:body
4
5<div id="tb-wrapper">
6<div id="tb">
7<h2>Esta lección te enseña a realizar lo siguiente:</h2>
8<ol>
9  <li><a href="#ApplyTheme">Aplicar el tema Material</a></li>
10  <li><a href="#Layouts">Realizar tus diseños</a></li>
11  <li><a href="#Depth">Especificar la elevación en tus vistas</a></li>
12  <li><a href="#ListsCards">Crear listas y tarjetas</a></li>
13  <li><a href="#Animations">Personalizar tus animaciones</a></li>
14</ol>
15<h2>También deberías leer</h2>
16<ul>
17  <li><a href="http://www.google.com/design/spec">Especificación de Material Design</a></li>
18  <li><a href="{@docRoot}design/material/index.html">Material Design en Android</a></li>
19</ul>
20</div>
21</div>
22
23
24<p>Para crear aplicaciones con Material Design:</p>
25
26<ol>
27  <li style="margin-bottom:10px">
28    Revisar la <a href="http://www.google.com/design/spec">especificación de Material Design</a>.</li>
29  <li style="margin-bottom:10px">
30    Aplicar el <strong>tema</strong> material a tu aplicación.</li>
31  <li style="margin-bottom:10px">
32    Crear tus <strong>diseños</strong> siguiendo las pautas de Material Design.</li>
33  <li style="margin-bottom:10px">
34    Especificar la <strong>elevación</strong> de tus vistas para convertir sombras.</li>
35  <li style="margin-bottom:10px">
36    Usar <strong>widgets</strong> del sistema para listas y tarjetas.</li>
37  <li style="margin-bottom:10px">
38    Personalizar las <strong>animaciones</strong> en tu aplicación.</li>
39</ol>
40
41<h3>Mantener la compatibilidad con versiones anteriores</h3>
42
43<p>Puedes agregar muchas características de Material Design a tu aplicación mientras mantienes la compatibilidad con las
44versiones anteriores a Android 5.0. Para más información, consulta
45<a href="{@docRoot}training/material/compatibility.html">Mantener la compatibilidad</a>.</p>
46
47<h3>Actualización de tu aplicación con Material Design</h3>
48
49<p>Para actualizar una aplicación existente para incorporar Material Design, actualiza tus diseños siguiendo
50las pautas de Material Design. Además, asegúrate de incorporar profundidad, respuesta táctil y
51animaciones.</p>
52
53<h3>Crear nuevas aplicaciones con Material Design</h3>
54
55<p>Si creas una nueva aplicación con las características de Material Design, las <a href="http://www.google.com/design/spec">pautas de Material Design</a> te proporcionan un framework
56de diseño cohesivo. Sigue estas pautas y usa la nueva funcionalidad del framework de
57Android para diseñar y desarrollar tu aplicación.</p>
58
59
60<h2 id="ApplyTheme">Aplicar el tema Material</h2>
61
62<p>Para aplicar el tema material en tu aplicación, especifica el estilo que hereda de
63<code>android:Theme.Material</code>:</p>
64
65<pre>
66&lt;!-- res/values/styles.xml -->
67&lt;resources>
68  &lt;!-- your theme inherits from the material theme -->
69  &lt;style name="AppTheme" parent="android:Theme.Material">
70    &lt;!-- theme customizations -->
71  &lt;/style>
72&lt;/resources>
73</pre>
74
75<p>El tema material proporciona widgets de sistema actualizados y te permite establecer la paleta de colores y las animaciones
76predeterminadas para la respuesta táctil y las transiciones de actividades. Para obtener más detalles, consulta
77<a href="{@docRoot}training/material/theme.html">Usar el tema Material</a>.</p>
78
79
80<h2 id="Layouts">Realizar tus diseños</h2>
81
82<p>Además de aplicar y personalizar el tema material, tus diseños deben cumplir con
83las <a href="http://www.google.com/design/spec">pautas de Material Design</a>. Cuando realices
84tus diseños, presta especial atención a lo siguiente:</p>
85
86<ul>
87<li>Cuadrículas de referencia</li>
88<li>Líneas clave</li>
89<li>Espaciado</li>
90<li>Tamaño del objetivo táctil</li>
91<li>Estructura del diseño</li>
92</ul>
93
94
95<h2 id="Depth">Especificar la elevación en tus vistas</h2>
96
97<p>Las vistas pueden proyectar sombras y el valor de elevación de una vista
98determina el tamaño de su sombra y el orden en que será dibujada. Para establecer la elevación de una vista, usa el atributo
99<code>android:elevation</code> en tus diseños:</p>
100
101<pre>
102&lt;TextView
103    android:id="&#64;+id/my_textview"
104    android:layout_width="wrap_content"
105    android:layout_height="wrap_content"
106    android:text="&#64;string/next"
107    android:background="&#64;color/white"
108    android:elevation="5dp" />
109</pre>
110
111<p>La nueva propiedad <code>translationZ</code> te permite crear animaciones que reflejen cambios
112temporales en la elevación de una vista. Los cambios de elevación pueden ser útiles cuando
113<a href="{@docRoot}training/material/animations.html#ViewState">responden a gestos
114táctiles</a>.</p>
115
116<p>Para obtener más detalles, consulta <a href="{@docRoot}training/material/shadows-clipping.html">Definir
117vistas de recorte y sombras</a>.</p>
118
119
120<h2 id="ListsCards">Crear listas y tarjetas</h2>
121
122<p>{@link android.support.v7.widget.RecyclerView} es una versión más acoplable de {@link
123android.widget.ListView} que admite diferentes tipos de diseños y proporciona mejoras en el rendimiento.
124{@link android.support.v7.widget.CardView} te permite mostrar partes de información dentro de las tarjetas con
125una apariencia uniforme entre distintas aplicaciones. El siguiente ejemplo de códigos muestra cómo incluir un
126{@link android.support.v7.widget.CardView} en tu diseño:</p>
127
128<pre>
129&lt;android.support.v7.widget.CardView
130    android:id="&#64;+id/card_view"
131    android:layout_width="200dp"
132    android:layout_height="200dp"
133    card_view:cardCornerRadius="3dp">
134    ...
135&lt;/android.support.v7.widget.CardView>
136</pre>
137
138<p>Para obtener más información, consulta <a href="{@docRoot}training/material/lists-cards.html">Crear listas
139y tarjetas</a>.</p>
140
141
142<h2 id="Animations">Personalizar tus animaciones</h2>
143
144<p>Android 5.0 (API nivel 21) incluye nuevas API para crear animaciones personalizadas en tu aplicación.
145Por ejemplo, puedes habilitar las transiciones de actividades y definir una transición de salida dentro de una
146actividad:</p>
147
148<pre>
149public class MyActivity extends Activity {
150
151    &#64;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>Cuando comienzas otra actividad desde esta actividad, se activa la transición de salida.</p>
170
171<p>Para más información sobre las nuevas API de animación, consulta <a href="{@docRoot}training/material/animations.html">Definir animaciones personalizadas</a>.</p>
172