0

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?

adneal
  • 30,484
  • 10
  • 122
  • 151
Tushar Monirul
  • 4,944
  • 9
  • 39
  • 49

3 Answers3

1

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>
Community
  • 1
  • 1
rekaszeru
  • 19,130
  • 7
  • 59
  • 73
1

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

Gunaseelan
  • 14,415
  • 11
  • 80
  • 128
  • If I use your code,,, its working fine. But it is changing the tab's looking. Its becoming black and the selected tab's underline color is not showing. Just like sharp rectangle back button. Why so? I am so weak in xml. – Tushar Monirul Apr 26 '14 at 15:14
1

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>
Rahul Gupta
  • 5,275
  • 8
  • 35
  • 66