Search code examples
androidandroid-linearlayoutandroid-layout-weight

Place seven buttons next to each other in linearlayout


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


Solution

  • 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>