Customizing Text in tab title for android

Question

What my current work ::

I have designed a tab activity which has four tabs in bottom

---

snapshot

---

BreakfastLunchDinnerIndividualListOfItems.java

public class BreakfastLunchDinnerIndividualListOfItems extends TabActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.breakfast_lunch_dinner_individual_list_of_items);

        Resources res = getResources(); // Resource object to get Drawables
        TabHost tabHost = getTabHost(); // The activity TabHost
        TabHost.TabSpec spec; // Reusable TabSpec for each tab
        Intent intent; // Reusable Intent for each tab

        // Create an Intent to launch an Activity for the tab (to be reused)
        intent = new Intent().setClass(this, BLD_IndividualListOfItems_Starters.class);
        spec = tabHost.newTabSpec("STARTERS").setIndicator("Starters").setContent(intent);
        tabHost.addTab(spec);

        // Do the same for the other tabs

        intent = new Intent().setClass(this, BLD_IndividualListOfItems_MainCourse.class);
        spec = tabHost.newTabSpec("MAIN_COURSE").setIndicator("Main Course").setContent(intent);
        tabHost.addTab(spec);


        intent = new Intent().setClass(this, BLD_IndividualListOfItems_SideCourse.class);
        spec = tabHost.newTabSpec("SIDE_COURSE").setIndicator("Side course").setContent(intent);
        tabHost.addTab(spec);


        intent = new Intent().setClass(this, BLD_IndividualListOfItems_Others.class);
        spec = tabHost.newTabSpec("OTHERS").setIndicator("Others").setContent(intent);
        tabHost.addTab(spec);


        intent = new Intent().setClass(this, BLD_IndividualListOfItems_Desert.class);
        spec = tabHost.newTabSpec("DESERT").setIndicator("Deserts").setContent(intent);
        tabHost.addTab(spec);

        //set tab which one you want open first time 0 or 1 or 2
        tabHost.setCurrentTab(0);


    }

}

breakfast_lunch_dinner_individual_list_of_items.java

<?xml version="1.0" encoding="utf-8"?>
<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">

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="0dip"
            android:layout_weight="1"/>

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:layout_marginBottom="-4dp"/>

    </LinearLayout>

</TabHost>

---

Problem::

• Notice my text of second tab text is half cutout

---

What i am trying to achieve ::

Answer 1

When you define the layout_width="fill_parent" in tab widget, you're saying all of the tabs will be evenly sized, and fill their respective parent. But content inside these tabs, in your case, is not guaranteed to be even. Therefor you need to create new a TextView inside each tab, to hold the text. This will allow content wrapping specific to each tab's content.

I've provided an example XML for clarification:

<?xml version="1.0" encoding="utf-8"?>
<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">

    <FrameLayout
        android:id="@android:id/tabcontent"
        android:layout_width="fill_parent"
        android:layout_height="0dip"
        android:layout_weight="1"/>

    <TabWidget
        android:id="@android:id/tabs"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:layout_marginBottom="-4dp">

            <TextView
                android:tag="tab0"
                android:text="Starters"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                />
            <TextView
                android:tag="tab1"
                android:text="Main Course"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                />
            <TextView
                android:tag="tab2"
                android:text="Side Course"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                />
            <TextView
                android:tag="tab2"
                android:text="Others"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                />
            <TextView
                android:tag="tab2"
                android:text="Desert"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                />
    </TabWidget>
</LinearLayout>

I believe this will also require a slight modification to your java as well.