How to realize the little red dot display of unread messages by Android

Today, I would like to share with you how to achieve the Android unread message red dot display of the relevant knowledge, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can learn something after reading this article, let's take a look at it.

Using the fragmentLayout implementation, you can add little red dots to any view.

Add a little red dot to textview.

Add a little red dot to imageview

Code implementation

First define a circular drawable

Import android.graphics.Canvas;import android.graphics.ColorFilter;import android.graphics.Paint;import android.graphics.PixelFormat;import android.graphics.drawable.Drawable;import android.graphics.drawable.ShapeDrawable;import androidx.annotation.IntRange;import androidx.annotation.NonNull;import androidx.annotation.Nullable;public class CircleDrawable extends ShapeDrawable {private Paint mPaint; private int mRadio; public CircleDrawable (int radio, int painColor) {mPaint = new Paint (); mPaint.setAntiAlias (true); mPaint.setColor (painColor) MRadio = radio;} @ Override public void draw (@ NonNull Canvas canvas) {canvas.drawCircle (mRadio, mPaint);} @ Override public void setAlpha (@ IntRange (from = 0, to = 255) int I) {mPaint.setAlpha (I);} @ Override public void setColorFilter (@ Nullable ColorFilter colorFilter) {mPaint.setColorFilter (colorFilter) } @ Override public int getOpacity () {return PixelFormat.TRANSLUCENT;} / * drawable actual width and height, Circular key * * @ return * / @ Override public int getIntrinsicWidth () {return mRadio * 2;} @ Override public int getIntrinsicHeight () {return mRadio * 2;}} Little Red Dot implementation

Train of thought:

A container fragmentLayout contains two view (little red dot view + text view "of course it can also be other view"), which is implemented by adding view overlapping features through fragmentLayout.

Current points to be optimized:

1. Red dots can be added to any location through margin. "it can be implemented with layoutparams margin".

2. Other

Import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Rect;import android.graphics.drawable.ColorDrawable;import android.graphics.drawable.ShapeDrawable;import android.graphics.drawable.shapes.OvalShape;import android.graphics.drawable.shapes.RoundRectShape;import android.util.AttributeSet;import android.util.Printer;import android.view.Gravity;import android.view.View;import android.view.ViewGroup;import android.widget.FrameLayout;import android.widget.TextView;import androidx.annotation.Nullable Import com.primer.common.constant.GravityDirection;import com.primer.common.mvp.LoginInterface;import com.primer.common.util.LogHelper;import com.primer.common.util.UiHelper;import com.primer.common.view.drawable.CircleDrawable;public class BadgeView extends TextView {private final int DEFAULT_BADGE_RADIO = 5; private final int DEFAULT_TEXT_SIZE = 5; private final int DEFAULT_TEXT_COLOR = Color.WHITE; private final int DEFAULT_BADGE_COLOR = Color.RED Private final int DEFAULT_BADGE_GRAVITY = GravityDirection.DIRECT_TOP_LEFT; private String mText; private int mBadgeColor = DEFAULT_BADGE_COLOR; private int mTextColor = DEFAULT_TEXT_COLOR; private int mTextSize = DEFAULT_TEXT_SIZE; private int mBadgeRadio = DEFAULT_BADGE_RADIO; private int mBadgeGravity = DEFAULT_BADGE_GRAVITY; private FrameLayout mFragmentLayout; private ViewGroup mTargetViewGroup; private View mTarget; private Context mContext; public BadgeView (Context context) {super (context) Init (context);} public BadgeView (Context context, @ Nullable AttributeSet attrs) {super (context, attrs); init (context);} public BadgeView (Context context, @ Nullable AttributeSet attrs, int defStyleAttr) {super (context, attrs, defStyleAttr); init (context);} public BadgeView (Context context, @ Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {super (context, attrs, defStyleAttr, defStyleRes) Init (context);} private void init (Context context) {mFragmentLayout = new FrameLayout (context); mFragmentLayout.setLayoutParams (new FrameLayout.LayoutParams (ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)); mContext = context } / * @ param content * @ param target * @ param textColor * @ param badgeColor * @ param badgeRadio * / public void showBadgeView (String content, View target, int textColor, int textSize, int badgeColor, int badgeRadio) {if (target = = null) {throw new IllegalArgumentException ("target view must not be null");} mTarget = target MTargetViewGroup = (ViewGroup) target.getParent (); mTargetViewGroup.removeView (target); mTargetViewGroup.addView (mFragmentLayout, target.getLayoutParams ()); setTextColor (mTextColor); setTextSize (mTextSize); setGravity (Gravity.CENTER); if (content! = null & & content.length ()