page.title=Hello, Views
@jd:body

<style>
.view {float:left; margin:10px; font-size:120%; font-weight:bold;}
.view img {border:1px solid black; margin:5px 0 0; padding:5px;}
</style>

<p>This collection of "Hello World"-style tutorials is designed
to get you quickly started with common Android Views and widgets. The aim is to let you copy and paste
these kinds of boring bits so you can focus on developing the code that makes your Android application rock.
Of course, we'll discuss some of the given code so that it all makes sense.</p>

<p>Note that a certain amount of knowledge is assumed for these tutorials. If you haven't
completed the <a href="{@docRoot}guide/tutorials/hello-world.html">Hello, World</a> tutorial, 
please do so&mdash;it will teach you many things you should know about basic 
Android development and Eclipse features. More specifically, you should know:</p>
<ul>
  <li>How to create a new Android project.</li>
  <li>The basic structure of an Android project (resource files, layout files, etc.).</li>
  <li>The essential components of an {@link android.app.Activity}.</li>
  <li>How to build and run a project.</li>
</ul>
<p>Please, also notice that, in order to make these tutorials simple, some may
not convey the better Android coding practices. In particular, many of them
use hard-coded strings in the layout files&mdash;the better practice is to reference strings from
your strings.xml file.</p>
<p>With this knowledge, you're ready to begin, so take your pick.</p>

<div>

<div class="view">
<a href="hello-linearlayout.html">LinearLayout<br/>
<img src="images/hello-linearlayout.png" height="285" width="200" /></a>
</div>
<div class="view">
<a href="hello-relativelayout.html">RelativeLayout<br/>
<img src="images/hello-relativelayout.png" height="285" width="200" /></a>
</div>
<div class="view">
<a href="hello-tablelayout.html">TableLayout<br/>
<img src="images/hello-tablelayout.png" height="285" width="200" /></a>
</div>

<div class="view">
<a href="hello-datepicker.html">DatePicker<br/>
<img src="images/hello-datepicker.png" height="285" width="200" /></a>
</div>

<div class="view">
<a href="hello-timepicker.html">TimePicker<br/>
<img src="images/hello-timepicker.png" height="285" width="200" /></a>
</div>
<div class="view">
<a href="hello-formstuff.html">Form Stuff<br/>
<img src="images/hello-formstuff.png" height="285" width="200" /></a>
</div>
<div class="view">
<a href="hello-spinner.html">Spinner<br/>
<img src="images/hello-spinner.png" height="285" width="200" /></a>
</div>

<div class="view">
<a href="hello-autocomplete.html">AutoComplete<br/>
<img src="images/hello-autocomplete.png" height="285" width="200" /></a>
</div>
<div class="view">
<a href="hello-listview.html">ListView<br/>
<img src="images/hello-listview.png" height="285" width="200" /></a>
</div>
<div class="view">
<a href="hello-gridview.html">GridView<br/>
<img src="images/hello-gridview.png" height="285" width="200" /></a>
</div>

<div class="view">
<a href="hello-gallery.html">Gallery<br/>
<img src="images/hello-gallery.png" height="285" width="200" /></a>
</div>

<div class="view">
<a href="hello-tabwidget.html">TabWidget<br/>
<img src="images/hello-tabwidget.png" height="285" width="200" /></a>
</div>

<div class="view">
<a href="hello-mapview.html">MapView<br/>
<img src="images/hello-mapview.png" height="285" width="200" /></a>
</div>

<div class="view">
<a href="hello-webview.html">WebView<br/>
<img src="images/hello-webview.png" height="285" width="200" /></a>
</div>

<!--
TODO

<div class="view">
<a href="hello-popupwindow.html">PopupWindow<br/>
<img src="images/hello-popupwindow.png" height="285" width="200" /></a>
</div>
<div class="view">
<a href="hello-tabhost.html">TabHost / TabWidget<br/>
<img src="images/hello-tabhost.png" height="285" width="200" /></a>
</div>
ProgressBar; RatingBar; FrameLayout

-->

<p class="note" style="clear:left">
There are plenty more Views and widgets available. See the {@link android.view.View} class
for more on View layouts, and the {@link android.widget widget package}
for more useful widgets. And for more raw code samples, visit the 
<a href="{@docRoot}guide/samples/ApiDemos/src/com/example/android/apis/view/index.html">Api Demos</a>.
These can also be found offline, in <code>/&lt;sdk&gt;/samples/ApiDemos</code>.</p>
</div>