Merge "cherry-pick from master: c096a9aead
(plus other revisions to resolve bug 2595831)" into froyo
This commit is contained in:
@ -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><activity/></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>
|
||||||
<?xml version="1.0" encoding="utf-8"?>
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
<selector xmlns:android="http://schemas.android.com/apk/res/android">
|
<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
|
|||||||
<item android:drawable="@drawable/ic_tab_artists_white" />
|
<item android:drawable="@drawable/ic_tab_artists_white" />
|
||||||
</selector>
|
</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" />
|
||||||
</LinearLayout>
|
</LinearLayout>
|
||||||
</TabHost>
|
</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>
|
||||||
|
Reference in New Issue
Block a user