Is there a way to get rid of the border lines between entries in a segmented control in Android (works fine in iOS) (Xamarin.Forms)

[Jesse]

I have a segmented control with three choices. In iOS I can set the background and foreground colors so that the selected is black on white and the unselected are white on black.  But in Android each segment is surrounded by a white  border. Is there a way to set the color on the border or to make it invisible?

 

Thanks

 

<Grid BackgroundColor="{Binding ., Converter={StaticResource DealerPrimaryColorConverter}}">
<telerikInput:RadSegmentedControl
x:Name="segmentControl"
Margin="12"
ItemsSource="{Binding SegmentedViewNames}"
SegmentBackgroundColor="{StaticResource caseDullPrimary}"
SegmentTextColor="{StaticResource white}"
SelectedIndex="{Binding SelectedViewIndex, Mode=TwoWay}"
SelectedSegmentBackgroundColor="{StaticResource white}"
SelectedSegmentTextColor="{StaticResource black}"
SelectionChanged="segmentControl_SelectionChanged" />
</Grid>

[Lance | Manager Technical Support]

Hello Jesse,

Unfortunately, there is not an easy way to do this due to the native implementations of the component.

Solution

What I would recommend instead is to create your own segmented control using RadButtons, this will give you the ultimate power over the appearance... including using images in the segments and border styling for each segment.

Demo

To give you a huge head start, I have already created this custom control. Go to the following repo on GitHub (or just download my attachment) https://github.com/LanceMcCarthy/CustomXamarinDemos/tree/main/src/SegmentedCustomControl 

Customizing The Demo

Inside the custom control, you'll see a CreateButtons method. Inside there, you will find a section that iterates over the ItemsSource property.

That's where you have access to each button that is being created, and you'll see section of the logic that adds the "walls" between the segments (see screenshot below). Just comment out that part or change the border thickness values to your liking.

You can see the rest of the customization options for the RadButton here => Xamarin Button Documentation | Key Features | Telerik UI for Xamarin

Regards,
Lance | Manager Technical Support
Progress Telerik