RadioButton not visible on Android 10/11 with light theme

Viewed 876

We are using the new experimental radio button in Xamarin Forms: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/radiobutton

Xamarin.Forms version - 4.8.0.1269

The radio buttons work perfectly in Android 9 and lower devices. But on Android 10/11, if the phone theme is set to Light theme, the Radio button icon goes missing. Here are the sample screenshots from both dark and light themes respectively:

Dark theme on emulator

Light theme on Samsung device

And here is the code written for the radio buttons:

                    <StackLayout VerticalOptions="Start" 
                                 HorizontalOptions="FillAndExpand">

                        <Label Text="Body temperature"
                               Style="{StaticResource BlackBoldLabelStyle}"
                               VerticalOptions="Start"
                               HorizontalOptions="StartAndExpand" />

                        <StackLayout VerticalOptions="Start" 
                                     Margin="0,10,0,0"
                                     HorizontalOptions="FillAndExpand"
                                     Orientation="Horizontal">
                            <StackLayout.GestureRecognizers>
                                <TapGestureRecognizer Command="{Binding OnBodyTempOption1Click}"/>
                            </StackLayout.GestureRecognizers>

                            <RadioButton
                                   HorizontalOptions="Start"
                                   VerticalOptions="Center" 
                                   IsChecked="{Binding IsBodyTempOption1Check}"/>

                            <Label Text="Less than 99.5 degree F / 37.5 degree C"
                                   VerticalOptions="Center"
                                   Style="{StaticResource DarkGrayLabelStyle}"
                                   HorizontalOptions="StartAndExpand" />
                        </StackLayout>

                        <StackLayout VerticalOptions="Start" 
                                     Margin="0,5,0,0"
                                     HorizontalOptions="FillAndExpand"
                                     Orientation="Horizontal">
                            <StackLayout.GestureRecognizers>
                                <TapGestureRecognizer Command="{Binding OnBodyTempOption2Click}"/>
                            </StackLayout.GestureRecognizers>

                            <RadioButton
                                   HorizontalOptions="Start"
                                   VerticalOptions="Center" 
                                IsChecked="{Binding IsBodyTempOption2Check}"/>

                            <Label Text="More than 99 degree F / 37 degree C"
                               VerticalOptions="Center"
                                   Style="{StaticResource DarkGrayLabelStyle}"
                               HorizontalOptions="StartAndExpand" />
                        </StackLayout>
                    </StackLayout>

Please help on how to fix the issue with the radio button visibility.

1 Answers

While Xamarin.Fomrs dev team working on this issue you can apply the following workaround, in Android styles.xml set the following attribute:

<item name="android:colorControlNormal">#FF4081</item>

which will set a color to the RadioButton circle.

Related