training/material/get-started.jd

page.title=Comencemos

@jd:body

<div id="tb-wrapper">
<div id="tb">
<h2>Esta leccin te ensea a realizar lo siguiente:</h2>
<ol>
  <li><a href="#ApplyTheme">Aplicar el tema Material</a></li>
  <li><a href="#Layouts">Realizar tus diseos</a></li>
  <li><a href="#Depth">Especificar la elevacin en tus vistas</a></li>
  <li><a href="#ListsCards">Crear listas y tarjetas</a></li>
  <li><a href="#Animations">Personalizar tus animaciones</a></li>
</ol>
<h2>Tambin deberas leer</h2>
<ul>
  <li><a href="http://www.google.com/design/spec">Especificacin de Material Design</a></li>
  <li><a href="{@docRoot}design/material/index.html">Material Design en Android</a></li>
</ul>
</div>
</div>


<p>Para crear aplicaciones con Material Design:</p>

<ol>
  <li style="margin-bottom:10px">
    Revisar la <a href="http://www.google.com/design/spec">especificacin de Material Design</a>.</li>
  <li style="margin-bottom:10px">
    Aplicar el <strong>tema</strong> material a tu aplicacin.</li>
  <li style="margin-bottom:10px">
    Crear tus <strong>diseos</strong> siguiendo las pautas de Material Design.</li>
  <li style="margin-bottom:10px">
    Especificar la <strong>elevacin</strong> de tus vistas para convertir sombras.</li>
  <li style="margin-bottom:10px">
    Usar <strong>widgets</strong> del sistema para listas y tarjetas.</li>
  <li style="margin-bottom:10px">
    Personalizar las <strong>animaciones</strong> en tu aplicacin.</li>
</ol>

<h3>Mantener la compatibilidad con versiones anteriores</h3>

<p>Puedes agregar muchas caractersticas de Material Design a tu aplicacin mientras mantienes la compatibilidad con las
versiones anteriores a Android 5.0. Para ms informacin, consulta
<a href="{@docRoot}training/material/compatibility.html">Mantener la compatibilidad</a>.</p>

<h3>Actualizacin de tu aplicacin con Material Design</h3>

<p>Para actualizar una aplicacin existente para incorporar Material Design, actualiza tus diseos siguiendo
las pautas de Material Design. Adems, asegrate de incorporar profundidad, respuesta tctil y
animaciones.</p>

<h3>Crear nuevas aplicaciones con Material Design</h3>

<p>Si creas una nueva aplicacin con las caractersticas de Material Design, las <a href="http://www.google.com/design/spec">pautas de Material Design</a> te proporcionan un framework
de diseo cohesivo. Sigue estas pautas y usa la nueva funcionalidad del framework de
Android para disear y desarrollar tu aplicacin.</p>


<h2 id="ApplyTheme">Aplicar el tema Material</h2>

<p>Para aplicar el tema material en tu aplicacin, especifica el estilo que hereda de
<code>android:Theme.Material</code>:</p>

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

<p>El tema material proporciona widgets de sistema actualizados y te permite establecer la paleta de colores y las animaciones
predeterminadas para la respuesta tctil y las transiciones de actividades. Para obtener ms detalles, consulta
<a href="{@docRoot}training/material/theme.html">Usar el tema Material</a>.</p>


<h2 id="Layouts">Realizar tus diseos</h2>

<p>Adems de aplicar y personalizar el tema material, tus diseos deben cumplir con
las <a href="http://www.google.com/design/spec">pautas de Material Design</a>. Cuando realices
tus diseos, presta especial atencin a lo siguiente:</p>

<ul>
<li>Cuadrculas de referencia</li>
<li>Lneas clave</li>
<li>Espaciado</li>
<li>Tamao del objetivo tctil</li>
<li>Estructura del diseo</li>
</ul>


<h2 id="Depth">Especificar la elevacin en tus vistas</h2>

<p>Las vistas pueden proyectar sombras y el valor de elevacin de una vista
determina el tamao de su sombra y el orden en que ser dibujada. Para establecer la elevacin de una vista, usa el atributo
<code>android:elevation</code> en tus diseos:</p>

<pre>
&lt;TextView
    android:id="&#64;+id/my_textview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="&#64;string/next"
    android:background="&#64;color/white"
    android:elevation="5dp" />
</pre>

<p>La nueva propiedad <code>translationZ</code> te permite crear animaciones que reflejen cambios
temporales en la elevacin de una vista. Los cambios de elevacin pueden ser tiles cuando
<a href="{@docRoot}training/material/animations.html#ViewState">responden a gestos
tctiles</a>.</p>

<p>Para obtener ms detalles, consulta <a href="{@docRoot}training/material/shadows-clipping.html">Definir
vistas de recorte y sombras</a>.</p>


<h2 id="ListsCards">Crear listas y tarjetas</h2>

<p>{@link android.support.v7.widget.RecyclerView} es una versin ms acoplable de {@link
android.widget.ListView} que admite diferentes tipos de diseos y proporciona mejoras en el rendimiento.
{@link android.support.v7.widget.CardView} te permite mostrar partes de informacin dentro de las tarjetas con
una apariencia uniforme entre distintas aplicaciones. El siguiente ejemplo de cdigos muestra cmo incluir un
{@link android.support.v7.widget.CardView} en tu diseo:</p>

<pre>
&lt;android.support.v7.widget.CardView
    android:id="&#64;+id/card_view"
    android:layout_width="200dp"
    android:layout_height="200dp"
    card_view:cardCornerRadius="3dp">
    ...
&lt;/android.support.v7.widget.CardView>
</pre>

<p>Para obtener ms informacin, consulta <a href="{@docRoot}training/material/lists-cards.html">Crear listas
y tarjetas</a>.</p>


<h2 id="Animations">Personalizar tus animaciones</h2>

<p>Android 5.0 (API nivel 21) incluye nuevas API para crear animaciones personalizadas en tu aplicacin.
Por ejemplo, puedes habilitar las transiciones de actividades y definir una transicin de salida dentro de una
actividad:</p>

<pre>
public class MyActivity extends Activity {

    &#64;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());
    }
}
</pre>

<p>Cuando comienzas otra actividad desde esta actividad, se activa la transicin de salida.</p>

<p>Para ms informacin sobre las nuevas API de animacin, consulta <a href="{@docRoot}training/material/animations.html">Definir animaciones personalizadas</a>.</p>