Android- Part of the button is deleted from the layout

Question

I am trying to make a linear layout with 3 buttons, with center alignment.

However, after setting some of the weight and putting spaces in between, the last button have like 1/4 of it deleted from the layout, invisible and not clickable. The other parts work perfectly fine though.

Sorry its a new account so I couldn't embed the screenshot, instead please click the following link:

Here is a picture of the apps

and please also see the code below

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="horizontal"
android:weightSum="4">
<Space
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"/>
<!--Nesting Structured Layout-->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:weightSum="10"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:orientation="vertical"
    android:layout_weight="2">

    <!--This is for the Start button-->
    <Button
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="3"
        android:text="@string/starting_button"/>
    <!--Spacing-->
    <Space
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
    <!--This is for the Message button-->
    <Button
        android:layout_weight="3"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:text="@string/liitle_message_button"/>
    <!--Spacing-->
    <Space
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
    <!--This is for the Settings button-->
    <Button
        android:layout_weight="3"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:text="@string/settings_button"/>
</LinearLayout>
<Space
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"/>
</LinearLayout>

What is the problem of the code which cause the problem? And is there any other better approach to achieve the same result?

P.S I am sorry that as a non-native English user, I apologize in advance for it might have loads of grammatical mistakes or asking in an impolite manner, please let me know if you feel offended.

Avin · Accepted Answer · 2016-12-25T18:31:22.153

Since you are using weights and weightSum for assigning height, the heights are fixed in the 'LinearLayout', so your last button goes out of the fixed height.

Your problem is fixed by simply removing android:weightSum="10" from the inner LinearLayout. You can read more about weightSum here.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:orientation="horizontal"
    android:weightSum="4">
    <Space
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"/>
    <!--Nesting Structured Layout-->
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="vertical"
        android:layout_weight="2">

        <!--This is for the Start button-->
        <Button
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="3"
            android:text="b1"/>
        <!--Spacing-->
        <Space
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"/>
        <!--This is for the Message button-->
        <Button
            android:layout_weight="3"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:text="b2"/>
        <!--Spacing-->
        <Space
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"/>
        <!--This is for the Settings button-->
        <Button
            android:layout_weight="3"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:text="b3"/>
    </LinearLayout>
    <Space
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"/>
</LinearLayout>

Instead of using space you can center your layout using android:gravity or android:layout:gravity.

Also using nested weights are not good for performance.

since I am new to stackoverflow, I thought I would have email everytime I got an answer... but seems its not the how the way it works TAT — Noobnewbier, Jan 19 '17 at 23:04
but is nested weights really that bad for performance? or is it just a minor problem — Noobnewbier, Jan 21 '17 at 17:57
I think you won't see much on newer devices, older devices may start skipping frames, also if these answers helped you may select one and mark this question as solved. — Avin, Jan 23 '17 at 10:43

score 0 · Answer 2 · edited May 23 '17 at 12:33

It is because of the weightSum your weight sum at LinearLayout is 10 but when you add the weight value of the buttons and space in the LinearLayout the result is 11 so the weightSum in the second LinearLayout must to be 11.Here you have a question that gives more clarification to weightSum. simply your code must be like this.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="horizontal"
android:weightSum="4">
<Space
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<!--Nesting Structured Layout-->
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:weightSum="11"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical"
android:layout_weight="2">

<!--This is for the Start button-->
<Button
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="3"
    android:text="@string/starting_button"/>
<!--Spacing-->
<Space
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"/>
<!--This is for the Message button-->
<Button
    android:layout_weight="3"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:text="@string/liitle_message_button"/>
<!--Spacing-->
<Space
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"/>
<!--This is for the Settings button-->
<Button
    android:layout_weight="3"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:text="@string/settings_button"/>
</LinearLayout>
<Space
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
</LinearLayout>

score 0 · Answer 3 · answered Dec 25 '16 at 18:31

Do not make it very complicated , you can achieve it very easily by using Relative layout and Linear Layout

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

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="vertical">

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:gravity="center"
            android:text="START" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_marginTop="10dp"
            android:text="LITTLE MESSAGE" />

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="SETTINGS" />
    </LinearLayout>
</RelativeLayout>

@Noobnewbier Thanks , please upvote if you like the answer mate — Naga, Jan 22 '17 at 05:43
I think i did thumbs up, but the fact that I am having a very low reputation makes it not showing on the chart — Noobnewbier, Jan 23 '17 at 10:17
@Noobnewbier, No problem mate, I am glad your problem is solved — Naga, Jan 24 '17 at 07:32

score 0 · Answer 4 · answered Dec 25 '16 at 18:53

This is the layout..

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:weightSum="9"
        android:orientation="vertical">

        <Button
            android:layout_weight="3"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_margin="10dp"
            android:text="START" />

        <Button
            android:layout_width="wrap_content"
            android:layout_weight="3"
            android:layout_height="0dp"
            android:layout_margin="10dp"
            android:text="MIDDLE" />

        <Button
            android:layout_width="wrap_content"
            android:layout_weight="3"
            android:layout_height="0dp"
            android:layout_margin="10dp"
            android:text="LAST" />

    </LinearLayout>
</RelativeLayout>
    Attaching image also

sorry for my late reply tho, my problem is solved due to you guys' efforts — Noobnewbier, Jan 21 '17 at 17:58

score 0 · Answer 5 · answered Dec 26 '16 at 05:00

Use this simplified code to achieve same result:

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

    <!--This is for the Start button-->
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/starting_button" />

    <!--This is for the Message button-->
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="@string/liitle_message_button" />

    <!--This is for the Settings button-->
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="@string/settings_button" />

</LinearLayout>

See the screenshot below:

thanks! I added the space to ensure everyone of them will have a same width tho — Noobnewbier, Jan 24 '17 at 12:55

Android- Part of the button is deleted from the layout

5 Answers5