CODEWITHSUNDEEP
androidcanvasbitmapbadge
nirvik
nirvik

Reputation: 486

android draw circle badge on top on bitmap

I want to add a badge with the number of pending events above the menu icon of the application, but as you can see in the image below I have some problems. I'm unable to make the circle opaque, I don't want to see the grey lines behind the circle and the new image is cut on the top

I want to use it on the logo icon of the action bar (the home icon), not in any other menu item of the action bar so custom action view is not an option

enter image description here

    Bitmap bm = BitmapFactory.decodeResource(getResources(), drawableId);
    bm = bm.copy(bm.getConfig(), true);

    Paint circlePaint = new Paint();
    circlePaint.setAntiAlias(true);
    circlePaint.setColor(Color.RED);
    circlePaint.setStyle(Paint.Style.FILL);
    //circlePaint.setAlpha(255);

    Paint textPaint = new Paint(); 
    textPaint.setStyle(Style.FILL);  
    textPaint.setColor(Color.WHITE); 
    textPaint.setTextSize(23); 
    textPaint.setFakeBoldText(true);

    Canvas canvas = new Canvas(bm);
    canvas.drawCircle(bm.getWidth()/6, bm.getHeight()/5, 13, circlePaint);
    canvas.drawText(text, bm.getWidth()/7 + 5, bm.getHeight()/3, textPaint);

    return new BitmapDrawable(context.getResources(), bm);

Any help will be appreciated!

Thanks

Upvotes: 0

Views: 5024

Answers (3)

Jeffy Lazar
Jeffy Lazar

Reputation: 1923

What you are looking is called Android View badger and you should check this lovely TUTORIAL or this ...i am sure it will help you a lot ...enjoy :) :)

Upvotes: 2

Jitender Dev
Jitender Dev

Reputation: 6925

Create a menu item in res/menu and set the actionLayout to your layout

<menu xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:id="@+id/badge"
        android:actionLayout="@layout/actionbar_badge_layout"
        android:icon="@drawable/icn_menu_posts"
        android:showAsAction="always">
    </item>
</menu>

and your layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="48dp"
    android:layout_height="fill_parent"
    android:layout_gravity="right" >

    <!-- Menu Item Image -->
    <ImageView
        android:layout_width="48dp"
        android:layout_height="fill_parent"
        android:clickable="true"
        android:src="@drawable/bkg_actionbar_notify_off" />

    <!-- Badge Count -->    
    <TextView
        android:id="@+id/actionbar_notifcation_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:padding="@dimen/padding_small"
        android:text="99"
        android:textColor="@color/holo_orange_dark" />

</RelativeLayout>

Then in onCreateOptionsMenu of your activity do something like this...

public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
    inflater.inflate(R.menu.badge, menu);

    RelativeLayout badgeLayout = (RelativeLayout) menu.findItem(R.id.badge).getActionView();
    TextView tv = (TextView) badgeLayout.findViewById(R.id.actionbar_notifcation_textview);
    tv.setText("12");
}

Also checkout this answer.

Upvotes: 0

artemiygrn
artemiygrn

Reputation: 1036

I think you should use relative layout for this things, instead draw from canvas.

Here a nice tutorial how do it with relative layout.

EDIT:

For ActionBar

Upvotes: 0

Related Questions