Android TabHost appearance not as expected

Question

Hello , i just followed the tutorial on tabs creation from the android dev documentation and my tabs didn't turn out the way they probably should. Here is a screen on how it looks for me:

and here is how it should look like:

I found som threads that talks about putting localisation on the tabhost and make every activity follow the same configuration but it hasn't worked for me so far. Wondering if there's something i'm missing, here is my manifest file:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.koollateral.myWallet"
      android:versionCode="1"
      android:versionName="1.0">
    <application android:icon="@drawable/icon" 
                 android:label="@string/app_name">
        <activity android:name=".mywallet"
                  android:label="@string/app_name"
                  android:theme="@android:style/Theme.NoTitleBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
         <activity android:name=".homeActivity" 
                   android:label="@string/app_name"
                   android:theme="@android:style/Theme.NoTitleBar"> 
                   </activity>   
         <activity android:name=".calendarActivity" 
                   android:label="@string/app_name"
                   android:theme="@android:style/Theme.NoTitleBar"> 
                   </activity>  
    </application>


</manifest>

Answer 1

I've done this API example before, and I think all that has happened is you have swapped your images compared to the example. Note how the tab uses the negative space of the image as the contrasting colour, while you matched the negative space to the background colour. So if you go into your drawable folder and change the xml file you created for the tabs by swapping the images, it should look a little closer to the example.

Other than that, what do you think isn't right? It appears that you have done the exercise correctly.

Edit: also as a tip, you can put android:theme="@android:style/Theme.NoTitleBar"in the <application> instead of having to put it into every Activity. Then none of your activities will have the title bar.

Answer 2

There seem to be two problems. You have listed the images reversed. Meaning you have the selected and unselected images backwards. Also it looks like they are not the right size. You need to consider the dpi of the device you are targeting.

Answer 3

Hi guys since Android 2.1 the tabs are more square look, my solution was adding a selector containing images with rounded corners.

tabs.getTabWidget().getChildAt(0).setBackgroundResource(R.drawable.mytab_roundedcorner);