Home | History | Annotate | Download | only in multiscreen 
      1 page.title=
      2 parent.title=
      3 parent.link=index.html
      4 
      5 trainingnavtop=true
      6 next.title=
      7 next.link=screendensities.html
      8 
      9 @jd:body
     10 
     11 
     12 <!-- This is the training bar -->
     13 <div id="tb-wrapper"> 
     14 <div id="tb"> 
     15 
     16 <h2></h2>
     17 <ol>
     18   <li><a href="#TaskUseWrapMatchPar">wrap_contentmatch_parent</a></li>
     19   <li><a href="#TaskUseRelativeLayout"></a></li>
     20   <li><a href="#TaskUseSizeQuali"></a></li>
     21   <li><a href="#TaskUseSWQuali"></a></li>
     22   <li><a href="#TaskUseAliasFilters"></a></li>
     23   <li><a href="#TaskUseOriQuali"></a></li>
     24   <li><a href="#TaskUse9Patch"></a></li>
     25 </ol>
     26 
     27 <h2></h2>
     28 
     29 <ul>
     30   <li><a href="{@docRoot}guide/practices/screens_support.html"></a></li>
     31 </ul>
     32 
     33 <h2></h2> 
     34  
     35 <div class="download-box"> 
     36 <a href="http://developer.android.com/shareables/training/NewsReader.zip" class="button"></a>
     37 <p class="filename">NewsReader.zip</p> 
     38 </div> 
     39  
     40 </div> 
     41 </div> 
     42 
     43 <p></p>
     44 <ul> 
     45   <li></li> 
     46   <li></li> 
     47   <li></li>
     48   <li></li> 
     49 </ul> 
     50 
     51 
     52 <h2 id="TaskUseWrapMatchPar">wrap_contentmatch_parent</h2> 
     53 
     54 <p> <code>"wrap_content"</code>  <code>"match_parent"</code>  <code>"wrap_content"</code> <code>"match_parent"</code> API  8  <code>"fill_parent"</code></p>
     55 
     56 <p> <code>"wrap_content"</code>  <code>"match_parent"</code> </p>
     57 
     58 {@sample development/samples/training/multiscreen/newsreader/res/layout/onepane_with_bar.xml all}
     59 
     60 <p> <code>"wrap_content"</code>  <code>"match_parent"</code> </p>
     61 
     62 <p></p>
     63 
     64 <img src="{@docRoot}images/training/layout-hvga.png" />
     65 <p class="img-caption"><strong> 1</strong></p>
     66 
     67 
     68 <h2 id="TaskUseRelativeLayout"></h2> 
     69 
     70 <p>  <PH>{@link android.widget.LinearLayout}</PH>   <code>"wrap_content"</code>  <code>"match_parent"</code>   <PH>{@link android.widget.LinearLayout}</PH>    <PH>{@link android.widget.LinearLayout}</PH>    <PH>{@link android.widget.RelativeLayout}</PH></p>
     71 
     72 <p></p>
     73 
     74 <pre>
     75 &lt;?xml version="1.0" encoding="utf-8"?&gt;
     76 &lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     77     android:layout_width="match_parent"
     78     android:layout_height="match_parent"&gt;
     79     &lt;TextView
     80         android:id="&#64;+id/label"
     81         android:layout_width="match_parent"
     82         android:layout_height="wrap_content"
     83         android:text="Type here:"/&gt;
     84     &lt;EditText
     85         android:id="&#64;+id/entry"
     86         android:layout_width="match_parent"
     87         android:layout_height="wrap_content"
     88         android:layout_below="&#64;id/label"/&gt;
     89     &lt;Button
     90         android:id="&#64;+id/ok"
     91         android:layout_width="wrap_content"
     92         android:layout_height="wrap_content"
     93         android:layout_below="&#64;id/entry"
     94         android:layout_alignParentRight="true"
     95         android:layout_marginLeft="10dp"
     96         android:text="OK" /&gt;
     97     &lt;Button
     98         android:layout_width="wrap_content"
     99         android:layout_height="wrap_content"
    100         android:layout_toLeftOf="&#64;id/ok"
    101         android:layout_alignTop="&#64;id/ok"
    102         android:text="Cancel" /&gt;
    103 &lt;/RelativeLayout&gt;
    104 </pre>
    105 
    106 <p> 2  QVGA </p>
    107 
    108 <img src="{@docRoot}images/training/relativelayout1.png" />
    109 <p class="img-caption"><strong> 2</strong>QVGA </p>
    110 
    111 <p> 3 </p>
    112 
    113 <img src="{@docRoot}images/training/relativelayout2.png" />
    114 <p class="img-caption"><strong> 3</strong>WSVGA </p>
    115 
    116 <p>  <PH>{@link android.widget.RelativeLayout.LayoutParams}</PH> </p>
    117 
    118  
    119 <h2 id="TaskUseSizeQuali"></h2> 
    120 
    121 <p><a href="http://developer.android.com/guide/practices/screens_support.html#qualifiers"></a></p>
    122 
    123 <p></p>
    124 
    125 <ul>
    126   <li><code>res/layout/main.xml</code>
    127 
    128 {@sample development/samples/training/multiscreen/newsreader/res/layout/onepane.xml all}
    129 </li>
    130   <li><code>res/layout-large/main.xml</code>
    131 
    132 {@sample development/samples/training/multiscreen/newsreader/res/layout/twopanes.xml all}
    133 </li>
    134 </ul>
    135 
    136 <p> <code>large</code>  7 </p>
    137 
    138 
    139 <h2 id="TaskUseSWQuali"></h2>
    140 
    141 <p> 3.2  Android  Streak Galaxy Tab  7  5  7  Android 3.2 </p>
    142 
    143 <p> dp  7  600 dp <code>sw600dp</code>  600 dp  <code>large</code> </p>
    144 
    145 <ul>
    146   <li><code>res/layout/main.xml</code>
    147 
    148 {@sample development/samples/training/multiscreen/newsreader/res/layout/onepane.xml all}
    149 </li>
    150   <li><code>res/layout-sw600dp/main.xml</code>
    151 
    152 {@sample development/samples/training/multiscreen/newsreader/res/layout/twopanes.xml all}
    153 </li>
    154 </ul>
    155 
    156 <p> 600 dp  <code>layout-sw600dp/main.xml</code> <code>layout/main.xml</code></p>
    157 
    158 <p> Android  3.2  <code>sw600dp</code>  <code>large</code>  <code>res/layout-large/main.xml</code>  <code>res/layout-sw600dp/main.xml</code> </p>
    159 
    160 
    161 <h2 id="TaskUseAliasFilters"></h2> 
    162 
    163 <p> Android 3.2  7 </p>
    164 
    165 <p><ul>
    166 <li><code>res/layout/main.xml:</code> </li>
    167 <li><code>res/layout-large:</code> </li>
    168 <li><code>res/layout-sw600dp:</code> </li>
    169 </ul></p>
    170 
    171 <p> Android 3.2  Android </p>
    172 
    173 <p></p>
    174 
    175 <ul>
    176 <li><code>res/layout/main.xml</code></li>
    177 <li><code>res/layout/main_twopanes.xml</code></li>
    178 </ul>
    179 
    180 <p></p>
    181 
    182 <p><ul>
    183 <li><code>res/values-large/layout.xml</code>:
    184 <pre>
    185 &lt;resources>
    186     &lt;item name="main" type="layout">&#64;layout/main_twopanes&lt;/item>
    187 &lt;/resources>
    188 </pre>
    189 </li>
    190 
    191 <li><code>res/values-sw600dp/layout.xml</code>:
    192 <pre>
    193 &lt;resources>
    194     &lt;item name="main" type="layout">&#64;layout/main_twopanes&lt;/item>
    195 &lt;/resources>
    196 </pre>
    197 
    198 </li>
    199 </ul></p>
    200 
    201 <p>  <PH>{@code main}</PH>   <PH>{@code main_twopanes}</PH>  <code>large</code>  <code>sw600dp</code>  Android  3.2  
    202 <PH>{@code large}</PH> 3.2  <code>sw600dp</code></p>
    203 
    204 
    205 <h2 id="TaskUseOriQuali"></h2> 
    206 
    207 <p></p>
    208 
    209 <p><ul>
    210 <li><b></b></li>
    211 <li><b></b></li>
    212 <li><b>7 </b></li>
    213 <li><b>7 </b></li>
    214 <li><b>10 </b></li>
    215 <li><b>10 </b></li>
    216 <li><b></b></li>
    217 </ul></p>
    218 
    219 <p> <code>res/layout/</code>  XML </p>
    220 
    221 <p><code>res/layout/onepane.xml:</code></p>
    222 {@sample development/samples/training/multiscreen/newsreader/res/layout/onepane.xml all}
    223 
    224 <p><code>res/layout/onepane_with_bar.xml:</code></p>
    225 {@sample development/samples/training/multiscreen/newsreader/res/layout/onepane_with_bar.xml all}
    226 
    227 <p><code>res/layout/twopanes.xml</code>:</p>
    228 {@sample development/samples/training/multiscreen/newsreader/res/layout/twopanes.xml all}
    229 
    230 <p><code>res/layout/twopanes_narrow.xml</code>:</p>
    231 {@sample development/samples/training/multiscreen/newsreader/res/layout/twopanes_narrow.xml all}
    232 
    233 <p></p>
    234 
    235 <p><code>res/values/layouts.xml</code>:</p>
    236 {@sample development/samples/training/multiscreen/newsreader/res/values/layouts.xml all}
    237 
    238 <p><code>res/values-sw600dp-land/layouts.xml</code>:</p>
    239 {@sample development/samples/training/multiscreen/newsreader/res/values-sw600dp-land/layouts.xml
    240 all}
    241 
    242 <p><code>res/values-sw600dp-port/layouts.xml</code>:</p>
    243 {@sample development/samples/training/multiscreen/newsreader/res/values-sw600dp-port/layouts.xml
    244 all}
    245 
    246 <p><code>res/values-large-land/layouts.xml</code>:</p>
    247 {@sample development/samples/training/multiscreen/newsreader/res/values-large-land/layouts.xml all}
    248 
    249 <p><code>res/values-large-port/layouts.xml</code>:</p>
    250 {@sample development/samples/training/multiscreen/newsreader/res/values-large-port/layouts.xml all}
    251 
    252 
    253 
    254 <h2 id="TaskUse9Patch"></h2>
    255 
    256 <p></p>
    257 
    258 <p> PNG </p>
    259 
    260 <p> 4 4 </p>
    261 
    262 <img src="{@docRoot}images/training/button.png" />
    263 <p class="img-caption"><strong> 4</strong><code>button.png</code></p>
    264 
    265 <p> SDK   <ode
    266 href="{@docRoot}tools/help/draw9patch.html"><code>draw9patch</code></a>  <code>tools/</code>  5 </p>
    267 
    268 <img src="{@docRoot}images/training/button_with_marks.png" />
    269 <p class="img-caption"><strong> 5</strong><code>button.9.png</code></p>
    270 
    271 <p></p>
    272 
    273 <p> <code>.9.png</code>  PNG </p>
    274 
    275 <p> <code>android:background="&#64;drawable/button"</code> 6 </p>
    276 
    277 <img src="{@docRoot}images/training/buttons_stretched.png" />
    278 <p class="img-caption"><strong> 6</strong> <code>button.9.png</code> </p>
    279 
    280