How to change theme of TabHost from Holo.Light to Dark theme

Question

I have been trying to change the theme for TabHost. So far I have got till here:

Light Tabhost Theme

I have achieved this by using the following xml:

<TabHost
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

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

    <TabWidget
    android:id="@android:id/tabs"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_weight="0"
    android:gravity="center"
    android:orientation="horizontal" />

        <FrameLayout
        android:id="@android:id/tabcontent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0" >

            <ScrollView
            android:id="@+id/scrollView02"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >
            </ScrollView>

            <ScrollView
            android:id="@+id/scrollView01"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >
            </ScrollView>               
        </FrameLayout>
</LinearLayout>

My MainActivity.java:

ContextThemeWrapper wrapper = new ContextThemeWrapper(
ActivityMain.this,
android.R.style.Theme_Holo_Light);

final LayoutInflater inflater = (LayoutInflater) wrapper
    .getSystemService(LAYOUT_INFLATER_SERVICE);                             

dialog = new Dialog(wrapper);
dialog
    .requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog
    .setContentView(R.layout.dialog_layout);

TabHost tabs = (TabHost) dialog
    .findViewById(android.R.id.tabhost);
tabs.setup();
tabs.setCurrentTab(0);

TabSpec tspec1 = tabs.newTabSpec("Tab1");
tspec1.setIndicator("SIGN UP");
tspec1.setContent(R.id.scrollView02);
tabs.addTab(tspec1);

TabSpec tspec2 = tabs.newTabSpec("Tab2");
tspec2.setIndicator("LOG IN");
tspec2.setContent(R.id.scrollView01);
tabs.addTab(tspec2);

As I'm using Dialog class for the view and integrating TabHost inside the dialog, that's why I'm using ContextThemeWrapper for this to have some theme on the Dialog.

Now, my question is that how can I change the Holo.Light theme to Dark theme. Here is the picture what I want: Dark theme for tabhost

I know that android does not have Holo.Dark theme as of now. That is only available for ActionBars. So how can I achieve this solution.

Any kind of help will be appreciated.

score 4 · Accepted Answer · answered Jun 27 '13 at 07:13

This will work:

//Changing the tabs background color and text color on the tabs
for(int i=0;i<tabs.getTabWidget().getChildCount();i++) 
{ 
    tabs.getTabWidget().getChildAt(i).setBackgroundColor(Color.BLACK);
    TextView tv = (TextView) tabs.getTabWidget().getChildAt(i).findViewById(android.R.id.title); 
                    tv.setTextColor(Color.parseColor("#ffffff"));
}

And for the indicator, have a layout like this beneath tabwidget

 <LinearLayout
            android:id="@+id/tab_indicator"
            android:layout_width="fill_parent"
            android:layout_height="5dp"
            android:background="#bdbdbd" >

            <LinearLayout
                android:id="@+id/tab_indicator_left"
                android:layout_width="wrap_content"
                android:layout_height="5dp"
                android:layout_weight="1"
                android:background="#f44b3b" >
            </LinearLayout>

            <LinearLayout
                android:id="@+id/tab_indicator_right"
                android:layout_width="wrap_content"
                android:layout_height="5dp"
                android:layout_weight="1"
                android:background="#bdbdbd" >
            </LinearLayout>
        </LinearLayout>

And change the background color of indicator like this based on the tab selection.

tabindicator1.setBackgroundColor(Color
                            .parseColor("#f44b3b"));

I would suggest keeping the layout resources and code separate. Colors and styling should be defined in the layout files to get a cleaner code. — Kalel Wade, Feb 21 '14 at 21:54

score 2 · Answer 2 · edited May 23 '17 at 12:19

2

See the link it will helpful How to change default color to Tab Host

and also refer this it will helpful

http://joshclemm.com/blog/?p=136

edited May 23 '17 at 12:19

Community

1
1

answered Jun 27 '13 at 07:31

Arut

940
14
32

score 1 · Answer 3 · answered Feb 21 '14 at 21:53

I would suggest using as much of android's source as possible. It really makes things cleaner in my opinion. I added a basic example of what I used below. Not perfect but closer than anything else I was able to fine and cleaner than most examples. https://github.com/android/platform_frameworks_base/tree/master/core/res/res

For instance, for the holo theme, use this. https://github.com/android/platform_frameworks_base/blob/master/core/res/res/drawable/tab_indicator_holo.xml and get all the resources and put them into your project. After that, use the link http://joshclemm.com/blog/?p=136 and modify it to work as you want.

Your Layout file

<TabHost
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tabHost">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<TabWidget
    android:id="@android:id/tabs"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="0dip"
    android:layout_marginRight="0dip"
    android:background="#000">
</TabWidget>

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

</FrameLayout>

Code - same as josh clemm

        mTabHost=(TabHost)getActivity().findViewById(R.id.tabHost);
    mTabHost.setup();
    //mTabHost.getTabWidget().setDividerDrawable(R.drawable.tab_divider);

    setupTab(new TextView(getActivity()), "Tab 1");
    setupTab(new TextView(getActivity()), "Tab 2");
    setupTab(new TextView(getActivity()), "Tab 3");


private void setupTab(final View view, final String tag) {
    View tabview = createTabView(mTabHost.getContext(), tag);
    TabHost.TabSpec setContent = mTabHost.newTabSpec(tag).setIndicator(tabview).setContent(new TabHost.TabContentFactory() {
        public View createTabContent(String tag) {return view;}
    });
    mTabHost.addTab(setContent);
}

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

And then tab_bg file

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:id="@+id/tabsLayout" android:layout_width="fill_parent"
          android:layout_height="fill_parent" android:background="@drawable/tab_selector"
          android:padding="10dip" android:gravity="center" android:orientation="vertical">
<TextView android:id="@+id/tabsText" android:layout_width="wrap_content"
          android:layout_height="wrap_content" android:text="Title"
          android:textSize="15dip" android:textColor="@android:color/white" />
</LinearLayout>

score 1 · Answer 4 · answered May 25 '15 at 17:57

1

In res/values/styles.xml, change the theme parent to "android:Theme.Holo" instead of "android:Theme.Holo.Light"

This will change the entire app's theme obviously, but you can also use different styles for different activities.

answered May 25 '15 at 17:57

Rishabh Tatiraju

172
1
10

How to change theme of TabHost from Holo.Light to Dark theme

4 Answers4