Display mode in Xamarin.Android Segmented control (SfSegmentedControl)

3 Sep 20203 minutes to read

Depending on the application, different scenarios may require icons, text, or a combination of both for effective communication. The segmented control supports these three options.

Text

Items populated in the segmented control will be displayed as text by default.

  • c#
  • [C#]
    
    SfSegmentedControl segmentedControl = new SfSegmentedControl(this);
    segmentedControl.SelectionTextColor = Color.ParseColor("#FFFFFF");
    segmentedControl.VisibleSegmentsCount = 3;
    segmentedControl.BackColor = Color.ParseColor("#048EAC");
    segmentedControl.CornerRadius = 15;
    segmentedControl.DisplayMode = SegmentDisplayMode.Text;
    segmentedControl.BorderColor = Color.ParseColor("#929292");
    segmentedControl.SelectedIndex = 0;
    segmentedControl.FontColor = Color.Black;
    segmentedControl.SegmentBackgroundColor = Color.Transparent;
    segmentedControl.ItemsSource = new ObservableCollection<SfSegmentItem>
    {
        new SfSegmentItem(){ Text = "Day"},
        new SfSegmentItem(){Text = "Week"},
        new SfSegmentItem(){ Text = "Month"},
    };
    
    SelectionIndicatorSettings selectionIndicator = new SelectionIndicatorSettings()
    {
        Color = Color.White
    };

    Xamarin.Android SfSegmentedControl with Text display mode

    Image

    Items populated in the segmented control can be displayed as icons.

  • c#
  • [C#]
    
    SfSegmentedControl segmentedControl = new SfSegmentedControl(this);
    ...
    segmentedControl.DisplayMode = SegmentDisplayMode.Image;
    segmentedControl.ItemsSource = new ObservableCollection<SfSegmentItem>
    {
        new SfSegmentItem(){IconFont = "6", FontIconFontColor=Color.ParseColor("#FFFFFF"), FontColor=Color.ParseColor("#FFFFFF")},    
        new SfSegmentItem(){IconFont = "6", FontIconFontColor=Color.ParseColor("#FFFFFF"), FontColor=Color.ParseColor("#FFFFFF")},     
        new SfSegmentItem(){IconFont = "6", FontIconFontColor=Color.ParseColor("#FFFFFF"), FontColor=Color.ParseColor("#FFFFFF")}       
    };

    Xamarin.Android SfSegmentedControl with Image display mode

    Image with text

    Items populated in the segmented control can be displayed as icons with accompanying text.

  • c#
  • [C#]
    
    SfSegmentedControl segmentedControl = new SfSegmentedControl(this);
    ...
    segmentedControl.DisplayMode = SegmentDisplayMode.ImageWithText;
    segmentedControl.ItemsSource = new ObservableCollection<SfSegmentItem>
    {
        new SfSegmentItem(){IconFont = "6", FontIconFontColor=Color.ParseColor("#FFFFFF"), FontColor=Color.ParseColor("#FFFFFF"), Text = "Day"},     
        new SfSegmentItem(){IconFont = "6", FontIconFontColor=Color.ParseColor("#FFFFFF"), FontColor=Color.ParseColor("#FFFFFF"), Text = "Week"}    
        new SfSegmentItem(){IconFont = "6", FontIconFontColor=Color.ParseColor("#FFFFFF"), FontColor=Color.ParseColor("#FFFFFF"), Text = "Month"}
    };

    Xamarin.Android SfSegmentedControl with Image and Text display mode

    How to generate font icons

    The segmented control enables the user to use font icons for the items in the data source collection. For this we have to first give the desired font icon and its font family using IconFont and FontIconTypeface property.

    NOTE

    Font family must be added to the respective folders based on the platforms
    Android -> Add the font family inside Resource-> drawable

  • c#
  • [C#]
    
    segmentedControl.FontIconTypeface = "segment.ttf";