Layout weight not working properly in different screen size devices

Question

I am making an app [quiz app] and i placed 4 buttons as option for each question. Buttons Code something like.

<LinearLayout
        android:gravity="bottom"
        android:layout_gravity="end|bottom|center"
        android:orientation="vertical"
        android:id="@+id/QNasLay"
        android:layout_width="fill_parent"
        android:layout_height="0.0dip"
        android:layout_margin="2.0dip"
        android:layout_weight="0.5">

        <LinearLayout
            android:orientation="horizontal"
            android:id="@+id/qll"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:weightSum="2.0">

            <TextView
                android:textSize="14.0dip"
                android:typeface="serif"
                android:textColor="@color/Black"
                android:gravity="center"
                android:layout_gravity="center_horizontal"
                android:id="@+id/taOpt5"
                android:visibility="visible"
                android:layout_width="fill_parent"
                android:layout_height="100.0dip"
                android:layout_marginLeft="5.0dip"
                android:layout_marginTop="5.0dip"
                android:layout_marginRight="5.0dip"
                android:layout_marginBottom="5.0dip"
                android:maxWidth="110.0dip"
                android:maxHeight="80.0dip"
                android:minWidth="90.0dip"
                android:minHeight="60.0dip"
                android:hint="Option 2"
                android:singleLine="false"
                android:layout_weight="1.0"/>

            <TextView
                android:textSize="14.0dip"
                android:typeface="serif"
                android:textColor="@color/Black"
                android:gravity="center"
                android:layout_gravity="center_horizontal"
                android:id="@+id/taOpt6"
                android:visibility="visible"
                android:layout_width="fill_parent"
                android:layout_height="100.0dip"
                android:layout_marginLeft="5.0dip"
                android:layout_marginTop="5.0dip"
                android:layout_marginRight="5.0dip"
                android:layout_marginBottom="5.0dip"
                android:maxWidth="110.0dip"
                android:maxHeight="80.0dip"
                android:minWidth="90.0dip"
                android:minHeight="60.0dip"
                android:hint="Option 2"
                android:singleLine="false"
                android:layout_weight="1.0"/>

        </LinearLayout>

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

            <TextView
                android:textSize="14.0dip"
                android:typeface="serif"
                android:textColor="@color/Black"
                android:gravity="center"
                android:layout_gravity="center_horizontal"
                android:id="@+id/taOpt7"
                android:visibility="visible"
                android:layout_width="fill_parent"
                android:layout_height="100.0dip"
                android:layout_marginLeft="5.0dip"
                android:layout_marginTop="5.0dip"
                android:layout_marginRight="5.0dip"
                android:layout_marginBottom="5.0dip"
                android:maxWidth="110.0dip"
                android:maxHeight="80.0dip"
                android:minWidth="90.0dip"
                android:minHeight="60.0dip"
                android:hint="Option 2"
                android:singleLine="false"
                android:layout_weight="1.0"/>

            <TextView
                android:textSize="14.0dip"
                android:typeface="serif"
                android:textColor="@color/Black"
                android:gravity="center"
                android:layout_gravity="center_horizontal"
                android:id="@+id/taOpt8"
                android:visibility="visible"
                android:layout_width="fill_parent"
                android:layout_height="100.0dip"
                android:layout_marginLeft="5.0dip"
                android:layout_marginTop="5.0dip"
                android:layout_marginRight="5.0dip"
                android:layout_marginBottom="5.0dip"
                android:maxWidth="110.0dip"
                android:maxHeight="80.0dip"
                android:minWidth="90.0dip"
                android:minHeight="60.0dip"
                android:hint="Option 2"
                android:singleLine="false"
                android:layout_weight="1.0"/>

        </LinearLayout>

    </LinearLayout>

But when i run the app with different screen size devices its something like bellow image. Image Here

Any idea how can i solve this problem.

I am expecting the layout design something like this image

LinearLayout? I wrap above layout in linearlayout with height and width wrap_content and the whole xml is called in between NastedScrollllView height wrap_content width fill parent. — Pranko Kaur, Nov 25 '17 at 08:37
No, I want to know the design of this screen. Ex: you want the four buttons are placed in horizontal, vertical, etc. — John Le, Nov 25 '17 at 08:51

Khemraj Sharma · Accepted Answer · 2017-11-25T09:32:14.553

If you are working for different screen sizes. You can put your height and widths in different values folders so that it look good in tab mobile as well old mobile 4" screens size.
remove height and use weight or different values folder with different dimens for different screen sizes. You can find it here.

https://stackoverflow.com/a/32861248/6891563

Second remove this code from your xml because it is making layout not flexible.

        android:maxWidth="110.0dip"
        android:maxHeight="80.0dip"
        android:minWidth="90.0dip"
        android:minHeight="60.0dip"

Bonus Suggestion

Always use layout_width 0 dp with weight property for better performance.

Like if Linearlayout horizontal and child has weight then use layout_width 0dp

and if Linearlayout vertical and child has weight then use layout_height 0dp

@PrankoKaur Added some suggestion, you should see. – Khemraj Sharma Nov 25 '17 at 09:32 — Khemraj Sharma, Nov 25 '17 at 09:32

Layout weight not working properly in different screen size devices

1 Answers1