MAUI: Red circle is not visible on the UI

Sreenivasan, Sreejith 270 Reputation points
2025-12-01T10:11:43.48+00:00

I am showing a list of alerts on the UI using a View. If the alert is not read, I need to show a red circle on the left side of it and I need to show the unread count on the tab icon. But currently only a gray circle is showing on the UI and count is also no showing.

Please check the below screenshot:
Screenshot_1764582036

Xaml:

<ctrl:SwipeableListView VerticalOptions="Fill" HorizontalOptions="Fill"
                        SelectedItemCommand="{Binding SelectedItemCommand, Mode=TwoWay}"
                        LeftButtonCommand="{Binding ReadCommand}"
                        LeftButtonEnabled="true"
                        RightButtonEnabled="true"
                        RightButtonCommand="{Binding ArchiveCommand}"
                        Items="{Binding Notifications}"
                        AutomationProperties.IsInAccessibleTree="False"
                        EmptyView="{x:Reference _stackLayout}" />

SwipeableListView.cs:

public class SwipeableListView : View
{
    public static readonly BindableProperty ItemsProperty =
        BindableProperty.Create(nameof(Items), typeof(IEnumerable<Swipeable>), typeof(SwipeableListView),
        new List<Swipeable>(), propertyChanged: OnItemsChanged, defaultBindingMode: BindingMode.TwoWay);
    public IEnumerable<Swipeable> Items
    {
        get { return (IEnumerable<Swipeable>)GetValue(ItemsProperty); }
        set { SetValue(ItemsProperty, value); }
    }
    public static readonly BindableProperty LeftButtonEnabledProperty =
        BindableProperty.Create(nameof(LeftButtonEnabled), typeof(bool), typeof(SwipeableListView), true);
    public bool LeftButtonEnabled
    {
        get { return (bool)GetValue(LeftButtonEnabledProperty); }
        set { SetValue(LeftButtonEnabledProperty, value); }
    }
    public static readonly BindableProperty LeftButtonColorProperty =
        BindableProperty.Create(nameof(LeftButtonColor), typeof(string), typeof(SwipeableListView), "#007ac9");
    public string LeftButtonColor
    {
        get { return (string)GetValue(LeftButtonColorProperty); }
        set { SetValue(LeftButtonColorProperty, value); }
    }
    public static readonly BindableProperty RightButtonColorProperty =
        BindableProperty.Create(nameof(RightButtonColor), typeof(string), typeof(SwipeableListView), "#004aa9");
    public string RightButtonColor
    {
        get { return (string)GetValue(RightButtonColorProperty); }
        set { SetValue(RightButtonColorProperty, value); }
    }
    public static readonly BindableProperty RightButtonEnabledProperty =
        BindableProperty.Create(nameof(RightButtonEnabled), typeof(bool), typeof(SwipeableListView), true);
    public bool RightButtonEnabled
    {
        get { return (bool)GetValue(RightButtonEnabledProperty); }
        set { SetValue(RightButtonEnabledProperty, value); }
    }
    public static readonly BindableProperty SelectedItemCommandProperty =
        BindableProperty.Create(nameof(SelectedItemCommand), typeof(ICommand), typeof(SwipeableListView), null);
    public ICommand SelectedItemCommand
    {
        get { return (ICommand)GetValue(SelectedItemCommandProperty); }
        set { SetValue(SelectedItemCommandProperty, value); }
    }
    public static readonly BindableProperty LeftButtonCommandProperty =
        BindableProperty.Create(nameof(LeftButtonCommand), typeof(ICommand), typeof(SwipeableListView), null);
    public ICommand LeftButtonCommand
    {
        get { return (ICommand)GetValue(LeftButtonCommandProperty); }
        set { SetValue(LeftButtonCommandProperty, value); }
    }
    public static readonly BindableProperty RightButtonCommandProperty =
        BindableProperty.Create(nameof(RightButtonCommand), typeof(ICommand), typeof(SwipeableListView), null);
    public ICommand RightButtonCommand
    {
        get { return (ICommand)GetValue(RightButtonCommandProperty); }
        set { SetValue(RightButtonCommandProperty, value); }
    }
    private static void OnItemsChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var swipeableListView = bindable as SwipeableListView;
        if (ItemsChangedEvent != null)
            ItemsChangedEvent.Invoke(swipeableListView, (IEnumerable<Swipeable>)newValue);
        UpdateEmptyView(swipeableListView);
    }
    public static event EventHandler<IEnumerable<Swipeable>> ItemsChangedEvent;
    public static readonly BindableProperty EmptyViewProperty =
       BindableProperty.Create(nameof(EmptyView), typeof(View), typeof(SwipeableListView), null, propertyChanged: OnEmptyViewChanged);
    public View EmptyView
    {
        get { return (View)GetValue(EmptyViewProperty); }
        set { SetValue(ItemsProperty, value); }
    }
    private static void OnEmptyViewChanged(BindableObject bindable, object oldValue, object newValue)
    {
        UpdateEmptyView((SwipeableListView)bindable);
    }
    private static void UpdateEmptyView(SwipeableListView swipeableListView)
    {
        if (swipeableListView?.EmptyView != null)
        {
            if (swipeableListView.Items == null || !swipeableListView.Items.Any())
            {
                swipeableListView.EmptyView.IsVisible = true;
            }
            else
            {
                swipeableListView.EmptyView.IsVisible = false;
            }
        }
    }
}

Handler code is very lengthy, so adding it as a text file below:

SwipeableListViewHandler.txt

In handler there is below code:

NewInfoIndicatorButton = itemView.FindViewById<Button>(MAUI.Clinical6.Resource.Id.button_red_circle);

button_red_circle:

<Button
    android:id="@+id/button_red_circle"
    android:layout_width="10dp"
    android:layout_height="10dp"
    android:layout_marginTop="7dp"
    android:layout_marginRight="2dp"
    android:background="@drawable/zzz_red_circle"
    android:enabled="false" />

zzz_red_circle:

<?xml version="1.0" encoding="UTF-8" ?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

   <solid 
       android:color="#BE1717"/>

   <size 
       android:width="2dp"
        android:height="2dp"/>
</shape>

I have added the zzz_red_circle under the .NET MAUI Class Library projects ->Platform -> Android -> Resources -> Drawable folder and set the build action to AndroidResource. But the red circle is not visible on both sections.

Developer technologies | .NET | .NET MAUI
{count} votes

1 answer

Sort by: Most helpful
  1. Jack Dang (WICLOUD CORPORATION) 4,865 Reputation points Microsoft External Staff Moderator
    2025-12-04T02:49:05.7766667+00:00

    Hi @Sreenivasan, Sreejith ,

    Here's the modified code:

    Hope this helps! If my answer was helpful - kindly follow the instructions here so others with the same problem can benefit as well.


Your answer

Answers can be marked as 'Accepted' by the question author and 'Recommended' by moderators, which helps users know the answer solved the author's problem.