How to fit an array of buttons in a linear layout perfectly

Question

I am making an alarm clock app in which users select days in a week in which alarm will go off. For that I am using 7 toggle buttons inside a linear layout. And What I expect to see is this

But I'm only seeing this in tablet layouts. For many phone layouts I am seeing this

That is last button is not visible, buttons are not properly aligned and have newline. How to fix this? My xml code [EDITED]:

<LinearLayout
    android:id="@+id/linearLayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/textView2"
    android:layout_centerHorizontal="true"
    android:orientation="horizontal"
    android:weightSum="7" >

    <ToggleButton
        android:id="@+id/toggleButtonmon"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:textOff="Mon"
        android:textOn="Mon" />

    <ToggleButton
        android:id="@+id/toggleButtontue"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:textOff="Tue"
        android:textOn="Tue" 
        android:layout_weight="1"/>

    <ToggleButton
        android:id="@+id/toggleButtonwed"
        android:layout_height="wrap_content"
        android:textOff="Wed"
        android:textOn="Wed"
        android:layout_weight="1" 
        android:layout_width="0dp"/>

    <ToggleButton
        android:id="@+id/toggleButtonthu"
        android:layout_height="wrap_content"
        android:textOff="Thu"
        android:textOn="Thu"
       android:layout_weight="1"
       android:layout_width="0dp" />

    <ToggleButton
        android:id="@+id/toggleButtonfri"
        android:layout_height="wrap_content"
        android:textOff="Fri"
        android:textOn="Fri"
        android:layout_width="0dp"
        android:layout_weight="1"
         />

     <ToggleButton
         android:id="@+id/toggleButtonsat"
         android:layout_height="wrap_content"
        android:layout_weight="1"
         android:textOff="Sat"
         android:textOn="Sat" 
         android:layout_width="0dp"/>

     <ToggleButton
         android:id="@+id/toggleButtonsun"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:textOff="Sun"
         android:textOn="Sun"
         android:layout_width="0dp" />
</LinearLayout>

score 2 · Accepted Answer · answered Mar 30 '16 at 18:38

2

Firstly add android:orientation="horizontal" to your LinearLayout.
Secondly - set android:layout_width="0dp" for each ToggleButton in order for the weight attribute to take effect.

answered Mar 30 '16 at 18:38

Dmitri Timofti

2,428
1
22
25

Also make sure every `ToggleButton` has `android:layout_weight="1"`. Above, the _Friday_ button does not contain it. – OJ7 Mar 30 '16 at 18:46
ok did all that.Sunday button is now visible but still newline is coming, and also not aligned. – 0x5050 Mar 30 '16 at 18:48
1

@PradipPramanick Most probably the issue is that the text is too large for the button size, try reducing the text size. `android:textSize="10sp"` – Dmitri Timofti Mar 30 '16 at 18:51
@Dimitri Thanks. That works. but text and buttons look very small in large screens which is not acceptable. Any way to auto fit? – 0x5050 Mar 30 '16 at 18:56
Unfortunately, there is no way of resizing text based on button size. However, you can define different text sizes for different screens by extracting the textSize value to a dimens.xml. Here is a handy guide http://developer.android.com/training/multiscreen/screensizes.html#TaskUseAliasFilters – Dmitri Timofti Mar 30 '16 at 19:02

How to fit an array of buttons in a linear layout perfectly

1 Answers1