How to create custom RadioButton/CheckBox?

Question

I am trying to create custom RadioButton/CheckBox as shown in image below.

I can also create image backgrounds for each of the button to make it look like this, but I don't think that's the only way.

I tried applying changes in XML layout with attributes like android:drawableLeft, android:drawableRight, android:drawableTop, android:drawableBottom, but not able to get the desired results.

Also found the same question with accepted answer but not the implementation.

I created a CustomRadioButton class as well but it's not rendering anything.

CustomRadioButton.java

import android.content.Context;
import android.content.res.TypedArray;
import android.support.v7.widget.AppCompatRadioButton;
import android.support.v7.widget.CardView;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.CheckBox;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.app.togo.R;

/**
 * Created by Darshan on 07-02-2018.
 *
 * @author Darshan Parikh (parikhdarshan36@gmail.com)
 */

public class CustomRadioButton extends AppCompatRadioButton {

    String rbText;
    boolean rbIsChecked;
    int rbImageResource;
    CheckBox checkBox;

    public CustomRadioButton(Context context) {
        super(context);
        init(null);
    }

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

    public void init(AttributeSet attrs) {
        if (attrs != null) {
            TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.CustomRadioButton);
            rbText = a.getString(R.styleable.CustomRadioButton_rb_text);
            rbIsChecked = a.getBoolean(R.styleable.CustomRadioButton_rb_isChecked, true);
            rbImageResource = a.getResourceId(R.styleable.CustomRadioButton_rb_imgSrc, R.drawable.ic_car_clr);
            a.recycle();
        } else {
            rbText = getRBText();
            rbIsChecked = getRBIsChecked();
            rbImageResource = getRBImageResource();
        }

        setText("");
        setButtonDrawable(android.R.color.transparent);

        LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View view = inflater.inflate(R.layout.layout_custom_checkbox, null);
        CardView cardView = (CardView) view;
        RelativeLayout rootLayout = (RelativeLayout) cardView.getChildAt(0);

        ImageView imageView = (ImageView) rootLayout.getChildAt(0);
        TextView textView = (TextView) rootLayout.getChildAt(1);
        checkBox = (CheckBox) rootLayout.getChildAt(2);

        imageView.setImageResource(rbImageResource);
        textView.setText(rbText);
        checkBox.setChecked(rbIsChecked);
    }

    public String getRBText() {
        return rbText;
    }

    public boolean getRBIsChecked() {
        return rbIsChecked;
    }

    public int getRBImageResource() {
        return rbImageResource;
    }

    @Override
    public void toggle() {
        super.toggle();
        checkBox.setChecked(isChecked());
    }
}

you can also achieve this by creating a custom button and replace drawable — Akshay Katariya, Feb 07 '18 at 12:01
you can also create using FrameLayout, image as base and radiobutton on top of it at right end. — N.Moudgil, Feb 07 '18 at 12:06
@AkshayKatariya that's what I am trying to achieve... Can you please share any example... — activesince93, Feb 07 '18 at 14:39

score 0 · Answer 1 · answered Feb 07 '18 at 12:20

0

One way using selector you may switch two drawable

for example :

custom_design.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">

     <item android:state_checked="true" android:drawable="@drawable/checked" />
     <item android:state_checked="false" android:drawable="@drawable/unchecked" />

</selector>

In CheckBox or RadioButton set android:button property to the custom_checkbox_design.xml drawable like

android:button="@drawable/custom_design"

answered Feb 07 '18 at 12:20

Adil

812
1
9
29

But how will I place text and image ? – activesince93 Feb 07 '18 at 14:43
You need to design 2 image same like you post and replace using selector – Adil Feb 07 '18 at 15:59
Thanks for your answer, but that will take a lot of space, 1. For each `RadioButton/CheckBox` two new images. 2. Two more images if I want to add new language option. I don't wanna do that. That's the reason why I am looking for a custom `RadioButon` view. – activesince93 Feb 07 '18 at 16:03
hey did you get solution ?- check with it -https://github.com/zagum/Android-SwitchIcon – Adil Feb 16 '18 at 06:54

score 0 · Answer 2 · answered Feb 08 '18 at 06:35

You can achieve using FrameLayout

<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content"
android:layout_height="wrap_content"
>

<ImageView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:src="@drawable/your_drawable"
    android:layout_margin="@dimen/_16sdp"/>


<RadioButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end"
  />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="corporate"
    android:layout_gravity="bottom|center_horizontal"/>

</FrameLayout>

That I did already. If you see the code I posted `layout_custom_checkbox` has the same layout, but I think I am not able to assign that view to the class `CustomRadioButton` — activesince93, Feb 09 '18 at 15:23

How to create custom RadioButton/CheckBox?

2 Answers2