Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android Tabbed Layout setContent

Tags:

android

I'm developing an Android application with a tabbed layout. I've got it to where it doesn't spawn a new activity like Google's tutorial suggested, however I only did this in an effort to get my content to show when clicking on each tab. Currently it just shows black regardless of what tab is active.

The following is my code in its latest iteration:

Main.java

public class Main extends TabActivity {
    /** Called when the activity is first created. */

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        Resources res = getResources();
        TabHost tabHost = getTabHost();
        TabHost.TabSpec spec;

        // add orders tab
        spec = tabHost.newTabSpec("orders").setIndicator("Orders",
                          res.getDrawable(R.drawable.flash_36))
                          .setContent(R.id.ordersLayout);
        tabHost.addTab(spec);

        // add positions tab
        spec = tabHost.newTabSpec("positions").setIndicator("Positions",
                          res.getDrawable(R.drawable.small_tiles_36))
                          .setContent(R.id.positionsLayout);
        tabHost.addTab(spec);

        // add strategies tab
        spec = tabHost.newTabSpec("strategies").setIndicator("Strategies",
                          res.getDrawable(R.drawable.cards_36))
                          .setContent(R.id.strategiesLayout);
        tabHost.addTab(spec);

        // add account tab
        spec = tabHost.newTabSpec("account").setIndicator("Account",
                          res.getDrawable(R.drawable.seal_36))
                          .setContent(R.id.accountLayout);
        tabHost.addTab(spec);

        tabHost.setCurrentTab(1);
    }

}

Main.xml

<?xml version="1.0" encoding="utf-8"?>


<TabHost    android:id="@android:id/tabhost" 
            android:layout_width="fill_parent" 
            android:layout_height="fill_parent"
            xmlns:android="http://schemas.android.com/apk/res/android">

            <LinearLayout   android:id="@+id/mainLayout" 
                            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">
                </TabWidget>

                <FrameLayout android:id="@android:id/tabcontent" 
                            android:layout_width="fill_parent" 
                            android:layout_height="fill_parent"
                            android:background="#fff"
                            android:padding="5dp">

                            <include layout="@layout/orders"/>
                            <include layout="@layout/positions"/>
                            <include layout="@layout/strategies"/>
                            <include layout="@layout/account"/>

                </FrameLayout>

            </LinearLayout>

</TabHost>

Account.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout 
    android:id="@+id/accountLayout" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:background="#fff"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <TextView 
        android:text="Account Information" 
        android:id="@+id/accountLabel" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content">

    </TextView>

</LinearLayout>

Orders.xml

I'm only including these two, they are all the exact same with appropriate ids for the LinearLayout's android:id parameter.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout 
    android:id="@+id/ordersLayout" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:background="#fff"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <TextView 
        android:text="Working Orders" 
        android:id="@+id/ordersLabel" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content">

    </TextView>

</LinearLayout>

And here's a screenshot of what I get when switching between tabs:

Orders Tab

alt text

Positions Tab

alt text

This is true for both the emulator and a Samsung Galaxy I just got, and I highly reccommend by the way, any ideas?

like image 580
zkwentz Avatar asked Sep 16 '10 19:09

zkwentz


1 Answers

I figured it out, and it's one simple parameter addition to the main.xml file:

Main.xml (revised)

<?xml version="1.0" encoding="utf-8"?>


<TabHost    android:id="@android:id/tabhost" 
            android:layout_width="fill_parent" 
            android:layout_height="fill_parent"
            xmlns:android="http://schemas.android.com/apk/res/android">

            <LinearLayout   android:id="@+id/mainLayout" 
                            android:layout_width="fill_parent" 
                            android:layout_height="fill_parent"
                            android:orientation="vertical"
                            android:padding="5dp">

                <TabWidget  android:id="@android:id/tabs" 
                            android:layout_width="fill_parent" 
                            android:layout_height="wrap_content">
                </TabWidget>

                <FrameLayout android:id="@android:id/tabcontent" 
                            android:layout_width="fill_parent" 
                            android:layout_height="fill_parent"
                            android:background="#fff"
                            android:padding="5dp">

                            <include layout="@layout/orders"/>
                            <include layout="@layout/positions"/>
                            <include layout="@layout/strategies"/>
                            <include layout="@layout/account"/>

                </FrameLayout>

            </LinearLayout>

</TabHost>

Notice the LinearLayout, it now includes the parameter android:orientation. What it was doing before was pushing everything else off screen to the right. Now it works as it should.

Note: At the office tomorrow I can test whether this still allows me to rotate the phone and have it display correctly in landscape orientation. If not, then I'll probably have to create a separate xml file for horizontal, unless someone has insights into this of course.

like image 148
zkwentz Avatar answered Sep 29 '22 23:09

zkwentz