title: Android: How to build tabs like the ones show on Android UI Page
body: <p>So android goes out of its way to build this nice UI guide for everyone to use.  But I don't see anywhere where it shows code examples of how to build these elements.  </p>
  
  <p>The UI guidelines for tabs can be found here. <a href="http://developer.android.com/design/building-blocks/tabs.html" rel="nofollow noreferrer">http://developer.android.com/design/building-blocks/tabs.html</a>.</p>
  
  <p>Does anyone know how to create tabs likes the this one?
  <img src="https://i.stack.imgur.com/eOVaY.png" alt="enter image description here"></p>
  
  <p>Any help would be appreciated, thanks. </p>
  
  <p>SOLUTION POSTED <br />
  Ok, so here is what I ended up doing after probably wasting about 10 hours trying to make some good looking tabs.<br>
  <img src="https://i.stack.imgur.com/vZU2M.png" alt="enter image description here"></p>
  
  <p>First I scrapped the whole idea of using android's implementation of tabs.  For one reason the tab host widget is suppose to deprecated for the action bar, but the action bar only works from android 3 on. </p>
  
  <p>I finally figured out that if a used a linear layout and as the background for the linear layout i put the image I wanted to use (using a 9 patch image).  Then create another linearlayout and textview in order to put text over top of that linearlayout.  Then make your linear layout clickable.  Then as you get more advanced you can make you linear layout background a xml selector and you are good to go.  Incase you didn't get all that here is my code.  </p>
  
  <p>LinearLayout</p>
  
  <pre><code>    &lt;LinearLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="fill_parent"
      android:layout_height="50dp"
      android:background="@color/main_screen_bg_color"
      android:orientation="horizontal"
      android:padding="2dp" &gt;
  
      &lt;LinearLayout
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:layout_weight="1"
          android:background="@drawable/selector_not_current"
          android:clickable="true"
          android:onClick="onClickSub"
          android:orientation="horizontal" &gt;
  
          &lt;LinearLayout
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:layout_weight="1"
              android:gravity="center"
              android:orientation="vertical" &gt;
  
              &lt;TextView
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:singleLine="true"
                  android:text="Example 1"
                  android:textColor="@color/black"
                  android:textSize="18sp"
                  android:textStyle="bold" /&gt;
          &lt;/LinearLayout&gt;
      &lt;/LinearLayout&gt;
  
      &lt;LinearLayout
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:layout_weight="1"
          android:background="@drawable/selector_current"
          android:clickable="true"
          android:onClick="onClickFoodDetails"
          android:orientation="horizontal" &gt;
  
          &lt;LinearLayout
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:layout_weight="1"
              android:gravity="center"
              android:orientation="vertical" &gt;
  
              &lt;TextView
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:singleLine="true"
                  android:text="Example 2"
                  android:textColor="@color/black"
                  android:textSize="18sp"
                  android:textStyle="bold" /&gt;
          &lt;/LinearLayout&gt;
      &lt;/LinearLayout&gt;
  &lt;/LinearLayout&gt;
  </code></pre>
  
  <p>Example Selector</p>
  
  <pre><code>&lt;selector xmlns:android="http://schemas.android.com/apk/res/android"&gt;
  &lt;item android:state_pressed="true"
        android:drawable="@drawable/selected_pressed_tab" /&gt; &lt;!-- pressed --&gt;
  &lt;item android:state_focused="true"
        android:drawable="@drawable/selected_pressed_tab" /&gt; &lt;!-- focused --&gt;
  &lt;item android:drawable="@drawable/selected_tab" /&gt; &lt;!-- default --&gt;
  </code></pre>
  
  <p></p>
  
  <p>Hope this helps everyone.  Android tabs were just too difficult an annoying to work with that it was easier just to make my own from scratch.  Good Luck!</p>