Databases
StackOverflow2013
Postsdbo
POAndroid radio buttons with flexible width
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAndroid radio buttons with flexible width
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload