0

I have a very simple problem - the tab text on my TabHost is not aligning properly.

enter image description here

Note "Settings" is below the rest. Previously this (very old) app was targeting API 9, and the tabs displayed with text and an icon and everything was fine. I recently updated the target and the look and feel changed (which is fine) and the text is not aligned right.

Main layout:

<?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:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:paddingBottom="0dp"/>
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    </LinearLayout>
</TabHost>

Main activity:

public class MainActivity extends TabActivity {

// ...snip...

final TabHost host = getTabHost();

        host.addTab(host.newTabSpec(TabIndex.HOME.name())
                .setIndicator(TabIndex.HOME.text, AppCompatResources.getDrawable(this, R.drawable.home_icon) )
                .setContent(new Intent(this, MainMenu.class)));
        host.addTab(host
                .newTabSpec(TabIndex.SEARCH.name())
                .setIndicator(TabIndex.SEARCH.text, AppCompatResources.getDrawable(this, R.drawable.find_icon))
                .setContent(m_propGroupIntent));
        host.addTab(host
                .newTabSpec(TabIndex.SETTINGS.name())
                .setIndicator(TabIndex.SETTINGS.text, AppCompatResources.getDrawable(this, R.drawable.settings))
                .setContent(new Intent(this, SettingsScreen.class)));
        host.addTab(host
                .newTabSpec(TabIndex.CALL.name())
                .setIndicator(TabIndex.CALL.text,
                        AppCompatResources.getDrawable(this, R.drawable.phone_icon))
                .setContent(new Intent(this, ContactUs.class)));

Build file excerpts:

compileSdkVersion = 25
buildToolsVersion = "23.0.3"
defaultConfig {
        minSdkVersion 14
        targetSdkVersion 25

        testInstrumentationRunner "com.redshedtechnology.common.MultiDexAndroidJUnitRunner"
        testFunctionalTest true

        multiDexEnabled true
    }

I tried changing the text size:

<item name="android:tabWidgetStyle">@style/CustomTabWidget</item>
    </style>
    <style name="CustomTabWidget" parent="@android:style/Widget.TabWidget">
        <item name="android:textAppearance">@style/CustomTabWidgetText</item>
    </style>
    <style name="CustomTabWidgetText"
        parent="@android:style/TextAppearance.Widget.TabWidget">
        <item name="android:textSize">12sp</item>
    </style>

This fixed the alignment issue but completely screwed up the tab display.

enter image description here

EDIT: minimal and complete example here: https://dl.dropboxusercontent.com/u/76707225/MyApplication.zip

This doesn't use the custom tab layout but the default. It exhibits exactly the behavior my app does, and has almost no code or layout in it at all, very simple. If you want to try it, it's a zipped Android Studio project.

nasch
  • 5,330
  • 6
  • 31
  • 52
  • How do your drawables look like? Format, Size, ...? – MABVT Jan 06 '17 at 18:10
  • 68x32 PNG. I'll see what happens without them since they're not displaying anyway. – nasch Jan 06 '17 at 18:11
  • I removed the drawables from the `setIndicator` calls and it didn't change anything. – nasch Jan 06 '17 at 18:17
  • I think the first thing to evaluate is, why the tab's icons are not showing. Please read this great answer and check, whether you can make the icons appear and whether they're as well "offsetted to the bottom" of the tab. http://stackoverflow.com/a/11379708/3754223 If the icons appear to be OK, I would continue to evaluate, whether it could be due to the length of the string and the available space. – MABVT Jan 06 '17 at 18:23
  • Actually I prefer the tabs without images anyway, so I'd like to keep the display the way it is and just fix the alignment. I'll see what that answer has to say and maybe a custom layout for the text is necessary. – nasch Jan 06 '17 at 18:25
  • OK. Reduce the textsize of your tab's text using a style to check on the text-size being a factor. – MABVT Jan 06 '17 at 18:27
  • I tried a custom tab layout, but it resulted in a blank white screen with no errors. I will try to produce a minimal example. @MABVT I updated the question with the results of the text size change. – nasch Jan 07 '17 at 18:54

0 Answers0