Android: Layout breaks when Text Size changed

Question

following is my android layout for 3 buttons. Its looks nice and good. But when I change the button's Text size of a single button to some other value it breaks the layout (font size and gravity changed but).

before

<LinearLayout android:weightSum="1.0"
        android:layout_width="fill_parent" android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" android:layout_marginBottom="20dp"
        android:background="#FFF">

        <Button android:id="@+id/allimagebtn" android:layout_weight=".30"
            android:layout_height="60dp"
            android:textColor="#FFF"
            android:background="@drawable/cam_red" android:text="Images" android:gravity="bottom" android:paddingLeft="10dp" android:layout_marginTop="2dp" android:paddingTop="2dp" android:layout_width="100dp" android:layout_margin="2dp"/>

        <Button android:id="@+id/button2video" android:layout_weight=".30"
            android:layout_height="60dp"
            android:background="@drawable/vid_red" android:textColor="#FFF" android:text="Video Files" android:gravity="bottom" android:textSize="12dp" android:paddingLeft="10dp" android:paddingTop="2dp" android:layout_width="100dp" android:layout_marginTop="2dp"/>

        <Button android:id="@+id/button3audio" android:layout_weight=".30"
            android:layout_height="60dp"
            android:textColor="#FFF"
            android:background="@drawable/aud_red" android:text="Audio Files" android:gravity="bottom" android:textSize="12dp" android:paddingLeft="10dp" android:paddingTop="2dp" android:layout_marginTop="2dp" android:layout_width="100dp" android:layout_margin="2dp"/>

    </LinearLayout>

After

<LinearLayout android:weightSum="1.0"
    android:layout_width="fill_parent" android:layout_height="wrap_content"
    android:layout_alignParentBottom="true" android:layout_marginBottom="20dp"
    android:background="#FFF">

    <Button android:id="@+id/allimagebtn" android:layout_weight=".30"
        android:layout_height="60dp"
        android:textColor="#FFF"
        android:background="@drawable/cam_red" android:paddingLeft="10dp" android:layout_marginTop="2dp" android:paddingTop="2dp" android:layout_width="100dp" android:layout_margin="2dp" android:textSize="30dp" android:text="1" android:gravity="top"/>

    <Button android:id="@+id/button2video" android:layout_weight=".30"
        android:layout_height="60dp"
        android:background="@drawable/vid_red" android:textColor="#FFF" android:text="Video Files" android:gravity="bottom" android:textSize="12dp" android:paddingLeft="10dp" android:paddingTop="2dp" android:layout_width="100dp" android:layout_marginTop="2dp"/>

    <Button android:id="@+id/button3audio" android:layout_weight=".30"
        android:layout_height="60dp"
        android:textColor="#FFF"
        android:background="@drawable/aud_red" android:text="Audio Files" android:gravity="bottom" android:textSize="12dp" android:paddingLeft="10dp" android:paddingTop="2dp" android:layout_marginTop="2dp" android:layout_width="100dp" android:layout_margin="2dp"/>

</LinearLayout>

images ![enter image description here][1]![enter image description here][2]

How to avoid this??

Thanks for your time.

http://imageshack.us/photo/my-images/35/beforeff.png/

http://imageshack.us/photo/my-images/9/afteri.png/

Answer 1

I checked your code. You have fixed the height and width of the view which is not a good idea. I tested with wrap_content and it is working fine.So try to avoid the fixed height and width and instead use wrap_content and fill_parent which fits your need. You can use Relative Layout if you face any problem.

Answer 2

Seems you are setting layout_weight and layout_width Try this (setting layout_weight to 1 and layout_width to 0 )

If it suits you, it should work ( Even distribution of children of linearlayout )

Try this

<LinearLayout 
        android:layout_width="fill_parent" android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" android:layout_marginBottom="20dp"
        android:background="#FFF">

        <Button android:id="@+id/allimagebtn" android:layout_weight="1"
            android:layout_height="60dp"
            android:textColor="#FFF"
            android:background="@drawable/cam_red" android:text="Images" android:gravity="bottom" android:paddingLeft="10dp" android:layout_marginTop="2dp" android:paddingTop="2dp" android:layout_width="0dp" android:layout_margin="2dp"/>

        <Button android:id="@+id/button2video" android:layout_weight="1"
            android:layout_height="60dp"
            android:background="@drawable/vid_red" android:textColor="#FFF" android:text="Video Files" android:gravity="bottom" android:textSize="12dp" android:paddingLeft="10dp" android:paddingTop="2dp" android:layout_width="0dp" android:layout_marginTop="2dp"/>

        <Button android:id="@+id/button3audio" android:layout_weight="1"
            android:layout_height="60dp"
            android:textColor="#FFF"
            android:background="@drawable/aud_red" android:text="Audio Files" android:gravity="bottom" android:textSize="12dp" android:paddingLeft="10dp" android:paddingTop="2dp" android:layout_marginTop="2dp" android:layout_width="0dp" android:layout_margin="2dp"/>

    </LinearLayout>

Answer 3

I saw your code you have to add android:gravity="center" in your LinearLayout.

For Example,

     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
            android:weightSum="1.0" android:layout_width="fill_parent"  
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true" 
            android:layout_marginBottom="20dp"
            android:background="#FFF" android:gravity="center">
     </LinearLayout>

I think your problem will be solved. Try it.

Thanks.