Question

I have made a tabhost. Now the problem is I can not change the tabIndicator's background and the text color. I have seen some tutorial and some solution for my problem,,, but I could not understand them how to use that. I have attached my app's picture. It will make you clear about my problem.

enter image description here

here is my activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.shockwaveplayer.MainActivity"
    tools:ignore="MergeRootFrame"
    android:background="@drawable/drk9" >

    <TabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="9dp" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <TabWidget
                android:id="@android:id/tabs"
                style="@style/MyTheme"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

            </TabWidget>

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

                <LinearLayout
                    android:id="@+id/tab1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical" >
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/tab2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical" >
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/tab3"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical" >
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/tab4"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical" >
                </LinearLayout>
            </FrameLayout>
        </LinearLayout>
    </TabHost>

    <ListView
        android:id="@+id/listView1"
        android:layout_width="wrap_content"
        android:layout_height="242dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_below="@android:id/tabhost"
        android:divider="#b5b5b5"
        android:listSelector="@drawable/list_selector" >

    </ListView>

</RelativeLayout>

and my mainActivity.java

package com.example.shockwaveplayer;

import java.util.ArrayList;

import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBar;
import android.support.v4.app.Fragment;
import android.annotation.SuppressLint;
import android.content.Context;
import android.content.Intent;
import android.database.Cursor;
import android.graphics.Color;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.WindowManager;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;
import android.widget.TextView;
import android.os.Build;
import android.provider.MediaStore;

@SuppressLint("NewApi") public class MainActivity extends ActionBarActivity{

    Context context;
    View decorView;
    TabHost tab;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        context = this;
        ArrayList<String> alv = new ArrayList<String>();
        String selection = MediaStore.Audio.Media.IS_MUSIC + " != 0";
        String[] projection = { 
                MediaStore.Audio.Media._ID,
                MediaStore.Audio.Media.ARTIST, 
                MediaStore.Audio.Media.TITLE,
                MediaStore.Audio.Media.DATA,
                MediaStore.Audio.Media.DISPLAY_NAME,
                MediaStore.Audio.Media.DURATION };
        @SuppressWarnings("deprecation")
        Cursor cursor = this.managedQuery(
                MediaStore.Audio.Media.EXTERNAL_CONTENT_URI, projection,
                selection, null, null);
        @SuppressWarnings("rawtypes")
//      final ArrayAdapter adapter = new ArrayAdapter<String>(this,
//              R.layout.list_row,R.id.title,alv);
        ListView lv = (ListView) findViewById(R.id.listView1);
        tab = (TabHost) findViewById(android.R.id.tabhost);
        tab.setup();
        TabSpec pec = tab.newTabSpec("assignments_tab");
        TabSpec pec2 = tab.newTabSpec("assignments_tab");
        TabSpec pec3 = tab.newTabSpec("assignments_tab");
        TabSpec pec4 = tab.newTabSpec("assignments_tab");

        pec.setContent(R.id.tab1);
        pec2.setContent(R.id.tab2);
        pec3.setContent(R.id.tab3);
        pec4.setContent(R.id.tab4);
        pec.setIndicator("album");
        pec2.setIndicator("artist");
        pec3.setIndicator("songs");
        pec4.setIndicator("playing");
        tab.addTab(pec);
        tab.addTab(pec2);
        tab.addTab(pec3);
        tab.addTab(pec4);   
        Property p = new Property(context,cursor);
        lv.setAdapter(p);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {

        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

    /**
     * A placeholder fragment containing a simple view.
     */
    public static class PlaceholderFragment extends Fragment {

        public PlaceholderFragment() {
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            View rootView = inflater.inflate(R.layout.fragment_main, container,
                    false);
            return rootView;
        }
    }

}

How can I change the color? Any help or suggestion?

Was it helpful?

Solution

Try to use like following

TabWidget tabWidget = getTabWidget();
TabHost tab = getTabHost();

tab.setOnTabChangedListener(new OnTabChangeListener() {

    public void onTabChanged(String arg0) {
        for (int i = 0; i < tab.getTabWidget().getChildCount(); i++) {
            tab.getTabWidget().getChildAt(i)
                        .setBackgroundResource(R.drawable.tab_selected); // unselected
        }
        tab.getTabWidget().getChildAt(tab.getCurrentTab())
                    .setBackgroundResource(R.drawable.tab_unselected); // selected

    }
});


Intent intent = new Intent(FromClass.this,
            ToClass.class);
TabSpec tabpiechartActivity = tab.newTabSpec("Name")
            .setIndicator(prepareIndicator("Name"))
            .setContent(intent);

and your prepareIndicator will be

private View prepareIndicator(String string) {
    View view = LayoutInflater.from(this).inflate(R.layout.customtab, null);
    // ImageView iv = (ImageView) view.findViewById(R.id.TabImageView);
    TextView tv = (TextView) view.findViewById(R.id.tabText);
    // iv.setImageResource(resId);
    tv.setText(string);
    return view;
}

And your res/layout/customtab xml is:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/tab_selected"
android:orientation="vertical" >

<TextView
    android:id="@+id/tabText"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    android:textColor="#ffffff"
    android:textSize="15dp" />

</LinearLayout>

And res/drawable/tab_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
    android:angle="225"
    android:endColor="#11029E"
    android:startColor="#DD000000" />
<corners
    android:bottomLeftRadius="0dp"
    android:bottomRightRadius="7dp"
    android:radius="0.1dp"
    android:topLeftRadius="0dp"
    android:topRightRadius="7dp" />

</shape>

And res/drawable/tab_selected.tab_unselected.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >

<stroke
    android:width="1dp"
    android:color="#FFFFFFFF" />

<gradient
android:angle="225"
android:endColor="#0F7801"
android:startColor="#DD000000" />

<corners
    android:bottomLeftRadius="0dp"
    android:bottomRightRadius="7dp"
    android:radius="0.1dp"
    android:topLeftRadius="0dp"
    android:topRightRadius="7dp" />

</shape>

I hope this will help you

OTHER TIPS

You should achieve this by styling your tabhost. These two answers can guide you through:

  1. Android remove space between tabs in tabwidget
  2. How to change the font size of tabhost in android

But what you need is essentially apply a theme to your tab widget, and add your color of choice / color state drawable (if you want the color to change on focus / press / etc) to the widget's text appearance style:

    <style name="CustomTheme" parent="@android:style/Theme">
        <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:color">@color/red</item>
    </style>

Here is a code snippet which i use to customize my Tab Color and bg :-

View view= createTabView(mContext,TAB_1_TAG);
mTabHost.addTab(mTabHost.newTabSpec(TAB_1_TAG).setIndicator(view), UpcomingTaskFragment.class, null);


private static View createTabView(final Context context, final String text) {
    View view = LayoutInflater.from(context).inflate(R.layout.dashboard_fragment_tabs_bg, null);
    TextView tv = (TextView) view.findViewById(R.id.dashboard_tab_heading);
    tv.setText(text);
    return view;
}

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

<TextView
    android:id="@+id/dashboard_tab_heading"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/tab_text_bg"
    android:gravity="center"
    android:paddingBottom="@dimen/seven"
    android:paddingTop="@dimen/seven"
    android:shadowColor="@android:color/white"
    android:shadowDx="1.0"
    android:shadowDy="1.0"
    android:shadowRadius="2.5"
    android:textColor="@color/dashboard_tab_selector"
    android:textSize="@dimen/dashboard_tab_heading_text_size"
    android:textStyle="bold" />

For the parent , i use the following selector :- tab_bg_selector

    <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--  Active tab -->
    <item
        android:state_selected="true"
        android:state_focused="false"
        android:state_pressed="false"
        android:drawable="@android:color/white"
    />
    <!--  Inactive tab -->
    <item
        android:state_selected="false"
        android:state_focused="false"
        android:state_pressed="false"
        android:drawable="@drawable/tab_bg_unselected"
    />
</selector> 

For the textview text color , i use :-

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_selected="true" android:color="#0094e0"/>
    <item android:state_focused="true" android:color="#0094e0"/>
    <item android:state_pressed="true" android:color="#0094e0"/>
    <item android:color="#808080"/>

</selector>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top