title: Android radio buttons with flexible width
body: <p>I am currently trying to implement a user interface on android (3.1) with tabs at the bottom. I know there are several ways, however, since I couldn't find one that suits me, I am trying to use radio buttons. The idea is, that each tab is a radio button (with currently no text). </p>
  
  <p>The layout is supposed to look like this:</p>
  
  <p>At the top of the screen there is a framelayout acting as a container for fragments to come. </p>
  
  <p>Beneath that container there is a horizontal radio group with each radio button acting as a tab. The active tab (radio button) is supposed to overlap the other tabs on the upper part, so it is clear which tab is active. For the radio buttons to act like tabs I set the android:button attribute to a statelistdrawable. The statelistdrawable contains two images for the active and the inactive state (unfortunately I am not yet allowed to post images).
  Since the image of the active tab is larger (in width) than the one of the inactive tab my idea was to use the bringToFront() method in the onClickListener so that the active tab (or radio button) overlaps the tabs to the left and the right of it. </p>
  
  <p>My layout file looks like this:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical" &gt;
  
  &lt;!-- container for the fragments --&gt;
  &lt;FrameLayout
          android:id="@+id/fragment_container"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:background="#ffffff"
          android:layout_weight="0" /&gt;
  
  
  &lt;!-- container for the tabs realized with radio buttons --&gt;
  &lt;RadioGroup
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:orientation="horizontal"
    android:layout_weight="1" &gt;
  
    &lt;!-- tabs --&gt;
    &lt;RadioButton android:id="@+id/tab_1"
        android:state_checked="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:button="@drawable/tab_button"
        android:text="" /&gt;
    &lt;RadioButton android:id="@+id/tab_2"
        android:state_checked="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:button="@drawable/tab_button"
        android:text="" /&gt;
    &lt;RadioButton android:id="@+id/tab_3"
        android:state_checked="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:button="@drawable/tab_button"
        android:text="" /&gt;
    &lt;RadioButton android:id="@+id/tab_4"
        android:state_checked="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:button="@drawable/tab_button"
        android:text="" /&gt;
    &lt;RadioButton android:id="@+id/tab_5"
        android:state_checked="false"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:button="@drawable/tab_button"
        android:text="" /&gt;
  &lt;/RadioGroup&gt;
  &lt;/LinearLayout&gt;
  </code></pre>
  
  <p>and the statelistdrawable xml file looks like this:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;selector xmlns:android="http://schemas.android.com/apk/res/android" 
  android:constantSize="false"&gt;
  &lt;item
   android:state_checked="false"
   android:drawable="@drawable/tab_inactive" /&gt;
  &lt;item
   android:state_checked="true"
   android:drawable="@drawable/tab_active" /&gt;
  &lt;/selector&gt;
  </code></pre>
  
  <p>Unfortunately I encountered two problems:</p>
  
  <ol>
  <li>Even though I set the layout_weight of the framelayout to 0 and the one of the radiogroup to 1 within the linearlayout surrounding those two, the framelayout takes up the whole screen.</li>
  <li>When I set the height of the framelayout to 0 for debugging, the tabs are shown. However, they are not evenly distributed over the width but they overlap each other and are kind of squeezed to the left.
  When I set the width of the radiobuttons to the width (in px) of the image used for the inactive tabs, the tabs are aligned evenly. However, when I click on one of the tabs and the tab image changes to the one for the active tabs, the button doesn't overlap the buttons to it's right or left even though I set the android:constantSize attribute in the statelistdrawable to false, but it shifts it to the right.</li>
  </ol>
  
  <p>Has anybody got solutions for these problems, especially with the use of relative dimensions? This is my first post here and I apologize in advance if my question was to elaborate or not elaborte enough. Trust me, I've tried for ages now to fix these problems (for example by using absolute dimensions). Any help would be greatly apreciated!</p>