training/material/get-started.jd

page.title=Bt u

@jd:body

<div id="tb-wrapper">
<div id="tb">
<h2>Bi hc ny hng dn bn cch</h2>
<ol>
  <li><a href="#ApplyTheme">p dng Ch  Material</a></li>
  <li><a href="#Layouts">Thit k B tr ca Bn</a></li>
  <li><a href="#Depth">Quy nh  cao trong Dng xem ca Bn</a></li>
  <li><a href="#ListsCards">To Danh sch v Th</a></li>
  <li><a href="#Animations">Ty chnh Hot hnh ca Bn</a></li>
</ol>
<h2>Bn cng nn c</h2>
<ul>
  <li><a href="http://www.google.com/design/spec">c t phong cch Material Design</a></li>
  <li><a href="{@docRoot}design/material/index.html">Material Design trn Android</a></li>
</ul>
</div>
</div>


<p> to ng dng vi material design:</p>

<ol>
  <li style="margin-bottom:10px">
    Xem phn <a href="http://www.google.com/design/spec">c t phong cch material design</a>.</li>
  <li style="margin-bottom:10px">
    p dng ch  <strong>material</strong> cho ng dng ca bn.</li>
  <li style="margin-bottom:10px">
    To <strong>b tr</strong> ca bn theo hng dn v material design.</li>
  <li style="margin-bottom:10px">
    Quy nh <strong> cao</strong> cho dng xem ca bn   bng.</li>
  <li style="margin-bottom:10px">
    S dng <strong>widget</strong> h thng cho danh sch v th.</li>
  <li style="margin-bottom:10px">
    Ty chnh <strong>hot hnh</strong> trong ng dng ca bn.</li>
</ol>

<h3>Duy tr tnh tng thch ngc</h3>

<p>Bn c th thm nhiu tnh nng material design vo ng dng ca mnh trong khi vn duy tr tnh tng thch vi
cc phin bn Android trc 5.0.  bit thm thng tin, hy xem phn
<a href="{@docRoot}training/material/compatibility.html">Duy tr Tnh tng thch</a>.</p>

<h3>Cp nht ng dng ca bn vi material design</h3>

<p> cp nht mt ng dng hin ti bng material design, hy cp nht cc b tr ca bn theo
hng dn v material design. Cng nh kt hp chiu su, phn hi chm v
hot hnh.</p>

<h3>To ng dng mi vi material design</h3>

<p>Nu bn to mt ng dng mi vi cc tnh nng ca material design, <a href="http://www.google.com/design/spec">hng dn v material design</a> cung cp cho bn mt
khun kh thit k sc tch. Lm theo hng dn  v s dng chc nng mi trong khun kh Android
 thit k v pht trin ng dng ca bn.</p>


<h2 id="ApplyTheme">p dng Ch  Material</h2>

<p> p dng ch  material trong ng dng ca mnh, hy quy nh mt kiu k tha t
<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>Ch  material cung cp cc widget h thng c cp nht  bn c th t bng mu v
hot hnh mc nh cho phn hi chm v chuyn tip hot ng.  bit thm chi tit, hy xem phn
<a href="{@docRoot}training/material/theme.html">S dng Ch  Material</a>.</p>


<h2 id="Layouts">Thit k B tr ca Bn</h2>

<p>Bn cnh vic p dng v ty chnh ch  material, b tr ca bn cn tun th
<a href="http://www.google.com/design/spec">hng dn v material design</a>. Khi thit k
b tr ca bn, hy c bit ch  ti iu sau y:</p>

<ul>
<li>Li ng c s</li>
<li>Dng chnh</li>
<li>Gin cch</li>
<li>Kch c mc tiu chm</li>
<li>Cu trc b tr</li>
</ul>


<h2 id="Depth">Quy nh  cao trong Dng xem ca Bn</h2>

<p>Dng xem c th  bng v gi tr  cao ca mt dng xem
xc nh kch c bng v th t v ca n.  t  cao ca mt dng xem, hy s dng thuc tnh
<code>android:elevation</code> trong b tr ca bn:</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>Thuc tnh <code>translationZ</code> mi cho php bn to nhng hot hnh phn nh cc thay i
tm thi v  cao ca mt dng xem. Thay i v  cao c th hu ch khi
<a href="{@docRoot}training/material/animations.html#ViewState">phn hi li cc c ch
chm</a>.</p>

<p> bit thm chi tit, hy xem phn <a href="{@docRoot}training/material/shadows-clipping.html">nh ngha
 bng v Dng xem Ct hnh</a>.</p>


<h2 id="ListsCards">To Danh sch v Th</h2>

<p>{@link android.support.v7.widget.RecyclerView} l mt phin bn d ghp ni hn ca {@link
android.widget.ListView} c h tr cc kiu b tr khc nhau v cung cp nhng ci tin v hiu nng.
{@link android.support.v7.widget.CardView} cho php bn hin cc mu thng tin bn trong th vi
mt din mo nht qun gia cc ng dng. V d v m sau y minh ha cch thm
{@link android.support.v7.widget.CardView} vo b tr ca bn:</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> bit thm thng tin, hy xem phn <a href="{@docRoot}training/material/lists-cards.html">To Danh sch
v Th</a>.</p>


<h2 id="Animations">Ty chnh Hot hnh ca Bn</h2>

<p>Android 5.0 (API mc 21) bao gm cc API mi  to hot hnh ty chnh trong ng dng ca bn.
V d, bn c th cho php chuyn tip hot ng v nh ngha mt chuyn tip ra bn trong mt
hot ng:</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>Khi bn bt u mt hot ng khc t hot ng ny, chuyn tip ra c kch hot.</p>

<p> tm hiu thm v cc API hot hnh mi, hy xem <a href="{@docRoot}training/material/animations.html">nh ngha Hot hnh Ty chnh</a>.</p>