title: tablayout design on android
body: <p>I need the <strong>tabbar background is set white</strong>.  Also I need to have the <strong>selected tab background color set to pink</strong> and the remaining tabs (<strong>unselected</strong> tab) background color set to <strong>blue</strong>. My existing code is shown below.  What do I need to change in it?</p>
  
  <p><strong>main.xml:</strong> </p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;TabHost xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@android:id/tabhost"
  android:background="#ffffffff"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"&gt;
  &lt;LinearLayout
      android:orientation="vertical"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:background="#ffffffff" &gt;
      &lt;TabWidget
          android:id="@android:id/tabs"
          android:background="@drawable/tabicon"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content" /&gt;
      &lt;FrameLayout
          android:id="@android:id/tabcontent"
          android:layout_width="fill_parent"
          android:background="#ffffffff"
          android:layout_height="fill_parent"/&gt;
  &lt;/LinearLayout&gt;
  &lt;/TabHost&gt;
  </code></pre>
  
  <p><strong>tab_indicator.xml:</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;selector xmlns:android="http://schemas.android.com/apk/res/android"&gt;
  &lt;!-- Non focused states --&gt;
  &lt;item android:state_focused="false" android:state_selected="false"
      android:state_pressed="false"
      android:drawable="@drawable/tab_unselected_v4" /&gt;
  &lt;item android:state_focused="false" android:state_selected="true"
      android:state_pressed="false"
      android:drawable="@drawable/tab_selected_v4" /&gt;
  
  &lt;!-- Focused states --&gt;
  &lt;item android:state_focused="true" android:state_selected="false"
      android:state_pressed="false"
      android:drawable="@drawable/tab_focus" /&gt;
  &lt;item android:state_focused="true" android:state_selected="true"
      android:state_pressed="false"
      android:drawable="@drawable/tab_focus" /&gt;
  
  &lt;!-- Pressed --&gt;
  &lt;item android:state_pressed="true"
      android:drawable="@drawable/tab_press" /&gt;
  &lt;/selector&gt;
  </code></pre>
  
  <p><strong>tab_unselected_v4.xml:</strong></p>
  
  <pre><code>  &lt;?xml version="1.0" encoding="utf-8"?&gt;
     &lt;selector xmlns:android="http://schemas.android.com/apk/res/android" &gt;
  &lt;item android:state_pressed="true"&gt;
      &lt;shape&gt;
          &lt;gradient android:startColor="#FFFFFF"
              android:endColor="#FFFFFF"
              /&gt;
  
      &lt;/shape&gt;
  &lt;/item&gt;
  &lt;/selector&gt;
  </code></pre>
  
  <p><strong>tab_focus.xml:</strong></p>
  
  <pre><code> &lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle"&gt;
  &lt;!-- Gradient BgColor for listrow Selected --&gt;
  &lt;gradient
    android:startColor="#5e8fb7"
    android:centerColor="#5e8fb7"
    android:endColor="#5e8fb7"
    /&gt;
   &lt;/shape&gt;
  </code></pre>
  
  <p><strong>tab_selected.xml:</strong></p>
  
  <pre><code> &lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle"&gt;
  &lt;!--  Gradient Bg for listrow --&gt;
  &lt;gradient
    android:startColor="#5e8fb7"
    android:centerColor="#5e8fb7"
    android:endColor="#5e8fb7"
    /&gt;
  &lt;/shape&gt;
  </code></pre>
  
  <p><strong>tab_press.xml:</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle"&gt;
  &lt;!--  Gradient Bg for listrow --&gt;
  &lt;gradient
    android:startColor="#FFFFFF"
    android:centerColor="#FFFFFF"
    android:endColor="#FFFFFF"
     /&gt;
   &lt;/shape&gt;
  </code></pre>
  
  <p><strong>EDIT:</strong> 
  i have added below code.now my background color is change white.but my selected item and unselected item color is not set the needed color.please help me.give me some good solutions.</p>
  
  <p><strong>tabicon.xml:</strong></p>
  
  <pre><code> &lt;?xml version="1.0" encoding="utf-8"?&gt;
   &lt;selector xmlns:android="http://schemas.android.com/apk/res/android" &gt;
  &lt;item android:state_pressed="true"&gt;
      &lt;shape&gt;
          &lt;gradient android:startColor="#FFFFFF"
              android:endColor="#FFFFFF"
              android:angle="90" 
                   /&gt;
                   &lt;/shape&gt;
                   &lt;/item&gt;
           &lt;item android:state_focused="true"&gt;
      &lt;shape&gt;
          &lt;gradient android:startColor="#FFFFFF"
              android:endColor="#FFFFFF"
              android:angle="90"  /&gt;
  
      &lt;/shape&gt;
  &lt;/item&gt;
                 &lt;/selector&gt;
  </code></pre>
  
  <p>also added below java code:</p>
  
  <pre><code>  for(int i=0;i&lt;tabHost.getTabWidget().getChildCount();i++)
     {
  
    tabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.tab_indicator);
      }
     tabHost.getTabWidget().setCurrentTab(0);
  
     tabHost.getTabWidget().getChildAt(0).setBackgroundResource(R.drawable.tab_indicator);
  
       }
  
     public void onTabChanged(String tabId) {
  
     // TODO Auto-generated method stub
      for(int i=0;i&lt;tabHost.getTabWidget().getChildCount();i++)
         {
     tabHost.getTabWidget().getChildAt(i).setBackgroundResource(R.drawable.tab_indicator);
      }
    tabHost.getTabWidget().getChildAt(tabHost.getCurrentTab()).setBackgroundResource(R.drawable.tab_indicator);
      }
        }
  </code></pre>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Here i have to set the selected background color and unselected background color is successfully.</p>
  
  <p>Now i wish to need the one implementation here.</p>
  
  <p>The <strong>first tab width is larger than second and third tab width</strong>.how can i do this????
  please help me.</p>
  
  <p>Here the dashboard tab is larger than order and customer tab.please help me.how can i design and develop this.
  This is my output:
  <img src="https://i.stack.imgur.com/C6xvR.png" alt="current o/p"></p>
  
  <p>i wish to need the o/p is like below image:</p>
  
  <p><img src="https://i.stack.imgur.com/ZL5Sm.png" alt="wish to need the o/p"></p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Here i have to use this code on my <strong>style.xml</strong>:</p>
  
  <pre><code>  &lt;style name="CustomTheme" parent="@android:style/Theme"&gt;
    &lt;item name="android:tabWidgetStyle"&gt;@style/CustomTabWidget&lt;/item&gt;
    &lt;/style&gt;
    &lt;style name="CustomTabWidget" parent="@android:style/Widget.TabWidget"&gt;
    &lt;item name="android:textAppearance"&gt;@style/CustomTabWidgetText&lt;/item&gt;
    &lt;/style&gt;
     &lt;style name="CustomTabWidgetText" 
     parent="@android:style/TextAppearance.Widget.TabWidget"&gt;
     &lt;item name="android:textSize"&gt;20sp&lt;/item&gt;
     &lt;item name="android:textStyle"&gt;bold&lt;/item&gt;
     &lt;/style&gt;
  </code></pre>
  
  <p>Afterthat add below line on AndroidManifest.xml file:</p>
  
  <pre><code>&lt;activity android:name="MyTabActivity" android:theme="@style/CustomTheme"&gt;
  </code></pre>
  
  <p>Now i have successfully changed my fontsize and color and style on tabhost.</p>