Sean Pan
Sean Pan

Reputation: 503

How can I make my tabs smaller?

I am using a tab widget to simulate the menus in the iphone. Here is a picture of my screen enter image description here

As you can see the words don't fit within the individual boxes. How can I make the text size smaller for each widget? Also Is there a way to scale down the pictures inside the tabs so they don't look so crammed? So far the icons all "fit to size" so it tries to occupy as much space as possible.

Thanks for the help, see below for my code on the tabs

@Override
public void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);

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

    intent = new Intent().setClass(this, ImTracking.class);
    spec = tabHost
            .newTabSpec("imtracking")
            .setIndicator("I\'m Tracking",
                    res.getDrawable(R.drawable.mapbutton))
            .setContent(intent);
    tabHost.addTab(spec);
    intent = new Intent().setClass(this, TrackingMe.class);
    spec = tabHost
            .newTabSpec("trackingme")
            .setIndicator("Tracking Me",
                    res.getDrawable(R.drawable.friends)).setContent(intent);
    tabHost.addTab(spec);
    intent = new Intent().setClass(this, Settings.class);
    spec = tabHost
            .newTabSpec("settings")
            .setIndicator("Settings",
                    res.getDrawable(R.drawable.settingsicon))
            .setContent(intent);
    tabHost.addTab(spec);
    intent = new Intent().setClass(this, Review.class);
    spec = tabHost.newTabSpec("review")
            .setIndicator("Review", res.getDrawable(R.drawable.like))
            .setContent(intent);
    tabHost.addTab(spec);
    intent = new Intent().setClass(this, help.class);
    spec = tabHost.newTabSpec("help")
            .setIndicator("Help", res.getDrawable(R.drawable.help))
            .setContent(intent);
    tabHost.addTab(spec);
    tabHost.setCurrentTab(0);

EDIT here is the xml tab_layout.xml

<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"
        android:padding="0dp">

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

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

    </LinearLayout>

</TabHost>

tab.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center"
android:orientation="vertical" android:padding="0dp">
<ImageView android:id="@+id/tab_icon" android:layout_width="30dp"
    android:layout_height="30dp" android:scaleType="fitCenter" />
<TextView android:id="@+id/tab_text" android:layout_width="wrap_content"
    android:layout_height="wrap_content" android:singleLine="true"
    android:textStyle="bold" android:gravity="center_horizontal"
    android:textSize="10sp" android:padding="3dip" android:ellipsize="marquee"
     />
</LinearLayout>

Upvotes: 1

Views: 2358

Answers (1)

Kevin Parker
Kevin Parker

Reputation: 17206

You could use this implementation of a TabWidget, its custom tabs! You can edit the Layout and Views associated with these custom tabs easily.

Be warned, these tabs don't use the system background for the tab colour when selected / not selected and use the grey look you see in the image below.

http://code.google.com/p/android-custom-tabs/

Android custom tabs

Upvotes: 3

Related Questions