如何在布局的角落有徽章图标

Question

我想在布局的角落有徽章。我设法在布局中获得徽章，但无法在其角落实现。

目前我的代码给我：

我想要什么：我想在一个布局的右上角有这个徽章。

我想是这样的：

Toolbar.xml

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="@dimen/toolbar_height" 
    android:background="@color/toolbar_color" 
    android:contentInsetLeft="0dp" 
    android:contentInsetStart="0dp" 
    android:elevation="4dp" 
    android:theme="@style/ThemeOverlay.AppCompat.Dark" 
    app:contentInsetLeft="0dp" 
    app:contentInsetStart="0dp"> 
    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:weightSum="1" 
     android:orientation="horizontal"> 

     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:id="@+id/textview" 
      android:text="My Assignments" 
      android:layout_gravity="center" 
      android:gravity="center" 
      android:layout_marginLeft="90dp" 
      android:layout_weight="0.5" 
      android:textSize="20sp" 
      /> 

     <RelativeLayout 
     android:id="@+id/bell_linearlayout1" 
     android:layout_width="35dp" 
     android:layout_height="35dp" 
     android:layout_gravity="center" 
     android:layout_marginLeft="15dp"> 

     <RelativeLayout 
      android:id="@+id/bell_linearlayout" 
      android:layout_width="50dp" 
      android:layout_height="50dp" 
      android:layout_gravity="center" 
      android:background="#75aadb"> 
      <ImageView 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_marginTop="2dp" 
       android:layout_centerInParent="true" 
       android:id="@+id/cartIconImageView" 
       android:src="@drawable/notification"/> 
     </RelativeLayout> 

     <RelativeLayout 
      android:layout_width="25dip" 
      android:layout_height="25dip" 
      android:gravity="end|top|right" 
      android:layout_alignParentTop="true" 
      android:layout_marginBottom="100dp" 
      android:layout_marginLeft="20dp"> 

      <TextView 
       android:id="@+id/textView1" 
       android:layout_width="15dp" 
       android:layout_height="15dp" 
       android:layout_alignParentTop="true" 
       android:background="@drawable/badge" /> 
     </RelativeLayout> 

</RelativeLayout> 
     <LinearLayout 
      android:layout_width="35dp" 
      android:layout_height="35dp" 
      android:background="#75aadb" 
      android:id="@+id/accountinfo_layout" 
      android:layout_gravity="center" 
      android:layout_marginLeft="10dp"> 
      <ImageView 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_marginTop="1dp" 
       android:src="@drawable/profile"/> 

     </LinearLayout> 


    </LinearLayout> 
    </android.support.v7.widget.Toolbar> 

可绘制badge.xml

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 
    <corners android:radius="8dp" /> 
    <solid android:color="#f20000" /> 
    <stroke 
     android:width="2dip" 
     android:color="#FFF" /> 
    <padding 
     android:bottom="6dp" 
     android:left="6dp" 
     android:right="6dp" 
     android:top="6dp" /> 
</shape> 

请帮忙。

Answer 1

它可以像这样

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/layoutforprofileimage" 
    android:layout_width="100dp" 
    android:layout_height="100dp"> 

<ImageView 
    android:id="@+id/image" 
    android:layout_width="100dp" 
    android:padding="2dp" 
    android:src="@drawable/image" 
    android:layout_height="100dp" 
    android:layout_margin="6dp"/> 

<TextView 
    android:id="@+id/text" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:scaleType="fitStart" 
    android:layout_marginRight="0dp" 
    android:padding="2dp" 
    android:background="@drawable/button_pressed" 
    android:gravity="center" 
    android:minWidth="17sp" 
    android:adjustViewBounds="true" 
    android:minHeight="17sp" 
    android:paddingBottom="1dp" 
    android:paddingLeft="4dp" 
    android:paddingRight="4dp" 
    android:text="0" 
    android:textColor="#ffffffff" 
    android:textSize="12sp" 
    android:visibility="visible" 
    android:layout_gravity="center_horizontal" 
    android:layout_alignParentTop="true" 
    android:layout_alignParentEnd="true" 
    /> 

</RelativeLayout> 

Answer 2

做的工作还有库可用于设置徽章github.com/jgilfelt/android-viewbadger下载并添加应用程序中。

并使用下面的代码。

BadgeView homeimageviewbadge = new BadgeView(this,here add your layout); 
     homeimageviewbadge.setTextSize(12); 
     homeimageviewbadge.setTextColor(Color.parseColor("#ffffff")); 
     homeimageviewbadge.setBadgeBackgroundColor(Color.parseColor("#ff0000")); 
     homeimageviewbadge.setBadgePosition(BadgeView.POSITION_TOP_RIGHT); 
     homeimageviewbadge.settext("10"); 
     homeimageviewbadge.show(); 

Answer 3

使用的FrameLayout（而不是RelativeLayout的），并把按钮和图像进去。

位置的图像通过

android:layout_gravity="top|left" 
android:layout_marginTop="Xdp" 
android:layout_marginLeft="Xdp" 

霍普（cirle与号）和按钮这将帮助您

Answer 4

试试这个办法让BadgeCounter

public class BadgeDrawable extends Drawable { 

    private float mTextSize; 
    private Paint mBadgePaint; 
    private Paint mBadgePaint1; 
    private Paint mTextPaint; 
    private Rect mTxtRect = new Rect(); 

    private String mCount = ""; 
    private boolean mWillDraw = false; 

    public BadgeDrawable(Context context) { 
     mTextSize = context.getResources().getDimension(R.dimen.badge_text_size); 
     mBadgePaint = new Paint(); 
     mBadgePaint.setColor(Color.RED); 
     mBadgePaint.setAntiAlias(true); 
     mBadgePaint.setStyle(Paint.Style.FILL); 
     mBadgePaint1 = new Paint(); 
     mBadgePaint1.setColor(Color.parseColor("#EEEEEE")); 
     mBadgePaint1.setAntiAlias(true); 
     mBadgePaint1.setStyle(Paint.Style.FILL); 

     mTextPaint = new Paint(); 
     mTextPaint.setColor(Color.WHITE); 
     mTextPaint.setTypeface(Typeface.DEFAULT); 
     mTextPaint.setTextSize(mTextSize); 
     mTextPaint.setAntiAlias(true); 
     mTextPaint.setTextAlign(Paint.Align.CENTER); 
    } 

    @Override 
    public void draw(Canvas canvas) { 
     if (!mWillDraw) { 
     return; 
     } 
     Rect bounds = getBounds(); 
     float width = bounds.right - bounds.left; 
     float height = bounds.bottom - bounds.top; 
     // Position the badge in the top-right quadrant of the icon. 

    /*Using Math.max rather than Math.min */ 
     float radius = ((Math.max(width, height)/2))/2; 
     float centerX = (width - radius - 1) +10; 
     float centerY = radius -5; 
     if(mCount.length() <= 2){ 
     // Draw badge circle. 
     canvas.drawCircle(centerX, centerY, radius+9, mBadgePaint1); 
     canvas.drawCircle(centerX, centerY, radius+7, mBadgePaint); 
     } 
     else{ 
     canvas.drawCircle(centerX, centerY, radius+10, mBadgePaint1); 
     canvas.drawCircle(centerX, centerY, radius+8, mBadgePaint); 
     } 
     // Draw badge count text inside the circle. 
     mTextPaint.getTextBounds(mCount, 0, mCount.length(), mTxtRect); 
     float textHeight = mTxtRect.bottom - mTxtRect.top; 
     float textY = centerY + (textHeight/2f); 
     if(mCount.length() > 2) 
     canvas.drawText("99+", centerX, textY, mTextPaint); 
     else 
     canvas.drawText(mCount, centerX, textY, mTextPaint); 
    } 

    /* 
    Sets the count (i.e notifications) to display. 
    */ 
    public void setCount(String count) { 
     mCount = count; 
     // Only draw a badge if there are notifications. 
     mWillDraw = !count.equalsIgnoreCase("0"); 
     invalidateSelf(); 
    } 

    @Override 
    public void setAlpha(int alpha) { 
     // do nothing 
    } 

    @Override 
    public void setColorFilter(ColorFilter cf) { 
     // do nothing 
    } 

    @Override 
    public int getOpacity() { 
     return PixelFormat.UNKNOWN; 
    } 
} 

，或者如果你想在徽章你的应用图标尝试使用ShortcutBadger