Merge "cherry-pick from master: c096a9aead (plus other revisions to resolve bug 2595831)" into froyo

This commit is contained in:
Scott Main
2010-04-16 16:14:33 -07:00
committed by Android (Google) Code Review

View File

@ -37,21 +37,27 @@ public class ArtistsActivity extends Activity {
</pre> </pre>
<p>Notice that this doesn't use a layout file. Just create a {@link <p>Notice that this doesn't use a layout file. Just create a {@link
android.widget.TextView}, give it some text and set that as the content. Duplicate this for android.widget.TextView}, give it some text and set that as the content. Duplicate this for
each of the three activities.</p> each of the three activities, and add the corresponding <code>&lt;activity/&gt;</code> tags to the Android Manifest file.</p>
<li>You're going to need an icon for each of your tabs. And for each one, you should create an <li>You need an icon for each of your tabs. For each icon, you should create two versions: one
image for two different states: one for when the tab is selected, and one for when it is not. The for when the tab is selected and one for when it is unselected. The
general design recommendation is for the selected tab icon to be a darker color (grey), and the general design recommendation is for the selected icon to be a dark color (grey), and the
non-selected icon to be lighter (white). For example: unselected icon to be a light color (white). (See the <a
href="{@docRoot}guide/practices/ui_guidelines/icon_design.html#tabstructure">Icon Design
Guidelines</a>.) For example:
<p> <p>
<img src="images/ic_tab_artists_white.png" title="ic_tab_artists_white.png" alt="" /> <img src="images/ic_tab_artists_white.png" title="unselected tab icon" alt="" />
<img src="images/ic_tab_artists_grey.png" title="ic_tab_artists_grey.png" alt="" /> <img src="images/ic_tab_artists_grey.png" title="selected tab icon" alt="" />
</p> </p>
<p>Copy these images for use in this tutorial. Save them into your project <p>For this tutorial, you can copy these images and use them for all three tabs. (When you
<code>res/drawable/</code> directory. You now need to create a {@link create tabs in your own application, you should create customized tab icons.)</p>
android.graphics.drawable.Drawable} with XML that specifies which image <p>Now create a <a
to use for each state. Create a new file in <code>res/drawable/</code> named href="{@docRoot}guide/topics/resources/drawable-resource.html#StateList">state-list drawable</a>
<code>ic_tab_artists.xml</code> and insert the following:</p> that specifies which image to use for each tab state:</p>
<ol>
<li>Save the icon images in your project <code>res/drawable/</code> directory.</li>
<li>Create a new XML file in <code>res/drawable/</code>
named <code>ic_tab_artists.xml</code> and insert the following:
<pre> <pre>
&lt;?xml version="1.0" encoding="utf-8"?> &lt;?xml version="1.0" encoding="utf-8"?>
&lt;selector xmlns:android="http://schemas.android.com/apk/res/android"> &lt;selector xmlns:android="http://schemas.android.com/apk/res/android">
@ -62,9 +68,13 @@ to use for each state. Create a new file in <code>res/drawable/</code> named
&lt;item android:drawable="@drawable/ic_tab_artists_white" /> &lt;item android:drawable="@drawable/ic_tab_artists_white" />
&lt;/selector> &lt;/selector>
</pre> </pre>
<p>This is an XML definition for a {@link android.graphics.drawable.Drawable}, which you will <p>This is a <a
reference as the image for a tab. When the image state changes, the image will automatically href="{@docRoot}guide/topics/resources/drawable-resource.html#StateList">state-list drawable</a>,
switch between the images defined here.</p> which you will apply as the tab image. When the tab state changes, the tab icon will
automatically switch between the images defined here.</p>
</li>
</ol>
</li>
<li>Open the <code>res/layout/main.xml</code> file and insert the following: <li>Open the <code>res/layout/main.xml</code> file and insert the following:
<pre> <pre>
@ -86,7 +96,7 @@ switch between the images defined here.</p>
android:id="@android:id/tabcontent" android:id="@android:id/tabcontent"
android:layout_width="fill_parent" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:layout_height="fill_parent"
android;padding="5dp" /> android:padding="5dp" />
&lt;/LinearLayout> &lt;/LinearLayout>
&lt;/TabHost> &lt;/TabHost>
</pre> </pre>
@ -136,7 +146,7 @@ public void onCreate(Bundle savedInstanceState) {
spec = tabHost.newTabSpec("albums").setIndicator("Albums", spec = tabHost.newTabSpec("albums").setIndicator("Albums",
res.getDrawable(R.drawable.ic_tab_albums)) res.getDrawable(R.drawable.ic_tab_albums))
.setContent(intent); .setContent(intent);
mTabHost.addTab(spec); tabHost.addTab(spec);
intent = new Intent().setClass(this, SongsActivity.class); intent = new Intent().setClass(this, SongsActivity.class);
spec = tabHost.newTabSpec("songs").setIndicator("Songs", spec = tabHost.newTabSpec("songs").setIndicator("Songs",
@ -144,7 +154,7 @@ public void onCreate(Bundle savedInstanceState) {
.setContent(intent); .setContent(intent);
tabHost.addTab(spec); tabHost.addTab(spec);
tabHost.setCurrentTab(getIntent()); tabHost.setCurrentTab(2);
} }
</pre> </pre>
<p>This sets up each tab with their text and icon, and assigns each one an {@link <p>This sets up each tab with their text and icon, and assigns each one an {@link
@ -157,7 +167,7 @@ android.widget.TabHost.TabSpec} identified by the given string tag. For each
{@link android.widget.TabHost.TabSpec}, {@link {@link android.widget.TabHost.TabSpec}, {@link
android.widget.TabHost.TabSpec#setIndicator(CharSequence,Drawable)} is called to set the text and android.widget.TabHost.TabSpec#setIndicator(CharSequence,Drawable)} is called to set the text and
icon for the tab, and {@link android.widget.TabHost.TabSpec#setContent(Intent)} is called to specify icon for the tab, and {@link android.widget.TabHost.TabSpec#setContent(Intent)} is called to specify
the {@link android.content.Intent} to opens the appropriate {@link android.app.Activity}. Each the {@link android.content.Intent} to open the appropriate {@link android.app.Activity}. Each
{@link android.widget.TabHost.TabSpec} is then added to the {@link android.widget.TabHost} by {@link android.widget.TabHost.TabSpec} is then added to the {@link android.widget.TabHost} by
calling {@link android.widget.TabHost#addTab(TabHost.TabSpec)}.</p> calling {@link android.widget.TabHost#addTab(TabHost.TabSpec)}.</p>
@ -187,7 +197,7 @@ calling {@link android.widget.TabHost#addTab(TabHost.TabSpec)}.</p>
</ol> </ol>
<p>Your application should look like this:</p> <p>Your application should look like this (though your icons may be different):</p>
<img src="images/hello-tabwidget.png" width="150px" /> <img src="images/hello-tabwidget.png" width="150px" />
<h3>References</h3> <h3>References</h3>