Android Layout Weight
I am new to Android development and I have a question about setting weight in a linear layout.
I am trying to create a row with two custom buttons and a custom edit text. The edit text should only take up as much room as its content, and the two buttons should expand horizontally to fill the rest of the available space in the row. Like this...
| [#Button++#] [#Button--#] [et] |
After several attempts this is the closest I can get to what I want, even though it seems overly complicated.
| [Button] [Button] [###ET###] |
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:layout_weight="1"
>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal|center_vertical"
>
<RelativeLayout
android:id="@+id/btn_plus_container"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<ImageButton
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:id="@+id/btn_plus"
android:background="@drawable/btn"
android:layout_centerInParent="true"
></ImageButton>
<TextView
android:textColor="#FAFAF4"
android:id="@+id/tv_dice_plus"
android:text="@string/tv_plus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
></TextView>
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal|center_vertical"
>
<RelativeLayout
android:id="@+id/btn_minus_container"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<ImageButton
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:id="@+id/btn_minus"
android:background="@drawable/btn"
android:layout_centerInParent="true"
></ImageButton>
<TextView
android:textColor="#FAFAF4"
android:id="@+id/btn_minus"
android:text="@string/tv_minus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
></TextView>
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal|center_vertical"
>
<EditText
android:textColor="#FAFAF4"
android:text="@string/et_output"
android:id="@+id/et_output"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="number"
android:selectAllOnFocus="true"
android:minWidth="50sp"
android:maxWidth="50sp"
android:background="@drawable/tv_black_background3"
android:textColorHighlight="#c30505"
></EditText>
</LinearLayout>
</LinearLayout>
As I understand setting [android:layout_weight="2"] for the linear layouts holding the buttons should make them take up more room than the edit text, but it does the opposite for me, making them both half the size.
| [Btn] [Btn] [#####et#####] |
I have tried so many different combinations I can't even remember them, and none have worked.
Solution 1:
It doesn't work because you are using fill_parent as the width. The weight is used to distribute the remaining empty space or take away space when the total sum is larger than the LinearLayout. Set your widths to 0dip instead and it will work.
Solution 2:
android:Layout_weight
can be used when you don't attach a fix value to your width already like fill_parent
etc.
Do something like this :
<Button>
Android:layout_width="0dp"
Android:layout_weight=1
-----other parameters
</Button>
Solution 3:
Think it that way, will be simpler
If you have 3 buttons and their weights are 1,3,1 accordingly, it will work like table in HTML
Provide 5 portions for that line: 1 portion for button 1, 3 portion for button 2 and 1 portion for button 1
Solution 4:
In the linearLayout set the WeightSum=2;
And distribute the weight to its childs as you want them to display.. I have given weight ="1" to the child .So both will distribute half of the total.
<LinearLayout
android:id="@+id/linear1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2"
android:orientation="horizontal" >
<ImageView
android:id="@+id/ring_oss"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="@drawable/ring_oss" />
<ImageView
android:id="@+id/maila_oss"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="@drawable/maila_oss" />
</LinearLayout>