Creating android RadioGroup with multiple RadioButton (Custom RadioGroup)

Question

I want to achieve Single RadioGroup like below image for blood group selection. How can this be done?

Hi, could you please tell me how you managed to create that style to your RadioButton? I am trying to make something similar, but cannot find any good tutorial. — Kashmir, Jul 17 '17 at 11:55

Роман Телухин · Answer 1 · 2019-07-09T09:17:49.913

I created my own RadioGridLayout which include RadioGroup code and extends GridLayout. You can copy this code. For me working well. After you can use this layout in your xml and customize like grid layout.

For R.styleable.RadioGridLayout_checked I used code like this:

<resources>
    <declare-styleable name="RadioGridLayout">
        <attr name="checked" format="integer" />
    </declare-styleable>
</resources>

public class RadioGridLayout extends GridLayout {

    private int mCheckedId = -1;
    private CompoundButton.OnCheckedChangeListener mChildOnCheckedChangeListener;
    private boolean mProtectFromCheckedChange = false;
    private OnCheckedChangeListener mOnCheckedChangeListener;
    private PassThroughHierarchyChangeListener mPassThroughListener;

    private void setCheckedId(@IdRes int id) {
        mCheckedId = id;
        if (mOnCheckedChangeListener != null) {
            mOnCheckedChangeListener.onCheckedChanged(this, mCheckedId);
        }
        AutofillManager afm = null;
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            afm = getContext().getSystemService(AutofillManager.class);
        }
        if (afm != null) {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
                afm.notifyValueChanged(this);
            }
        }
    }

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

    public interface OnCheckedChangeListener {
        void onCheckedChanged(RadioGridLayout group, @IdRes int checkedId);
    }

    private int mInitialCheckedId = View.NO_ID;

    public RadioGridLayout(Context context) {
        super(context);
        setOrientation(VERTICAL);
        init();
    }

    public RadioGridLayout(Context context, AttributeSet attrs) {
        super(context, attrs);

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            if (getImportantForAutofill() == IMPORTANT_FOR_AUTOFILL_AUTO) {
                setImportantForAutofill(IMPORTANT_FOR_AUTOFILL_YES);
            }
        }

        TypedArray attributes = context.obtainStyledAttributes(
                attrs,
                R.styleable.RadioGridLayout,
                R.attr.radioButtonStyle, 0);

        int value = attributes.getResourceId(R.styleable.RadioGridLayout_checked, View.NO_ID);
        if (value != View.NO_ID) {
            mCheckedId = value;
            mInitialCheckedId = value;
        }

        attributes.recycle();
        init();
    }

    private void init() {
        mChildOnCheckedChangeListener = new CheckedStateTracker();
        mPassThroughListener = new PassThroughHierarchyChangeListener();
        super.setOnHierarchyChangeListener(mPassThroughListener);
    }

    @Override
    public void setOnHierarchyChangeListener(OnHierarchyChangeListener listener) {
        mPassThroughListener.mOnHierarchyChangeListener = listener;
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        if (mCheckedId != -1) {
            mProtectFromCheckedChange = true;
            setCheckedStateForView(mCheckedId, true);
            mProtectFromCheckedChange = false;
            setCheckedId(mCheckedId);
        }
    }

    @Override
    public void addView(View child, int index, ViewGroup.LayoutParams params) {
        if (child instanceof RadioButton) {
            final RadioButton button = (RadioButton) child;
            if (button.isChecked()) {
                mProtectFromCheckedChange = true;
                if (mCheckedId != -1) {
                    setCheckedStateForView(mCheckedId, false);
                }
                mProtectFromCheckedChange = false;
                setCheckedId(button.getId());
            }
        }

        super.addView(child, index, params);
    }

    public void check(@IdRes int id) {
        if (id != -1 && (id == mCheckedId)) {
            return;
        }

        if (mCheckedId != -1) {
            setCheckedStateForView(mCheckedId, false);
        }

        if (id != -1) {
            setCheckedStateForView(id, true);
        }

        setCheckedId(id);
    }

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

    @IdRes
    public int getCheckedRadioButtonId() {
        return mCheckedId;
    }

    public void clearCheck() {
        check(-1);
    }

    @Override
    public GridLayout.LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new GridLayout.LayoutParams(getContext(), attrs);
    }

    @Override
    protected boolean checkLayoutParams(ViewGroup.LayoutParams p) {
        return p instanceof RadioGroup.LayoutParams;
    }

    @Override
    protected GridLayout.LayoutParams generateDefaultLayoutParams() {
        return new LayoutParams();
    }

    @Override
    public CharSequence getAccessibilityClassName() {
        return RadioGroup.class.getName();
    }

    public static class LayoutParams extends GridLayout.LayoutParams {

        public LayoutParams(Spec rowSpec, Spec columnSpec) {
            super(rowSpec, columnSpec);
        }

        public LayoutParams() {
            super();
        }

        public LayoutParams(ViewGroup.LayoutParams params) {
            super(params);
        }

        public LayoutParams(MarginLayoutParams params) {
            super(params);
        }

        public LayoutParams(GridLayout.LayoutParams source) {
            super(source);
        }

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

        @Override
        protected void setBaseAttributes(TypedArray a,
                                         int widthAttr, int heightAttr) {

            if (a.hasValue(widthAttr)) {
                width = a.getLayoutDimension(widthAttr, "layout_width");
            } else {
                width = WRAP_CONTENT;
            }

            if (a.hasValue(heightAttr)) {
                height = a.getLayoutDimension(heightAttr, "layout_height");
            } else {
                height = WRAP_CONTENT;
            }
        }
    }

    private class CheckedStateTracker implements CompoundButton.OnCheckedChangeListener {
        @Override
        public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
            if (mProtectFromCheckedChange) {
                return;
            }

            mProtectFromCheckedChange = true;
            if (mCheckedId != -1) {
                setCheckedStateForView(mCheckedId, false);
            }
            mProtectFromCheckedChange = false;

            int id = buttonView.getId();
            setCheckedId(id);
        }
    }

    private class PassThroughHierarchyChangeListener implements
            ViewGroup.OnHierarchyChangeListener {
        private ViewGroup.OnHierarchyChangeListener mOnHierarchyChangeListener;

        @Override
        public void onChildViewAdded(View parent, View child) {
            if (parent == RadioGridLayout.this && child instanceof RadioButton) {
                int id = child.getId();
                if (id == View.NO_ID) {
                    id = View.generateViewId();
                    child.setId(id);
                }
                ((RadioButton) child).setOnCheckedChangeListener(
                        mChildOnCheckedChangeListener);
            }

            if (mOnHierarchyChangeListener != null) {
                mOnHierarchyChangeListener.onChildViewAdded(parent, child);
            }
        }

        @Override
        public void onChildViewRemoved(View parent, View child) {
            if (parent == RadioGridLayout.this && child instanceof RadioButton) {
                ((RadioButton) child).setOnCheckedChangeListener(null);
            }

            if (mOnHierarchyChangeListener != null) {
                mOnHierarchyChangeListener.onChildViewRemoved(parent, child);
            }
        }
    }

    @Override
    public void onProvideAutofillStructure(ViewStructure structure, int flags) {
        super.onProvideAutofillStructure(structure, flags);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            structure.setDataIsSensitive(mCheckedId != mInitialCheckedId);
        }
    }

    @Override
    public void autofill(AutofillValue value) {
        if (!isEnabled()) return;

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            if (!value.isList()) {
                Timber.w(value + " could not be autofilled into " + this);
                return;
            }
        }

        int index = 0;
        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.O) {
            index = value.getListValue();
        }
        final View child = getChildAt(index);
        if (child == null) {
            Timber.w("RadioGroup.autoFill(): no child with index %s", index);
            return;
        }

        check(child.getId());
    }

    @Override
    public int getAutofillType() {
        return isEnabled() ? AUTOFILL_TYPE_LIST : AUTOFILL_TYPE_NONE;
    }

    @Override
    public AutofillValue getAutofillValue() {
        if (!isEnabled()) return null;

        final int count = getChildCount();
        for (int i = 0; i < count; i++) {
            final View child = getChildAt(i);
            if (child.getId() == mCheckedId) {
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
                    return AutofillValue.forList(i);
                }
            }
        }
        return null;
    }
}

score 2 · Answer 2 · edited Jul 13 '19 at 12:11

2

create two radio group.one is for first row and other is for second row.then add the following code in your java code

 mFirstGroup = (RadioGroup) findViewById(R.id.first_group);
 mSecondGroup = (RadioGroup) findViewById(R.id.second_group);
 mFirstGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
     @Override
     public void onCheckedChanged(RadioGroup group, int checkedId) {
         if (checkedId != -1 && isChecking) {
             isChecking = false;
             mSecondGroup.clearCheck();
             mCheckedId = checkedId;
         }
         isChecking = true;
     }
 });

 mSecondGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
     @Override
     public void onCheckedChanged(RadioGroup group, int checkedId) {
         if (checkedId != -1 && isChecking) {
             isChecking = false;
             mFirstGroup.clearCheck();
             mCheckedId = checkedId;
         }
         isChecking = true;
     }
 });

edited Jul 13 '19 at 12:11

Nipun

990
1
16
25

answered Apr 08 '16 at 14:19

Suhail k k

66
7

Thanks. But as I mention in my question , I want achieve this with **Single** RadioGroup. – pRaNaY Apr 08 '16 at 14:31
yes.But you can archive the functionality of the single radio group. – Suhail k k Apr 08 '16 at 14:41
I suppose until you will make your own implementation of RadioGroup view, it would be impossible to achieve your desired design with single RadioGroup. Check http://stackoverflow.com/questions/11168538/radiogroup-doesnt-work-properly – Goltsev Eugene Apr 08 '16 at 14:43
@GoltsevEugene. hmm! exactly got my point. Yes,I want to implement custom RadioGroup to achieve this.I am trying to implement custom RadioGroup. – pRaNaY Apr 08 '16 at 14:47
Why don't you want to try my decision? It's really much easier and it also will allow only single choice. – Goltsev Eugene Apr 08 '16 at 14:55
If u need to deal with whole layout, put all those views in your layout and act with it as you wish. – Goltsev Eugene Apr 08 '16 at 14:56
@GoltsevEugene . Your solution is nice. But if we will find solution with single custom RadioGroup, It is more better. – pRaNaY Apr 08 '16 at 15:03
Ok, maybe http://stackoverflow.com/questions/20456322/preparing-customized-radio-group-type-of-layout will help you. Also 3rd part library is mentioned there, may be it helps. – Goltsev Eugene Apr 08 '16 at 15:25

score 1 · Answer 3 · edited May 23 '17 at 10:29

One possible solution is described by @Suhail k k.
Also have a look here (just more details to answer of @Suhail k k.).

I can propose another option:
1) make you own views (ImageView for example) and place them as you wish in your layout; put android:tag on each of them (serial number, for example, from 0 to 7);
2) make selector for each of them (state normal/selected);
3) at runtime put onClickListener on these items like this:

    @Override
    public void onClick(View v) {
        images.get(currentSelected).setSelected(false);
        currentSelected = (int) v.getTag(); 
        images.get(currentSelected).setSelected(true);
    }

It would be much easier for you to implement, imho.
Hope you got an idea in total, your implementation might be different :)

Creating android RadioGroup with multiple RadioButton (Custom RadioGroup)

3 Answers3

Linked