CODEWITHSUNDEEP
androidradio-group
Vamsi Challa
Vamsi Challa

Reputation: 11109

RadioGroup : Horizontal layout and Span multiple lines

Android 2.3.3

I have around 5 RadioButtons in a RadioGroup. I don't want the orientation to be vertical as it takes most of the available space. If i keep the orientation to be horizontal, only 2 or 3 will be visible and the rest will disappear as the screen's size doesn't fit them all horizontally.

Can i span these radio buttons in more than 1 line, with the horizontal layout.

Upvotes: 4

Views: 8954

Answers (3)

Muahmmad Tayyib
Muahmmad Tayyib

Reputation: 739

One possible solution could be making the radio group multi line. As Radio Group extends LinearLayout,so radio buttons could be placed only in one direction.

To make radio buttons in a single RadioGroup multiline i've improvised the class by extending it with TableLayout so I can put them in the form of rows and columns while they adhered to Radio group properties.

Here is a solution that worked for me. (java class named TableRadioGroup)

    public class TableRadioGroup extends TableLayout {
    private int checkedRadioButtonId = -1;
    private OnCheckedChangeListener onCheckedChangeListener;
    private int maxColumns = -1; // Maximum number of columns (-1 for unlimited)
    private int maxRows = -1;    // Maximum number of rows (-1 for unlimited)

    public TableRadioGroup(Context context) {
        super(context);
    }

    public TableRadioGroup(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public void setMaxColumns(int maxColumns) {
        this.maxColumns = maxColumns;
    }

    public void setMaxRows(int maxRows) {
        this.maxRows = maxRows;
    }

    @Override
    public void addView(View child, int index, ViewGroup.LayoutParams params) {
        if (child instanceof TableRow) {
            int numChildren = ((TableRow) child).getChildCount();
            for (int i = 0; i < numChildren; i++) {
                View view = ((TableRow) child).getChildAt(i);
                if (view instanceof RadioButton) {
                    setupRadioButton((RadioButton) view);
                }
            }
        }
        super.addView(child, index, params);

        // Adjust the number of rows and columns if necessary
        adjustTableLayout();
    }

    private void setupRadioButton(final RadioButton radioButton) {
        if (radioButton == null) {
            return;
        }

        radioButton.setOnClickListener(new OnClickListener() {
            public void onClick(View v) {
                if (checkedRadioButtonId != -1) {
                    setCheckedStateForView(checkedRadioButtonId, false);
                }

                int id = radioButton.getId();
                setCheckedStateForView(id, true);
                checkedRadioButtonId = id;

                if (onCheckedChangeListener != null) {
                    onCheckedChangeListener.onCheckedChanged(TableRadioGroup.this, checkedRadioButtonId);
                }
            }
        });
    }

    private void setCheckedStateForView(int viewId, boolean checked) {
        View checkedView = findViewById(viewId);
        if (checkedView != null && checkedView instanceof RadioButton) {
            ((RadioButton) checkedView).setChecked(checked);
        }
    }

    public void setOnCheckedChangeListener(OnCheckedChangeListener listener) {
        onCheckedChangeListener = listener;
    }

    public int getCheckedRadioButtonId() {
        return checkedRadioButtonId;
    }

    public void clearCheck() {
        setCheckedStateForView(checkedRadioButtonId, false);
        checkedRadioButtonId = -1;
    }

    private void adjustTableLayout() {
        if (maxColumns > 0 && maxRows > 0) {
            int childCount = getChildCount();
            int rowCount = 0;
            TableRow currentRow = null;
            for (int i = 0; i < childCount; i++) {
                View child = getChildAt(i);
                if (child instanceof TableRow) {
                    currentRow = (TableRow) child;
                    rowCount++;
                } else if (currentRow != null) {
                    int columnCount = currentRow.getChildCount();
                    if (columnCount >= maxColumns) {
                        // Create a new row if the maximum column count is reached
                        if (rowCount < maxRows) {
                            TableRow newRow = new TableRow(getContext());
                            super.addView(newRow, getChildIndex(currentRow) + 1);
                            currentRow = newRow;
                            rowCount++;
                        } else {
                            // Remove extra children that exceed the maximum row count
                            removeView(child);
                            continue;
                        }
                    }
                }
            }
        }
    }

    private int getChildIndex(View child) {
        int childCount = getChildCount();
        for (int i = 0; i < childCount; i++) {
            if (getChildAt(i) == child) {
                return i;
            }
        }
        return -1;
    }

    public interface OnCheckedChangeListener {
        void onCheckedChanged(TableRadioGroup group, int checkedId);
    }
}

and this is the xml layout part code snippet where we are displaying our RadioGroup:

        <com.antiquelogic.crickslab.Utils.CustomViews.TableRadioGroup
        android:id="@+id/rgActionType"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="@dimen/activity_vertical_margin"
        android:maxRows="2">

        <TableRow>

            <RadioButton
                android:id="@+id/rbZero"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginHorizontal="@dimen/margin_xsmall_8dp"
                android:layout_marginVertical="@dimen/margin_small"
                android:layout_weight="1"
                android:background="@drawable/selector_button_new_dashed"
                android:button="@null"
                android:checked="true"
                android:gravity="center"
                android:paddingVertical="@dimen/margin_xsmall_8dp"
                android:tag="brilliantEffort"
                android:text="@string/run_0"
                android:textAllCaps="true"
                android:textAppearance="@style/RadioButtonSelectorNew"
                android:textColor="@drawable/text_selector_pop_gray"
                android:textStyle="bold"
                android:theme="@style/RadioButtonSelectorNew" />

            <RadioButton
                android:id="@+id/rbOne"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginHorizontal="@dimen/margin_xsmall_8dp"
                android:layout_marginVertical="@dimen/margin_small"
                android:layout_weight="1"
                android:background="@drawable/selector_button_new_dashed"
                android:button="@null"
                android:checked="false"
                android:gravity="center"
                android:paddingVertical="@dimen/margin_xsmall_8dp"
                android:tag="misField"

                android:text="@string/runs_1"
                android:textAllCaps="true"
                android:textColor="@drawable/text_selector_pop_gray"
                android:textStyle="bold"
                android:theme="@style/RadioButtonSelectorNew" />

            <RadioButton
                android:id="@+id/rbTwo"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginHorizontal="@dimen/margin_xsmall_8dp"
                android:layout_marginVertical="@dimen/margin_small"
                android:layout_weight="1"
                android:background="@drawable/selector_button_new_dashed"
                android:button="@null"
                android:checked="false"
                android:gravity="center"
                android:paddingVertical="@dimen/margin_xsmall_8dp"
                android:tag="misField"

                android:text="@string/runs_2"
                android:textAllCaps="true"
                android:textColor="@drawable/text_selector_pop_gray"
                android:textStyle="bold"
                android:theme="@style/RadioButtonSelectorNew" />

            <RadioButton
                android:id="@+id/rbThree"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginHorizontal="@dimen/margin_xsmall_8dp"
                android:layout_marginVertical="@dimen/margin_small"
                android:layout_weight="1"
                android:background="@drawable/selector_button_new_dashed"
                android:button="@null"
                android:checked="false"
                android:gravity="center"
                android:paddingVertical="@dimen/margin_xsmall_8dp"
                android:tag="misField"

                android:text="@string/runs_3"
                android:textAllCaps="true"
                android:textColor="@drawable/text_selector_pop_gray"
                android:textStyle="bold"
                android:theme="@style/RadioButtonSelectorNew" />

        </TableRow>

        <TableRow>

            <RadioButton
                android:id="@+id/rbFour"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginHorizontal="@dimen/margin_xsmall_8dp"
                android:layout_marginVertical="@dimen/margin_small"
                android:layout_weight="1"
                android:background="@drawable/selector_button_new_dashed"
                android:button="@null"
                android:checked="false"
                android:elevation="@dimen/size_2"
                android:gravity="center"
                android:paddingVertical="@dimen/margin_xsmall_8dp"
                android:tag="misField"

                android:text="@string/runs_4"
                android:textAllCaps="true"
                android:textColor="@drawable/text_selector_pop_gray"
                android:textStyle="bold"
                android:theme="@style/RadioButtonSelectorNew" />

            <RadioButton
                android:id="@+id/rbFive"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginHorizontal="@dimen/margin_xsmall_8dp"
                android:layout_marginVertical="@dimen/margin_small"
                android:layout_weight="1"
                android:background="@drawable/selector_button_new_dashed"
                android:button="@null"
                android:checked="false"
                android:elevation="@dimen/size_2"
                android:gravity="center"
                android:paddingVertical="@dimen/margin_xsmall_8dp"
                android:tag="misField"

                android:text="@string/runs_5"
                android:textAllCaps="true"
                android:textColor="@drawable/text_selector_pop_gray"
                android:textStyle="bold"
                android:theme="@style/RadioButtonSelectorNew" />

            <RadioButton
                android:id="@+id/rbSix"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginHorizontal="@dimen/margin_xsmall_8dp"
                android:layout_marginVertical="@dimen/margin_small"
                android:layout_weight="1"
                android:background="@drawable/selector_button_new_dashed"
                android:button="@null"
                android:checked="false"
                android:elevation="@dimen/size_2"
                android:gravity="center"
                android:paddingVertical="@dimen/margin_xsmall_8dp"
                android:tag="misField"

                android:text="@string/runs_6"
                android:textAllCaps="true"
                android:textColor="@drawable/text_selector_pop_gray"
                android:textStyle="bold"
                android:theme="@style/RadioButtonSelectorNew" />

        </TableRow>
    </com.antiquelogic.crickslab.Utils.CustomViews.TableRadioGroup>

and this is the final reflection above work in the snapshot.

Upvotes: 0

linfaxin
linfaxin

Reputation: 431

A simple way is to use this library:
https://github.com/linfaxin/MultiRowsRadioGroup

Define your XML like this:

 <com.linfaxin.multirowsradiogroup.MultiRowsRadioGroup
    android:id="@+id/radioGroup1"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <TextView
        android:id="@android:id/title"
        android:text="radioGroup1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical">
        <RadioButton
            android:text="text2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <RadioButton
            android:text="text3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
    <RadioButton
        android:text="text4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</com.linfaxin.multirowsradiogroup.MultiRowsRadioGroup>

Upvotes: 3

tbruyelle
tbruyelle

Reputation: 13045

You can achieve this by wrapping your RadioGroup in a HorizontalScrollView, and the next radio buttons will appear when the user scrolls to the right.

Upvotes: 8

Related Questions