2

I'm designing RadioButtons. Right now its look like

this

I've Questions:

I want to show it in circle how I'll perform this action?

I want it look same by its width and height, right now it is in wrap_content.

Here is my code

 <RadioGroup
        android:id="@+id/llButtons"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <androidx.appcompat.widget.AppCompatRadioButton
            android:id="@+id/btnEigene"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:background="@drawable/radio_flat_selector"
            android:button="@android:color/transparent"
            android:checked="true"
            android:drawableTop="@drawable/ic_account"
            android:drawablePadding="5dp"
            android:gravity="center"
            android:paddingStart="16dp"
            android:paddingTop="5dp"
            android:paddingEnd="16dp"
            android:paddingBottom="5dp"
            android:text="@string/Eigene"
            android:textColor="@color/radio_flat_text_selector" />

        <androidx.appcompat.widget.AppCompatRadioButton
            android:id="@+id/btnKontakte"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:background="@drawable/radio_flat_selector"
            android:button="@android:color/transparent"
            android:drawableTop="@drawable/ic_contacts"
            android:drawablePadding="5dp"
            android:gravity="center"
            android:paddingStart="16dp"
            android:paddingTop="5dp"
            android:paddingEnd="16dp"
            android:paddingBottom="5dp"
            android:text="@string/Kontakte"
            android:textColor="@color/radio_flat_text_selector" />

        <androidx.appcompat.widget.AppCompatRadioButton
            android:id="@+id/btnAlle"
            android:layout_width="70dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:background="@drawable/radio_flat_selector"
            android:button="@android:color/transparent"
            android:drawableTop="@drawable/ic_all"
            android:drawablePadding="5dp"
            android:gravity="center"
            android:paddingStart="16dp"
            android:paddingTop="5dp"
            android:paddingEnd="16dp"
            android:paddingBottom="5dp"
            android:text="@string/Alle"
            android:textColor="@color/radio_flat_text_selector" />

        <androidx.appcompat.widget.AppCompatRadioButton
            android:id="@+id/btnGeloescht"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginVertical="4dp"
            android:layout_marginLeft="6dp"
            android:layout_marginTop="0dp"
            android:layout_marginRight="6dp"
            android:button="@android:color/transparent"
            android:contentDescription="@string/deletedquestions"
            android:drawableTop="@drawable/selectorbtnquestions"
            android:drawablePadding="-1dp"
            android:gravity="center"
            android:paddingTop="0dp"
            android:scaleX="1.0"
            android:scaleY="1.0"
            android:text="@string/Gel"
            android:textSize="10sp"
            android:visibility="gone" />

        <androidx.appcompat.widget.AppCompatRadioButton
            android:id="@+id/btnArchiviert"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:background="@drawable/radio_flat_selector"
            android:button="@android:color/transparent"
            android:drawableTop="@drawable/ic_archive"
            android:drawablePadding="5dp"
            android:gravity="center"
            android:paddingStart="16dp"
            android:paddingTop="5dp"
            android:paddingEnd="16dp"
            android:paddingBottom="5dp"
            android:text="@string/Archiviert"
            android:textColor="@color/radio_flat_text_selector" />

        <androidx.appcompat.widget.AppCompatRadioButton
            android:id="@+id/btnAus"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:background="@drawable/radio_flat_selector"
            android:button="@android:color/transparent"
            android:drawableTop="@drawable/ic_hidden"
            android:drawablePadding="5dp"
            android:gravity="center"
            android:paddingStart="16dp"
            android:paddingTop="5dp"
            android:paddingEnd="16dp"
            android:paddingBottom="5dp"
            android:text="@string/Ausgebl"
            android:textColor="@color/radio_flat_text_selector" />

    </RadioGroup>

radio_flat_selector.xml for background selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/radio_flat_selected" android:state_checked="true" />
    <item android:drawable="@drawable/radio_flat_regular" />
</selector>

radio_flat_selected.xml for selected button:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="1dp" />
<solid android:color="@color/colorAccent" />
<stroke
    android:width="1dp"
    android:color="@color/colorAccent" />
</shape>

radio_flat_regular.xml for regular selector:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="1dp" />
<solid android:color="#fff" />
<stroke
    android:width="1dp"
    android:color="@color/colorAccent" />
</shape>

All the above 3 file code will be in drawable/ folder.

Now we also need Text Color Selector to change color of text accordingly.

radio_flat_text_selector.xml for text color selector

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/colorAccent" android:state_checked="false" />
<item android:color="@color/text_n" android:state_checked="true" />
</selector>

2 Answers2

1

I had solved this problem so I thought I would post an answer so that in future no one will have to face such a problem.

Here is the solution to rounded RadioButton.

<RadioGroup
        android:id="@+id/llButtons"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <androidx.appcompat.widget.AppCompatRadioButton
            android:id="@+id/btnEigene"
            android:layout_width="58dp"
            android:layout_height="58dp"
            android:layout_marginStart="4dp"
            android:background="@drawable/radio_flat_selector"
            android:button="@android:color/transparent"
            android:contentDescription="@string/EigeneFragen"
            android:drawableTop="@drawable/ic_mine"
            android:drawablePadding="-1dp"
            android:gravity="center"
            android:padding="10dp"
            android:text="@string/Eigene"
            android:textSize="11sp" />

        <androidx.appcompat.widget.AppCompatRadioButton
            android:id="@+id/btnKontakte"
            android:layout_width="58dp"
            android:layout_height="58dp"
            android:layout_marginStart="4dp"
            android:background="@drawable/radio_flat_selector"
            android:button="@android:color/transparent"
            android:contentDescription="@string/FragenKontakte"
            android:drawableTop="@drawable/ic_contacts"
            android:drawablePadding="-1dp"
            android:gravity="center"
            android:padding="10dp"
            android:text="@string/Kontakte"
            android:textSize="11sp" />

        <androidx.appcompat.widget.AppCompatRadioButton
            android:id="@+id/btnAlle"
            android:layout_width="58dp"
            android:layout_height="58dp"
            android:layout_marginStart="4dp"
            android:background="@drawable/radio_flat_selector"
            android:button="@android:color/transparent"
            android:contentDescription="@string/Alle"
            android:drawableTop="@drawable/ic_all"
            android:drawablePadding="-1dp"
            android:gravity="center"
            android:padding="10dp"
            android:text="@string/Alle"
            android:textSize="11sp"
            android:visibility="visible" />

        <androidx.appcompat.widget.AppCompatRadioButton
            android:id="@+id/btnGeloescht"
            android:layout_width="58dp"
            android:layout_height="58dp"
            android:layout_marginStart="4dp"
            android:background="@drawable/radio_flat_selector"
            android:button="@android:color/transparent"
            android:contentDescription="@string/deletedquestions"
            android:drawableTop="@drawable/ic_delete"
            android:drawablePadding="-1dp"
            android:gravity="center"
            android:padding="10dp"
            android:text="@string/Gel"
            android:textSize="12sp"
            android:visibility="gone" />

        <androidx.appcompat.widget.AppCompatRadioButton
            android:id="@+id/btnArchiviert"
            android:layout_width="58dp"
            android:layout_height="58dp"
            android:layout_marginStart="4dp"
            android:background="@drawable/radio_flat_selector"
            android:button="@android:color/transparent"
            android:contentDescription="@string/Archiv"
            android:drawableTop="@drawable/ic_archive"
            android:drawablePadding="-1dp"
            android:gravity="center"
            android:padding="10dp"
            android:text="@string/Archiviert"
            android:textSize="11sp" />

        <androidx.appcompat.widget.AppCompatRadioButton
            android:id="@+id/btnAus"
            android:layout_width="58dp"
            android:layout_height="58dp"
            android:layout_marginStart="4dp"
            android:background="@drawable/radio_flat_selector"
            android:button="@android:color/transparent"
            android:contentDescription="@string/ausgeblendetefragen"
            android:drawableTop="@drawable/ic_hidden"
            android:drawablePadding="-1dp"
            android:gravity="center"
            android:padding="10dp"
            android:text="@string/Ausgebl"
            android:textSize="11sp" />
    </RadioGroup>

radio_flat_selector.xml for background selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/radio_flat_selected" android:state_checked="true" />
<item android:drawable="@drawable/radio_flat_regular" />

radio_flat_selected.xml for selected button:

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/lightdivider" />
    <stroke
        android:width="1dp"
        android:color="@color/lightdivider" />

    <size
        android:width="50dp"
        android:height="50dp" />
</shape>

radio_flat_regular.xml for regular selector:

   <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid android:color="#fff" />
    <stroke
        android:width="1dp"
        android:color="@color/lightdivider" />
    <size
        android:width="50dp"
        android:height="50dp" />
</shape>

All the above 3 file code will be in drawable/ folder.

Now we also need Text Color Selector to change color of text accordingly.

radio_flat_text_selector.xml for text color selector

 <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/lightdivider" android:state_checked="false" />
    <item android:color="@color/colorLV" android:state_checked="true" />
</selector>
0

Try changing android:shape="rectangle" to android:shape="oval"

Justinas Krutulis
  • 39
  • 2