How to Create a Custom Radio Button Tutorial

Code Display

package jonathandelasen.com.customradiobutton;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.AppCompatEditText;
import android.support.v7.widget.ListPopupWindow;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.CompoundButton;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private AppCompatEditText acetStatus;
    private ListPopupWindow statusPopupList;
    private MyRadioButton acrbMale;
    private MyRadioButton acrbFemale;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
        getWindow().setStatusBarColor(getResources().getColor(R.color.white));

        acetStatus = findViewById(R.id.acet_status);
        acrbFemale = findViewById(R.id.acrb_female);
        acrbMale = findViewById(R.id.acrb_male);
        setPopupList();
        setListeners();
    }

    private void setListeners() {
        acetStatus.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                statusPopupList.show();
            }
        });
        setRadiosListener();
    }

    private void setRadiosListener() {
        acrbFemale.setOwnOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
            }
        });
        acrbMale.setOwnOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
            }
        });
    }

    private void setPopupList() {
        final List<String> status = new ArrayList<>();
        status.add("Status 1");
        status.add("Status 2");
        status.add("Status 3");
        status.add("Status 4");

        statusPopupList = new ListPopupWindow(MainActivity.this);
        ArrayAdapter adapter = new ArrayAdapter<>(MainActivity.this, R.layout.item_simple_status, R.id.tv_element, status);
        statusPopupList.setAnchorView(acetStatus); //this let as set the popup below the EditText
        statusPopupList.setAdapter(adapter);
        statusPopupList.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                acetStatus.setText(status.get(position));//we set the selected element in the EditText
                statusPopupList.dismiss();
            }
        });
    }
}

                    

                        package jonathandelasen.com.customradiobutton;

import android.content.Context;
import android.support.v7.widget.AppCompatRadioButton;
import android.util.AttributeSet;
import android.widget.CompoundButton;

public class MyRadioButton extends AppCompatRadioButton {


    private OnCheckedChangeListener onCheckedChangeListener;


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

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

    public MyRadioButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }


    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();

        setOwnOnCheckedChangeListener();
        setButtonDrawable(null);//lets remove the default drawable to create our own

    }



    public void setOwnOnCheckedChangeListener(OnCheckedChangeListener onCheckedChangeListener) {
        this.onCheckedChangeListener = onCheckedChangeListener;
    }

    private void setOwnOnCheckedChangeListener() {
        setOnCheckedChangeListener(new OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if (onCheckedChangeListener != null) {
                    //this is called when we have set our listener
                    onCheckedChangeListener.onCheckedChanged(buttonView, isChecked);
                }
            }
        });
    }

}
                    

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@color/white"
    >


    <RelativeLayout
        android:id="@+id/fl_toolbar"
        android:layout_width="match_parent"
        android:layout_height="54dp"
        >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="Custom Radio Button"
            android:textAllCaps="true"
            android:fontFamily="@font/my_nunito_bold"
            android:textColor="@color/title"
            />

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/divider"
            android:layout_alignParentBottom="true"
            />

    </RelativeLayout>

    <ScrollView
        android:id="@+id/sv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none"
        android:layout_below="@+id/fl_toolbar"
        >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginEnd="16dp"
            android:layout_marginTop="16dp"
            android:layout_marginBottom="6dp"
            android:orientation="vertical"
            >




            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"

                android:textAllCaps="true"
                android:textColor="@color/subtitle_light"
                android:fontFamily="@font/my_nunito_bold"
                android:text="Photos"
                />


            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="8dp"
                >

                <ImageView
                    android:id="@+id/iv"
                    android:layout_width="100dp"
                    android:layout_height="150dp"
                    android:background="@drawable/add_image_bg"
                    />

                <ImageView
                    android:id="@+id/iv_add_image"
                    android:layout_width="42dp"
                    android:layout_height="42dp"
                    android:src="@drawable/ic_add_circle"
                    android:layout_centerInParent="true"
                    />


            </RelativeLayout>



            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"

                android:textAllCaps="true"
                android:textColor="@color/subtitle_light"
                android:fontFamily="@font/my_nunito_bold"
                android:text="Status"
                android:layout_marginTop="12dp"
                />

            <android.support.v7.widget.AppCompatEditText
                android:id="@+id/acet_status"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                style="@style/MyEditText"

                android:hint="@string/status_hint"
                android:inputType="none"
                android:clickable="false"
                android:focusable="false"
                />

            <TextView
                android:id="@+id/tv_error_status"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                style="@style/MyErrorText"
                android:layout_gravity="end"
                android:layout_marginBottom="8dp"

                android:text="You should add a Status"
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"

                android:textAllCaps="true"
                android:textColor="@color/subtitle_light"
                android:fontFamily="@font/my_nunito_bold"
                android:text="Bio"
                />

            <android.support.v7.widget.AppCompatEditText
                android:id="@+id/acet_bio"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                style="@style/MyEditText"

                android:hint="@string/bio_hint"
                android:inputType="textLongMessage"
                android:maxLength="150"
                />

            <TextView
                android:id="@+id/tv_error_bio"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                style="@style/MyErrorText"
                android:layout_gravity="end"
                android:layout_marginBottom="4dp"

                android:text="You should add a bio"
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"

                android:textAllCaps="true"
                android:textColor="@color/subtitle_light"
                android:fontFamily="@font/my_nunito_bold"
                android:text="Gender"
                />

            <RadioGroup
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:layout_marginTop="8dp"
                >

                <!-- Our custom radios here. One for male one for female -->

                <jonathandelasen.com.customradiobutton.MyRadioButton
                    android:id="@+id/acrb_male"
                    android:layout_width="wrap_content"
                    android:layout_height="32dp"
                    android:minWidth="70dp"
                    style="@style/MyCustomRadioButton"

                    android:layout_marginEnd="12dp"
                    android:text="Male"
                    />

                <jonathandelasen.com.customradiobutton.MyRadioButton
                    android:id="@+id/acrb_female"
                    android:layout_width="wrap_content"
                    android:layout_height="32dp"
                    android:minWidth="70dp"
                    style="@style/MyCustomRadioButton"

                    android:layout_marginEnd="12dp"
                    android:text="Female"
                    />

            </RadioGroup>


        </LinearLayout>

    </ScrollView>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="22dp"
        android:layout_alignParentBottom="true"
        >

        <TextView
            android:id="@+id/tv_action"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            style="@style/MyMainRoundedActionButton"

            android:layout_gravity="center_horizontal"
            android:layout_marginBottom="22dp"

            android:text="@string/save_label"
            android:elevation="6dp"
            />

    </FrameLayout>




</RelativeLayout>