Android buttons resized out of parent on Text change

Question

I'm creating a basic form activity where the user selects one button from each row of buttons and submits it to a backend database.

screenshot A

Each button is a ToggleButton with custom code to make it behave like radio button (i.e. only one per RadioGroup can be selected at any time). Each horizontal row of buttons belongs to a distinct RadioGroup.

This is all well and good, but when loading it onto another phone with a different aspect ratio, there's some odd layout behavior:

The text in the button doesn't fit, so it wraps around. That's mostly expected, but at the same time, the button randomly drops down some arbitrary number of pixels and the lower edge is sliced off by the container, which refuses to wrap_content around the button. The button still functions as normal, but the light at the bottom doesn't display, so there's no way to know it's selected when this bug occurs.

What am I missing?

layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView android:id="@+id/mainScrollView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <LinearLayout
        android:id="@+id/mainLinearLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/timerTextView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginStart="10dp"
                android:text="@string/activity_record_default_clock_display_time"
                android:paddingRight="10dp" />

            <TextView
                android:id="@+id/recordCountHeaderTextView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@+id/timerTextView"
                android:text="Records: " />

            <TextView
                android:id="@+id/recordCountTextView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@+id/recordCountHeaderTextView"
                android:text="0" />

        </RelativeLayout>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/activity_record_vehicle_type"
            android:id="@+id/textView"
            android:textAppearance="@android:style/TextAppearance.DeviceDefault.Large"
            android:layout_gravity="center_horizontal" />

        <RadioGroup
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:id="@+id/VehicleGroup">

            <ToggleButton
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:minHeight="60dp"
                android:id="@+id/btn_car"
                android:textOff="@string/activity_record_car"
                android:textOn="@string/activity_record_car"
                android:onClick="onToggle"
                android:layout_weight="1" />

            <ToggleButton
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:minHeight="60dp"
                android:id="@+id/btn_truck"
                android:textOff="@string/activity_record_truck"
                android:textOn="@string/activity_record_truck"
                android:onClick="onToggle"
                android:layout_weight="1" />

            <ToggleButton
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:minHeight="60dp"
                android:id="@+id/btn_suv"
                android:textOff="@string/activity_record_suv"
                android:textOn="@string/activity_record_suv"
                android:onClick="onToggle"
                android:layout_weight="1" />

            <ToggleButton
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:minHeight="60dp"
                android:id="@+id/btn_van"
                android:textOff="@string/activity_record_van"
                android:textOn="@string/activity_record_van"
                android:onClick="onToggle"
                android:layout_weight="1" />

            <ToggleButton
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:minHeight="60dp"
                android:id="@+id/btn_motorcycle"
                android:textOff="@string/activity_record_cycle"
                android:textOn="@string/activity_record_cycle"
                android:onClick="onToggle"
                android:layout_weight="1"
                android:checked="false" />
        </RadioGroup>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/activity_record_driver"
            android:id="@+id/textView2"
            android:layout_marginTop="18dp"
            android:textAppearance="@android:style/TextAppearance.DeviceDefault.Large"
            android:layout_gravity="center_horizontal" />

        <RadioGroup
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:id="@+id/DriverGenderGroup">

            <ToggleButton
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:minHeight="60dp"
                android:id="@+id/btn_driver_m"
                android:textOff="@string/activity_record_male"
                android:textOn="@string/activity_record_male"
                android:onClick="onToggle"
                android:layout_weight="1" />

            <ToggleButton
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:minHeight="60dp"
                android:id="@+id/btn_driver_f"
                android:textOff="@string/activity_record_female"
                android:textOn="@string/activity_record_female"
                android:onClick="onToggle"
                android:layout_weight="1" />

            <ToggleButton
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:minHeight="60dp"
                android:id="@+id/btn_driver_u"
                android:textOff="@string/activity_record_unknown"
                android:textOn="@string/activity_record_unknown"
                android:onClick="onToggle"
                android:layout_weight="1" />
        </RadioGroup>

        <RadioGroup
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:id="@+id/DriverProtectedGroup">

            <ToggleButton
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:minHeight="60dp"
                android:id="@+id/btn_driver_protected"
                android:textOff="@string/activity_record_protected"
                android:textOn="@string/activity_record_protected"
                android:onClick="onToggle"
                android:layout_weight="1" />

            <ToggleButton
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:minHeight="60dp"
                android:id="@+id/btn_driver_notProtected"
                android:textOff="@string/activity_record_not"
                android:textOn="@string/activity_record_not"
                android:onClick="onToggle"
                android:layout_weight="1"
                android:checked="false" />

            <ToggleButton
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:minHeight="60dp"
                android:id="@+id/btn_driver_unknownProtected"
                android:textOff="@string/activity_record_unknown"
                android:textOn="@string/activity_record_unknown"
                android:onClick="onToggle"
                android:layout_weight="1" />
        </RadioGroup>

        <CheckedTextView
            android:checkMark="?android:attr/listChoiceIndicatorMultiple"
            android:checked="false"
            android:layout_marginTop="18dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/activity_record_passenger"
            android:id="@+id/textView3"
            android:textAppearance="@android:style/TextAppearance.DeviceDefault.Large"
            android:layout_gravity="center_horizontal" />

        <RadioGroup
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:id="@+id/PassengerGenderGroup">

            <ToggleButton
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:minHeight="60dp"
                android:id="@+id/btn_passenger_m"
                android:textOff="@string/activity_record_male"
                android:textOn="@string/activity_record_male"
                android:onClick="onToggle"
                android:layout_weight="1" />

            <ToggleButton
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:minHeight="60dp"
                android:id="@+id/btn_passenger_f"
                android:textOff="@string/activity_record_female"
                android:textOn="@string/activity_record_female"
                android:onClick="onToggle"
                android:layout_weight="1" />

            <ToggleButton
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:minHeight="60dp"
                android:id="@+id/btn_passenger_u"
                android:textOff="@string/activity_record_unknown"
                android:textOn="@string/activity_record_unknown"
                android:onClick="onToggle"
                android:layout_weight="1" />
        </RadioGroup>

        <RadioGroup
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:id="@+id/PassengerProtectedGroup">

            <ToggleButton
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:minHeight="60dp"
                android:id="@+id/btn_passenger_protected"
                android:textOff="@string/activity_record_protected"
                android:textOn="@string/activity_record_protected"
                android:onClick="onToggle"
                android:layout_weight="1" />

            <ToggleButton
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:minHeight="60dp"
                android:id="@+id/btn_passenger_notProtected"
                android:textOff="@string/activity_record_not"
                android:textOn="@string/activity_record_not"
                android:onClick="onToggle"
                android:layout_weight="1" />

            <ToggleButton
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:minHeight="60dp"
                android:id="@+id/btn_passenger_unknownProtected"
                android:textOff="@string/activity_record_unknown"
                android:textOn="@string/activity_record_unknown"
                android:onClick="onToggle"
                android:layout_weight="1" />
        </RadioGroup>

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <Button
                android:id="@+id/btn_end_site"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:minHeight="60dp"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:text="@string/activity_record_end_site"
                android:onClick="quit"/>

            <Button
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:minHeight="60dp"
                android:layout_toRightOf="@id/btn_end_site"
                android:layout_toEndOf="@id/btn_end_site"
                android:id="@+id/btn_send"
                android:text="@string/activity_record_record"
                android:onClick="send" />

        </RelativeLayout>
    </LinearLayout>
</ScrollView>

score 1 · Accepted Answer · answered Apr 07 '17 at 19:03

You can use two methods to solve the problem..

Solution 1

use android:layout_height="match_parent" for the toggleButton so that every button will increase size based on large text button.

Also you have to set:

 android:layout_height="0dp"
 android:layout_weight="1"

for the root layout to make it flexible.

 <RadioGroup
            android:id="@+id/VehicleGroup"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="horizontal">

            <ToggleButton
                android:id="@+id/btn_car"
                android:layout_width="fill_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:minHeight="60dp"
                android:onClick="onToggle"
                android:textOff="Textddddddds"
                android:textOn="TExt" />

            <ToggleButton
                android:id="@+id/btn_truck"
                android:layout_width="fill_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:minHeight="60dp"
                android:onClick="onToggle"
                android:textOff="Text"
                android:textOn="TExt" />

            <ToggleButton
                android:id="@+id/btn_suv"
                android:layout_width="fill_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:minHeight="60dp"
                android:onClick="onToggle"
                android:textOff="Text"
                android:textOn="TExt" />

            <ToggleButton
                android:id="@+id/btn_van"
                android:layout_width="fill_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:minHeight="60dp"
                android:onClick="onToggle"
                android:textOff="Text"
                android:textOn="TExt" />

            <ToggleButton
                android:id="@+id/btn_motorcycle"
                android:layout_width="fill_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:checked="false"
                android:minHeight="60dp"
                android:onClick="onToggle"
                android:textOff="Textdd"
                android:textOn="TExt" />
        </RadioGroup>

output:

Solution 2

use android:singleLine="true" for the toggleButton so that text will not go to next line and views will be exact shape

For education's sake, could you explain the logic behind how setting the height explicitly to zero is part of what makes the parent element scale dynamically? — Fawfulcopter, Apr 08 '17 at 22:28
here parent `RadioGroup` has ` android:layout_height="0dp"` which has also ` android:layout_weight="1"` --important here is android:layout_weight which helps to dynamically allow different height for the child..you can also take help from here: http://stackoverflow.com/questions/7220404/what-is-the-trick-with-0dip-layout-height-or-layouth-width — rafsanahmad007, Apr 09 '17 at 06:12

score 0 · Answer 2 · answered Apr 07 '17 at 17:10

0

Try this :

<ToggleButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:minHeight="60dp"
            android:id="@+id/btn_suv"
            android:textOff="@string/activity_record_suv"
            android:textOn="@string/activity_record_suv"
            android:onClick="onToggle"
            android:layout_weight="1" />

or

<RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:id="@+id/VehicleGroup"
        android:weightSum = 5>

answered Apr 07 '17 at 17:10

Aniket Jadhav

166
11

The first solution causes the button to reduce to zero width and completely disappear from view. The second solution has no noticeable effect. – Fawfulcopter Apr 07 '17 at 17:46
use 2nd solution but keep width of ToggleButton as match_parent – Aniket Jadhav Apr 07 '17 at 18:02

Android buttons resized out of parent on Text change

2 Answers2