CODEWITHSUNDEEP
androidandroid-layout
Zhen Liu
Zhen Liu

Reputation: 7920

Android linearLayout with 3 children. 2 of which are of equal width

I have a linearlayout with 3 children.

Two of them should have the same width. The one child in the middle should grow however it wishes. And the two equal width children should split the remaining space.

|<-- equal width --> <-- a gorwing child --> <-- euqal width -->|

How do I make such an arrangement with linearlayout?

Thanks

Upvotes: 0

Views: 1371

Answers (4)

Elias Fazel
Elias Fazel

Reputation: 2113

put these wherever you want but change width and height to what you prefer

<Button
    android:id="@+id/xxx"
    android:layout_width="120dp"
    android:layout_height="35dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:background="@drawable/draw"/>
<Button
    android:id="@+id/yyy"
    android:layout_width="120dp"
    android:layout_height="35dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:background="@drawable/draw"/>
<Button
    android:id="@+id/zzz"
    android:layout_width="match_parent"
    android:layout_height="35dp"
    android:layout_alignParentBottom="true"
    android:layout_toRightOf="@id/xxx"
    android:layout_toLeftOf="@id/yyy"
    android:background="@drawable/draw_draw"/>

and actually it doesn't need LinearLayout or RelativeLayout but you can make them child to any group view but i recommend not to do it because my suggestion is more efficient for memory usage.

Upvotes: -1

Ferdous Ahamed
Ferdous Ahamed

Reputation: 21736

By using LinearLayout you won't be able to get your expected result as always. Instead of LinearLayout use RelativeLayout.

Here is fully working code. Try this:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <Button
        android:id="@+id/button_middle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:maxLines="1"
        android:text="MIDDLE GROWING" />

    <Button
        android:id="@+id/button_left"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/button_middle"
        android:maxLines="1"
        android:text="EQUAL" />

    <Button
        android:id="@+id/button_right"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/button_middle"
        android:maxLines="1"
        android:text="EQUAL WIDTH" />
</RelativeLayout>

Expected Output:

enter image description here

FYI, I have used 3 layout to make understand that its working perfectly.

Upvotes: 0

rafsanahmad007
rafsanahmad007

Reputation: 23881

Try this:

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Left" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Middle Button Long Text " />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Right" />
</LinearLayout>

Make the width of middle button android:layout_width="wrap_content"

Option 2

i would suggest to use it ...use a Relative layout instead. With help of android:layout_alignParentLeft="true" and android:layout_alignParentRight="true" you can achieve the layout

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <Button
        android:id="@+id/bt_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:minWidth="0dp"
        android:text="Left" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/bt_right"
        android:layout_toRightOf="@+id/bt_left"
        android:text="Middle Button Long Text Middle Button Long Text Middle Button Long Text Middle Button Long Text" />

    <Button
        android:id="@+id/bt_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:minWidth="0dp"
        android:text="Right" />
</RelativeLayout>

output:

enter image description here

Upvotes: 3

Darish
Darish

Reputation: 11481

Try this

 <LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<Button
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight=".5"
    android:text="Button 1" />

<Button
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="Button 2" />

<Button
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight=".5"
    android:text="Button 3" />

</LinearLayout>

Upvotes: 0

Related Questions