I am trying to place RadioButton
s underneath some TextView
s 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):
Here's what it looks like on Android 4.1:
Please note that the TextView
s are not actually off-center - they are perfectly centered. It is the RadioButton
s that are too far left.
What can I do to fix this issue?
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 RadioButton
s are too far to the left. Here's a screenshot with the layout bounds option enabled on my device:
I ended up with a different solution - using ToggleButton
s instead of RadioButton
s. 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
):