In android, how can I put tabs in a view containing an image on top?

Question

I am creating an android application and am trying to add three tabs underneath a picture and some text.

 ______________________________
 |  _____________             |
 |  |           |   text      |
 |  | picture   |   text      |
 |  |           |   text      |
 |  —————————————             |
 |  _______ ________ _______  |
 |  | tab | |  tab | | tab |  |
 |  ————————————————————————  |
 |  |                      |  |
 |  |                      |  |
 |  |       content        |  |
 |  |        here          |  |
 |  |                      |  |
 |  |                      |  |
 |                            |
 ——————————————————————————————

I do not know exactly how to accomplish this. Any ideas would be greatly appreciated. Thank you.

Answer 1

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content">
  <LinearLayout
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">
    <ImageView 
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="image_source/>
    <LinearLayout
      android:orientation="vertical"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent">
      <TextView
        android:id="@android:id/text1"
        android:text="some text"
        android:layout_width="wrap_content"
      android:layout_height="wrap_content" />
      <TextView
        android:id="@android:id/text2"
        android:text="some text"
        android:layout_width="wrap_content"
      android:layout_height="wrap_content" />
      <TextView
        android:id="@android:id/text3"
        android:text="some text"
        android:layout_width="wrap_content"
      android:layout_height="wrap_content" />
    </LinearLayout>
  </LinearLayout>
  <TabHost
    android:id="@+id/my_tab_viewer"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:padding="5dp">
        <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"
            android:padding="5dp" />
    </LinearLayout>
  </TabHost>
</LinearLayout>

That should provide you the base structure, then add your tabs with in your activity:

TabHost tabHost = (TabHost) findViewById(R.id.my_tab_viewer);
TabHost.TabSpec spec = tabHost.newTabSpec("artists").setIndicator("Artists",
                  res.getDrawable(R.drawable.ic_tab_artists))
              .setContent(intent);
tabHost.addTab(spec);

Java source example taken from http://developer.android.com/resources/tutorials/views/hello-tabwidget.html

You may need to tweak the layout_width, layout_height for each component in the XML, I did not test that layout.

Answer 2

Sounds like the Android TabHost widget is what you're looking for, in a standard Activity subclass (Android's TabActivity is probably too inflexible for the layout you're proposing).

TabHost is a widget that provides a tab bar, with a FrameLayout to display the contents for each tab. You can put it underneath the picture/text in your layout using either a RelativeLayout (preferred) or LinearLayout.