Android: Make tab gradients when selected and when deselected, tabwidget

Question

Hi All,

I have a problem with my tab style. I would like my tab style will look like this.

http://www.technobuzz.net/wp-content/uploads/2010/02/seesmic-android-260-208.png Something goes wrong in my xml ...

1. The style shows only the colors When selected from the comment.
2. When I use a white icon is the text (text setindicator) white. This also applies to the gray icon.

How can I fix this.

Does anyone have the same tabstyle as the link above and want to share with me ..

Thanks a lot!!

The style Code

 <selector
    xmlns:android="http://schemas.android.com/apk/res/android"&gt;

<!--  Onclick  -->
    <item android:state_pressed="true" >
        <shape>
            <gradient
                android:startColor="#000000"
                android:endColor="#000000"
                android:angle="270" />
            <stroke
                android:width="3dp"
                android:color="#2e2e2e" />
            <corners
                android:radius="3dp" />

        </shape>
    </item>

<!-- Don't work  -->
    <item android:state_focused="true" >
        <shape>
            <gradient
                android:endColor="#802222"
                android:startColor="#B02222"
                android:angle="270" />
            <stroke
                android:width="3dp"
                android:color="#2e2e2e" />
            <corners
                android:radius="3dp" />

        </shape>
    </item>

<!--  When selected  -->
    <item>        
        <shape>

           <gradient
                android:startColor="#e8e8e8"
                android:centerColor="#f8f8f8"
                android:endColor="#f8f8f8"
                android:textColor="#ea9d32"
                android:height="1px"
                android:angle="0" />
            <stroke
                android:width="3dp"
                android:color="#2e2e2e" />
            <corners
                android:radius="3dp" />

        </shape>
    </item>
</selector>

I can't create (little android xml experience) an style.. Does anyone have a tab style for what looks like the link. Thnx!

Answer 1

The new (as of a few weeks ago maybe) Foursquare app has customized tabs that are similar to the ones in your screenshot.

Fortunately, you can take a look at the source code for that app here: http://code.google.com/p/foursquared/ (the screenshots on that site are out of date - the best place to see the tabs in action is to download the app itself).

Answer 2

public class tabBackgroundChanged extends TabActivity implements TabHost.TabContentFactory {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    //setContentView(R.layout.main);
    TabHost tabHost = getTabHost();


    tabHost.addTab(tabHost.newTabSpec("tab1")
            .setIndicator("tab1", getResources().getDrawable(R.drawable.icon))
            .setContent( this));
    tabHost.addTab(tabHost.newTabSpec("tab2")
            .setIndicator("tab2")
            .setContent( this));
    tabHost.addTab(tabHost.newTabSpec("tab3")
            .setIndicator("tab3")
            .setContent( this));

    TabWidget tw = getTabWidget(); 
    for (int i = 0; i < tw.getChildCount(); i++) { 
            View v = tw.getChildAt(i); 
            v.setBackgroundDrawable(getResources().getDrawable(R.drawable.tab_home)); 
          }
}

public View createTabContent(String tag) {
    final TextView tv = new TextView(this);
    tv.setText("Content for tab with tag " + tag);
    return tv;
}

tab_home is your style Code about selector