A small Android counter next to a button

Question

I would like to add a small counter next to the button to show the remaining amount for some items, for example, the remaining number of remaining unused tips. The target layout will look like this:

Question:

I searched the Internet and found that some say they use different pictures for each quantity. But how can this be solved if the quantity can be up to 100? Is it really necessary to draw such a conclusion?

I'm going to insert two buttons together in a RelativeLayout so that the user clicks the bottom button, the top button will count up and down and setText itself, but are there any better solutions or imports?

Edit:

Thanks to Rupesh for your codes and tips! I implemented the following. But do you know how to move the text image of the red circle further to the right? and 20 cannot be shown correctly in the red circle too ...

the code:

 <FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:layout_marginTop="10dp" > <Button android:id="@+id/button_tip" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_marginBottom="1dp" android:layout_marginLeft="2dp" android:layout_marginRight="2dp" android:layout_marginTop="5dp" android:background="@drawable/orange_btn" android:onClick="button_tip_click" android:text="Hello" /> <TextView android:layout_width="15dp" android:layout_height="15dp" android:layout_gravity="top|right" android:background="@drawable/red_circle_btn" android:gravity="center" android:text="20" android:textColor="@color/white" android:textSize="8sp" android:textStyle="bold" /> </FrameLayout> 

Answer 1

set Button background Suitable for custom Drawable, like this one:

 public class DecoratedTextViewDrawable extends LayerDrawable { private int mCnt = 0; private Paint mPaint; private TextView mParent; private ColorStateList mColors; private Rect mBounds; public DecoratedTextViewDrawable(TextView tv, Drawable[] layers, int cnt) { super(layers); mParent = tv; mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint.setTextAlign(Align.CENTER); mPaint.setTextSize(tv.getTextSize()); mPaint.setTypeface(Typeface.DEFAULT_BOLD); int[][] states = { {android.R.attr.state_pressed}, {android.R.attr.state_focused}, {} }; int[] colors = { 0xff0000aa, 0xff880000, 0xff00aa00 }; mColors = new ColorStateList(states, colors); mBounds = new Rect(); setCnt(cnt); } public void setCnt(int cnt) { mCnt = cnt; String s = Integer.toString(cnt); mPaint.getTextBounds(s, 0, s.length(), mBounds); invalidateSelf(); } @Override protected boolean onStateChange(int[] state) { invalidateSelf(); return super.onStateChange(state); } @Override public boolean isStateful() { return true; } @Override public void draw(Canvas canvas) { super.draw(canvas); float x = mPaint.getTextSize() * 1.5f; float r = mPaint.getTextSize() * 0.9f; int base = mParent.getBaseline(); int[] stateSet = getState(); // Log.d(TAG, "draw " + StateSet.dump(stateSet)); int color = mColors.getColorForState(stateSet, 0xff000000); mPaint.setColor(color); canvas.drawCircle(x, base + mBounds.top + mBounds.height() / 2, r, mPaint); mPaint.setColor(0xffeeeeee); canvas.drawText(Integer.toString(mCnt), x, base, mPaint); } } 

you can use it as follows:

 // Activity.onCreate method LinearLayout ll = new LinearLayout(this); ll.setOrientation(LinearLayout.VERTICAL); int NUM = 5; final int[] cnt = new int[NUM]; Random r = new Random(); for (int i = 0; i < NUM; i++) { cnt[i] = r.nextInt(20); Button b = new Button(this); b.setText("Click me"); b.setTextSize(18); b.setTag(i); Drawable[] layers = {b.getBackground()}; Drawable d = new DecoratedTextViewDrawable(b, layers, cnt[i]); b.setBackgroundDrawable(d); OnClickListener l = new OnClickListener() { @Override public void onClick(View v) { DecoratedTextViewDrawable d = (DecoratedTextViewDrawable) v.getBackground(); int idx = (Integer) v.getTag(); d.setCnt(++cnt[idx]); } }; b.setOnClickListener(l); ll.addView(b); } setContentView(ll); 

Answer 2

use this - and keep updating textviews text with count

  <FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/your_phone_call_image" android:gravity="center" android:scaletype="matrix"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="1" android:padding="5dp" android:gravity="top|right" <!--this is important--> android:background="@drawable/your_counter_red_background"/> </FrameLayout> 

Answer 3

I suggest you use FrameLayout. 1.- you can use 2 images for your button, one for a small circle and use a text image for numbers ... 2.- you can use one image for your button and create a gradient for a small circle and text view.

For frameLayout see: http://developer.android.com/reference/android/widget/FrameLayout.html For a gradient, see How to make a gradient background in android .