Add new item to button icon - Android

Question

I am a developer. I need to implement the project shown below. I already have a functional application, but I wonder how to do it? Particulary, I'm interested in how to show the number of "new" elements under tabs. What I KNOW how to do this is to create new icons with red dots and just display them when new materials are available.

But I don’t know how to make these round circles float over the header AND show the number inside. Does anyone have a suggestion on what to look for too? Samples? Directions?

The second question is the separation of actions. Should I take control of the combination of these buttons and just puff it on the action? Otherwise, I can create a tab, but I'm not sure if it can be styled to make it look like this.

Answer 1

Make your TextView icon, letting you set a numeric value for anything by calling setText() . Define the TextView background as a flexible XML <shape> , with which you can create a solid or gradient circle with a border. The XML selection will scale to fit the view as it resizes with more or less text.

Res / draw / badge_circle.xml:

 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#F00" /> <stroke android:width="2dip" android:color="#FFF" /> <padding android:left="5dip" android:right="5dip" android:top="5dip" android:bottom="5dip" /> </shape> 

You need to take a look at how oval / round dials with large 3-4-digit numbers. If this effect is undesirable, try using a rounded rectangle as shown below. With small numbers, the rectangle will still look like a circle, as the radii converge.

Res / draw / badge_circle.xml:

 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <corners android:radius="10dip"/> <solid android:color="#F00" /> <stroke android:width="2dip" android:color="#FFF" /> <padding android:left="5dip" android:right="5dip" android:top="5dip" android:bottom="5dip" /> </shape> 

With the created scalable background, you simply add it to the TextView background, for example:

 <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="10" android:textColor="#FFF" android:textSize="16sp" android:textStyle="bold" android:background="@drawable/badge_circle"/> 

Finally, these TextView icons can be placed on your layout on top of the corresponding buttons / tabs. I would probably do this by grouping each button with its own icon in the RelativeLayout container, for example:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content"> <Button android:id="@+id/myButton" android:layout_width="65dip" android:layout_height="65dip"/> <TextView android:id="@+id/textOne" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignTop="@id/myButton" android:layout_alignRight="@id/myButton" android:text="10" android:textColor="#FFF" android:textSize="16sp" android:textStyle="bold" android:background="@drawable/badge_circle"/> </RelativeLayout> 

We hope that there is enough information to at least point you in the right direction!

Answer 2

Instead of using an oval, you can use the shape of a ring to draw a perfect filled circle.

Please see my answer here .

Answer 3

Android ViewBadger

An easy way to skip any kind of Android at runtime without having to serve it in a layout.

Add .jar file to libs folder

Click to download Example

see github example

A simple example:

 View target = findViewById(R.id.target_view); BadgeView badge = new BadgeView(this, target); badge.setText("1"); badge.show(); 

Answer 4

The simplest hack, setting the style only TextView .

  <TextView android:id="@+id/fabCounter" style="@style/Widget.Design.FloatingActionButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_centerVertical="true" android:layout_marginEnd="10dp" android:padding="5dp" android:text="10" android:textColor="@android:color/black" android:textSize="14sp" /> 

Answer 5

for people looking for Xamarin Android can use this code

 public class CountDrawable : Drawable { private float mTextSize; private Paint mBadgePaint; private Paint mTextPaint; private Rect mTxtRect = new Rect(); private String mCount = ""; private bool mWillDraw = false; public CountDrawable(Context context) { float mTextSize = context.Resources.GetDimension(Resource.Dimension.badge_count_textsize); mBadgePaint = new Paint(); // mBadgePaint.SetCol(ContextCompat.GetColor(context.ApplicationContext, Resource.Color.background_color)); mBadgePaint.Color = new Color(Color.Red); mBadgePaint.AntiAlias = true; mBadgePaint.SetStyle(Paint.Style.Fill); mTextPaint = new Paint(); mTextPaint.Color = new Color(Color.White); mTextPaint.SetTypeface(Typeface.DefaultBold); mTextPaint.TextSize = mTextSize; mTextPaint.AntiAlias = true; mTextPaint.TextAlign = Paint.Align.Center; } public override void Draw(Canvas canvas) { if(!mWillDraw) { return; } Rect bounds = GetBounds; float width = bounds.Right - bounds.Left; float height = bounds.Bottom - bounds.Top; float radius = ((Math.Max(width, height) / 2)) / 2; float centerX = (width - radius - 1) + 5; float centerY = radius - 5; if (mCount.Length <= 2) { // Draw badge circle. canvas.DrawCircle(centerX, centerY, (int)(radius + 5.5), mBadgePaint); } else { canvas.DrawCircle(centerX, centerY, (int)(radius + 6.5), mBadgePaint); } 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); } public Rect GetBounds { get; set; } public void setCount(String count) { mCount = count; // Only draw a badge if there are notifications. // mWillDraw = !count.equalsIgnoreCase("0"); mWillDraw = !string.Equals(count, "0", StringComparison.OrdinalIgnoreCase); // invalidateSelf(); } public override void SetAlpha(int alpha) { } public override void SetColorFilter(ColorFilter colorFilter) { } public override int Opacity { get; } } 

And in MainActivity

 public override bool OnCreateOptionsMenu(IMenu menu) { // return base.OnCreateOptionsMenu(menu); MenuInflater.Inflate(Resource.Menu.actionmenu, menu); // var dd = menu.FindItem(Resource.Id.icon_group); IMenuItem item = menu.FindItem(Resource.Id.ic_group); LayerDrawable icon = item.Icon as LayerDrawable; // LayerDrawable icon = (LayerDrawable)item.Icon; CountDrawable badge; Drawable reuse = icon.FindDrawableByLayerId(Resource.Id.ic_group_count); if (reuse != null && reuse is CountDrawable) { badge = (CountDrawable)reuse; } else { badge = new CountDrawable(this); } badge.setCount("8"); badge.GetBounds=icon.Bounds; icon.Mutate(); icon.SetDrawableByLayerId(Resource.Id.ic_group_count, badge); return true; } 

Answer 6

Just to add. If someone wants to implement a bubble with a filled circle using the shape of a ring instead of an oval, here is an example code to add the number of bubbles to the buttons on the action bar. But it can be added to any button.

(name it bage_circle.xml ):

 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="ring" android:useLevel="false" android:thickness="9dp" android:innerRadius="0dp" > <solid android:color="#F00" /> <stroke android:width="1dip" android:color="#FFF" /> <padding android:top="2dp" android:bottom="2dp"/> </shape> 

You may need to adjust the thickness to suit your needs.

The result will be something like this:

Here is the location of the button (name it badge_layout.xml ):

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content"> <com.joanzapata.iconify.widget.IconButton android:layout_width="44dp" android:layout_height="44dp" android:textSize="24sp" android:textColor="@color/white" android:background="@drawable/action_bar_icon_bg" android:id="@+id/badge_icon_button"/> <TextView android:id="@+id/badge_textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignTop="@id/badge_icon_button" android:layout_alignRight="@id/badge_icon_button" android:layout_alignEnd="@id/badge_icon_button" android:text="10" android:paddingEnd="8dp" android:paddingRight="8dp" android:paddingLeft="8dp" android:gravity="center" android:textColor="#FFF" android:textSize="11sp" android:background="@drawable/badge_circle"/> </RelativeLayout> 

In the menu, create an element:

 <item android:id="@+id/menu_messages" android:showAsAction="always" android:actionLayout="@layout/badge_layout"/> 

In onCreateOptionsMenu get a link to the menu item:

  itemMessages = menu.findItem(R.id.menu_messages); badgeLayout = (RelativeLayout) itemMessages.getActionView(); itemMessagesBadgeTextView = (TextView) badgeLayout.findViewById(R.id.badge_textView); itemMessagesBadgeTextView.setVisibility(View.GONE); // initially hidden iconButtonMessages = (IconButton) badgeLayout.findViewById(R.id.badge_icon_button); iconButtonMessages.setText("{fa-envelope}"); iconButtonMessages.setTextColor(getResources().getColor(R.color.action_bar_icon_color_disabled)); iconButtonMessages.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { if (HJSession.getSession().getSessionId() != null) { Intent intent = new Intent(getThis(), HJActivityMessagesContexts.class); startActivityForResult(intent, HJRequestCodes.kHJRequestCodeActivityMessages.ordinal()); } else { showLoginActivity(); } } }); 

After receiving notification of messages, set the quantity:

 itemMessagesBadgeTextView.setText("" + count); itemMessagesBadgeTextView.setVisibility(View.VISIBLE); iconButtonMessages.setTextColor(getResources().getColor(R.color.white)); 

This code uses Iconify-fontawesome .

 compile 'com.joanzapata.iconify:android-iconify-fontawesome:2.1.+'