Place seven buttons next to each other in linearlayout

Question

I have a linearlayout which has seven buttons inside. However, the buttons do not show their text because they are placed in a wrong way. That's why I set weightsum to 7 and weight to 1 for each button. It partly worked, as I got the expected result in the virtual device. Yet, when I installed the app on my phone, the buttons were still hiding each other. What should I do?

linearlayout xml:

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:weightSum="7"
            android:id="@+id/linearLayout"
android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true" android:baselineAligned="false">
        <Button style="?android:attr/buttonStyleSmall" android:layout_width="0dp" android:layout_height="wrap_content"
                android:text="MON" android:id="@+id/mon" android:checked="false"
                android:singleLine="true" android:layout_weight="1"/>
        <Button style="?android:attr/buttonStyleSmall" android:layout_width="0dp" android:layout_height="wrap_content"
                android:text="TUE" android:id="@+id/tue" android:checked="false"
                android:singleLine="true" android:layout_weight="1"/>
        <Button style="?android:attr/buttonStyleSmall" android:layout_width="0dp" android:layout_height="wrap_content"
                android:text="WED" android:id="@+id/wed" android:checked="false"
                android:singleLine="true" android:layout_weight="1"/>
        <Button style="?android:attr/buttonStyleSmall" android:layout_width="0dp" android:layout_height="wrap_content"
                android:text="THU" android:id="@+id/thu" android:checked="false"
                android:singleLine="true" android:layout_weight="1"/>
        <Button style="?android:attr/buttonStyleSmall" android:layout_width="0dp"
                android:layout_height="wrap_content" android:text="FRI" android:id="@+id/fri"
                android:checked="false" android:singleLine="true" android:layout_weight="1"/>
        <Button style="?android:attr/buttonStyleSmall" android:layout_width="0dp"
                android:layout_height="wrap_content" android:text="SAT" android:id="@+id/sat"
                android:checked="false" android:singleLine="true" android:layout_weight="1"/>
        <Button style="?android:attr/buttonStyleSmall" android:layout_width="0dp"
                android:layout_height="wrap_content" android:text="SUN" android:id="@+id/sun"
                android:checked="false" android:singleLine="true" android:layout_weight="1"/>
    </LinearLayout>

Virtual device resolution(were I get the expected result): 768x1280

Real device resolution (in which I have the problem): 480x854

Screenshot: This is a screenshot of the result from the final accepted answer

Post your xml layout and if possible the resolution of the phone you tried it on. — Oasa, Nov 04 '16 at 20:47
Thats the same problem with websites: you have to find an design that works on every device. have you set your virtual device display diamentions like your real device? — beta, Nov 04 '16 at 20:53
@David_David that final output is really awful. You need to present it as two lines of button for low res or alternative methods of choosing, in case you are producing an actual application and not for your hobby. :) — Oasa, Nov 06 '16 at 18:12
@Oasa that's true.. Maybe if I make button text smaller, it will work.. I am not really satisfied with the final output, but it is close to what I need.. — , Nov 08 '16 at 08:16

Vishnu M Menon · Accepted Answer · 2016-11-05T07:38:28.107

Please try this code.. Hope this works

<LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="7">
            <Button
                android:id="@+id/bt1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="MON"
                android:weight="1"/>

            <Button
                android:id="@+id/bt2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TUE"
                android:weight="1"/>
           <Button
                android:id="@+id/bt3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="WED"
                android:weight="1"/>
           <Button
                android:id="@+id/bt4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="THU"
                android:weight="1"/>
            <Button
                android:id="@+id/bt5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="FRI"
                android:weight="1"/>
           <Button
                android:id="@+id/bt6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="SAT"
                android:weight="1"/>
           <Button
                android:id="@+id/bt7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="SUN"
                android:weight="1"/>

  </LinearLayout>

Updated Let me know if it is working or not

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <Button
                android:id="@+id/bt1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="MON"
                android:weight="1"/>

        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <Button
                android:id="@+id/bt2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="TUE"
                android:weight="1"/>

        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <Button
                android:id="@+id/bt3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="WED"
                android:weight="1"/>

        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <Button
                android:id="@+id/bt4"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="THU"
                android:weight="1"/>

        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <Button
                android:id="@+id/bt5"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="FRI"
                android:weight="1"/>

        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <Button
                android:id="@+id/bt6"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="SAT"
                android:weight="1"/>

        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <Button
                android:id="@+id/bt7"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="SUN"
                android:weight="1"/>

        </LinearLayout>  

    </LinearLayout>

</LinearLayout>

As you can see he is trying to use layout_weight, so that it is responsive. Making the width as `wrap_content` will certainly display the button as full but not the way the author wishes for. Also I reckon most of the buttons wont be even visible for low res devices. — Oasa, Nov 05 '16 at 06:49
@vishnumm93 it didn't work. The buttons positioning is ok, but their text is not being showed. — , Nov 05 '16 at 07:24
Thanks it worked, but I also had to reduce the text size as suggested by @Oasa in his answer and make the buttons "higher" to get the result.. I'll try to post a screenshot in my question with the result. — , Nov 05 '16 at 12:25
@vishnumm93 I do not know why are u using `layout_weight` and not putting `0dp` anywhere in height/ width and also unnecessary nesting of layouts. — Oasa, Nov 06 '16 at 18:15
@Oasa here we need not consider the height of the buttons tats why I ignored the layout height as 0dp. we used the match parent for the width because we need to enclose all the button in the parent linear layout. — Vishnu M Menon, Nov 07 '16 at 04:16

score 0 · Answer 2 · answered Nov 04 '16 at 21:22

You can try using a TableLayout within your LinearLayout. The table will have one row but seven columns. This way you will have the buttons also equally spaced out.

 <TableLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="7">

        <TableRow
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <Button
                android:id="@+id/bt1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/bt1"/>

            <Button
              android:id="@+id/bt2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/bt2"/>
           <Button
              android:id="@+id/bt3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/bt3"/>
           <Button
              android:id="@+id/bt4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/bt4"/>
            <Button
              android:id="@+id/bt5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/bt5"/>
           <Button
              android:id="@+id/bt6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/bt6"/>
           <Button
              android:id="@+id/bt7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/bt7"/>

        </TableRow>
  </TableLayout>

You will also need to add margins for each button to specify how seperated they are from one another.

I doubt if this will work since width is set to `wrap_content` on every view. — Oasa, Nov 05 '16 at 07:05

score 0 · Answer 3 · edited May 23 '17 at 12:01

As the resolution of the screen reduces, the button cant fit the text at its normal size. As the width is set by the layout_weight parameter, it cannot render the text inside a limited space. You need to reduce the text size if you wish to see the text. If you need to autoscale the text size, have a look at this link.

On a different note, you might want to make it two lines of buttons for lower resolution devices. Or find alternatives to button depending on what you are trying to achieve.

Place seven buttons next to each other in linearlayout

3 Answers3