Question

I am trying to place RadioButtons underneath some TextViews and center them horizontally, essentially moving the label above the button.

Here is my code:

XML:

<RadioGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:orientation="horizontal"
    android:id="@+id/someRadioGroup"/>

Java:

LinearLayout choiceLinearLayout = new LinearLayout(context);
choiceLinearLayout.setGravity(Gravity.CENTER);
choiceLinearLayout.setOrientation(VERTICAL);
LinearLayout.LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
choiceLinearLayout.setLayoutParams(layoutParams);

TextView choiceTextView = new TextView(context);
choiceTextView.setText("1");
choiceTextView.setLayoutParams(layoutParams);
choiceTextView.setGravity(Gravity.CENTER);
choiceLinearLayout.addView(choiceTextView);

RadioButton choiceRadioButton = new RadioButton(context);
choiceRadioButton.setText("");
choiceRadioButton.setGravity(Gravity.CENTER);
choiceRadioButton.setLayoutParams(layoutParams);
choiceLinearLayout.addView(choiceRadioButton);

someRadioGroup.addView(choiceLinearLayout);

Please note that the above code is in a loop to add each of the seven options.

Here is what it looks like on MOST devices (tested on Android 2.3, 4.3, and 4.4):

most_devices

Here's what it looks like on Android 4.1:

and_41

Please note that the TextViews are not actually off-center - they are perfectly centered. It is the RadioButtons that are too far left.

What can I do to fix this issue?

EDIT:

I have added choiceTextView.setGravity(Gravity.CENTER); to the code above. It did not do anything as the text was already centered. The text is just fine. The RadioButtons are too far to the left. Here's a screenshot with the layout bounds option enabled on my device:

display_layouts

Was it helpful?

Solution 2

I ended up with a different solution - using ToggleButtons instead of RadioButtons. I set a StateListDrawable as the background of the toggle buttons and made sure that text was always an empty string, whether the button was toggled on or off. Here's the code I ended up with:

LinearLayout choiceLinearLayout = new LinearLayout(context);
choiceLinearLayout.setGravity(Gravity.CENTER);
choiceLinearLayout.setOrientation(VERTICAL);
LinearLayout.LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
choiceLinearLayout.setLayoutParams(layoutParams);

TextView choiceTextView = new TextView(context);
choiceTextView.setText("1");
choiceTextView.setLayoutParams(layoutParams);
choiceTextView.setGravity(Gravity.CENTER);
choiceLinearLayout.addView(choiceTextView);

ToggleButton choiceToggleButton = new ToggleButton(context);
choiceToggleButton.setText("");
choiceToggleButton.setTextOn("");
choiceToggleButton.setTextOff("");
choiceToggleButton.setGravity(Gravity.CENTER);

StateListDrawable radioDrawable = getRadioDrawable(context); // this function creates the state list our of pngs that I've added to the project

if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
    choiceToggleButton.setBackgroundDrawable(radioDrawable);
} else {
    choiceToggleButton.setBackground(radioDrawable);
}

LinearLayout.LayoutParams choiceToggleButtonLayoutParams = new LayoutParams(radioDrawable.getIntrinsicWidth(), radioDrawable.getIntrinsicHeight());

choiceToggleButton.setLayoutParams(choiceToggleButtonLayoutParams);
choiceLinearLayout.addView(choiceToggleButton);

choiceToggleButton.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View view) {
        ToggleButton toggleButton = (ToggleButton) view;

        // do not allow toggling a button off
        if (!toggleButton.isChecked()) {
            toggleButton.setChecked(true);
        }

        // uncheck all other buttons, leaving the current one checked
        for (int i = 0; i < someRadioGroup.getChildCount(); i++) {
            LinearLayout linearLayout = (LinearLayout) someRadioGroup.getChildAt(i);
            if (linearLayout != null) {
                ToggleButton tb = (ToggleButton) linearLayout.getChildAt(1);
                if (tb != null && tb != toggleButton) {
                    tb.setChecked(false);
                }
            }
        }
    }
});

someRadioGroup.addView(choiceLinearLayout);

Note that an OnClickListener is required for each ToggleButton to mimic proper RadioButton behavior.

Here's the result on Android 4.1 (with some left and right margin applied to each ToggleButton):

it_works

OTHER TIPS

    //This layout is to group the options
LinearLayout choiceLinearLayout = new LinearLayout(context);
choiceLinearLayout.setGravity(Gravity.CENTER);
choiceLinearLayout.setOrientation(LinearLayout.HORIZONTAL);
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
    LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
choiceLinearLayout.setLayoutParams(layoutParams);

//You can use a cicle
for (int i = 0; array.size(); i++){
    //This layout is to group the label and radiobutton.
    LinearLayout radioLayout = new LinearLayout(context);
    radioLayout.setGravity(Gravity.CENTER);
    radioLayout.setOrientation(LinearLayout.VERTICAL);
    LinearLayout.LayoutParams radioParams = new LinearLayout.LayoutParams(
        LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
    radioLayout.setLayoutParams(radioParams);
    TextView choiceTextView = new TextView(context);
    choiceTextView.setText(i);
    radioLayout.addView(choiceTextView);
    RadioButton choiceRadio = new RadioButton(context);
    radioLayout.addView(choiceRadio);
    choiceLinearLayout.addView(radioLayout);
}


RadioButton choiceRadioButton = new RadioButton(context);
choiceRadioButton.setText("");
choiceRadioButton.setGravity(Gravity.CENTER);
choiceRadioButton.setLayoutParams(layoutParams);
choiceLinearLayout.addView(choiceRadioButton);

someRadioGroup.addView(choiceLinearLayout);
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top