How to change horizontal blue progress bar in holo theme

Question

hello i have a tabhost and a holo theme, i tried to change the blue color under the tab you click without any success. this is the main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="false"
android:orientation="vertical"
android:scrollbarAlwaysDrawVerticalTrack="false" >

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

          <TabHost
            android:id="@+id/main_tabhost"
            android:layout_width="match_parent"
            android:layout_height="match_parent" 
            >

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

                <TabWidget
                    android:id="@android:id/tabs"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:background="@drawable/regi_input02_tap"
                    android:showDividers="middle">

                </TabWidget>

                 <LinearLayout 
                    android:id="@+id/header_layout"
                    android:layout_width="match_parent"
                    android:layout_height="32dp"
                    android:orientation="horizontal" 
                    android:background="@android:color/background_dark">

                     <TextView
                        android:layout_width="wrap_content" 
                        android:layout_height="wrap_content"
                        android:text="Test Text"  
                        android:textSize="23dp" 
                        android:textColor="@android:color/background_light"
                     />
                </LinearLayout>


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


                    <LinearLayout
                        android:id="@+id/sports_tab"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent" >

                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/busines_tab"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent">
                        <TextView 
                             android:layout_width="fill_parent" 
                             android:layout_height="wrap_content"
                             android:text="busines"   
                        />

                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/news_tab"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent" >
                        <TextView 
                             android:layout_width="fill_parent" 
                             android:layout_height="wrap_content"
                             android:text="news"   
                        />
                    </LinearLayout>
                </FrameLayout>
            </LinearLayout>
         </TabHost>
    </LinearLayout>
</LinearLayout>

Picture Link

it look similar to the picture in the link above, all i want to do is to change the blue color stripe under tab1.

i was searched for this for about 2 days now and not found any good explanation on how to do this.

i tried to play with resources
like this:

this is the manifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.brodgate.mivzaki"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="7"
        android:targetSdkVersion="14" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/CustomTheme" >

        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >

            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

and this is the style i tried to change for the blue line without any success

styles.xml

<style name="CustomTheme" parent="android:Theme.Holo.Light">
    <item name="android:actionBarStyle">@style/ActionBar</item>
</style>

<style name="ActionBar" parent="android:style/Widget.Holo.Light.ActionBar">
    <item name="android:background">@color/action_bar_background</item>
    <item name="android:showDividers">beginning</item>
    <item name="android:divider">@color/action_bar_divider</item>
</style>

all i want is to change the line color, help will be appreciated.

Answer 1

Since you have a TabHost it's a lot more complicated than if you were using the ActionBar's tabs. The solution we settled for our app was to customize the frameworks 9-patch images for the tab indicator. Since there doesn't seem to be a way to reference a custom tab indicator, we had to replicate the tab view as well and use that when we create the tabs for the TabHost. You'll have to download the full framework source to get some of these files. Here's what you need to do:

1) Copy the file /data/res/drawable/tab_indicator_holo.xml from the frameworks source.

2) Copy the 9-patches referenced in tab_indicator_holo.xml and modify them to fit your application. You'll need the following files for each density you want to include:

• tab_selected_pressed_holo.9.png
• tab_unselected_pressed_holo.9.png
• tab_selected_focused_holo.9.png
• tab_unselected_focused_holo.9.png
• tab_selected_holo.9.png
• tab_unselected_holo.9.png

3) Create a custom tab style:

<style name="MyCustomTabView" parent="@android:style/Widget.Holo.Tab">
    <item name="android:background">@drawable/tab_indicator_holo</item>
</style>

4) Create a copy of the tab view layout from the framework:

<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2011 The Android Open Source Project

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="?android:attr/actionBarSize"
    android:orientation="horizontal"
    style="@style/MyCustomTabView">

    <ImageView
        android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:paddingTop="12dip"
        android:paddingBottom="12dip"
        android:paddingLeft="12dip"
        android:paddingRight="12dip"
        android:visibility="gone"/>

    <TextView
        style="@android:style/Widget.Holo.ActionBar.TabText"
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:visibility="gone"/>

</LinearLayout>

5) The final step is in your activity's code, when you create the tabs, you set the indicator to a view you create from the above layout. This is what it could look like (this is Tabs1.java from the ApiDemos example app modifided to create the custom indicator view):

/*
 * Copyright (C) 2008 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

package com.example.android.apis.view;

import android.app.TabActivity;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;
import android.view.LayoutInflater;

import com.example.android.apis.R;

/**
 * An example of tabs that uses labels ({@link TabSpec#setIndicator(CharSequence)})
 * for its indicators and views by id from a layout file ({@link TabSpec#setContent(int)}).
 */
public class Tabs1 extends TabActivity {

    private View createTabIndicator(Drawable icon, String title) {
        if (mInflater == null) {
            mInflater = getLayoutInflater();
        }

        View view = mInflater.inflate(R.layout.tab_view, null);

        if (icon != null) {
            ImageView imageView = (ImageView) view.findViewById(R.id.icon);
            imageView.setImageDrawable(icon);
            imageView.setVisibility(View.VISIBLE);
        }

        if (title != null) {
            TextView textView = (TextView) view.findViewById(R.id.title);
            textView.setText(title);
            textView.setVisibility(View.VISIBLE);
        }

        return view;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        TabHost tabHost = getTabHost();

        LayoutInflater.from(this).inflate(R.layout.tabs1, tabHost.getTabContentView(), true);

        tabHost.addTab(tabHost.newTabSpec("tab1")
                .setIndicator(createTabIndicator(null, "tab1"))
                .setContent(R.id.view1));
        tabHost.addTab(tabHost.newTabSpec("tab2")
                .setIndicator(createTabIndicator(null, "tab2"))
                .setContent(R.id.view2));
        tabHost.addTab(tabHost.newTabSpec("tab3")
                .setIndicator(createTabIndicator(null, "tab3"))
                .setContent(R.id.view3));
    }
}

If the exact Holo look isn't a requirement for you, this could be simplified a bit. Hope this helps!