1 page.title=Hello, Views 2 parent.title=Tutorials 3 parent.link=../../browser.html?tag=tutorial 4 @jd:body 5 6 <style> 7 .view {float:left; margin:10px; font-size:120%; font-weight:bold;} 8 #jd-content .view img {border:1px solid black; margin:8px 0 0 0; padding:5px;} 9 </style> 10 11 <p>This is a collection of "Hello World"-style tutorials designed 12 to get you started quickly with common Android layouts and widgets.</p> 13 14 <p>A certain amount of knowledge is assumed for these tutorials. Before you start, 15 you should have completed the <a href="{@docRoot}resources/tutorials/hello-world.html">Hello, 16 World</a> tutorial—it will teach you several things about basic 17 Android development. More specifically, you should know:</p> 18 <ul> 19 <li>How to create an Android project and run it</li> 20 <li>The basic structure of an Android project (resource files, layout files, etc.)</li> 21 <li>The basic components of an {@link android.app.Activity}</li> 22 </ul> 23 24 <p class="note"><strong>Note:</strong> In order to make these tutorials as simple as possible, 25 some code may not conform to best practices for coding Android applications. In particular, 26 hard-coded strings are used in places, when the better practice is to reference strings from a 27 <code>res/values/strings.xml</code> resource file.</p> 28 29 <p class="note"><strong>Tip:</strong> After you have pasted sample code into an Eclipse project, 30 press <strong>Ctrl (or Cmd) + Shift + O</strong> to import the required packages.</p> 31 32 <h2>Layouts</h2> 33 34 <div class="view"> 35 <a href="hello-linearlayout.html">Linear Layout</a><br/> 36 <a href="hello-linearlayout.html"><img src="images/hello-linearlayout.png" height="285" width="200" 37 /></a> 38 </div> 39 40 <div class="view"> 41 <a href="hello-relativelayout.html">Relative Layout</a><br/> 42 <a href="hello-relativelayout.html"><img src="images/hello-relativelayout.png" height="285" 43 width="200" /></a> 44 </div> 45 46 <div class="view"> 47 <a href="hello-tablelayout.html">Table Layout</a><br/> 48 <a href="hello-tablelayout.html"><img src="images/hello-tablelayout.png" height="285" width="200" 49 /></a> 50 </div> 51 52 <div class="view"> 53 <a href="hello-gridview.html">Grid View</a><br/> 54 <a href="hello-gridview.html"><img src="images/hello-gridview.png" height="285" width="200" /></a> 55 </div> 56 57 <div class="view"> 58 <a href="hello-tabwidget.html">Tab Layout</a><br/> 59 <a href="hello-tabwidget.html"><img src="images/hello-tabwidget.png" height="285" width="200" /></a> 60 </div> 61 62 <div class="view"> 63 <a href="hello-listview.html">List View</a><br/> 64 <a href="hello-listview.html"><img src="images/hello-listview.png" height="285" width="200" /></a> 65 </div> 66 67 <p style="clear:left"> </p> 68 69 <h2>Widgets & Other Views</h2> 70 71 <div class="view"> 72 <a href="hello-datepicker.html">Date Picker</a><br/> 73 <a href="hello-datepicker.html"><img src="images/hello-datepicker.png" height="285" width="200" 74 /></a> 75 </div> 76 77 <div class="view"> 78 <a href="hello-timepicker.html">Time Picker</a><br/> 79 <a href="hello-timepicker.html"><img src="images/hello-timepicker.png" height="285" width="200" 80 /></a> 81 </div> 82 83 <div class="view"> 84 <a href="hello-formstuff.html">Form Stuff</a><br/> 85 <a href="hello-formstuff.html"><img src="images/hello-formstuff.png" height="285" width="200" /></a> 86 </div> 87 88 <div class="view"> 89 <a href="hello-spinner.html">Spinner</a><br/> 90 <a href="hello-spinner.html"><img src="images/hello-spinner.png" height="285" width="200" /></a> 91 </div> 92 93 <div class="view"> 94 <a href="hello-autocomplete.html">Auto Complete</a><br/> 95 <a href="hello-autocomplete.html"><img src="images/hello-autocomplete.png" height="285" width="200" 96 /></a> 97 </div> 98 99 <div class="view"> 100 <a href="hello-gallery.html">Gallery</a><br/> 101 <a href="hello-gallery.html"><img src="images/hello-gallery.png" height="285" width="200" /></a> 102 </div> 103 104 <div class="view"> 105 <a href="hello-mapview.html">Google Map View</a><br/> 106 <a href="hello-mapview.html"><img src="images/hello-mapview.png" height="285" width="200" /></a> 107 </div> 108 109 <div class="view"> 110 <a href="hello-webview.html">Web View</a><br/> 111 <a href="hello-webview.html"><img src="images/hello-webview.png" height="285" width="200" /></a> 112 </div> 113 114 115 <p class="note" style="clear:left"> 116 There are plenty more layouts and widgets available. See the {@link android.view.View} class 117 for more on View layouts, and the {@link android.widget widget package} 118 for more useful widgets. And for more raw code samples, visit the 119 <a href="{@docRoot}resources/samples/ApiDemos/src/com/example/android/apis/view/index.html">Api 120 Demos</a>.</p> 121 122
