androidandroid-tabhostandroid-dialogandroid-themeandroid-holo-everywhere

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


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.


Solution

  • 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"));