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