Overlay image on top of button

Question

Here is my unanswered question: Add new item count to icon on button - Android

Basically I want to display "new" counts on top. I see it as overlaying some view over existing button. How this can be done?

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

1

Easiest thing to do is:

Use a RelativeLayout with layout_height and layout_width set to WRAP_CONTENT.
Put one Button into the RelativeLayout with layout_height and layout_width set to WRAP_CONTENT.
Add an ImageView into the RelativeLayout aligned to PARENT_TOP and PARENT_RIGHT and set the visibility to GONE.

Then you can simply set the ImageView's drawable to the appropriate count image and set the visibility to VISIBLE.

edited Jun 20 '20 at 09:12

Community

1
1

answered May 18 '11 at 01:34

Femi

64,273
8
118
148

I think this won't do the overlapping trick. Maybe using a FrameLayout? – aromero May 18 '11 at 01:44
`RelativeLayout` will overlap just fine if you set your constraints correctly. – Femi May 18 '11 at 01:45
the problem i see with this approach is you'd have to have a count image for every possible value. with emails that could be 500+ if you're lazy like me and don't read and clean up all your mail. – jkhouw1 May 18 '11 at 02:12
Well, if thats the issue you could use a regular `TextView` instead of an `ImageView`, set a background image and then just set the count. – Femi May 18 '11 at 02:35

score 0 · Accepted Answer · answered May 18 '11 at 02:08

Ok here is what i'd do:

Create a custom control that extends button. I'm not going to do the pretty graphics for you but this will give you the basic idea:

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.widget.Button;

    public class CounterButton extends Button{
        protected int count=0;
        protected final Paint myTextPaint = new Paint();
        protected final Paint myCirclePaint = new Paint();

        public CounterButton(Context context, AttributeSet attrs) {
            super(context, attrs);
            this.setBackgroundDrawable(getResources().getDrawable(android.R.drawable.ic_dialog_email));
            this.myCirclePaint.setARGB(150, 255, 0, 0);
            this.myTextPaint.setARGB(150, 255, 255, 255);

        }

        @Override
        protected void onDraw(Canvas canvas) {
                    if(count!=0){
            canvas.drawCircle((float) (this.getWidth()*.75), (float) (this.getHeight()*.4), this.getHeight()/5, myCirclePaint);
            canvas.drawText(Integer.toString(count), (float) (this.getWidth()*.75), (float) (this.getHeight()*.4), this.myTextPaint);
             }
        }
    }

Clean up the sizing of your text you draw, the circle positioning (and add a border etc) and you have a custom control. You could further extend it so you could set the background in xml or dynamically and you have a reusable control with a number counter in a circle.

then in your code you could do:

CounterButton cb=(CounterButton) findViewById(R.id.whateverYouGaveItInXML);
cb.count=SomeNewNumber;
cb.invalidate;

the invalidate will redraw the image with the new value in the circle.

I used a button in the event you want to have it clickable easily and all that - but you could just as easily extend view if you are just doing a view.

Overlay image on top of button

2 Answers2