1page.title=Hello, Views 2@jd:body 3 4<style> 5.view {float:left; margin:10px; font-size:120%; font-weight:bold;} 6.view img {border:1px solid black; margin:5px 0 0; padding:5px;} 7</style> 8 9<p>This collection of "Hello World"-style tutorials is designed 10to get you quickly started with common Android Views and widgets. The aim is to let you copy and paste 11these kinds of boring bits so you can focus on developing the code that makes your Android application rock. 12Of course, we'll discuss some of the given code so that it all makes sense.</p> 13 14<p>Note that a certain amount of knowledge is assumed for these tutorials. If you haven't 15completed the <a href="{@docRoot}guide/tutorials/hello-world.html">Hello, World</a> tutorial, 16please do so—it will teach you many things you should know about basic 17Android development and Eclipse features. More specifically, you should know:</p> 18<ul> 19 <li>How to create a new Android project.</li> 20 <li>The basic structure of an Android project (resource files, layout files, etc.).</li> 21 <li>The essential components of an {@link android.app.Activity}.</li> 22 <li>How to build and run a project.</li> 23</ul> 24<p>Please, also notice that, in order to make these tutorials simple, some may 25not convey the better Android coding practices. In particular, many of them 26use hard-coded strings in the layout files—the better practice is to reference strings from 27your strings.xml file.</p> 28<p>With this knowledge, you're ready to begin, so take your pick.</p> 29 30<div> 31 32<div class="view"> 33<a href="hello-linearlayout.html">LinearLayout</a><br/> 34<a href="hello-linearlayout.html"><img src="images/hello-linearlayout.png" height="285" width="200" /></a> 35</div> 36<div class="view"> 37<a href="hello-relativelayout.html">RelativeLayout</a><br/> 38<a href="hello-relativelayout.html"><img src="images/hello-relativelayout.png" height="285" width="200" /></a> 39</div> 40<div class="view"> 41<a href="hello-tablelayout.html">TableLayout</a><br/> 42<a href="hello-tablelayout.html"><img src="images/hello-tablelayout.png" height="285" width="200" /></a> 43</div> 44 45<div class="view"> 46<a href="hello-datepicker.html">DatePicker</a><br/> 47<a href="hello-datepicker.html"><img src="images/hello-datepicker.png" height="285" width="200" /></a> 48</div> 49 50<div class="view"> 51<a href="hello-timepicker.html">TimePicker</a><br/> 52<a href="hello-timepicker.html"><img src="images/hello-timepicker.png" height="285" width="200" /></a> 53</div> 54<div class="view"> 55<a href="hello-formstuff.html">Form Stuff</a><br/> 56<a href="hello-formstuff.html"><img src="images/hello-formstuff.png" height="285" width="200" /></a> 57</div> 58<div class="view"> 59<a href="hello-spinner.html">Spinner</a><br/> 60<a href="hello-spinner.html"><img src="images/hello-spinner.png" height="285" width="200" /></a> 61</div> 62 63<div class="view"> 64<a href="hello-autocomplete.html">AutoComplete</a><br/> 65<a href="hello-autocomplete.html"><img src="images/hello-autocomplete.png" height="285" width="200" /></a> 66</div> 67<div class="view"> 68<a href="hello-listview.html">ListView</a><br/> 69<a href="hello-listview.html"><img src="images/hello-listview.png" height="285" width="200" /></a> 70</div> 71<div class="view"> 72<a href="hello-gridview.html">GridView</a><br/> 73<a href="hello-gridview.html"><img src="images/hello-gridview.png" height="285" width="200" /></a> 74</div> 75 76<div class="view"> 77<a href="hello-gallery.html">Gallery</a><br/> 78<a href="hello-gallery.html"><img src="images/hello-gallery.png" height="285" width="200" /></a> 79</div> 80 81<div class="view"> 82<a href="hello-tabwidget.html">TabWidget</a><br/> 83<a href="hello-tabwidget.html"><img src="images/hello-tabwidget.png" height="285" width="200" /></a> 84</div> 85 86<div class="view"> 87<a href="hello-mapview.html">MapView</a><br/> 88<a href="hello-mapview.html"><img src="images/hello-mapview.png" height="285" width="200" /></a> 89</div> 90 91<div class="view"> 92<a href="hello-webview.html">WebView</a><br/> 93<a href="hello-webview.html"><img src="images/hello-webview.png" height="285" width="200" /></a> 94</div> 95 96<!-- 97TODO 98 99<div class="view"> 100<a href="hello-popupwindow.html">PopupWindow<br/> 101<img src="images/hello-popupwindow.png" height="285" width="200" /></a> 102</div> 103<div class="view"> 104<a href="hello-tabhost.html">TabHost / TabWidget<br/> 105<img src="images/hello-tabhost.png" height="285" width="200" /></a> 106</div> 107ProgressBar; RatingBar; FrameLayout 108 109--> 110 111<p class="note" style="clear:left"> 112There are plenty more Views and widgets available. See the {@link android.view.View} class 113for more on View layouts, and the {@link android.widget widget package} 114for more useful widgets. And for more raw code samples, visit the 115<a href="{@docRoot}guide/samples/ApiDemos/src/com/example/android/apis/view/index.html">Api Demos</a>. 116These can also be found offline, in <code>/<sdk>/samples/ApiDemos</code>.</p> 117</div> 118 119
