Jesper Martensson
Jesper Martensson

Reputation: 1248

How to change color/remove label/border under Android-tabs?

Below is my Tab class. I am trying to change the background-color of the tabs, when being selected and unselected. If you try to customize your tabs with your own colors (which I have done), why is not the border under the unselected-tabs having the same color as the selected tab? Let me show you with a picture: http://tinypic.com/view.php?pic=335e6ae&s=6

To the left in the picture you have the real look in the emulator. To the right you have my photoshoped desired look. As you can see in the emulator, the border under the unselected-tabs still has the standard grey color? Is it possible to change or remove this border/label? How the heck do I change it?

At the moment I customize my tabs through void initTabsAppearance() method where I set the background in a xml-file with a selector. Nothing special or fansy pansy...

public class Tabs extends TabActivity
{
private static final String TAG = "TabHostActivity";
private boolean mHaveShownStartDialog = false;


@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.tab_host);
setOnCreatePreferences();

try
{

    addTab(getString(R.string.Search), R.drawable.searchtab, SearchTask.class );
    addTab(getString(R.string.Bookmarks), R.drawable.favoritetab, Bookmarks.class );
    addTab(getString(R.string.Latest), R.drawable.historytab, Latest.class );
    addTab(getString(R.string.QAndA), R.drawable.forumtab, LatestFeedback.class );

    getTabHost().setCurrentTab( 0 );
    TabWidget widget = getTabHost().getTabWidget();


    this.initTabsAppearance(widget);


}
catch(Exception e)
{
    Log.e(TAG, e.getMessage());
}
}

private void addTab( CharSequence label, int drawable_id, Class<?> c ) 
{
TabHost.TabSpec spec = getTabHost().newTabSpec("tab" + " "+ label);

spec.setIndicator( label, getResources().getDrawable( drawable_id ) );

spec.setContent( new Intent().setClass( this, c ) );

getTabHost().addTab( spec );
}

@Override
public boolean onCreateOptionsMenu(Menu menu) 
{
MenuInflater inflater = getMenuInflater();
inflater.inflate( R.menu.tabs_menu, menu );
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) 
{
switch ( item.getItemId() ) 
{
    case R.id.tabs_menu_options_item:
        //startActivityForResult( new Intent( this, Options.class ) , 0 ); 
        return true;

    default: return super.onOptionsItemSelected(item);
}
}

private void initTabsAppearance(TabWidget tabWidget){

for(int i=0; i<tabWidget.getChildCount(); i++)

    tabWidget.getChildAt(i).setBackgroundResource(R.drawable.tabcolors); //unselected
//((TextView)  tabWidget.getChildAt(getTabHost().getCurrentTab())).setTextColor(0xffffffff);
 //getTabHost().getTabWidget().getChildAt(getTabHost().getCurrentTab()).setBackgroundColor(Co lor.parseColor("#000000")); //selected
}

private void setOnCreatePreferences()
{
SharedPreferences preferences = PreferenceManager.getDefaultSharedPreferences( getBaseContext() );

boolean mUseStartDialog = preferences.getBoolean( "use_dialog", true );
if( mUseStartDialog ) 
{
    if( !mHaveShownStartDialog )
    {
        mHaveShownStartDialog = true;
        startActivity( new Intent( this, WelcomeDialog.class ) );
    }
}
}

}

tabcolors.xml

 <?xml version="1.0" encoding="utf-8"?>

 <selector xmlns:android="http://schemas.android.com/apk/res/android">  

 <item android:state_selected="true"     
 android:drawable="@color/tabWhite"/>

 <item android:state_pressed="true"  
 android:drawable="@color/tabBlack"/>

 <item android:drawable="@color/tabBlack"/> 

 </selector>

Upvotes: 0

Views: 1111

Answers (1)

Kostas
Kostas

Reputation: 2474

It's called tabStrip. To remove it you can do

tabWidget.setStripEnabled(false);

Documentation on how to customize it can be found here: http://developer.android.com/reference/android/widget/TabWidget.html#attr_android:tabStripEnabled

Upvotes: 1

Related Questions