3

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?

enter image description here

^ 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>
jungledev
  • 4,195
  • 1
  • 37
  • 52

2 Answers2

2

Use CheckedTextView Instead of RadioButton And You will get this

Image

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);
            }
        }
    });
}
}
Milad Faridnia
  • 9,113
  • 13
  • 65
  • 78
Tejas Soni
  • 116
  • 4
  • I see you left two detailed answers for me, and I'm testing them. I need to be able to customize the size of the icon and I haven't figured out how to do that yet. This is why I haven't selected either of your answers as the correct solution yet. I'd really like to keep as much code styling in the XML as possible so as to keep the .kt code to a minimum. – jungledev Dec 18 '18 at 14:05
  • Not a problem if you like it use it, if there is anything I can do more ask me. – Tejas Soni Dec 19 '18 at 06:21
  • It would be great if you could answer this other issue I have... https://stackoverflow.com/questions/53834600/preference-custom-subclass-kotlin – jungledev Dec 19 '18 at 09:26
0

You want RadioButton in the center and text above like this

enter image description here

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" 
/>

Milad Faridnia
  • 9,113
  • 13
  • 65
  • 78
Tejas Soni
  • 116
  • 4