Customization of Xamarin.Android Segmented Control

3 Sep 2020 / 3 minutes to read

The segmented control supports customizing segment color, text color, icon size, selection color, and more. This control also supports enabling the segments to fit your application’s theme. It can be customized in the following areas.

Text appearance

The text inside the segmented control can be customized by its font size, color, and its font family.

Font family

You can customize the font family of the segmented item using the FontIconStyle property.

  • c#
  • segmentedControl.FontIconStyle = Typeface.Create("sans-serif-light", TypefaceStyle.Normal);

    Font color

    You can customize the text color of the segmented item using the FontColor property.

  • c#
  • segmentedControl.FontColor = Color.Red;

    Font color customization in segmented control

    Font size

    You can change the text size of the segmented item using the FontSize property.

  • c#
  • segmentedControl.FontSize = 20;

    Font size customization in segmented control

    Border

    You can customize the border by their color and thickness.

    Border color

    You can customize the BorderColor of all the items in the segmented control.

  • c#
  • segmentedControl.BorderColor = Color.Red;

    Border color customization in segmented control

    Border thickness

    You can customize the width of the border using the BorderThickness property.

  • c#
  • segmentedControl.BorderThickness = 5;

    Border thickness customization in segmented control

    Padding

    The segmented control handles padding between the items.

    Segment padding

    Spacing between the segmented items in the control can be customized using the SegmentPadding.

  • c#
  • segmentedControl.SegmentPadding = 15;

    Segment padding customization in segmented control

    Corner radius

    The segmented control provides corner radius support for the segmented items and strip.

    Item radius

    The segmented control customizes the corner radius for each segmented item.

  • c#
  • segmentedControl.SegmentCornerRadius = 15;

    Segment corner radius customization in segmented control

    Selection strip radius

    The segmented control customizes corner radius for selection strip using the CornerRadius property of SelectionIndicatorSetting.

  • c#
  • segmentedControl.SelectionIndicatorSettings = new SelectionIndicatorSettings()
    {
        CornerRadius = 15
    };

    Selected segment corner radius customization in segmented control

    Control radius

    The segmented control also handles corner radius for border line of the whole control.

  • c#
  • segmentedControl.CornerRadius = 15;

    Corner radius customization in segmented control

    Color

    The segmented control allows users to customize the background color of the segmented items and background color of the control.

    Item color

    You can customize the background color of each segmented item using the Color property of SelectionIndicatorSettings.

  • c#
  • segmentedControl.SelectionIndicatorSettings = new SelectionIndicatorSettings()
    {
        Color = Color.ParseColor("#FF355088")
    };

    Segment item color customization in segmented control

    Control color

    You can customize the background color of the control by setting value for the BackColor property.

  • c#
  • segmentedControl.BackColor = Color.ParseColor("#02A0AE");

    Segmented control color customization in segmented control

    Scrolling in segmented control programmatically

    The SegmentedControl allows programmatic scrolling based on index and item using the ScrollTo methods mentioned as follows.

    ScrollTo(index, scrollToPosition)

    This method is used to scroll the segment item based on given index and ScrollToPosition value.

    segmentedControl.ScrollTo(5, Syncfusion.Android.Buttons.ScrollToPosition.Start);

    ScrollTo(item, scrollToPosition)

    This method is used to scroll the segment item based on the given data or SfSegmentItem and ScrollToPosition value.

    segmentedControl.ScrollTo(viewModel.Items[5], Syncfusion.Android.Buttons.ScrollToPosition.Start);