Android: Anyone wants to take a shot at suggesting a better layout?

Question

Hi,

I never designed UIs (more of a middleware guy) before so I apologize if the question is stupid. I am designing a UI to look something like the following:

---

ImageView ImageView

TabHost

Tab 0 ------ Tab 1 ------ Tab 2

-----INSIDE EACH TAB-----

TextView

ListView

- Consists of ImageView TextView

---

The problem is I think I am following a very inefficient way of doing the whole stuff. The onCreate method is as follows:

CODE:

public void onCreate(Bundle savedInstanceState) { 

          super.onCreate(savedInstanceState); 
          setContentView(R.layout.main); 

          TabHost mTabHost = getTabHost(); 

          Drawable Tab1Icon = getResources().getDrawable(R.drawable.tab1_icon); 
          Drawable Tab2Icon = getResources().getDrawable(R.drawable.tab2_icon); 
          Drawable Tab3Icon = getResources().getDrawable(R.drawable.tab3_icon); 

          mTabHost.addTab(mTabHost.newTabSpec("Tab1").setIndicator("Tab 1", Tab1Icon).setContent(new Intent(this, Tab1.class))); 
          mTabHost.addTab(mTabHost.newTabSpec("Tab2").setIndicator("Tab 2", Tab1Icon).setContent(new Intent(this, Tab2.class))); 
          mTabHost.addTab(mTabHost.newTabSpec("Tab3").setIndicator("Tab 3", Tab1Icon).setContent(new Intent(this, Tab3.class))); 

          mTabHost.setCurrentTab(0); 
     }

This program crashes on CupCake (v1.5) complaining about StackOverflowException but runs well on Donut (v1.6). This is my main.xml:

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:background="@color/application_background" 
    > 

    <TableLayout 
               android:id="@+id/TableLayout01" 
               android:layout_width="fill_parent" 
               android:layout_height="fill_parent" 
               android:stretchColumns="0" 
               android:background="@color/application_background"> 

          <TableRow> 
               <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
              android:orientation="horizontal" 
              android:layout_width="fill_parent" 
              android:layout_height="fill_parent"> 
               <ImageView id="@+id/picview1" 
                  android:layout_width="wrap_content" 
                  android:layout_height="wrap_content" 
                  android:src="@drawable/leftlogo" 
                  android:paddingRight="105sp" 
                /> 
                <Button 
                    android:id="@+id/picview2" 
                   android:layout_width="wrap_content" 
                   android:layout_height="wrap_content" 
                   android:background="@drawable/rightlogo" 
                   /> 
          </LinearLayout> 
          </TableRow> 

          <TableRow> 
               <TabHost xmlns:android="http://schemas.android.com/apk/res/android" 
                   android:id="@android:id/tabhost" 
                   android:layout_width="fill_parent" 
                   android:layout_height="fill_parent"> 
                   <LinearLayout 
                       android:orientation="vertical" 
                       android:layout_width="fill_parent" 
                       android:layout_height="fill_parent"> 
                       <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"> 

                    </FrameLayout> 
                   </LinearLayout> 
               </TabHost> 
          </TableRow> 

     </TableLayout> 
</LinearLayout>

Any suggestions regarding the design please?

Thanks

Answer 1

1. If you are getting StackOverflowExceptions, your UI is too complex. Fire up hierarchyviewer and find ways to remove some layers.
2. One way to simplify everything and remove layers is to supply the tab contents as Views, not Intents pointing to Activities.
3. You can just pass the R.drawable ID of the icon to setIndicator().
4. You should not have the TableLayout inside a LinearLayout (why bother with the LinearLayout?) or a LinearLayout inside of a TableRow (TableRow is a LinearLayout, for all intents and purposes). Please consider dumping the entire TableLayout/TableRow/LinearLayout stuff and just use a single RelativeLayout.