问题
I'm trying to make a custom RadioButton like this:
I tried making a RadioGroup with three RadioButton in it with the background of the RadioGroup being a rectangle and the background of the RadioButton would be a blue rectangle when checked and white when not but it doesn't seem to be working.
<RadioGroup
android:id="@+id/Frequency"
android:layout_width="370dp"
android:layout_height="40dp"
android:background="@drawable/radiorectangle"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.614">
<RadioButton
android:id="@+id/Dailyrb"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:checked="true"
android:text="Daily" />
<RadioButton
android:id="@+id/Weekly"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Weekly" />
<RadioButton
android:id="@+id/Monthly"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Monthly" />
</RadioGroup>
The Button
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape android:shape="rectangle">
<solid android:color="@color/clearBlue">
</solid>
<corners android:radius="16dp"></corners>
</shape>
</item>
<item android:state_checked="false" >
<shape android:shape="rectangle">
<solid android:color="@color/white">
</solid>
<corners android:radius="16dp"></corners>
</shape>
</item>
回答1:
I suggest you this solution :
Create two shape states :
res/drawable/state_checked.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/colorPrimary">
</solid>
<corners android:radius="16dp"></corners>
</shape>
res/drawable/state_unchecked.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFF">
</solid>
<corners android:radius="16dp"></corners>
</shape>
Then define selector for both text and background color.
Create a text_selector.xml
in your res/drawable/
folder :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"
android:color="#FFFFFF" /> <!-- text color when checked -->
<item android:color="#000000" /> <!-- default text color-->
</selector>
Create a background_selector.xml
in your res/drawable/
folder :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_checked="true"
android:drawable="@drawable/state_checked" />
<item android:drawable="@drawable/state_unchecked" />
</selector>
Finally, add backgroud selectr and text selector :
<RadioButton
android:id="@+id/Dailyrb"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:checked="true"
android:textColor="@drawable/text_selector"
android:background="@drawable/background_selector"
android:text="Daily" />
<RadioButton
android:id="@+id/Weekly"
android:layout_width="0dp"
android:background="@drawable/background_selector"
android:textColor="@drawable/text_selector"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Weekly" />
<RadioButton
android:id="@+id/Monthly"
android:layout_width="0dp"
android:textColor="@drawable/text_selector"
android:background="@drawable/background_selector"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Monthly" />
See the result :
回答2:
You can use the default ChipGroup included in the Material Components Library.
<com.google.android.material.chip.ChipGroup
app:singleSelection="true"
....>
<com.google.android.material.chip.Chip
style="@style/Widget.MaterialComponents.Chip.Choice"
app:checkedIconVisible="true"
android:text="Daily"
.../>
<com.google.android.material.chip.Chip
style="@style/Widget.MaterialComponents.Chip.Choice"
app:checkedIconVisible="true"
android:text="Weekly"
.../>
<com.google.android.material.chip.Chip
style="@style/Widget.MaterialComponents.Chip.Choice"
app:checkedIconVisible="true"
android:text="Monthly"
.../>
</com.google.android.material.chip.ChipGroup>
来源:https://stackoverflow.com/questions/49520442/making-a-custom-radiobutton