diff options
Diffstat (limited to 'docs/html/guide/tutorials/views')
16 files changed, 190 insertions, 36 deletions
diff --git a/docs/html/guide/tutorials/views/hello-autocomplete.jd b/docs/html/guide/tutorials/views/hello-autocomplete.jd index 9f97b32..de3ba29 100644 --- a/docs/html/guide/tutorials/views/hello-autocomplete.jd +++ b/docs/html/guide/tutorials/views/hello-autocomplete.jd @@ -1,4 +1,6 @@ page.title=Hello, AutoCompleteTextView +parent.title=Hello, Views +parent.link=index.html @jd:body <p>{@link android.widget.AutoCompleteTextView} is an implementation of the EditText widget that will provide @@ -111,4 +113,4 @@ static final String[] COUNTRIES = new String[] { <li>{@link android.widget.AutoCompleteTextView}</li> </ul> -<p><a href="{@docRoot}guide/tutorials/views/hello-views-index.html">← Back to Hello Views</a></p> + diff --git a/docs/html/guide/tutorials/views/hello-datepicker.jd b/docs/html/guide/tutorials/views/hello-datepicker.jd index b35d4db..fcd43f3 100644 --- a/docs/html/guide/tutorials/views/hello-datepicker.jd +++ b/docs/html/guide/tutorials/views/hello-datepicker.jd @@ -1,4 +1,6 @@ page.title=Hello, DatePicker +parent.title=Hello, Views +parent.link=index.html @jd:body <p>A {@link android.widget.DatePicker} is a widget that allows the user to select a month, day and year.</p> @@ -146,4 +148,4 @@ protected Dialog onCreateDialog(int id) { <li>{@link android.widget.TextView}</li> <li>{@link java.util.Calendar}</li> </ul> -<p><a href="{@docRoot}guide/tutorials/views/hello-views-index.html">← Back to Hello Views</a></p> + diff --git a/docs/html/guide/tutorials/views/hello-formstuff.jd b/docs/html/guide/tutorials/views/hello-formstuff.jd index 80ae6ce..f858ce3 100644 --- a/docs/html/guide/tutorials/views/hello-formstuff.jd +++ b/docs/html/guide/tutorials/views/hello-formstuff.jd @@ -1,4 +1,6 @@ page.title=Hello, Form Stuff +parent.title=Hello, Views +parent.link=index.html @jd:body <p>This page introduces a variety of widgets, like image buttons, @@ -258,4 +260,3 @@ use <code>setChecked(true)</code> or <code>toggle()</code>. </p> <li>{@link android.widget.ToggleButton}</li> </ul> -<p><a href="{@docRoot}guide/tutorials/views/hello-views-index.html">← Back to Hello Views</a></p> diff --git a/docs/html/guide/tutorials/views/hello-gallery.jd b/docs/html/guide/tutorials/views/hello-gallery.jd index af01757..084f912 100644 --- a/docs/html/guide/tutorials/views/hello-gallery.jd +++ b/docs/html/guide/tutorials/views/hello-gallery.jd @@ -1,4 +1,6 @@ page.title=Hello, Gallery +parent.title=Hello, Views +parent.link=index.html @jd:body <p>A {@link android.widget.Gallery} is a View commonly used to display items in a horizontally scrolling list @@ -129,5 +131,5 @@ exactly match the ImageView dimensions.</p> <li>{@link android.widget.ImageView}</li> <li>{@link android.widget.Toast}</li> </ul> -<p><a href="{@docRoot}guide/tutorials/views/hello-views-index.html">← Back to Hello Views</a></p> + diff --git a/docs/html/guide/tutorials/views/hello-gridview.jd b/docs/html/guide/tutorials/views/hello-gridview.jd index d5c8628..623a03d 100644 --- a/docs/html/guide/tutorials/views/hello-gridview.jd +++ b/docs/html/guide/tutorials/views/hello-gridview.jd @@ -1,4 +1,6 @@ page.title=Hello, GridView +parent.title=Hello, Views +parent.link=index.html @jd:body <p>A {@link android.widget.GridView} displays items in a two-dimensional, scrolling grid. The items @@ -124,4 +126,3 @@ public class ImageAdapter extends BaseAdapter { <li>{@link android.widget.BaseAdapter}</li> </ul> -<p><a href="{@docRoot}guide/tutorials/views/hello-views-index.html">← Back to Hello Views</a></p> diff --git a/docs/html/guide/tutorials/views/hello-linearlayout.jd b/docs/html/guide/tutorials/views/hello-linearlayout.jd index ecea062..0e8947c 100644 --- a/docs/html/guide/tutorials/views/hello-linearlayout.jd +++ b/docs/html/guide/tutorials/views/hello-linearlayout.jd @@ -1,4 +1,6 @@ page.title=Hello, LinearLayout +parent.title=Hello, Views +parent.link=index.html @jd:body <p>A {@link android.widget.LinearLayout} is a GroupView that will lay child View elements @@ -125,4 +127,4 @@ Pay attention to the effect of the <code>layout_weight</code>. Try <li>{@link android.widget.TextView}</li> </ul> -<p><a href="{@docRoot}guide/tutorials/views/hello-views-index.html">← Back to Hello Views</a></p> + diff --git a/docs/html/guide/tutorials/views/hello-listview.jd b/docs/html/guide/tutorials/views/hello-listview.jd index 41b7f6e..d90005b 100644 --- a/docs/html/guide/tutorials/views/hello-listview.jd +++ b/docs/html/guide/tutorials/views/hello-listview.jd @@ -1,4 +1,6 @@ page.title=Hello, ListView +parent.title=Hello, Views +parent.link=index.html @jd:body <p>A {@link android.widget.ListView} is a View that shows items in a vertically scrolling list. The items are @@ -86,4 +88,3 @@ public void onCreate(Bundle savedInstanceState) { <li>{@link android.widget.ListAdapter}</li> </ul> -<p><a href="{@docRoot}guide/tutorials/views/hello-views-index.html">← Back to Hello Views</a></p> diff --git a/docs/html/guide/tutorials/views/hello-mapview.jd b/docs/html/guide/tutorials/views/hello-mapview.jd index 5b23f9b..fcdf056 100644 --- a/docs/html/guide/tutorials/views/hello-mapview.jd +++ b/docs/html/guide/tutorials/views/hello-mapview.jd @@ -1,4 +1,6 @@ page.title=Hello, MapView +parent.title=Hello, Views +parent.link=index.html @jd:body <p>A MapView allows you to create your own map-viewing Activity. @@ -23,23 +25,29 @@ First, we'll create a simple Activity that can view and navigate a map. Then we android:id="@+id/mainlayout" android:orientation="vertical" android:layout_width="fill_parent" - android:layout_height="fill_parent" - > + android:layout_height="fill_parent" > <com.google.android.maps.MapView android:id="@+id/mapview" android:layout_width="fill_parent" android:layout_height="fill_parent" android:clickable="true" - android:apiKey="myapikey" + android:apiKey="INSERT YOUR KEY HERE" /> <RelativeLayout> </pre> - - <p>The <code>android:apiKey</code> should actually contain a legitimate value that's - associated to your application. For now, it's okay to just leave this as an - arbitrary string. But to run on 1.0 software, an authentic key will be needed.</p></li> + <p>Setting <code>clickable</code> is important. Otherwise, the map does not allow any user interaction.</p> + + <p>The <code>android:apiKey</code> must contain an authentic Android Maps API key. + The API key is generated using the MD5 fingerprint of your application certificate. For the purposes of + this exercise, you should use the fingerprint of your debug certificate (which cannot be used to release + your application for Android devices, but will work while developing). See how to + <a href="{@docRoot}guide/topics/geo/mapkey.html#getdebugfingerprint">generate a fingerprint from your + debug certificate</a>, then <a href="http://code.google.com/android/maps-api-signup.html">register the + certificate</a> to retieve an API key. + Insert the API key as the value of the <code>apiKey</code> attribute. If you do not insert a valid + Maps API key, the application will still run, but no map tiles will load.</p></li> <li>Now open the HelloMapView.java file. For this Activity, we're going to extend the special sub-class of Activity called MapActivity, so change the class declaration to extend @@ -47,7 +55,7 @@ First, we'll create a simple Activity that can view and navigate a map. Then we <pre>public class HelloMapView extends MapActivity {</pre> - <li>The <code>isRouteDisplayed()</code> method is requires, so add it inside the class: + <li>The <code>isRouteDisplayed()</code> method is required, so add it inside the class: <pre> @Override protected boolean isRouteDisplayed() { @@ -117,7 +125,7 @@ class, which can manage a whole set of Overlay items for us.</p> <ol> <li>Create a new Java class named HelloItemizedOverlay that implements ItemizedOverlay. - <p>Right-click the package name in the Eclipse Package Explorer, and select New > Class. Fill-in + <p>When using Eclipse, right-click the package name in the Eclipse Package Explorer, and select New > Class. Fill-in the Name field as <em>HelloItemizedOverlay</em>. For the Superclass, enter <em>com.google.android.maps.ItemizedOverlay</em>. Click the checkbox for <em>Constructors from superclass</em>. Click Finish.</p></li> @@ -151,7 +159,12 @@ public void addOverlay(OverlayItem overlay) { <code>createItem(int)</code>. We must define this method to properly read from our ArrayList. Replace the existing contents of the createItem method with a <code>get()</code> call to our ArrayList: - <pre>return mOverlays.get(i);</pre></li> +<pre> +@Override +protected OverlayItem createItem(int i) { + return mOverlays.get(i); +} +</pre></li> <li>We're also required to override the <code>size()</code> method. Replace the existing contents of the method with a size request to our ArrayList: @@ -185,14 +198,14 @@ HelloItemizedOverlay itemizedOverlay;</pre></li> new fields: <pre> -mapoverlays = mapView.getOverlays(); -drawable = this.getResources().getDrawable(R.drawable.banana); +mapOverlays = mapView.getOverlays(); +drawable = this.getResources().getDrawable(R.drawable.androidmarker); itemizedoverlay = new HelloItemizedOverlay(drawable);</pre> <p>All overlay elements on a map are held by the MapView, so when we want to add some, we must first retrieve the List with <code>getOverlays()</code> methods. We instantiate the Drawable, which will be used as our map marker, by using our Context resources to get the Drawable we placed in - the res/drawable/ directory. Our HelloItemizedOverlay takes the Drawable in order to set the + the res/drawable/ directory (androidmarker.png). Our HelloItemizedOverlay takes the Drawable in order to set the default marker.</p></li> <li>Now let's make our first OverlayItem by creating a GeoPoint @@ -211,7 +224,7 @@ OverlayItem overlayitem = new OverlayItem(point, "", "");</pre> <pre> itemizedoverlay.addOverlay(overlayitem); -mapoverlays.add(itemizedoverlay);</pre></li> +mapOverlays.add(itemizedoverlay);</pre></li> <li>Run it!</li> </ol> @@ -228,4 +241,3 @@ OverlayItem overlayitem2 = new OverlayItem(point2, "", ""); </pre> <p>Run it again... We've sent a new droid to Tokyo. Sekai, konichiwa!</p> -<p><a href="{@docRoot}guide/tutorials/views/hello-views-index.html">← Back to Hello Views</a></p> diff --git a/docs/html/guide/tutorials/views/hello-relativelayout.jd b/docs/html/guide/tutorials/views/hello-relativelayout.jd index 4467631..1b91537 100644 --- a/docs/html/guide/tutorials/views/hello-relativelayout.jd +++ b/docs/html/guide/tutorials/views/hello-relativelayout.jd @@ -1,4 +1,6 @@ page.title=Hello, RelativeLayout +parent.title=Hello, Views +parent.link=index.html @jd:body <p>A {@link android.widget.RelativeLayout} is a ViewGroup that allows you to layout child elements @@ -71,7 +73,3 @@ public void onCreate(Bundle savedInstanceState) { <li>{@link android.widget.EditText}</li> <li>{@link android.widget.Button}</li> </ul> - - -<p><a href="{@docRoot}guide/tutorials/views/hello-views-index.html">← Back to Hello Views</a></p> - diff --git a/docs/html/guide/tutorials/views/hello-spinner.jd b/docs/html/guide/tutorials/views/hello-spinner.jd index 4a0f12f..3a04214 100644 --- a/docs/html/guide/tutorials/views/hello-spinner.jd +++ b/docs/html/guide/tutorials/views/hello-spinner.jd @@ -1,4 +1,6 @@ page.title=Hello, Spinner +parent.title=Hello, Views +parent.link=index.html @jd:body <p>A {@link android.widget.Spinner} is a widget that allows the user to select an item from a group. @@ -102,4 +104,3 @@ public void onCreate(Bundle savedInstanceState) { <li>{@link android.widget.Spinner}</li> </ul> -<p><a href="{@docRoot}guide/tutorials/views/hello-views-index.html">← Back to Hello Views</a></p> diff --git a/docs/html/guide/tutorials/views/hello-tablelayout.jd b/docs/html/guide/tutorials/views/hello-tablelayout.jd index e7f2de5..83d6f5d 100644 --- a/docs/html/guide/tutorials/views/hello-tablelayout.jd +++ b/docs/html/guide/tutorials/views/hello-tablelayout.jd @@ -1,4 +1,6 @@ page.title=Hello, TableLayout +parent.title=Hello, Views +parent.link=index.html @jd:body <p>A {@link android.widget.TableLayout} is a ViewGroup that @@ -114,6 +116,3 @@ public void onCreate(Bundle savedInstanceState) { </ul> -<p><a href="{@docRoot}guide/tutorials/views/hello-views-index.html">← Back to Hello Views</a></p> - - diff --git a/docs/html/guide/tutorials/views/hello-tabwidget.jd b/docs/html/guide/tutorials/views/hello-tabwidget.jd new file mode 100644 index 0000000..8424616 --- /dev/null +++ b/docs/html/guide/tutorials/views/hello-tabwidget.jd @@ -0,0 +1,124 @@ +page.title=Hello, TabWidget +parent.title=Hello, Views +parent.link=index.html +@jd:body + +<p>A {@link android.widget.TabWidget} offers the ability to easily draw an interface that uses +tabs to navigate between different views.</p> + +<ol> + <li>Start a new project/Activity called HelloTabWidget.</li> + <li>Open the layout file and make it like so:</li> + <pre> +<?xml version="1.0" encoding="utf-8"?> +<TabHost xmlns:android="http://schemas.android.com/apk/res/android" + android:id="@android:id/tabhost" + android:layout_width="fill_parent" + android:layout_height="fill_parent"> + <LinearLayout + android:orientation="vertical" + android:layout_width="fill_parent" + android:layout_height="fill_parent"> + <TabWidget + android:id="@android:id/tabs" + android:layout_width="fill_parent" + android:layout_height="wrap_content" /> + <FrameLayout + android:id="@android:id/tabcontent" + android:layout_width="fill_parent" + android:layout_height="fill_parent"> + <TextView + android:id="@+id/textview1" + android:layout_width="fill_parent" + android:layout_height="fill_parent" + android:text="this is a tab" /> + <TextView + android:id="@+id/textview2" + android:layout_width="fill_parent" + android:layout_height="fill_parent" + android:text="this is another tab" /> + <TextView + android:id="@+id/textview3" + android:layout_width="fill_parent" + android:layout_height="fill_parent" + android:text="this is a third tab" /> + </FrameLayout> + </LinearLayout> +</TabHost> +</pre> + <p>Here, we've created a {@link android.widget.TabHost} that contains the entire layout of the Activity. + A TabHost requires two descendant elements: a {@link android.widget.TabWidget} and a {@link android.widget.FrameLayout}. + In order to properly layout these elements, we've put them inside a vertical {@link android.widget.LinearLayout}. + The FrameLayout is where we keep the content that will change with each tab. Each child in the FrameLayout will + be associated with a different tab. + In this case, each tab simply shows a different {@link android.widget.TextView} with some text. </p> + <p>Notice that the TabWidget and the FrameLayout elements have specific <code>android</code> namespace IDs. These are necessary + so that the TabHost can automatically retireve references to them, populate the TabWidget with the tabs that we'll define + in our code, and swap the views in the FrameLayout. We've also defined our own IDs for each TextView, which we'll use to + associate each tab with the view that it should reveal.</p> + <p>Of course, you can + make these child views as large as complex as you'd like — instead of the TextView elements, + you could start with other layout views and build a unique layout hierarchy for each tab.</p> + </li> + <li>Now we'll add our code. Open HelloTabWidget.java and make it a <code>TabActivity</code>. + <p>By default, Eclipse creates a class that extends <code>Activity</code>. Change it to + extend <code>TabActivity</code>:</p> + <pre> +public class HelloTabWidget extends TabActivity { +</pre> + </li> + <li>Now fill in the the <code>onCreate</code> method like this: + <pre> +public void onCreate(Bundle savedInstanceState) { + super.onCreate(savedInstanceState); + setContentView(R.layout.main); + + mTabHost = getTabHost(); + + mTabHost.addTab(mTabHost.newTabSpec("tab_test1").setIndicator("TAB 1").setContent(R.id.textview1)); + mTabHost.addTab(mTabHost.newTabSpec("tab_test2").setIndicator("TAB 2").setContent(R.id.textview2)); + mTabHost.addTab(mTabHost.newTabSpec("tab_test3").setIndicator("TAB 3").setContent(R.id.textview3)); + + mTabHost.setCurrentTab(0); +} +</pre> + <p>As usual, we start by setting our layout.</p> + <p>We then call the TabActivity method <code>getTabHost()</code>, + which returns us a reference to the TabHost we created in our layout. Upon our TabHost, we call <code>addTab()</code> + for each of the tabs that we want to add to the TabWidget. Each time we call this, we pass a + {@link android.widget.TabHost.TabSpec} that we build on the fly, and with it, chain together two necessary methods: + <code>setIndicator()</code> to set the text for the tab button, and <code>setContent()</code> to define + which View we want to associate with the tab and reveal when pressed. Our indicator is just a text string and + our content is an ID reference to the TextView elements we inserted in the FrameLayout.</p> + <p>At the end, we call <code>setCurrentTab()</code> to define which tab should be opened by default. The tabs + are saved like a zero-based array, so to open the first tab, we pass zero (<var>0</var>).</p> + </li> + <li>To clean-up the presentation a bit more, let's remove the window title that appears at the top of the layout. + Android includes a theme that removes that title for us. To add it, open the Android Manifest file and add + the <var>NoTitleBar</var> theme to the <code><application></code> tag. It should end up like this: + <pre> +<application android:icon="@drawable/icon" android:theme="@android:style/Theme.NoTitleBar"> +</pre> + </li> + <li>That's it. Run your application.</li> + +</ol> + + +<p>Your application should look like this:</p> +<img src="images/hello-tabwidget.png" width="150px" /> + +<div class="special"><p>You can include icons in your tabs by passing a +{@link android.graphics.drawable.Drawable} when you call <code>setIndicator()</code>. Here's an example +that uses a Drawable created from an image in the project resources:</p> +<pre>setIndicator("TAB 1", getResources().getDrawable(R.drawable.tab_icon))</pre> +</div> + +<h3>References</h3> +<ul> +<li>{@link android.widget.TabWidget}</li> +<li>{@link android.widget.TabHost}</li> +<li>{@link android.widget.TabHost.TabSpec}</li> +<li>{@link android.widget.FrameLayout}</li> +</ul> + diff --git a/docs/html/guide/tutorials/views/hello-timepicker.jd b/docs/html/guide/tutorials/views/hello-timepicker.jd index 2faad00..1a6c8f9 100644 --- a/docs/html/guide/tutorials/views/hello-timepicker.jd +++ b/docs/html/guide/tutorials/views/hello-timepicker.jd @@ -1,4 +1,6 @@ page.title=Hello, TimePicker +parent.title=Hello, Views +parent.link=index.html @jd:body <p>A {@link android.widget.TimePicker} is a widget that allows the @@ -154,4 +156,4 @@ private static String pad(int c) { <li>{@link android.widget.TextView}</li> <li>{@link java.util.Calendar}</li> </ol> -<p><a href="{@docRoot}guide/tutorials/views/hello-views-index.html">← Back to Hello Views</a></p> + diff --git a/docs/html/guide/tutorials/views/hello-webview.jd b/docs/html/guide/tutorials/views/hello-webview.jd index 542f91f..c4388ea 100644 --- a/docs/html/guide/tutorials/views/hello-webview.jd +++ b/docs/html/guide/tutorials/views/hello-webview.jd @@ -1,4 +1,6 @@ page.title=Hello, WebView +parent.title=Hello, Views +parent.link=index.html @jd:body <p>A {@link android.webkit.WebView} allows you to create your own web browser Activity. In this tutorial, @@ -110,7 +112,6 @@ public boolean onKeyDown(int keyCode, KeyEvent event) { <li>{@link android.view.KeyEvent}</li> </ul> -<p><a href="{@docRoot}guide/tutorials/views/hello-views-index.html">← Back to Hello Views</a></p> diff --git a/docs/html/guide/tutorials/views/images/hello-tabwidget.png b/docs/html/guide/tutorials/views/images/hello-tabwidget.png Binary files differnew file mode 100644 index 0000000..6a52356 --- /dev/null +++ b/docs/html/guide/tutorials/views/images/hello-tabwidget.png diff --git a/docs/html/guide/tutorials/views/hello-views-index.jd b/docs/html/guide/tutorials/views/index.jd index fd00233..6a6ac4b 100644 --- a/docs/html/guide/tutorials/views/hello-views-index.jd +++ b/docs/html/guide/tutorials/views/index.jd @@ -3,7 +3,7 @@ page.title=Hello, Views <style> .view {float:left; margin:10px; font-size:120%; font-weight:bold;} -.view img {border:1px solid black; margin-top:5px; padding:5px;} +.view img {border:1px solid black; margin:5px 0 0; padding:5px;} </style> <p>This collection of "Hello World"-style tutorials is designed @@ -12,7 +12,7 @@ these kinds of boring bits so you can focus on developing the code that makes yo 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 tutorial</a>, +completed the <a href="{@docRoot}guide/tutorials/hello-world.html">Hello, World</a> tutorial, please do so—it will teach you many things you should know about basic Android development and Eclipse features. More specifically, you should know:</p> <ul> @@ -77,6 +77,12 @@ your strings.xml file.</p> <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> @@ -106,7 +112,7 @@ ProgressBar; RatingBar; FrameLayout 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}samples/ApiDemos/src/com/example/android/apis/view/index.html">Api Demos</a>. -These can also be found offline, in <code>/<your-SDK>/samples/ApiDemos</code>.</p> +<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>/<sdk>/samples/ApiDemos</code>.</p> </div> |
