[Bug] Radio button styling issues

[Simon-72]

Description

when using a Radio button with black page background the circle to click is not visible and there is no property to change the colour of it, also setting the backgroundcolor of the control results in a line appearing along the bottom of the control.

Steps to Reproduce

1. Create a radio button
2. Change the background colour of the page
3. change the background colour of the radiobutton.

Expected Behavior

Circle should be able to be made visible on a black page, and line should not appear.

Actual Behavior

circle to click is not visible and line appears on bottom of control.

Basic Information

• Version with issue: 5.0.0.1905
• Last known good version: None
• Platform Target Frameworks:
  • Android: 10
• Android Support Library / AndroidX Version:
• NuGet Packages:
• Affected Devices:

Environment

Show/Hide Visual Studio info

Build Logs

Screenshots

Reproduction Link

Example XML to reproduce:

        <StackLayout>               
            <StackLayout>                    
                <RadioButton BackgroundColor="White" FontSize="Small" 
                             TextColor="Black" 
                             IsChecked="{Binding RButtonChecked}"
                             Content="Test A" Value="test"/>
            </StackLayout>                
        </StackLayout>    

Workaround

[PureWeen]

For the time being @Simon-72 I would recommend taking a look at this

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/radiobutton#redefine-radiobutton-appearance

Also can you attach the XAML or a sample that causes that underline to appear?

[mhrastegari]

After so many searches this was the one :) at least for android it helps in theme changing(dark\light)

<item name="android:colorControlNormal">#7a7a7a</item> <item name="android:colorControlActivated">#FF9800</item> <item name="android:colorControlHighlight">#FF9800</item>

[Redth]

Thanks for posting your workaround,

[ahoke-cr]

After so many searches this was the one :) at least for android it helps in theme changing(dark\light)

<item name="android:colorControlNormal">#7a7a7a</item> <item name="android:colorControlActivated">#FF9800</item> <item name="android:colorControlHighlight">#FF9800</item>

Worth noting that changing these values will affect more than just the RadioButton.

[mhrastegari]

Hi @ahoke-cr ! Yeah I know I should probably change and remove some of that!

You just need this line of code

`  <item name="android:colorControlNormal">#7a7a7a</item>`

[nZeus]

Unfortunately, this work-around doesn't remove the underline...
I see this is an old issue.. Any ideas how to fix that?

[ahoke-cr]

@nZeus migrate to MAUI and use a custom Handler to remove the underline :)

[nZeus]

To be realistic, that will probably happen in about a year. Maui is very unstable atm from my experience.

[nZeus]

The underline appears when radio-button has BackgroundColor="White"...
Work-around for me is to use BackgroundColor="Transparent" and set white bg to the parent element