diff options
| -rw-r--r-- | docs/html/resources/tutorials/views/hello-tabwidget.jd | 52 |
1 files changed, 31 insertions, 21 deletions
diff --git a/docs/html/resources/tutorials/views/hello-tabwidget.jd b/docs/html/resources/tutorials/views/hello-tabwidget.jd index 199ceef..9bafd84 100644 --- a/docs/html/resources/tutorials/views/hello-tabwidget.jd +++ b/docs/html/resources/tutorials/views/hello-tabwidget.jd @@ -37,21 +37,27 @@ public class ArtistsActivity extends Activity { </pre> <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 -each of the three activities.</p> - - <li>You're going to need an icon for each of your tabs. And for each one, you should create an -image for two different states: one for when the tab is selected, and one for when it is not. The -general design recommendation is for the selected tab icon to be a darker color (grey), and the -non-selected icon to be lighter (white). For example: +each of the three activities, and add the corresponding <code><activity/></code> tags to the Android Manifest file.</p> + + <li>You need an icon for each of your tabs. For each icon, you should create two versions: one +for when the tab is selected and one for when it is unselected. The +general design recommendation is for the selected icon to be a dark color (grey), and the +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> - <img src="images/ic_tab_artists_white.png" title="ic_tab_artists_white.png" alt="" /> - <img src="images/ic_tab_artists_grey.png" title="ic_tab_artists_grey.png" alt="" /> + <img src="images/ic_tab_artists_white.png" title="unselected tab icon" alt="" /> + <img src="images/ic_tab_artists_grey.png" title="selected tab icon" alt="" /> </p> - <p>Copy these images for use in this tutorial. Save them into your project -<code>res/drawable/</code> directory. You now need to create a {@link -android.graphics.drawable.Drawable} with XML that specifies which image -to use for each state. Create a new file in <code>res/drawable/</code> named -<code>ic_tab_artists.xml</code> and insert the following:</p> + <p>For this tutorial, you can copy these images and use them for all three tabs. (When you +create tabs in your own application, you should create customized tab icons.)</p> + <p>Now create a <a +href="{@docRoot}guide/topics/resources/drawable-resource.html#StateList">state-list drawable</a> +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> <?xml version="1.0" encoding="utf-8"?> <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" /> </selector> </pre> - <p>This is an XML definition for a {@link android.graphics.drawable.Drawable}, which you will -reference as the image for a tab. When the image state changes, the image will automatically -switch between the images defined here.</p> + <p>This is a <a +href="{@docRoot}guide/topics/resources/drawable-resource.html#StateList">state-list drawable</a>, +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: <pre> @@ -86,7 +96,7 @@ switch between the images defined here.</p> android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent" - android;padding="5dp" /> + android:padding="5dp" /> </LinearLayout> </TabHost> </pre> @@ -136,7 +146,7 @@ public void onCreate(Bundle savedInstanceState) { spec = tabHost.newTabSpec("albums").setIndicator("Albums", res.getDrawable(R.drawable.ic_tab_albums)) .setContent(intent); - mTabHost.addTab(spec); + tabHost.addTab(spec); intent = new Intent().setClass(this, SongsActivity.class); spec = tabHost.newTabSpec("songs").setIndicator("Songs", @@ -144,7 +154,7 @@ public void onCreate(Bundle savedInstanceState) { .setContent(intent); tabHost.addTab(spec); - tabHost.setCurrentTab(getIntent()); + tabHost.setCurrentTab(2); } </pre> <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 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 -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 calling {@link android.widget.TabHost#addTab(TabHost.TabSpec)}.</p> @@ -187,7 +197,7 @@ calling {@link android.widget.TabHost#addTab(TabHost.TabSpec)}.</p> </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" /> <h3>References</h3> |