Android RadioButton *with* icon and center aligned

Question

Is it possible to create a horizontal RadioGroup, with RadioButtons where each button includes a radio, icon, and text, and these three items are vertically-center-aligned with each other?

I have tried to set the gravity and layout_gravity on the RadioGroup and the RadioButtons, as well as the layout_weight on each button, etc, to no avail. WHYYY is this so difficult on Android?

^ I want the radio buttons centered with the icons and titles.

I need the entire area to be selectable, so I'd really like to set the RadioButton's icon and text values, rather than add separate ImageViews the UI. I want to use RadioGroup because I am using this in a custom Preference item, so the selection and persistence are handled nicely for me.

Here is the XML

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:id="@android:id/widget_frame"
    style="@style/AppTheme"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimaryDark"
    android:theme="@style/AppTheme"
    tools:context=".settings.homeScreenPreference">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimaryDark"
        android:text="@string/set_home_screen" />

    <!--Settings icon-->
    <ImageView
        android:id="@+id/settingsIcon"
        android:layout_width="0dp"
        android:layout_height="80dp"
        android:contentDescription="@string/settings_icon_description"
        android:drawable="@drawable/ic_settings"
        android:tint="@color/colorAccent"
        app:layout_constraintBottom_toTopOf="@id/settingsTitle"
        app:layout_constraintEnd_toStartOf="@+id/diidsIcon"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/title"
        tools:srcCompat="@drawable/ic_settings" />

    <!--Cards icon-->
    <ImageView
        android:id="@+id/diidsIcon"
        android:layout_width="0dp"
        android:layout_height="80dp"
        android:contentDescription="@string/my_cards_icon_description"
        android:drawable="@drawable/ic_my_cards"
        android:tint="@color/colorAccent"
        app:layout_constraintBottom_toTopOf="@id/home_screen_radio_group"
        app:layout_constraintEnd_toStartOf="@+id/scannerIcon"
        app:layout_constraintStart_toEndOf="@+id/settingsIcon"
        app:layout_constraintTop_toBottomOf="@id/title"
        tools:srcCompat="@drawable/ic_my_cards" />

    <!--Scanner icon-->
    <ImageView
        android:id="@+id/scannerIcon"
        android:layout_width="0dp"
        android:layout_height="80dp"
        android:contentDescription="@string/scanner_icon_description"
        android:drawable="@drawable/ic_scan_qr"
        android:tint="@color/colorAccent"
        app:layout_constraintBottom_toTopOf="@id/home_screen_radio_group"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/diidsIcon"
        app:layout_constraintTop_toBottomOf="@id/title"
        tools:srcCompat="@drawable/ic_scan_qr" />

    <!--Settings title-->
    <TextView
        android:id="@+id/settingsTitle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/settings"
        android:textAlignment="center"
        android:textColor="@color/colorAccent"
        app:layout_constraintBottom_toTopOf="@id/home_screen_radio_group"
        app:layout_constraintEnd_toStartOf="@+id/diidsTitle"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/settingsIcon" />

    <!--Cards title-->
    <TextView
        android:id="@+id/diidsTitle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/my_cards"
        android:textAlignment="center"
        android:textColor="@color/colorAccent"
        app:layout_constraintBottom_toTopOf="@id/home_screen_radio_group"
        app:layout_constraintEnd_toStartOf="@+id/scannerTitle"
        app:layout_constraintStart_toEndOf="@+id/settingsTitle"
        app:layout_constraintTop_toBottomOf="@id/diidsIcon" />

    <!--Scanner title-->
    <TextView
        android:id="@+id/scannerTitle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/scan_code"
        android:textAlignment="center"
        android:textColor="@color/colorAccent"
        app:layout_constraintBottom_toTopOf="@id/home_screen_radio_group"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/diidsTitle"
        app:layout_constraintTop_toBottomOf="@id/scannerIcon" />

    <!--Radio group-->
    <RadioGroup
        android:id="@+id/home_screen_radio_group"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@color/colorPrimaryDark"
        android:gravity="center"
        android:orientation="horizontal"
        app:layout_constraintTop_toBottomOf="@id/settingsTitle">

        <!--Settings radio-->
        <RadioButton
            android:id="@+id/settingsButton"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:buttonTint="@color/colorAccent" />

        <!--Cards radio-->
        <RadioButton
            android:id="@+id/diidsButton"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:buttonTint="@color/colorAccent" />

        <!--Scanner radio-->
        <RadioButton
            android:id="@+id/scannerButton"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:buttonTint="@color/colorAccent"/>
    </RadioGroup>
</android.support.constraint.ConstraintLayout>

Answer 1

Use CheckedTextView Instead of RadioButton And You will get this

Layout XML

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
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"
tools:context=".MainActivity">

 <CheckedTextView
    android:id="@+id/one"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:drawableTop="@drawable/ic_state"
    android:text="Settings"
    android:textSize="20sp"
    app:layout_constraintEnd_toStartOf="@+id/two"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

 <CheckedTextView
    android:id="@+id/two"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:drawableTop="@drawable/ic_state"
    android:text="My DIID"
    android:textSize="20sp"
    app:layout_constraintEnd_toStartOf="@+id/three"
    app:layout_constraintStart_toEndOf="@+id/one"
    app:layout_constraintTop_toTopOf="parent" />

 <CheckedTextView
    android:id="@+id/three"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:drawableTop="@drawable/ic_state"
    android:text="Scan Code"
    android:textSize="20sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/two"
    app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Make 2 drawable and add like this Now Background Drawable

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:drawable="@drawable/ic_android_black_24dp" 
   android:state_checked="false" />

   <item android:drawable="@drawable/ic_android_green_24dp" 
   android:state_checked="true" 
/>
</selector>

Now MainActivity

public class MainActivity extends AppCompatActivity {
CheckedTextView one,two,three;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    one = findViewById(R.id.one);
    two = findViewById(R.id.two);
    three = findViewById(R.id.three);
    mDrawable = getResources().getDrawable(R.drawable.ic_android_black_24dp);
    one.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (one.isChecked()){
                one.setTextColor(getResources().getColor(R.color.black));
                one.setChecked(false);
            }else{
                one.setTextColor(getResources().getColor(R.color.colorPrimary));
                one.setChecked(true);
            }
        }
    });
    two.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (two.isChecked()){
                two.setTextColor(getResources().getColor(R.color.black));
                two.setChecked(false);
            }else{
                two.setTextColor(getResources().getColor(R.color.colorPrimary));
                two.setChecked(true);
            }
        }
    });
    three.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (three.isChecked()){
                three.setTextColor(getResources().getColor(R.color.black));
                three.setChecked(false);
            }else{
                three.setTextColor(getResources().getColor(R.color.colorPrimary));
                three.setChecked(true);
            }
        }
    });
}
}

Answer 2

You want RadioButton in the center and text above like this

Here is the XML Code

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:layout_marginTop="15dp">

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:button="@null"
        android:checked="true"
        android:drawableTop="@drawable/ic_state"
        android:drawableBottom="@android:drawable/btn_radio"
        android:gravity="center"
        android:text="Text on top" />

    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:button="@null"
        android:drawableTop="@drawable/ic_state"
        android:drawableBottom="@android:drawable/btn_radio"
        android:gravity="center"
        android:text="Text on top" />
  </RadioGroup>
</android.support.constraint.ConstraintLayout>

And Use 2 background drawable for state checked and unchecked

<?xml version="1.0" encoding="utf-8"?>

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

<item android:drawable="@drawable/ic_android_black_24dp" 
android:state_checked="false" />

<item android:drawable="@drawable/ic_android_green_24dp" android:state_checked="true" 
/>