Adding a notification badge to a ActionBarSherlock

deeeeerodeeeeero USMember
edited September 2013 in Xamarin.Android

I've already got this working, except that the notifications don't update. In other words, it's a static notification right now, and I want to make it dynamic.

I followed this java code: http://stackoverflow.com/a/17972602

My code is below:

Custom item in menu - Main.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/badge"
        android:actionLayout="@layout/feed_update_count"
        android:showAsAction="always"
        android:title="Recent Alerts"
        android:orderInCategory="9999" />
</menu>

Custom shape drawable - shape_notification.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <stroke 
                android:color="#22000000" 
                android:width="2dp"/>
            <corners 
                android:radius="5dp" />
            <solid 
                android:color="#ef4444"/>
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <stroke 
                android:color="#22000000" 
                android:width="2dp"/>
            <corners 
                android:radius="5dp" />
            <solid 
                android:color="#CC0001"/>
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

Layout for my view - feed_update_notification.axml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingRight="10dp"
    android:paddingLeft="10dp">
    <Button 
        android:id="@+id/notif_count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minWidth="32dp"
        android:minHeight="32dp"
        android:background="@drawable/shape_notification"
        android:textSize="16sp"
        android:textColor="@android:color/white"
        android:gravity="center"
        android:padding="2dp"
        android:singleLine="true">
    </Button>
</RelativeLayout>

MainActivity - setting up (and attempting to update) my view

public static Button notifCount;
public static int mNotifCount = 0;

public override bool OnCreateOptionsMenu(IMenu menu) {
    SupportMenuInflater.Inflate(Resource.Menu.Main, menu);

    var count = menu.FindItem(Resource.Id.badge).ActionView;
    notifCount = (Button)count.FindViewById<Button>(Resource.Id.notif_count);
    notifCount.Text = mNotifCount.ToString();

    return base.OnCreateOptionsMenu(menu);
}

public void setNotifCount(int count) {
    mNotifCount = count;
    SupportInvalidateOptionsMenu();
}

Answers

  • deeeeerodeeeeero USMember

    So... I'm an idiot. It works properly. The code I was using to test it had the problem.

    Sigh... it's been one of those days.

  • charlesbockcharlesbock USMember ✭✭

    Hi! Thanks for sharing, I followed your code and my app is displaying the notification number correctly, but the button becames unclickable.

    Any info to handle this?

    Thanks!

  • deeeeerodeeeeero USMember

    Hey! Sorry for taking a while to get back to your question - I haven't worked on mobile app dev in months so I couldn't recall my solution or get to my files until now.

    I believe I encountered the same problem, and here's my code now. Hopefully this helps.

    Custom item in menu (Resources/layout/menu/Main.xml)

    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android">
        <item
            android:id="@+id/badge"
            android:actionLayout="@layout/feed_update_count"
            android:showAsAction="always"
            android:title="Recent Alerts"
            android:orderInCategory="9999" />
    </menu>
    

    Layout for my view (Resources/layout/feed_update_count.axml)

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingRight="10dp"
        android:paddingLeft="10dp">
        <Button 
            android:id="@+id/notif_count"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:minWidth="32dp"
            android:minHeight="32dp"
            android:textSize="16sp"
            android:textColor="@android:color/white"
            android:gravity="center"
            android:padding="2dp"
            android:singleLine="true">
        </Button>
    </RelativeLayout>
    

    Drawable for red notification (Resources/drawable/red_shape_notification.xml)

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <!-- Pressed State -->
        <item 
            android:state_focused="false" 
            android:state_selected="false"  
            android:state_pressed="true"
            >
            <shape>
                <corners 
                    android:radius="5dp" />
                <solid 
                    android:color="@color/light_red"/>
                <padding
                    android:left="10dp"
                    android:right="10dp" />
            </shape>
        </item>
        <!-- Unpressed State -->
        <item
            android:state_focused="false" 
            android:state_selected="false"  
            android:state_pressed="false"
            >
            <shape>
                <corners 
                    android:radius="5dp" />
                <solid 
                    android:color="@color/red" />
                <padding
                    android:left="10dp"
                    android:right="10dp" />
            </shape>
        </item>
    </selector>
    

    Drawable for gray notification (Resources/drawable/gray_shape_notification.xml)

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <!-- Pressed State -->
        <item 
            android:state_focused="false" 
            android:state_selected="false"  
            android:state_pressed="true"
            >
            <shape>
                <corners 
                    android:radius="5dp" />
                <solid 
                    android:color="@color/light_gray"/>
                <padding
                    android:left="10dp"
                    android:right="10dp" />
            </shape>
        </item>
        <!-- Unpressed State -->
        <item
            android:state_focused="false" 
            android:state_selected="false"  
            android:state_pressed="false"
            >
            <shape>
                <corners 
                    android:radius="5dp" />
                <solid 
                    android:color="@color/gray"/>
                <padding
                    android:left="10dp"
                    android:right="10dp" />
            </shape>
        </item>
    </selector>
    

    MainActivity.cs

    // create notification badge for Latest Alerts
    public static Button notifCount;
    public static int mNotifCount = 0;
    
    public override bool OnCreateOptionsMenu(IMenu menu) {
        SupportMenuInflater.Inflate(Resource.Menu.Main, menu);
    
        var count = menu.FindItem(Resource.Id.badge).ActionView;
        notifCount = (Button)count.FindViewById<Button>(Resource.Id.notif_count);
    
        if(mNotifCount > 0)
            notifCount.SetBackgroundDrawable(Resources.GetDrawable(Resource.Drawable.red_shape_notification));
        else
            notifCount.SetBackgroundDrawable(Resources.GetDrawable(Resource.Drawable.gray_shape_notification));
        notifCount.Text = mNotifCount.ToString();
    
        notifCount.Click += (sender, e) => {
            TabIndicator.CurrentItem = 1;
        };
    
        return base.OnCreateOptionsMenu(menu);
    }
    
    public void setNotifCount(int count) {
        mNotifCount = count;
        SupportInvalidateOptionsMenu();
    }
    
  • charlesbockcharlesbock USMember ✭✭

    Hi @deeeeero‌ i'm very sorry about gettin you an answer after so long, I got busy with another thing and now i'm getting back to this.

    Let me say that I used your code and it worked like a charm.

    Thanks a lot, your help has been very helpful.

    Best regards!

Sign In or Register to comment.