androidandroid-layoutradio-buttonandroid-radiobutton

How to set layouts instead of text in RadioButton


Normally Radio Buttons, you can have text along with them, is there a possibility to add a layout instead of text as shown in figure below?

P.S:

I have kept all the radio buttons in a radio group. Just for this layout sake, i don't want to create a separate linear layout along the radio group.

enter image description here


Solution

  • This answer maybe overkill but you can create a custom view, i put together what you have with the following

    custom_radio_view.xml

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.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="wrap_content"
        tools:context=".MainActivity">
    
        <RadioButton
            android:id="@+id/radioButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="24dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    
        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="12dp"
            android:text="For one hour"
            app:layout_constraintBottom_toBottomOf="@+id/radioButton"
            app:layout_constraintStart_toEndOf="@+id/radioButton"
            app:layout_constraintTop_toTopOf="parent" />
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="12dp"
            android:text="Until 9:08pm"
            app:layout_constraintBottom_toBottomOf="@+id/radioButton"
            app:layout_constraintStart_toEndOf="@+id/radioButton"
            app:layout_constraintTop_toBottomOf="@+id/textView"
            app:layout_constraintVertical_bias="0.0" />
    
        <Button
            android:id="@+id/button"
            style="@style/Widget.AppCompat.Light.ActionButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="+"
            android:textColor="@android:color/black"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    
        <Button
            style="@style/Widget.AppCompat.Light.ActionButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="12dp"
            android:text="-"
            android:textColor="@android:color/black"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/button"
            app:layout_constraintTop_toTopOf="parent" />
    
    
    </androidx.constraintlayout.widget.ConstraintLayout>
    

    RadioCustomLayout.kt

    class RadioCustomLayout: ConstraintLayout {
        constructor(context: Context?): super(context)
        constructor(context: Context?, attrs: AttributeSet?): super(context, attrs)
        constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int): super(context, attrs, defStyleAttr)
    
        init {
            inflate(context, R.layout.custom_radio_view, this)
        }
    
    }
    

    activity_main.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    
        <com.test.test.RadioCustomLayout
            android:id="@+id/group1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    
    </LinearLayout>
    

    With a few declare-styleable and callbacks you could create a fully re-usable layout, rather than a radio-group